import { notFound } from 'next/navigation';
import { prisma } from '@/lib/prisma';
import { toProofDTO } from '@/lib/product';
import ApproveSection from '@/components/ApproveSection';
import Chat from '@/components/Chat';
import Price from '@/components/Price';

export default async function ProofPage({ params }: { params: { id: string } }) {
  const row = await prisma.designProof.findUnique({
    where: { id: params.id },
    include: { product: true },
  });
  if (!row) notFound();

  const proof = toProofDTO(row);

  return (
    <div className="mx-auto max-w-4xl px-6 py-14">
      <p className="tag-label text-splash-pink">Your design is ready to review</p>
      <h1 className="mt-2 font-display text-4xl">{proof.productName}</h1>
      {proof.customerName && <p className="mt-1 text-muted">Hi {proof.customerName} — here's what we made.</p>}

      <div className="mt-10 grid gap-10 md:grid-cols-2">
        <div className="border border-line bg-surface p-6">
          {proof.imageDataUrl ? (
            <img src={proof.imageDataUrl} alt={`${proof.productName} design`} className="w-full object-contain" />
          ) : (
            <p className="text-center text-sm text-muted">No image was uploaded with this design.</p>
          )}
        </div>

        <div className="flex flex-col gap-6">
          {proof.note && (
            <div className="border-l-2 border-splash-pink pl-4 text-sm italic text-ink">"{proof.note}"</div>
          )}

          <div className="space-y-2 text-sm">
            <div className="flex justify-between border-b border-line pb-2">
              <span className="text-muted">Color</span>
              <span className="flex items-center gap-2">
                <span
                  className="h-4 w-4 rounded-full border border-line"
                  style={{ backgroundColor: proof.color }}
                />
                {proof.color}
              </span>
            </div>
            <div className="flex justify-between border-b border-line pb-2">
              <span className="text-muted">Quantity</span>
              <span>{proof.quantity}</span>
            </div>
            <div className="flex justify-between border-b border-line pb-2">
              <span className="text-muted">Price</span>
              <span className="font-mono"><Price cents={proof.unitPrice * proof.quantity} /></span>
            </div>
          </div>

          <ApproveSection proof={proof} />

          <p className="text-center text-sm text-muted">
            Not quite right? Send a message below and we'll fix it up.
          </p>
        </div>
      </div>

      <div className="mt-10">
        <Chat proofId={proof.id} role="CUSTOMER" otherPartyLabel="Craft2Prints" />
      </div>
    </div>
  );
}
