import Link from 'next/link';
import { notFound } from 'next/navigation';
import { prisma } from '@/lib/prisma';
import AdminNav from '@/components/AdminNav';
import Chat from '@/components/Chat';

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

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

  return (
    <div className="mx-auto max-w-2xl px-6 py-12">
      <AdminNav />

      <div className="flex items-center gap-4 border border-line bg-surface p-4">
        <img src={proof.imageDataUrl} alt="" className="h-16 w-16 border border-line object-cover" />
        <div className="flex-1">
          <p className="font-medium">{proof.customerName || proof.customerEmail}</p>
          <p className="text-sm text-muted">
            {proof.product.name} · qty {proof.quantity} · {formatPrice(proof.unitPrice * proof.quantity)}
          </p>
        </div>
        <span
          className={`tag-label rounded-full px-3 py-1 ${
            proof.status === 'APPROVED' ? 'bg-splash-blue/10 text-splash-blue' : 'bg-splash-orange/10 text-splash-orange'
          }`}
        >
          {proof.status}
        </span>
      </div>

      <Link href={`/proofs/${proof.id}`} className="mt-3 inline-block tag-label hover:text-ink">
        View customer page →
      </Link>

      <div className="mt-6">
        <Chat proofId={proof.id} role="ADMIN" otherPartyLabel={proof.customerName || proof.customerEmail} />
      </div>
    </div>
  );
}