// apps/web/app/(shell)/customer/quotes/page.tsx
import Link from "next/link";
import { prisma } from "@dpf/db";
import { CustomerStatusBadge } from "@/components/customer/CustomerStatusBadge";
import { CRM_TONE_CLASSES, getQuoteStatusMeta } from "@/lib/crm/presentation";
import { LocalTime } from "@/components/ui/LocalTime";

export default async function QuotesPage() {
  const quotes = await prisma.quote.findMany({
    orderBy: { createdAt: "desc" },
    include: {
      opportunity: { select: { id: true, opportunityId: true, title: true } },
      account: { select: { id: true, accountId: true, name: true } },
      lineItems: { select: { id: true } },
      salesOrder: { select: { id: true, orderRef: true } },
    },
  });

  return (
    <div>
      <div className="mb-6">
        <h1 className="text-xl font-bold text-[var(--dpf-text)]">Quotes</h1>
        <p className="text-sm text-[var(--dpf-muted)] mt-0.5">
          {quotes.length} quote{quotes.length !== 1 ? "s" : ""}
        </p>
      </div>

      <div className="space-y-2">
        {quotes.map((q) => {
          const statusMeta = getQuoteStatusMeta(q.status);
          const toneClasses = CRM_TONE_CLASSES[statusMeta.tone];
          return (
            <Link
              key={q.id}
              href={`/customer/quotes/${q.id}`}
              className={[
                "block rounded-lg border-l-4 bg-[var(--dpf-surface-1)] p-4 transition-colors hover:bg-[var(--dpf-surface-2)]",
                toneClasses.border,
              ].join(" ")}
            >
              <div className="flex items-start justify-between gap-3">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    <p className="text-xs font-mono font-semibold text-[var(--dpf-text)]">
                      {q.quoteNumber}
                    </p>
                    <span className="text-[9px] text-[var(--dpf-muted)]">v{q.version}</span>
                    <CustomerStatusBadge label={statusMeta.label} tone={statusMeta.tone} />
                  </div>
                  <p className="text-xs text-[var(--dpf-muted)]">
                    {q.account.name} · {q.opportunity.title}
                  </p>
                  <p className="text-[9px] text-[var(--dpf-muted)] mt-1">
                    {q.lineItems.length} line item{q.lineItems.length !== 1 ? "s" : ""}
                    {q.salesOrder && (
                      <span className="ml-2 text-[var(--dpf-accent)]">
                        → {q.salesOrder.orderRef}
                      </span>
                    )}
                  </p>
                </div>
                <div className="text-right shrink-0">
                  <p className="text-sm font-mono font-semibold text-[var(--dpf-text)]">
                    {q.currency} {Number(q.totalAmount).toLocaleString()}
                  </p>
                  <p className="text-[9px] text-[var(--dpf-muted)]">
                    Valid until <LocalTime value={q.validUntil} utc />
                  </p>
                </div>
              </div>
            </Link>
          );
        })}
      </div>

      {quotes.length === 0 && (
        <p className="text-sm text-[var(--dpf-muted)]">No quotes created yet.</p>
      )}
    </div>
  );
}
