import React, { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { ReportsAPI } from "@/apis/ReportsAPI";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import {
    Loader2, DollarSign, Package, TrendingUp, Users, Phone, Target, PieChart as PieChartIcon,
} from "lucide-react";
import {
    LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
} from "recharts";
import KpiCard from "./KpiCard";
import InfoTooltip from "./InfoTooltip";

const KPI_TOOLTIPS = {
    net_sales: "Venta bruta menos IVA estimado. Si el producto no tiene una tasa de impuesto propia, se usa 19% de respaldo.",
    gross_sales: "Suma de los totales de venta tal como se cobraron al cliente, con IVA incluido.",
    units: "Cantidad total de unidades vendidas en el período (suma de las cantidades de cada línea de venta).",
    avg_ticket: "Venta bruta dividida por la cantidad de ventas del período.",
    estimated_margin: "Venta neta menos el costo actual del producto × unidades vendidas. Es estimado porque la venta no guarda el costo histórico exacto al momento de venderse.",
    sales_count: "Cantidad de ventas completadas en el período.",
    new_incorporations: "Clientes nuevos incorporados en el período, por ejecutiva o por canal web.",
    calls_count: "Tickets de Call Center creados en el período (llamados/contactos).",
    pending_tickets: "Tickets de Call Center que aún no están cerrados ni resueltos.",
};

const KPI_ICONS = {
    net_sales: DollarSign,
    gross_sales: DollarSign,
    units: Package,
    avg_ticket: TrendingUp,
    estimated_margin: TrendingUp,
    sales_count: TrendingUp,
    new_incorporations: Users,
    calls_count: Phone,
    pending_tickets: Phone,
};

const KPI_COLORS = {
    net_sales: "blue",
    gross_sales: "slate",
    units: "emerald",
    avg_ticket: "amber",
    estimated_margin: "purple",
    sales_count: "teal",
    new_incorporations: "green",
    calls_count: "rose",
    pending_tickets: "amber",
};

const KPI_FORMATS = {
    net_sales: "currency",
    gross_sales: "currency",
    units: "number",
    avg_ticket: "currency",
    estimated_margin: "currency",
    sales_count: "number",
    new_incorporations: "number",
    calls_count: "number",
    pending_tickets: "number",
};

function compliancePercentColor(percent) {
    if (percent === null || percent === undefined) return "bg-gray-300";
    if (percent >= 100) return "bg-emerald-500";
    if (percent >= 80) return "bg-amber-500";
    return "bg-red-500";
}

/**
 * Panel de Dirección (minuta 2026-08-20, feedback de Felipe Videla:
 * "metas"): KPIs del período con variación vs. período anterior y año
 * anterior, tendencia de 12 meses, desglose por canal/línea y
 * cumplimiento de metas (reutiliza el motor de `sales-goals`, no lo
 * reconstruye).
 */
export default function ExecutiveDashboardReport({ companyId, companies = [], dateRange, onDataReady }) {
    const [selectedCompanies, setSelectedCompanies] = useState(companyId ? [companyId] : []);

    useEffect(() => {
        if (companyId && selectedCompanies.length === 0) {
            setSelectedCompanies([companyId]);
        }
    }, [companyId, selectedCompanies.length]);

    const idcompanies = selectedCompanies.length > 0 ? selectedCompanies : (companyId ? [companyId] : []);

    const { data, isLoading } = useQuery({
        queryKey: ["executive-summary", idcompanies, dateRange],
        queryFn: () => ReportsAPI.getExecutiveSummary(idcompanies, dateRange.startDate, dateRange.endDate),
        enabled: idcompanies.length > 0,
    });

    const kpis = data?.kpis ?? [];
    const trend = data?.trend ?? [];
    const byChannel = data?.by_channel ?? [];
    const byLine = data?.by_line ?? [];
    const goals = data?.goals ?? [];

    useEffect(() => {
        if (kpis.length > 0) {
            onDataReady({
                title: "Panel de Dirección",
                fileName: "panel_direccion",
                sheetName: "Panel de Dirección",
                data: kpis.map((kpi) => ({
                    KPI: kpi.label,
                    Valor: kpi.value,
                    "Var. vs período anterior %": kpi.previous_period_variation_percent,
                    "Var. vs año anterior %": kpi.previous_year_variation_percent,
                })),
                columns: ["KPI", "Valor", "Var. vs período anterior %", "Var. vs año anterior %"],
                rows: kpis.map((kpi) => [
                    kpi.label, kpi.value, kpi.previous_period_variation_percent, kpi.previous_year_variation_percent,
                ]),
            });
        }
    }, [kpis, onDataReady]);

    const toggleCompany = (id) => {
        setSelectedCompanies((prev) => (prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id]));
    };

    if (isLoading && !data) {
        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">
            {companies.length > 1 && (
                <Card>
                    <CardContent className="pt-6">
                        <Label className="flex items-center gap-1">
                            Empresas a consolidar
                            <InfoTooltip text="Marca varias empresas (ej. local y despacho) para ver sus KPIs y metas sumados en un solo panel." />
                        </Label>
                        <div className="flex flex-wrap gap-4 mt-2">
                            {companies.map((company) => (
                                <label key={company.id} className="flex items-center gap-2 text-sm">
                                    <Checkbox
                                        checked={selectedCompanies.includes(company.id)}
                                        onCheckedChange={() => toggleCompany(company.id)}
                                    />
                                    {company.name}
                                </label>
                            ))}
                        </div>
                    </CardContent>
                </Card>
            )}

            <div className="grid md:grid-cols-3 lg:grid-cols-4 gap-4">
                {kpis.map((kpi) => (
                    <KpiCard
                        key={kpi.key}
                        label={kpi.label}
                        value={kpi.value}
                        format={KPI_FORMATS[kpi.key] ?? "number"}
                        icon={KPI_ICONS[kpi.key]}
                        color={KPI_COLORS[kpi.key] ?? "blue"}
                        tooltip={KPI_TOOLTIPS[kpi.key]}
                        previousPeriodVariationPercent={kpi.previous_period_variation_percent}
                        previousYearVariationPercent={kpi.previous_year_variation_percent}
                    />
                ))}
            </div>

            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2 text-base">
                        <TrendingUp className="w-5 h-5 text-blue-600" />
                        Tendencia de venta neta — últimos 12 meses
                        <InfoTooltip text="Venta neta (sin IVA estimado) de cada uno de los 12 meses hasta el fin del período seleccionado, para ver la evolución mes a mes." />
                    </CardTitle>
                </CardHeader>
                <CardContent>
                    {trend.length === 0 ? (
                        <p className="text-sm text-gray-500 py-8 text-center">Sin datos de tendencia</p>
                    ) : (
                        <ResponsiveContainer width="100%" height={260}>
                            <LineChart data={trend}>
                                <CartesianGrid strokeDasharray="3 3" stroke="rgba(0,0,0,0.1)" />
                                <XAxis dataKey="period" fontSize={11} stroke="#64748b" />
                                <YAxis fontSize={11} stroke="#64748b" tickFormatter={(v) => `$${(v / 1000).toFixed(0)}k`} />
                                <Tooltip formatter={(v) => [`$${Number(v).toLocaleString()}`, "Venta neta"]} />
                                <Line type="monotone" dataKey="net_amount" stroke="#3b82f6" strokeWidth={2} dot={false} name="Venta neta" />
                            </LineChart>
                        </ResponsiveContainer>
                    )}
                </CardContent>
            </Card>

            <div className="grid md:grid-cols-2 gap-4">
                <Card>
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2 text-base">
                            <PieChartIcon className="w-5 h-5 text-emerald-600" />
                            Venta neta por canal
                            <InfoTooltip text="Venta neta del período agrupada por empresa/canal (ej. local vs. despacho)." />
                        </CardTitle>
                    </CardHeader>
                    <CardContent>
                        {byChannel.length === 0 ? (
                            <p className="text-sm text-gray-500 py-8 text-center">Sin datos en este período</p>
                        ) : (
                            <ResponsiveContainer width="100%" height={220}>
                                <BarChart data={byChannel.map((r) => ({ name: r.dimension_label, value: r.net_amount }))}>
                                    <CartesianGrid strokeDasharray="3 3" />
                                    <XAxis dataKey="name" fontSize={11} />
                                    <YAxis fontSize={11} tickFormatter={(v) => `$${(v / 1000).toFixed(0)}k`} />
                                    <Tooltip formatter={(v) => [`$${Number(v).toLocaleString()}`, "Venta neta"]} />
                                    <Bar dataKey="value" fill="#10b981" radius={[4, 4, 0, 0]} />
                                </BarChart>
                            </ResponsiveContainer>
                        )}
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2 text-base">
                            <Package className="w-5 h-5 text-purple-600" />
                            Top 5 líneas por venta neta
                            <InfoTooltip text="Las 5 categorías de producto (línea) con mayor venta neta en el período." />
                        </CardTitle>
                    </CardHeader>
                    <CardContent>
                        {byLine.length === 0 ? (
                            <p className="text-sm text-gray-500 py-8 text-center">Sin datos en este período</p>
                        ) : (
                            <div className="space-y-2">
                                {byLine.map((row) => (
                                    <div key={row.dimension_key} className="flex justify-between p-3 bg-gray-50 rounded-lg">
                                        <span>{row.dimension_label}</span>
                                        <span className="font-semibold">${Math.round(row.net_amount).toLocaleString()}</span>
                                    </div>
                                ))}
                            </div>
                        )}
                    </CardContent>
                </Card>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <Target className="w-5 h-5 text-blue-600" />
                        Cumplimiento de metas del mes
                        <InfoTooltip text="Compara lo real vs. la meta configurada en Proyección de Ventas para el mes de la fecha 'hasta'. Semáforo: verde ≥100% cumplido, ámbar ≥80%, rojo por debajo de 80%." />
                    </CardTitle>
                </CardHeader>
                <CardContent>
                    {goals.length === 0 ? (
                        <p className="text-sm text-gray-500 py-4">
                            No hay metas configuradas para este mes. Créalas en Proyección de Ventas.
                        </p>
                    ) : (
                        <div className="space-y-4">
                            {goals.map((goal) => (
                                <div key={goal.id} className="space-y-1">
                                    <div className="flex justify-between items-center text-sm">
                                        <span className="font-medium">{goal.template_name ?? goal.metric_type}</span>
                                        <div className="flex items-center gap-2">
                                            <span className="text-gray-600">
                                                {Math.round(goal.actual_value).toLocaleString()} / {Math.round(goal.target_value).toLocaleString()}
                                            </span>
                                            <Badge
                                                className={
                                                    goal.compliance_percent === null
                                                        ? "bg-gray-300"
                                                        : goal.compliance_percent >= 100
                                                            ? "bg-emerald-500"
                                                            : goal.compliance_percent >= 80
                                                                ? "bg-amber-500"
                                                                : "bg-red-500"
                                                }
                                            >
                                                {goal.compliance_percent !== null ? `${goal.compliance_percent.toFixed(0)}%` : "—"}
                                            </Badge>
                                        </div>
                                    </div>
                                    <div className="h-2 w-full overflow-hidden rounded-full bg-gray-200">
                                        <div
                                            className={`h-full rounded-full transition-all ${compliancePercentColor(goal.compliance_percent)}`}
                                            style={{ width: `${Math.min(goal.compliance_percent ?? 0, 100)}%` }}
                                        />
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </CardContent>
            </Card>
        </div>
    );
}