"use client";

import { ArrowLeft, Printer, Loader2, Send } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Select } from "@/components/ui/select";
import { Card, CardContent } from "@/components/ui/card";
import {
  updateInvoiceStatus,
  fetchInvoiceDetail,
  sendInvoiceEmail,
  getOrgName,
  type InvoiceRow,
} from "@/lib/supabase/invoicing-actions";
import {
  centsToDecimal,
  INVOICE_STATUS_LABELS,
  type InvoiceStatus,
  type InvoiceWithLineItems,
} from "@/lib/supabase/invoicing-types";
import { useState, useEffect, useCallback } from "react";
import SendInvoiceModal from "@/components/invoices/SendInvoiceModal";

function StatusBadge({ status }: { status: InvoiceStatus }) {
  const styles: Record<InvoiceStatus, string> = {
    draft: "bg-gray-100 text-gray-600",
    sent: "bg-blue-100 text-blue-700",
    paid: "bg-emerald-100 text-emerald-700",
    overdue: "bg-red-100 text-red-700",
    cancelled: "bg-gray-100 text-gray-500",
  };

  return (
    <span className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${styles[status]}`}>
      {INVOICE_STATUS_LABELS[status]}
    </span>
  );
}

function formatDate(dateStr: string): string {
  const d = new Date(dateStr + "T00:00:00");
  return d.toLocaleDateString("en-US", {
    month: "long",
    day: "numeric",
    year: "numeric",
  });
}

function DetailLoading() {
  return (
    <div className="space-y-6 animate-pulse">
      <div className="flex items-center gap-4">
        <div className="w-9 h-9 bg-gray-200 rounded-lg" />
        <div className="space-y-2">
          <div className="w-48 h-8 bg-gray-200 rounded" />
          <div className="w-32 h-4 bg-gray-100 rounded" />
        </div>
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          <div className="bg-white rounded-lg border border-gray-200 p-8 space-y-6">
            <div className="h-16 bg-gray-100 rounded" />
            <div className="h-20 bg-gray-100 rounded" />
            <div className="h-40 bg-gray-100 rounded" />
            <div className="h-24 bg-gray-100 rounded" />
          </div>
        </div>
        <div className="space-y-6">
          <div className="bg-white rounded-lg border border-gray-200 p-6 h-40" />
          <div className="bg-white rounded-lg border border-gray-200 p-6 h-32" />
        </div>
      </div>
    </div>
  );
}

export default function InvoicesDetailView({
  initialInvoiceId,
  onBack,
}: {
  initialInvoiceId: string;
  onBack: () => void;
}) {
  const [invoice, setInvoice] = useState<InvoiceWithLineItems | null>(null);
  const [loading, setLoading] = useState(true);
  const [updating, setUpdating] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [orgName, setOrgName] = useState("");
  const [showSendModal, setShowSendModal] = useState(false);
  const [sending, setSending] = useState(false);
  const [sendError, setSendError] = useState<string | null>(null);

  useEffect(() => {
    getOrgName().then(setOrgName).catch(() => {});
  }, []);

  const loadInvoice = useCallback(async (id: string) => {
    setLoading(true);
    setError(null);
    try {
      const data = await fetchInvoiceDetail(id);
      setInvoice(data);
    } catch {
      setError("Failed to load invoice");
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    loadInvoice(initialInvoiceId);
  }, [initialInvoiceId, loadInvoice]);

  async function handleStatusChange(status: InvoiceStatus) {
    if (!invoice) return;
    setUpdating(true);
    try {
      const result = await updateInvoiceStatus(invoice.id, status);
      if (result.success) {
        setInvoice((prev) => (prev ? { ...prev, status } : prev));
      } else {
        setError(result.error || "Failed to update status");
      }
    } catch {
      setError("Failed to update status");
    } finally {
      setUpdating(false);
    }
  }

  if (loading) return <DetailLoading />;

  if (error && !invoice) {
    return (
      <div className="space-y-6">
        <div className="flex items-center gap-4">
          <button onClick={onBack} className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
            <ArrowLeft className="w-5 h-5 text-gray-500" />
          </button>
          <div>
            <h1 className="text-3xl font-serif font-bold text-gray-900">Invoice Not Found</h1>
          </div>
        </div>
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{error}</div>
      </div>
    );
  }

  if (!invoice) return null;

  const displayTotal = invoice.total_cents > 0
    ? `$${centsToDecimal(invoice.total_cents)}`
    : invoice.amount != null
      ? `$${invoice.amount.toFixed(2)}`
      : "$0.00";

  const displaySubtotal = invoice.subtotal_cents > 0
    ? `$${centsToDecimal(invoice.subtotal_cents)}`
    : invoice.amount != null
      ? `$${invoice.amount.toFixed(2)}`
      : "$0.00";

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div className="flex items-center gap-4">
          <button
            onClick={onBack}
            className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
          >
            <ArrowLeft className="w-5 h-5 text-gray-500" />
          </button>
          <div>
            <div className="flex items-center gap-3">
              <h1 className="text-3xl font-serif font-bold text-gray-900">
                {invoice.invoice_number || "Draft Invoice"}
              </h1>
              <StatusBadge status={invoice.status} />
            </div>
            <p className="text-gray-500 mt-1">{invoice.client_name}</p>
          </div>
        </div>

        <div className="flex items-center gap-2">
          {/* Status update */}
          <div className="flex items-center gap-2">
            <Select
              value={invoice.status}
              onChange={(e) => handleStatusChange(e.target.value as InvoiceStatus)}
              className="w-36"
              disabled={updating}
            >
              <option value="draft">Draft</option>
              <option value="sent">Sent</option>
              <option value="paid">Paid</option>
              <option value="overdue">Overdue</option>
              <option value="cancelled">Cancelled</option>
            </Select>
            {updating && <Loader2 className="w-4 h-4 animate-spin text-gray-400" />}
          </div>

          {/* Print */}
          <button
            type="button"
            onClick={() => window.print()}
            className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
            title="Print invoice"
          >
            <Printer className="w-5 h-5" />
          </button>

          {/* Send to Client */}
          {invoice.client_email && (
            <button
              type="button"
              onClick={() => setShowSendModal(true)}
              className="flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-white bg-[#1D9E75] hover:bg-[#1a8b66] rounded-lg transition-colors cursor-pointer"
              title="Send to client"
            >
              <Send className="w-4 h-4" />
              Send
            </button>
          )}
        </div>
      </div>

      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
          {error}
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Main Invoice Content */}
        <div className="lg:col-span-2">
          <Card id="invoice-print-area" className="border-0 shadow-sm">
            <CardContent className="p-8 space-y-8">
              {/* Invoice Header */}
              <div className="flex flex-col sm:flex-row sm:justify-between gap-4 border-b border-gray-100 pb-6">
                <div>
                  <h2 className="text-xl font-serif font-bold text-gray-900">Vela</h2>
                  <p className="text-sm text-gray-500 mt-1">Invoice</p>
                </div>
                <div className="sm:text-right space-y-1">
                  <p className="text-sm font-semibold text-gray-900">
                    {invoice.invoice_number || "Draft"}
                  </p>
                  <p className="text-sm text-gray-500">
                    Issued: {formatDate(invoice.issue_date)}
                  </p>
                  <p className="text-sm text-gray-500">
                    Due: {formatDate(invoice.due_date)}
                  </p>
                </div>
              </div>

              {/* Bill To */}
              <div>
                <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
                  Bill To
                </h3>
                <p className="text-sm font-semibold text-gray-900">{invoice.client_name}</p>
                {invoice.client_email && (
                  <p className="text-sm text-gray-500">{invoice.client_email}</p>
                )}
                {invoice.client_address && (
                  <p className="text-sm text-gray-500 whitespace-pre-line">{invoice.client_address}</p>
                )}
              </div>

              {/* Line Items Table */}
              <div>
                <table className="w-full">
                  <thead>
                    <tr className="border-b border-gray-200">
                      <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider pb-3">
                        Description
                      </th>
                      <th className="text-center text-xs font-medium text-gray-500 uppercase tracking-wider pb-3">
                        Qty
                      </th>
                      <th className="text-right text-xs font-medium text-gray-500 uppercase tracking-wider pb-3">
                        Unit Price
                      </th>
                      <th className="text-right text-xs font-medium text-gray-500 uppercase tracking-wider pb-3">
                        Tax
                      </th>
                      <th className="text-right text-xs font-medium text-gray-500 uppercase tracking-wider pb-3">
                        Total
                      </th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-50">
                    {invoice.line_items.map((item) => (
                      <tr key={item.id}>
                        <td className="py-3 text-sm text-gray-900">
                          {item.description}
                        </td>
                        <td className="py-3 text-sm text-gray-500 text-center">
                          {item.quantity}
                        </td>
                        <td className="py-3 text-sm text-gray-500 text-right">
                          ${centsToDecimal(item.unit_price_cents)}
                        </td>
                        <td className="py-3 text-sm text-gray-500 text-right">
                          {item.tax_rate}%
                        </td>
                        <td className="py-3 text-sm font-medium text-gray-900 text-right">
                          ${centsToDecimal(item.line_total_cents)}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              {/* Totals */}
              <div className="border-t border-gray-100 pt-4">
                <div className="flex justify-end">
                  <div className="w-64 space-y-2">
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-500">Subtotal</span>
                      <span className="text-gray-900">{displaySubtotal}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-500">Tax</span>
                      <span className="text-gray-900">
                        ${centsToDecimal(invoice.tax_total_cents)}
                      </span>
                    </div>
                    <div className="border-t border-gray-200 pt-2 flex justify-between">
                      <span className="font-semibold text-gray-900">Total Due</span>
                      <span className="text-xl font-bold text-gray-900">
                        {displayTotal} {invoice.currency}
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Notes */}
              {invoice.notes && (
                <div className="border-t border-gray-100 pt-4">
                  <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
                    Notes
                  </h3>
                  <p className="text-sm text-gray-600 whitespace-pre-line">{invoice.notes}</p>
                </div>
              )}
            </CardContent>
          </Card>
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          <Card className="border-0 shadow-sm">
            <CardContent className="p-6 space-y-4">
              <h3 className="text-sm font-semibold text-gray-900">Invoice Summary</h3>

              <div className="space-y-3 text-sm">
                <div className="flex justify-between">
                  <span className="text-gray-500">Status</span>
                  <StatusBadge status={invoice.status} />
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-500">Invoice #</span>
                  <span className="text-gray-900 font-medium">
                    {invoice.invoice_number || "—"}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-500">Currency</span>
                  <span className="text-gray-900">{invoice.currency}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-500">Issue Date</span>
                  <span className="text-gray-900">{formatDate(invoice.issue_date)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-500">Due Date</span>
                  <span className="text-gray-900">{formatDate(invoice.due_date)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-500">Line Items</span>
                  <span className="text-gray-900">{invoice.line_items.length}</span>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="border-0 shadow-sm">
            <CardContent className="p-6 space-y-4">
              <h3 className="text-sm font-semibold text-gray-900">Client</h3>
              <div className="space-y-2 text-sm">
                <p className="font-medium text-gray-900">{invoice.client_name}</p>
                {invoice.client_email && (
                  <p className="text-gray-500">{invoice.client_email}</p>
                )}
                {invoice.client_address && (
                  <p className="text-gray-500 whitespace-pre-line">{invoice.client_address}</p>
                )}
              </div>
            </CardContent>
          </Card>

          <Card className="border-0 shadow-sm">
            <CardContent className="p-6 space-y-3">
              <h3 className="text-sm font-semibold text-gray-900">Metadata</h3>
              <div className="space-y-2 text-xs text-gray-500">
                <p>Created: {new Date(invoice.created_at).toLocaleString()}</p>
                <p>Updated: {new Date(invoice.updated_at).toLocaleString()}</p>
                {invoice.created_by && (
                  <p>Created by: {invoice.created_by}</p>
                )}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Print styles */}
      {/* Send Invoice Modal */}
      {showSendModal && invoice && (
        <SendInvoiceModal
          invoices={[{
            id: invoice.id,
            invoice_number: invoice.invoice_number || "Draft",
            client_name: invoice.client_name || "",
            client_email: invoice.client_email || "",
            total: `$${(invoice.total_cents > 0 ? invoice.total_cents / 100 : (invoice.amount || 0)).toFixed(2)}`,
          }]}
          orgName={orgName}
          onClose={() => setShowSendModal(false)}
          onSuccess={() => {
            setShowSendModal(false);
            // Update status to "sent"
            if (invoice.status === "draft") {
              handleStatusChange("sent");
            }
          }}
        />
      )}

      <style jsx global>{`
        @media print {
          body * { visibility: hidden; }
          #invoice-print-area,
          #invoice-print-area * { visibility: visible; }
          #invoice-print-area {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
          }
        }
      `}</style>
    </div>
  );
}