import React, { useEffect, useMemo, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { ReportsAPI } from "@/apis/ReportsAPI";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
    Loader2, Receipt, DollarSign, Wallet, Scale, AlertTriangle, Search, ChevronLeft, ChevronRight,
} from "lucide-react";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
import KpiCard from "./KpiCard";
import InfoTooltip from "./InfoTooltip";

const PAGE_SIZE = 10;

const CATEGORY_LABELS = {
    franco: "Franco",
    laboratorio: "Laboratorio",
    recetas: "Recetas",
    other: "Otros",
    materia_prima: "Materia prima",
};

const STATUS_LABELS = {
    pending: "Pendiente",
    partial: "Parcial",
    paid: "Pagada",
};

const STATUS_BADGE_CLASS = {
    pending: "bg-amber-500",
    partial: "bg-blue-500",
    paid: "bg-emerald-500",
};

const formatMoney = (value) => `$${Math.round(Number(value) || 0).toLocaleString("es-CL")}`;

const todayIso = () => new Date().toISOString().split("T")[0];

const isOverdue = (row, today = todayIso()) =>
    Number(row.balance) > 0 && Boolean(row.due_date) && row.due_date < today;

const paidPercent = (row) => {
    const total = Number(row.total_amount) || 0;
    if (total <= 0) return 0;
    return (Number(row.paid_amount) / total) * 100;
};

/**
 * E6 (minuta 2026-08-20, mejora operativa): facturas y pagos de
 * proveedores por categoría, con estado, vencimiento, % pagado,
 * buscador y paginado.
 */
export default function SupplierInvoicesReport({ companyId, dateRange, onDataReady }) {
    const [category, setCategory] = useState("all");
    const [searchTerm, setSearchTerm] = useState("");
    const [currentPage, setCurrentPage] = useState(1);

    const { data, isLoading } = useQuery({
        queryKey: ["supplier-invoices", companyId, dateRange, category],
        queryFn: () => ReportsAPI.getSupplierInvoices(
            companyId,
            dateRange.startDate,
            dateRange.endDate,
            category === "all" ? undefined : category,
        ),
        enabled: !!companyId,
    });

    const invoices = data?.invoices ?? [];
    const byCategory = data?.by_category ?? [];
    const totals = data?.totals ?? { invoices_count: 0, total_amount: 0, paid_amount: 0, balance: 0 };

    const overdueAmount = useMemo(
        () => invoices.filter((row) => isOverdue(row)).reduce((sum, row) => sum + Number(row.balance || 0), 0),
        [invoices],
    );

    const filteredInvoices = useMemo(() => {
        const term = searchTerm.trim().toLowerCase();
        if (!term) return invoices;
        return invoices.filter((row) =>
            String(row.invoice_number || "").toLowerCase().includes(term)
            || String(row.supplier_name || "").toLowerCase().includes(term),
        );
    }, [invoices, searchTerm]);

    const totalPages = Math.max(1, Math.ceil(filteredInvoices.length / PAGE_SIZE));
    const safeCurrentPage = Math.min(currentPage, totalPages);
    const paginatedInvoices = useMemo(
        () => filteredInvoices.slice((safeCurrentPage - 1) * PAGE_SIZE, safeCurrentPage * PAGE_SIZE),
        [filteredInvoices, safeCurrentPage],
    );

    useEffect(() => {
        setCurrentPage(1);
    }, [searchTerm, category, invoices.length]);

    useEffect(() => {
        if (invoices.length > 0) {
            onDataReady({
                title: "Facturas de proveedores",
                fileName: "facturas_proveedores",
                sheetName: "Proveedores",
                data: invoices.map((row) => ({
                    Folio: row.invoice_number,
                    Proveedor: row.supplier_name,
                    Categoría: row.cost_category,
                    Fecha: row.invoice_date,
                    Vencimiento: row.due_date,
                    Estado: row.status,
                    Total: row.total_amount,
                    Pagado: row.paid_amount,
                    Saldo: row.balance,
                    "Pagado %": paidPercent(row),
                })),
                columns: ["Folio", "Proveedor", "Categoría", "Fecha", "Vencimiento", "Estado", "Total", "Pagado", "Saldo"],
                rows: invoices.map((row) => [
                    row.invoice_number,
                    row.supplier_name,
                    row.cost_category,
                    row.invoice_date,
                    row.due_date,
                    row.status,
                    row.total_amount,
                    row.paid_amount,
                    row.balance,
                ]),
            });
        }
    }, [invoices, onDataReady]);

    const chartData = useMemo(
        () => byCategory.map((row) => ({
            name: CATEGORY_LABELS[row.cost_category] ?? row.cost_category,
            value: row.total_amount,
        })),
        [byCategory],
    );

    if (isLoading) {
        return (
            <div className="p-8 text-center">
                <Loader2 className="w-8 h-8 animate-spin mx-auto text-blue-600" />
            </div>
        );
    }

    return (
        <div className="p-6 space-y-6">
            <Card>
                <CardContent className="pt-6">
                    <Label className="flex items-center gap-1">
                        Categoría de costo
                        <InfoTooltip text="Filtra las facturas por Franco, Laboratorio o Recetas. 'Todas' muestra el consolidado del período." />
                    </Label>
                    <Select value={category} onValueChange={setCategory}>
                        <SelectTrigger>
                            <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="all">Todas</SelectItem>
                            <SelectItem value="franco">Franco</SelectItem>
                            <SelectItem value="laboratorio">Laboratorio</SelectItem>
                            <SelectItem value="recetas">Recetas</SelectItem>
                        </SelectContent>
                    </Select>
                </CardContent>
            </Card>

            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
                <KpiCard
                    label="Facturado"
                    value={totals.total_amount}
                    format="currency"
                    icon={DollarSign}
                    color="blue"
                    tooltip="Suma de los totales de las facturas del período (con IVA)."
                />
                <KpiCard
                    label="Pagado"
                    value={totals.paid_amount}
                    format="currency"
                    icon={Wallet}
                    color="emerald"
                    tooltip="Suma de los pagos registrados contra esas facturas."
                />
                <KpiCard
                    label="Saldo"
                    value={totals.balance}
                    format="currency"
                    icon={Scale}
                    color="amber"
                    tooltip="Facturado menos pagado: lo que aún se debe."
                />
                <KpiCard
                    label="Vencido"
                    value={overdueAmount}
                    format="currency"
                    icon={AlertTriangle}
                    color="rose"
                    tooltip="Saldo de facturas con fecha de vencimiento anterior a hoy y saldo mayor a cero."
                />
            </div>

            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-1 text-base">
                        Por categoría
                        <InfoTooltip text="Facturado del período agrupado por categoría de costo." />
                    </CardTitle>
                </CardHeader>
                <CardContent>
                    {byCategory.length === 0 ? (
                        <p className="text-sm text-gray-500 py-6 text-center">Sin facturas en este período</p>
                    ) : (
                        <div className="grid md:grid-cols-2 gap-4 items-center">
                            <ResponsiveContainer width="100%" height={220}>
                                <BarChart data={chartData}>
                                    <CartesianGrid strokeDasharray="3 3" />
                                    <XAxis dataKey="name" fontSize={11} />
                                    <YAxis fontSize={11} tickFormatter={(v) => `$${(v / 1000).toFixed(0)}k`} />
                                    <Tooltip formatter={(v) => [formatMoney(v), "Facturado"]} />
                                    <Bar dataKey="value" fill="#3b82f6" radius={[4, 4, 0, 0]} />
                                </BarChart>
                            </ResponsiveContainer>
                            <div className="space-y-2">
                                {byCategory.map((row) => (
                                    <div key={row.cost_category} className="flex justify-between p-3 bg-gray-50 rounded-lg">
                                        <span>{CATEGORY_LABELS[row.cost_category] ?? row.cost_category}</span>
                                        <span className="font-semibold">{formatMoney(row.total_amount)}</span>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}
                </CardContent>
            </Card>

            <Card>
                <CardHeader>
                    <div className="flex flex-wrap items-center justify-between gap-3">
                        <CardTitle className="flex items-center gap-1 text-base">
                            Facturas de proveedores
                            <InfoTooltip text="El % pagado es pagado / total. Las filas en rojo tienen saldo y ya vencieron." />
                        </CardTitle>
                        {invoices.length > 0 && (
                            <div className="relative w-full sm:w-64">
                                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                                <Input
                                    type="text"
                                    placeholder="Buscar folio o proveedor..."
                                    value={searchTerm}
                                    onChange={(e) => setSearchTerm(e.target.value)}
                                    className="pl-8"
                                />
                            </div>
                        )}
                    </div>
                </CardHeader>
                <CardContent>
                    {invoices.length === 0 ? (
                        <div className="text-center py-8 text-gray-500">
                            <Receipt className="w-12 h-12 mx-auto mb-3 text-gray-400" />
                            <p>No hay facturas de proveedores en este período</p>
                        </div>
                    ) : filteredInvoices.length === 0 ? (
                        <p className="text-sm text-gray-500 py-8 text-center">
                            No se encontraron resultados para "{searchTerm}"
                        </p>
                    ) : (
                        <div className="overflow-x-auto">
                            <table className="w-full">
                                <thead className="bg-gray-50 border-b">
                                    <tr>
                                        <th className="text-left p-3 text-sm font-semibold">Folio</th>
                                        <th className="text-left p-3 text-sm font-semibold">Proveedor</th>
                                        <th className="text-left p-3 text-sm font-semibold">Categoría</th>
                                        <th className="text-left p-3 text-sm font-semibold">
                                            <span className="inline-flex items-center gap-1">
                                                Fecha
                                                <InfoTooltip text="Fecha de emisión de la factura." />
                                            </span>
                                        </th>
                                        <th className="text-left p-3 text-sm font-semibold">
                                            <span className="inline-flex items-center gap-1">
                                                Vencimiento
                                                <InfoTooltip text="Fecha de vencimiento. Si ya pasó y hay saldo, la fila se marca como vencida." />
                                            </span>
                                        </th>
                                        <th className="text-left p-3 text-sm font-semibold">Estado</th>
                                        <th className="text-right p-3 text-sm font-semibold">Total</th>
                                        <th className="text-right p-3 text-sm font-semibold">Pagado</th>
                                        <th className="text-right p-3 text-sm font-semibold">
                                            <span className="inline-flex items-center gap-1 justify-end w-full">
                                                % pagado
                                                <InfoTooltip text="Pagado dividido por el total de la factura." />
                                            </span>
                                        </th>
                                        <th className="text-right p-3 text-sm font-semibold">Saldo</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {paginatedInvoices.map((row) => {
                                        const overdue = isOverdue(row);
                                        return (
                                            <tr
                                                key={row.id}
                                                className={`border-b hover:bg-gray-50 ${overdue ? "bg-red-50" : ""}`}
                                            >
                                                <td className="p-3 font-mono text-sm">{row.invoice_number}</td>
                                                <td className="p-3">{row.supplier_name}</td>
                                                <td className="p-3">{CATEGORY_LABELS[row.cost_category] ?? row.cost_category}</td>
                                                <td className="p-3">{row.invoice_date || "—"}</td>
                                                <td className={`p-3 ${overdue ? "text-red-700 font-medium" : ""}`}>
                                                    {row.due_date || "—"}
                                                </td>
                                                <td className="p-3">
                                                    <Badge className={STATUS_BADGE_CLASS[row.status] ?? "bg-gray-400"}>
                                                        {STATUS_LABELS[row.status] ?? row.status}
                                                    </Badge>
                                                </td>
                                                <td className="p-3 text-right">{formatMoney(row.total_amount)}</td>
                                                <td className="p-3 text-right">{formatMoney(row.paid_amount)}</td>
                                                <td className="p-3 text-right">{paidPercent(row).toFixed(0)}%</td>
                                                <td className="p-3 text-right font-semibold">{formatMoney(row.balance)}</td>
                                            </tr>
                                        );
                                    })}
                                </tbody>
                            </table>
                        </div>
                    )}
                    {filteredInvoices.length > 0 && (
                        <div className="flex flex-wrap items-center justify-between gap-3 pt-4">
                            <p className="text-sm text-gray-500">
                                Mostrando {(safeCurrentPage - 1) * PAGE_SIZE + 1}–
                                {Math.min(safeCurrentPage * PAGE_SIZE, filteredInvoices.length)} de {filteredInvoices.length}
                            </p>
                            <div className="flex items-center gap-2">
                                <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                                    disabled={safeCurrentPage <= 1}
                                >
                                    <ChevronLeft className="w-4 h-4" />
                                </Button>
                                <span className="text-sm text-gray-600">
                                    Página {safeCurrentPage} de {totalPages}
                                </span>
                                <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                                    disabled={safeCurrentPage >= totalPages}
                                >
                                    <ChevronRight className="w-4 h-4" />
                                </Button>
                            </div>
                        </div>
                    )}
                </CardContent>
            </Card>
        </div>
    );
}