"use client";
// src/app/quotes/[id]/page.tsx
import { useEffect, useState, useCallback } from "react";
import { useParams, useRouter } from "next/navigation";
import Link from "next/link";
import { AppShell } from "@/components/layout/AppShell";
import { Button, Card, CardHeader, CardTitle, CardContent } from "@/components/ui/index";
import { formatDate, formatCurrency, getLabel, QUOTE_STATUS_LABELS, QUOTE_STATUS_LABELS_AR, QUOTE_STATUS_COLORS } from "@/lib/utils";
import { toast } from "sonner";
import { Loader2, AlertCircle, Send, CheckCircle, XCircle, FileText } from "lucide-react";
import { cn } from "@/lib/utils";
import { useLanguage } from "@/i18n/LanguageContext";

export default function QuoteDetailPage() {
  const { id } = useParams() as { id: string };
  const router = useRouter();
  const { t, language } = useLanguage();
  const [quote, setQuote] = useState<any>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [isActing, setIsActing] = useState(false);

  const loadQuote = useCallback(() => {
    setIsLoading(true);
    fetch(`/api/quotes/${id}`).then(r => { if (!r.ok) throw new Error("Not found"); return r.json(); })
      .then(d => setQuote(d.data)).catch(e => setError(e.message)).finally(() => setIsLoading(false));
  }, [id]);

  useEffect(() => { loadQuote(); }, [loadQuote]);

  const handleAction = async (action: string, extra?: object) => {
    setIsActing(true);
    try {
      const res = await fetch(`/api/quotes/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action, ...extra }) });
      if (!res.ok) throw new Error((await res.json()).error ?? "Failed");
      if (action === "send") toast.success(t("quotes.toastActionSent"));
      else if (action === "accept") toast.success(t("quotes.toastActionAccepted"));
      else if (action === "reject") toast.success(t("quotes.toastActionRejected"));
      else toast.success(t("quotes.toastActionSent"));
      loadQuote();
    } catch (e: any) { toast.error(e.message); }
    finally { setIsActing(false); }
  };

  if (isLoading) return <AppShell breadcrumbs={[{ label: t("quotes.title"), href: "/quotes" }, { label: t("common.breadcrumbLoading") }]}><div className="flex justify-center h-64 items-center"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div></AppShell>;
  if (error || !quote) return <AppShell breadcrumbs={[{ label: t("quotes.title"), href: "/quotes" }, { label: t("common.breadcrumbNotFound") }]}><div className="flex flex-col items-center justify-center h-64 gap-4"><AlertCircle className="w-12 h-12 text-destructive" /><p>{error}</p><Button variant="outline" onClick={() => router.push("/quotes")}>{t("common.back")}</Button></div></AppShell>;

  const statusColor = QUOTE_STATUS_COLORS[quote.status] ?? "bg-gray-100 text-gray-600";

  return (
    <AppShell breadcrumbs={[{ label: t("quotes.title"), href: "/quotes" }, { label: quote.quoteNumber }]}>
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-6">
        <div>
          <div className="flex items-center gap-3 flex-wrap">
            <h1 className="text-xl font-bold font-mono">{quote.quoteNumber}</h1>
            <span className={cn("text-xs px-2.5 py-1 rounded-full font-medium", statusColor)}>
              {getLabel(QUOTE_STATUS_LABELS, QUOTE_STATUS_LABELS_AR, quote.status, language)}
            </span>
            <span className="text-xs text-muted-foreground">{t("quotes.versionPrefix")} {quote.version}</span>
          </div>
          <p className="text-2xl font-bold text-primary mt-2">{formatCurrency(quote.total, quote.currency)}</p>
        </div>
        <div className="flex items-center gap-2 flex-wrap">
          {quote.status === "DRAFT" && (
            <Button variant="primary" size="sm" onClick={() => handleAction("send")} loading={isActing}>
              <Send className="w-4 h-4" /> {t("quotes.sendToCustomer")}
            </Button>
          )}
          {quote.status === "SENT" && (
            <>
              <Button variant="secondary" size="sm" onClick={() => handleAction("accept")} loading={isActing}>
                <CheckCircle className="w-4 h-4 text-green-600" /> {t("quotes.accept")}
              </Button>
              <Button variant="outline" size="sm" onClick={() => handleAction("reject")} loading={isActing}>
                <XCircle className="w-4 h-4 text-red-600" /> {t("quotes.reject")}
              </Button>
            </>
          )}
          {quote.status === "ACCEPTED" && !quote.invoice && (
            <Link href={`/invoices/new?quoteId=${quote.id}`}>
              <Button variant="primary" size="sm">
                <FileText className="w-4 h-4" /> {t("quotes.convert")}
              </Button>
            </Link>
          )}
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          {/* Line Items */}
          <Card>
            <CardHeader><CardTitle>{t("quotes.lineItems")}</CardTitle></CardHeader>
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-border bg-muted/30">
                    {[t("quotes.colProductDesc"), t("quotes.colQty"), t("quotes.colUnitPrice"), t("quotes.colDiscPct"), t("quotes.colTaxPct"), t("quotes.total")].map(h => (
                      <th key={h} className="px-4 py-3 text-start text-xs font-semibold text-muted-foreground">{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody className="divide-y divide-border">
                  {quote.lineItems?.map((item: any) => (
                    <tr key={item.id} className="hover:bg-muted/20">
                      <td className="px-4 py-3 font-medium">{item.description}</td>
                      <td className="px-4 py-3 text-muted-foreground">{item.quantity}</td>
                      <td className="px-4 py-3">{formatCurrency(item.unitPrice, quote.currency)}</td>
                      <td className="px-4 py-3 text-muted-foreground">{Number(item.discount) > 0 ? `${item.discount}%` : "—"}</td>
                      <td className="px-4 py-3 text-muted-foreground">{Number(item.taxRate) > 0 ? `${item.taxRate}%` : "—"}</td>
                      <td className="px-4 py-3 font-semibold">{formatCurrency(item.total, quote.currency)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            {/* Totals */}
            <div className="border-t border-border p-6 flex justify-end">
              <div className="w-64 space-y-2 text-sm">
                <div className="flex justify-between"><span className="text-muted-foreground">{t("quotes.subtotal")}</span><span>{formatCurrency(quote.subtotal, quote.currency)}</span></div>
                {Number(quote.discountAmount) > 0 && <div className="flex justify-between text-green-600"><span>{t("quotes.discountWithPct", { pct: quote.discountPercent })}</span><span>-{formatCurrency(quote.discountAmount, quote.currency)}</span></div>}
                {Number(quote.taxAmount) > 0 && <div className="flex justify-between"><span className="text-muted-foreground">{t("quotes.tax")}</span><span>{formatCurrency(quote.taxAmount, quote.currency)}</span></div>}
                <div className="flex justify-between font-bold text-base border-t border-border pt-2">
                  <span>{t("quotes.total")}</span><span className="text-primary">{formatCurrency(quote.total, quote.currency)}</span>
                </div>
              </div>
            </div>
          </Card>

          {quote.notes && (
            <Card>
              <CardHeader><CardTitle>{t("quotes.notesCustomer")}</CardTitle></CardHeader>
              <CardContent><p className="text-sm whitespace-pre-wrap">{quote.notes}</p></CardContent>
            </Card>
          )}
          {quote.termsConditions && (
            <Card>
              <CardHeader><CardTitle>{t("quotes.termsLabel")}</CardTitle></CardHeader>
              <CardContent><p className="text-sm whitespace-pre-wrap">{quote.termsConditions}</p></CardContent>
            </Card>
          )}
        </div>

        <div className="space-y-6">
          <Card>
            <CardHeader><CardTitle>{t("quotes.quoteInfoCard")}</CardTitle></CardHeader>
            <CardContent className="space-y-3 text-sm">
              {quote.contact && <div><p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-0.5">{t("quotes.contact")}</p><Link href={`/customers/${quote.contact.id}`} className="text-primary hover:underline">{quote.contact.firstName} {quote.contact.lastName}</Link></div>}
              {quote.account && <div><p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-0.5">{t("quotes.account")}</p><Link href={`/companies/${quote.account.id}`} className="text-primary hover:underline">{quote.account.name}</Link></div>}
              {quote.opportunity && <div><p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-0.5">{t("quotes.opportunity")}</p><Link href={`/deals/${quote.opportunity.id}`} className="text-primary hover:underline">{quote.opportunity.title}</Link></div>}
              {quote.validUntil && <div><p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-0.5">{t("quotes.validUntil")}</p><p>{formatDate(quote.validUntil, language)}</p></div>}
              <div><p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-0.5">{t("common.createdAt")}</p><p>{formatDate(quote.createdAt, language)}</p></div>
              <div><p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-0.5">{t("quotes.colOwner")}</p><p>{quote.owner?.name ?? "—"}</p></div>
              {quote.invoice && (
                <div className="pt-2 border-t border-border">
                  <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-1">{t("quotes.labelInvoice")}</p>
                  <Link href={`/invoices/${quote.invoice.id}`} className="text-primary hover:underline font-mono text-sm">{quote.invoice.invoiceNumber}</Link>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </AppShell>
  );
}