import Link from 'next/link';
import { prisma } from '@/lib/prisma';
import AdminNav from '@/components/AdminNav';
import { deleteProof } from './actions';

function formatPrice(cents: number) {
  return `£${(cents / 100).toFixed(2)}`;
}

export default async function ProofsListPage() {
  const proofs = await prisma.designProof.findMany({
    include: { product: true },
    orderBy: { createdAt: 'desc' },
  });

  return (
    <div className="mx-auto max-w-4xl px-6 py-12">
      <AdminNav />
      <div className="flex items-baseline justify-between">
        <h1 className="font-display text-3xl">Design approvals</h1>
        <Link href="/admin/proofs/new" className="border border-ink px-4 py-2 text-sm hover:border-clay hover:bg-clay hover:text-paper">
          + Upload new design
        </Link>
      </div>

      {proofs.length === 0 ? (
        <p className="mt-10 text-sm text-muted">Nothing uploaded yet.</p>
      ) : (
        <div className="mt-8 divide-y divide-line border-t border-line">
          {proofs.map((p) => (
            <div key={p.id} className="flex items-center gap-4 py-4">
              <img src={p.imageDataUrl} alt="" className="h-16 w-16 border border-line object-cover" />
              <div className="flex-1">
                <p className="font-medium">{p.customerName || p.customerEmail}</p>
                <p className="text-sm text-muted">
                  {p.product.name} · qty {p.quantity} · {formatPrice(p.unitPrice * p.quantity)}
                </p>
              </div>
              <span
                className={`tag-label rounded-full px-3 py-1 ${
                  p.status === 'APPROVED' ? 'bg-splash-blue/10 text-splash-blue' : 'bg-splash-orange/10 text-splash-orange'
                }`}
              >
                {p.status}
              </span>
              <Link href={`/admin/inbox/${p.id}`} className="tag-label hover:text-ink">
                Chat →
              </Link>
              <Link href={`/proofs/${p.id}`} className="tag-label hover:text-ink">
                View →
              </Link>
              <form action={deleteProof}>
                <input type="hidden" name="id" value={p.id} />
                <button type="submit" className="tag-label text-muted hover:text-splash-pink">
                  Delete
                </button>
              </form>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
