import { DataTable } from "@/components/admin/DataTable";
import { prisma } from "@/lib/prisma";

function TruncatedText({ value, className = "max-w-[220px]" }: { value?: string | null; className?: string }) {
  const text = value?.trim() || "-";
  return <span className={`block truncate ${className}`} title={text}>{text}</span>;
}

export default async function SuppliersPage() {
  const rows = await prisma.supplier.findMany({ include: { products: true } });
  return (
    <section>
      <h1 className="mb-5 font-heading text-3xl font-black">Suppliers</h1>
      <DataTable
        headers={["Supplier", "Contact", "Products", "Internal Notes"]}
        rows={rows.map((s) => [
          <div key="supplier" className="min-w-0">
            <TruncatedText value={s.name} className="max-w-[260px] font-black text-[#171717]" />
            <TruncatedText value={s.website} className="mt-1 max-w-[260px] text-xs font-bold text-[#666]" />
          </div>,
          <TruncatedText key="contact" value={s.contactEmail} className="max-w-[230px] font-bold" />,
          <span key="products" className="badge badge-muted">{s.products.length} products</span>,
          <TruncatedText key="notes" value={s.internalNotes} className="max-w-[360px] text-[#666]" />
        ])}
      />
    </section>
  );
}