"use client";

import { useState, useEffect } from "react";
import { Plus, Send } from "lucide-react";
import { Button } from "@/components/ui/button";
import type { InvoiceListFilter, InvoiceRow } from "@/lib/supabase/invoicing-actions";
import { centsToDecimal, INVOICE_STATUS_LABELS } from "@/lib/supabase/invoicing-types";
import SendInvoiceModal from "@/components/invoices/SendInvoiceModal";
import { InvoiceChaseDialog } from "@/components/ai/InvoiceChaseDialog";

const FILTERS: { key: InvoiceListFilter; label: string }[] = [
  { key: "all", label: "All" },
  { key: "unpaid", label: "Unpaid" },
  { key: "paid", label: "Paid" },
  { key: "overdue", label: "Overdue" },
];

function StatusBadge({ status }: { status: InvoiceRow["status"] }) {
  const styles: Record<InvoiceRow["status"], 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-2.5 py-0.5 rounded-full text-xs 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: "short", day: "numeric", year: "numeric" });
}

export default function InvoicesListView({
  invoices,
  filter,
  onFilterChange,
  onNewInvoice,
  onOpenInvoice,
  orgName,
}: {
  invoices: InvoiceRow[];
  filter: InvoiceListFilter;
  onFilterChange: (filter: InvoiceListFilter) => void;
  onNewInvoice: () => void;
  onOpenInvoice: (id: string) => void;
  orgName: string;
}) {
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [showSendModal, setShowSendModal] = useState(false);

  // Reset selection when filter or invoices change
  useEffect(() => {
    setSelected(new Set());
  }, [filter, invoices.length]);

  const toggleSelect = (id: string) => {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  const toggleSelectAll = () => {
    if (selected.size === invoices.length) {
      setSelected(new Set());
    } else {
      setSelected(new Set(invoices.map((i) => i.id)));
    }
  };

  const selectedInvoices = invoices.filter((i) => selected.has(i.id));
  const sendableInvoices = selectedInvoices.filter((i) => i.client_email);

  const handleSendSelected = () => {
    setShowSendModal(true);
  };

  const handleSendSuccess = () => {
    setShowSendModal(false);
    setSelected(new Set());
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Invoices</h1>
          <p className="text-gray-500 mt-1">Create and manage your invoices</p>
        </div>
        <div className="flex items-center gap-2">
          {/* Send selected */}
          {sendableInvoices.length > 0 && (
            <Button
              onClick={handleSendSelected}
              variant="outline"
              className="gap-2 cursor-pointer text-sm"
            >
              <Send className="w-4 h-4" />
              Send {sendableInvoices.length}
            </Button>
          )}
          <Button
            onClick={onNewInvoice}
            className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer"
          >
            <Plus className="w-4 h-4" />
            New Invoice
          </Button>
        </div>
      </div>

      {/* Filter Tabs */}
      <div className="flex gap-1 bg-gray-100 rounded-lg p-1 w-fit">
        {FILTERS.map((f) => (
          <button
            key={f.key}
            onClick={() => onFilterChange(f.key)}
            className={`px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer ${
              f.key === filter
                ? "bg-white text-gray-900 shadow-sm"
                : "text-gray-500 hover:text-gray-700"
            }`}
          >
            {f.label}
          </button>
        ))}
      </div>

      {/* AI Invoice Chase — only show when overdue filter is active or there are overdue invoices */}
      {(filter === "overdue" || invoices.some((i) => i.status === "overdue")) && (
        <InvoiceChaseDialog orgName={orgName} />
      )}

      {/* Table */}
      <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
        {invoices.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-16 text-center">
            <p className="text-gray-500 text-sm">No invoices found</p>
            <p className="text-gray-400 text-xs mt-1">
              {filter !== "all" ? "Try a different filter" : "Create your first invoice to get started"}
            </p>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-gray-100">
                  <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider pb-3 px-4 w-10">
                    <input
                      type="checkbox"
                      checked={selected.size === invoices.length && invoices.length > 0}
                      onChange={toggleSelectAll}
                      className="rounded border-gray-300 text-[#1D9E75] focus:ring-[#1D9E75] cursor-pointer"
                    />
                  </th>
                  <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider pb-3 px-4">
                    Invoice #
                  </th>
                  <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider pb-3 px-4">
                    Client
                  </th>
                  <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider pb-3 px-4 hidden sm:table-cell">
                    Issue Date
                  </th>
                  <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider pb-3 px-4">
                    Due Date
                  </th>
                  <th className="text-right text-xs font-medium text-gray-500 uppercase tracking-wider pb-3 px-4">
                    Amount
                  </th>
                  <th className="text-center text-xs font-medium text-gray-500 uppercase tracking-wider pb-3 px-4">
                    Status
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-50">
                {invoices.map((invoice) => {
                  const displayTotal = invoice.total_cents > 0
                    ? `$${centsToDecimal(invoice.total_cents)}`
                    : invoice.amount != null
                      ? `$${invoice.amount.toFixed(2)}`
                      : "$0.00";

                  return (
                    <tr
                      key={invoice.id}
                      className="hover:bg-gray-50/50 transition-colors duration-150"
                    >
                      <td className="py-3.5 px-4">
                        <input
                          type="checkbox"
                          checked={selected.has(invoice.id)}
                          onChange={() => toggleSelect(invoice.id)}
                          onClick={(e) => e.stopPropagation()}
                          className="rounded border-gray-300 text-[#1D9E75] focus:ring-[#1D9E75] cursor-pointer"
                        />
                      </td>
                      <td className="py-3.5 px-4">
                        <button
                          onClick={() => onOpenInvoice(invoice.id)}
                          className="text-sm font-semibold text-teal-600 hover:text-teal-700 transition-colors cursor-pointer"
                        >
                          {invoice.invoice_number || "—"}
                        </button>
                      </td>
                      <td className="py-3.5 px-4">
                        <button
                          onClick={() => onOpenInvoice(invoice.id)}
                          className="text-sm text-gray-900 cursor-pointer"
                        >
                          {invoice.client_name}
                        </button>
                      </td>
                      <td className="py-3.5 px-4 text-sm text-gray-500 hidden sm:table-cell">
                        {formatDate(invoice.issue_date)}
                      </td>
                      <td className="py-3.5 px-4 text-sm text-gray-900">
                        {formatDate(invoice.due_date)}
                      </td>
                      <td className="py-3.5 px-4 text-sm font-semibold text-gray-900 text-right">
                        {displayTotal}
                      </td>
                      <td className="py-3.5 px-4 text-center">
                        <StatusBadge status={invoice.status} />
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* Send Modal */}
      {showSendModal && sendableInvoices.length > 0 && (
        <SendInvoiceModal
          invoices={sendableInvoices.map((i) => ({
            id: i.id,
            invoice_number: i.invoice_number || "Draft",
            client_name: i.client_name || "",
            client_email: i.client_email || "",
            total: i.total_cents > 0
              ? `$${centsToDecimal(i.total_cents)}`
              : i.amount != null
                ? `$${i.amount.toFixed(2)}`
                : "$0.00",
          }))}
          orgName={orgName}
          onClose={() => setShowSendModal(false)}
          onSuccess={handleSendSuccess}
        />
      )}
    </div>
  );
}