"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import { formatDate, money } from "@/lib/format";
import {
  INVOICE_STATUS,
  invoiceStatusClass,
  invoiceStatusLabel,
  paymentMethodLabel,
} from "@/lib/invoice-utils";
import InvoiceApproveModal from "./InvoiceApproveModal";

type InvoiceRow = {
  id: string;
  number: number;
  cutoffDate: string;
  status: string;
  licenseName: string | null;
  priceUsd: number;
  exchangeRate: number;
  costMxn: number;
  paymentMethod: string | null;
  receiptUrl: string | null;
  paidAt: string | null;
  agency: { name: string; status: string };
};

const STATUS_FILTERS = [
  { value: "", label: "Todos los estatus" },
  { value: INVOICE_STATUS.UNPAID, label: "Por pagar" },
  { value: INVOICE_STATUS.PENDING, label: "Pendiente" },
  { value: INVOICE_STATUS.PAID, label: "Pagada" },
] as const;

function licenseStatusLabel(agencyStatus: string, invoiceStatus: string) {
  if (invoiceStatus === INVOICE_STATUS.PAID) return "Activa";
  return agencyStatus === "ACTIVE" ? "Activa" : "Suspendida";
}

function licenseStatusClass(agencyStatus: string, invoiceStatus: string) {
  if (invoiceStatus === INVOICE_STATUS.PAID || agencyStatus === "ACTIVE") {
    return "bg-emerald-100 text-emerald-700";
  }
  return "bg-red-100 text-red-700";
}

export default function InvoicesList({ invoices }: { invoices: InvoiceRow[] }) {
  const [query, setQuery] = useState("");
  const [statusFilter, setStatusFilter] = useState("");

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    return invoices.filter((inv) => {
      if (statusFilter && inv.status !== statusFilter) return false;
      if (q && !inv.agency.name.toLowerCase().includes(q)) return false;
      return true;
    });
  }, [invoices, query, statusFilter]);

  return (
    <div className="space-y-4">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
        <div className="relative flex-1 max-w-md">
          <input
            type="search"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Buscar por nombre de agencia…"
            className="input pl-9"
          />
          <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
            🔍
          </span>
          {query ? (
            <button
              type="button"
              onClick={() => setQuery("")}
              className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
              aria-label="Limpiar búsqueda"
            >
              ✕
            </button>
          ) : null}
        </div>

        <select
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
          className="input w-full sm:w-auto sm:min-w-[180px]"
        >
          {STATUS_FILTERS.map((f) => (
            <option key={f.value} value={f.value}>
              {f.label}
            </option>
          ))}
        </select>
      </div>

      {filtered.length === 0 ? (
        <p className="text-sm text-slate-400">
          {invoices.length === 0
            ? "No hay facturas todavía. Crea una manualmente o espera el día de facturación de cada agencia."
            : "No se encontraron facturas con esos criterios."}
        </p>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="text-left text-slate-500">
              <tr className="border-b border-slate-200">
                <th className="py-2 pr-3">No.</th>
                <th className="py-2 pr-3">Fecha de corte</th>
                <th className="py-2 pr-3">Agencia</th>
                <th className="py-2 pr-3">Licencia</th>
                <th className="py-2 pr-3 text-right">Costo</th>
                <th className="py-2 pr-3">Estatus factura</th>
                <th className="py-2 pr-3">Estatus licencia</th>
                <th className="py-2 pr-3">Comprobante</th>
                <th className="py-2 text-right">Acción</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((inv) => (
                <tr key={inv.id} className="border-b border-slate-100">
                  <td className="py-3 pr-3 font-medium">#{inv.number}</td>
                  <td className="py-3 pr-3">{formatDate(inv.cutoffDate)}</td>
                  <td className="py-3 pr-3">{inv.agency.name}</td>
                  <td className="py-3 pr-3">{inv.licenseName ?? "—"}</td>
                  <td className="py-3 pr-3 text-right">
                    <div>{money(inv.costMxn)}</div>
                    <div className="text-xs text-slate-400">
                      {money(inv.priceUsd, "USD")} · TC {inv.exchangeRate.toFixed(2)}
                    </div>
                  </td>
                  <td className="py-3 pr-3">
                    <span className={`badge ${invoiceStatusClass(inv.status)}`}>
                      {invoiceStatusLabel(inv.status)}
                    </span>
                    {inv.paymentMethod ? (
                      <div className="mt-1 text-xs text-slate-400">
                        {paymentMethodLabel(inv.paymentMethod)}
                      </div>
                    ) : null}
                  </td>
                  <td className="py-3 pr-3">
                    <span
                      className={`badge ${licenseStatusClass(inv.agency.status, inv.status)}`}
                    >
                      {licenseStatusLabel(inv.agency.status, inv.status)}
                    </span>
                  </td>
                  <td className="py-3 pr-3">
                    {inv.receiptUrl ? (
                      <Link
                        href={inv.receiptUrl}
                        target="_blank"
                        className="text-blue-600 hover:underline"
                      >
                        Ver
                      </Link>
                    ) : (
                      <span className="text-slate-400">—</span>
                    )}
                  </td>
                  <td className="py-3 text-right">
                    {inv.status === INVOICE_STATUS.PENDING ? (
                      <InvoiceApproveModal
                        invoiceId={inv.id}
                        invoiceNumber={inv.number}
                        agencyName={inv.agency.name}
                        paymentMethod={paymentMethodLabel(inv.paymentMethod)}
                        receiptUrl={inv.receiptUrl}
                      />
                    ) : inv.status === INVOICE_STATUS.PAID ? (
                      <span className="text-xs text-emerald-600">
                        Pagada {inv.paidAt ? formatDate(inv.paidAt) : ""}
                      </span>
                    ) : (
                      <span className="text-xs text-slate-400">Esperando pago</span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}