import React, { useEffect, useMemo, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { toast } from "sonner";
import {
  Bar,
  BarChart,
  CartesianGrid,
  Legend,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import {
  AlertTriangle,
  BarChart3,
  CalendarRange,
  CheckCircle2,
  Clock,
  Factory,
  Info,
  Loader2,
  RefreshCw,
  Search,
  TrendingDown,
} from "lucide-react";
import { API } from "@/apis/configs/axiosConfigs";
import { InventoryAPI } from "@/apis/InventoryAPI";

const unwrap = (res) => res?.data?.data?.detail ?? res?.data?.data ?? res?.data;

const ORDER_STATUS_LABELS = {
  draft: "Borrador",
  pending: "Pendiente",
  in_progress: "En proceso",
  pending_consolidation: "Pendiente consolidación",
  completed: "Completada",
  consolidated: "Consolidada",
  partially_consolidated: "Consolidada parcial",
  cancelled: "Anulada",
};

const COMPLIANCE_LABELS = {
  open: "Abierta",
  on_time: "A tiempo",
  late: "Atrasada",
};

function getDefaultDateRange() {
  const now = new Date();
  const start = new Date(now.getFullYear(), now.getMonth(), 1);
  return {
    from: start.toISOString().slice(0, 10),
    to: now.toISOString().slice(0, 10),
  };
}

function formatDateLabel(iso) {
  if (!iso) return "—";
  return new Date(`${iso}T12:00:00`).toLocaleDateString("es-CL", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  });
}

function SummaryCard({ label, value, hint, tone = "default", icon: Icon }) {
  const tones = {
    success: "border-emerald-200 bg-emerald-50 dark:border-emerald-900 dark:bg-emerald-950/30",
    danger: "border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/30",
    warning: "border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/30",
    info: "border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-950/30",
    default: "border-border bg-card",
  };

  return (
    <div className={`rounded-lg border p-4 ${tones[tone]}`}>
      <div className="flex items-start justify-between gap-2">
        <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{label}</p>
        {Icon && <Icon className="h-4 w-4 text-muted-foreground shrink-0" />}
      </div>
      <p className="mt-1 text-2xl font-semibold tabular-nums">{value}</p>
      {hint && <p className="mt-1 text-xs text-muted-foreground">{hint}</p>}
    </div>
  );
}

function StatusBadge({ value, map, variants }) {
  const label = map[value] || value || "—";
  const variant = variants?.[value] || "outline";
  const className = {
    on_time: "bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-950 dark:text-emerald-200",
    late: "bg-red-100 text-red-800 border-red-200 dark:bg-red-950 dark:text-red-200",
    open: "bg-amber-100 text-amber-900 border-amber-200 dark:bg-amber-950 dark:text-amber-200",
    consolidated: "bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-950 dark:text-blue-200",
    in_progress: "bg-violet-100 text-violet-800 border-violet-200 dark:bg-violet-950 dark:text-violet-200",
  }[value];

  return (
    <Badge variant={variant} className={className}>
      {label}
    </Badge>
  );
}

function MermaBadge({ percent }) {
  if (percent == null) return <span className="text-muted-foreground">—</span>;
  const abs = Math.abs(Number(percent));
  const tone =
    abs >= 10
      ? "bg-red-100 text-red-800 border-red-200 dark:bg-red-950 dark:text-red-200"
      : abs >= 5
        ? "bg-amber-100 text-amber-900 border-amber-200 dark:bg-amber-950 dark:text-amber-200"
        : "bg-slate-100 text-slate-700 border-slate-200 dark:bg-slate-900 dark:text-slate-300";

  return (
    <Badge variant="outline" className={tone}>
      {Number(percent) > 0 ? "+" : ""}
      {percent}%
    </Badge>
  );
}

function EmptyState({ title, description, icon: Icon = BarChart3 }) {
  return (
    <div className="flex flex-col items-center justify-center py-16 text-center text-muted-foreground">
      <Icon className="h-12 w-12 mb-3 opacity-40" />
      <p className="font-medium text-foreground">{title}</p>
      <p className="text-sm mt-1 max-w-md">{description}</p>
    </div>
  );
}

async function fetchProductionReports(companyId, from, to) {
  const params = { idcompany: companyId, from, to };
  const [m, c, l, productsRes] = await Promise.all([
    API.get("/reports/production/merma", { params }),
    API.get("/reports/production/compliance", { params }),
    API.get("/reports/production/by-line", { params }),
    API.get("/products", { params: { idcompany: companyId } }),
  ]);

  const rawProducts = unwrap(productsRes) || [];
  const productsList = Array.isArray(rawProducts) ? rawProducts : rawProducts?.data || [];
  const productMap = Object.fromEntries(
    productsList.map((p) => [
      String(p.id ?? p.idproduct),
      { name: p.name, sku: p.sku },
    ]),
  );

  return {
    merma: unwrap(m) || [],
    compliance: unwrap(c),
    byLine: unwrap(l) || [],
    productMap,
  };
}

export default function ProductionReports() {
  const defaults = getDefaultDateRange();
  const [companyId, setCompanyId] = useState(null);
  const [from, setFrom] = useState(defaults.from);
  const [to, setTo] = useState(defaults.to);
  const [appliedRange, setAppliedRange] = useState(defaults);
  const [search, setSearch] = useState("");
  const [complianceFilter, setComplianceFilter] = useState("all");

  useEffect(() => {
    InventoryAPI.getPrimaryCompanyForCurrentUser().then((company) => {
      if (company?.id) setCompanyId(company.id);
    });
  }, []);

  const { data, isLoading, isFetching, refetch } = useQuery({
    queryKey: ["production-reports", companyId, appliedRange.from, appliedRange.to],
    queryFn: () => fetchProductionReports(companyId, appliedRange.from, appliedRange.to),
    enabled: !!companyId,
  });

  const merma = data?.merma ?? [];
  const compliance = data?.compliance ?? null;
  const byLine = data?.byLine ?? [];
  const productMap = data?.productMap ?? {};

  const applyRange = () => {
    if (!from || !to) {
      toast.error("Selecciona fecha inicio y fin.");
      return;
    }
    if (new Date(from) > new Date(to)) {
      toast.error("La fecha inicio no puede ser posterior a la fecha fin.");
      return;
    }
    setAppliedRange({ from, to });
  };

  const setPreset = (days) => {
    const end = new Date();
    const start = new Date();
    if (days === "month") {
      start.setDate(1);
    } else {
      start.setDate(end.getDate() - days);
    }
    const range = {
      from: start.toISOString().slice(0, 10),
      to: end.toISOString().slice(0, 10),
    };
    setFrom(range.from);
    setTo(range.to);
    setAppliedRange(range);
  };

  const complianceRows = useMemo(() => {
    let rows = compliance?.rows || [];
    if (complianceFilter !== "all") {
      rows = rows.filter((row) => row.compliance === complianceFilter);
    }
    const q = search.trim().toLowerCase();
    if (q) {
      rows = rows.filter((row) =>
        [row.order_number, row.line, row.status, row.compliance]
          .join(" ")
          .toLowerCase()
          .includes(q),
      );
    }
    return rows;
  }, [compliance, complianceFilter, search]);

  const lineChartData = useMemo(
    () =>
      byLine.map((row) => ({
        name: row.name?.length > 18 ? `${row.name.slice(0, 18)}…` : row.name,
        fullName: row.name,
        planificado: Number(row.planned_quantity || 0),
        producido: Number(row.produced_quantity || 0),
        cumplimiento:
          row.planned_quantity > 0
            ? Number(((row.produced_quantity / row.planned_quantity) * 100).toFixed(1))
            : 0,
      })),
    [byLine],
  );

  const mermaSummary = useMemo(() => {
    const ordersWithMerma = merma.filter((order) =>
      (order.lines || []).some((line) => line.merma_percent != null && Math.abs(line.merma_percent) >= 1),
    );
    return {
      totalOrders: merma.length,
      withVariance: ordersWithMerma.length,
    };
  }, [merma]);

  const periodLabel = `${formatDateLabel(appliedRange.from)} — ${formatDateLabel(appliedRange.to)}`;

  return (
    <div className="p-6 space-y-5 max-w-[1400px]">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <h1 className="text-2xl font-semibold flex items-center gap-2">
            <BarChart3 className="h-6 w-6 text-blue-600" />
            Reportes operativos de producción
          </h1>
          <p className="text-sm text-muted-foreground mt-1">
            Cumplimiento de OP, merma de materiales y rendimiento por línea de producción.
          </p>
        </div>
        <Button variant="outline" size="sm" onClick={() => refetch()} disabled={isFetching || !companyId}>
          {isFetching ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
          <span className="ml-2">Actualizar</span>
        </Button>
      </div>

      <Alert className="border-blue-200 bg-blue-50/80 dark:border-blue-900 dark:bg-blue-950/20">
        <Info className="h-4 w-4 text-blue-600" />
        <AlertTitle className="text-blue-900 dark:text-blue-100">¿Qué muestra cada reporte?</AlertTitle>
        <AlertDescription className="text-blue-900/90 dark:text-blue-100/90 space-y-1">
          <p><strong>Cumplimiento:</strong> si las OP cerradas terminaron a tiempo o con atraso según la fecha planificada.</p>
          <p><strong>Merma:</strong> diferencia entre materiales esperados por fórmula y consumo real en OP consolidadas.</p>
          <p><strong>Por línea:</strong> volumen planificado vs producido agrupado por línea de producción.</p>
        </AlertDescription>
      </Alert>

      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-base flex items-center gap-2">
            <CalendarRange className="h-4 w-4" />
            Período de consulta
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex flex-wrap gap-3 items-end">
            <div className="space-y-1">
              <Label htmlFor="from">Desde</Label>
              <Input id="from" type="date" value={from} onChange={(e) => setFrom(e.target.value)} className="w-[160px]" />
            </div>
            <div className="space-y-1">
              <Label htmlFor="to">Hasta</Label>
              <Input id="to" type="date" value={to} onChange={(e) => setTo(e.target.value)} className="w-[160px]" />
            </div>
            <Button onClick={applyRange}>Aplicar</Button>
            <div className="flex flex-wrap gap-2">
              <Button variant="outline" size="sm" onClick={() => setPreset("month")}>Este mes</Button>
              <Button variant="outline" size="sm" onClick={() => setPreset(30)}>Últimos 30 días</Button>
              <Button variant="outline" size="sm" onClick={() => setPreset(90)}>Últimos 90 días</Button>
            </div>
          </div>
          <p className="text-xs text-muted-foreground">
            Consultando: <strong>{periodLabel}</strong>
          </p>
        </CardContent>
      </Card>

      {isLoading ? (
        <div className="flex items-center justify-center gap-2 py-20 text-muted-foreground">
          <Loader2 className="h-5 w-5 animate-spin" />
          Cargando reportes…
        </div>
      ) : (
        <Tabs defaultValue="compliance" className="space-y-4">
          <TabsList className="h-auto flex-wrap gap-1">
            <TabsTrigger value="compliance" className="gap-2">
              Cumplimiento
              {compliance?.rows?.length != null && (
                <Badge variant="secondary" className="ml-1 px-1.5 py-0 text-xs">{compliance.rows.length}</Badge>
              )}
            </TabsTrigger>
            <TabsTrigger value="merma" className="gap-2">
              Merma
              {merma.length > 0 && (
                <Badge variant="secondary" className="ml-1 px-1.5 py-0 text-xs">{merma.length}</Badge>
              )}
            </TabsTrigger>
            <TabsTrigger value="line" className="gap-2">
              Por línea
              {byLine.length > 0 && (
                <Badge variant="secondary" className="ml-1 px-1.5 py-0 text-xs">{byLine.length}</Badge>
              )}
            </TabsTrigger>
          </TabsList>

          <TabsContent value="compliance" className="space-y-4">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
              <SummaryCard
                label="% Cumplimiento"
                value={compliance?.summary?.compliance_percent != null ? `${compliance.summary.compliance_percent}%` : "—"}
                hint="OP consolidadas a tiempo"
                tone={compliance?.summary?.compliance_percent >= 80 ? "success" : "warning"}
                icon={CheckCircle2}
              />
              <SummaryCard
                label="A tiempo"
                value={compliance?.summary?.on_time ?? 0}
                hint="OP cerradas sin atraso"
                tone="success"
                icon={CheckCircle2}
              />
              <SummaryCard
                label="Con atraso"
                value={compliance?.summary?.late ?? 0}
                hint="OP cerradas fuera de plazo"
                tone={(compliance?.summary?.late ?? 0) > 0 ? "danger" : "default"}
                icon={AlertTriangle}
              />
              <SummaryCard
                label="Abiertas"
                value={compliance?.summary?.open ?? 0}
                hint="OP aún en curso"
                tone="info"
                icon={Clock}
              />
            </div>

            <Card>
              <CardHeader className="pb-3">
                <div className="flex flex-wrap items-center justify-between gap-3">
                  <CardTitle className="text-base">Detalle por orden de producción</CardTitle>
                  <div className="flex flex-wrap gap-2">
                    <div className="relative">
                      <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                      <Input
                        placeholder="Buscar OP, línea…"
                        value={search}
                        onChange={(e) => setSearch(e.target.value)}
                        className="pl-8 w-[200px]"
                      />
                    </div>
                    <select
                      value={complianceFilter}
                      onChange={(e) => setComplianceFilter(e.target.value)}
                      className="h-9 rounded-md border border-input bg-background px-3 text-sm"
                    >
                      <option value="all">Todos los estados</option>
                      <option value="on_time">A tiempo</option>
                      <option value="late">Atrasadas</option>
                      <option value="open">Abiertas</option>
                    </select>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                {complianceRows.length === 0 ? (
                  <EmptyState
                    title="Sin órdenes en este período"
                    description="No hay OP registradas con fecha planificada en el rango seleccionado. Prueba ampliar el período."
                    icon={Clock}
                  />
                ) : (
                  <div className="overflow-x-auto border rounded-lg">
                    <table className="w-full text-sm">
                      <thead>
                        <tr className="text-left border-b bg-muted/40">
                          <th className="p-3">OP</th>
                          <th className="p-3">Fecha planificada</th>
                          <th className="p-3">Estado OP</th>
                          <th className="p-3">Cumplimiento</th>
                          <th className="p-3">Línea</th>
                          <th className="p-3">Fin esperado</th>
                          <th className="p-3">Fin real</th>
                        </tr>
                      </thead>
                      <tbody>
                        {complianceRows.map((row) => (
                          <tr
                            key={row.id}
                            className={
                              row.compliance === "late"
                                ? "border-b bg-red-50/50 dark:bg-red-950/10"
                                : row.compliance === "on_time"
                                  ? "border-b"
                                  : "border-b bg-amber-50/30 dark:bg-amber-950/10"
                            }
                          >
                            <td className="p-3 font-medium font-mono text-xs">{row.order_number}</td>
                            <td className="p-3">{formatDateLabel(row.planned_date)}</td>
                            <td className="p-3">
                              <StatusBadge value={row.status} map={ORDER_STATUS_LABELS} />
                            </td>
                            <td className="p-3">
                              <StatusBadge value={row.compliance} map={COMPLIANCE_LABELS} />
                            </td>
                            <td className="p-3">{row.line || "—"}</td>
                            <td className="p-3 text-muted-foreground text-xs">
                              {row.expected_end_at ? formatDateLabel(row.expected_end_at.slice(0, 10)) : "—"}
                            </td>
                            <td className="p-3 text-muted-foreground text-xs">
                              {row.end_date ? formatDateLabel(row.end_date.slice(0, 10)) : "—"}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="merma" className="space-y-4">
            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
              <SummaryCard
                label="OP consolidadas"
                value={mermaSummary.totalOrders}
                hint="Con consumo registrado"
                icon={Factory}
              />
              <SummaryCard
                label="Con variación ≥ 1%"
                value={mermaSummary.withVariance}
                hint="Materiales fuera de lo esperado"
                tone={mermaSummary.withVariance > 0 ? "warning" : "default"}
                icon={TrendingDown}
              />
            </div>

            {merma.length === 0 ? (
              <Card>
                <CardContent className="pt-6">
                  <EmptyState
                    title="Sin datos de merma"
                    description="La merma se calcula sobre OP consolidadas en el período. Si no hay OP cerradas, este reporte aparecerá vacío."
                    icon={TrendingDown}
                  />
                </CardContent>
              </Card>
            ) : (
              <Accordion type="multiple" className="space-y-2">
                {merma.map((order) => {
                  const lines = order.lines || [];
                  const maxMerma = lines.reduce(
                    (max, line) => Math.max(max, Math.abs(line.merma_percent ?? 0)),
                    0,
                  );

                  return (
                    <AccordionItem key={order.idproduction_order} value={String(order.idproduction_order)} className="border rounded-lg px-4">
                      <AccordionTrigger className="hover:no-underline py-3">
                        <div className="flex flex-wrap items-center gap-3 text-left">
                          <span className="font-medium font-mono">{order.order_number}</span>
                          <Badge variant="outline">{lines.length} materiales</Badge>
                          <span className="text-xs text-muted-foreground">
                            Producido: {order.produced_quantity ?? 0}
                          </span>
                          {maxMerma >= 1 && (
                            <MermaBadge percent={maxMerma} />
                          )}
                        </div>
                      </AccordionTrigger>
                      <AccordionContent>
                        <div className="overflow-x-auto pb-3">
                          <table className="w-full text-sm">
                            <thead>
                              <tr className="text-left border-b bg-muted/30">
                                <th className="p-2">Material</th>
                                <th className="p-2">SKU</th>
                                <th className="p-2 text-right">Esperado</th>
                                <th className="p-2 text-right">Consumido</th>
                                <th className="p-2 text-right">Diferencia</th>
                                <th className="p-2 text-right">Merma %</th>
                              </tr>
                            </thead>
                            <tbody>
                              {lines.map((line) => {
                                const product = productMap[String(line.idproduct)];
                                return (
                                  <tr key={line.idproduct} className="border-b last:border-b-0">
                                    <td className="p-2">{product?.name || `Producto #${line.idproduct}`}</td>
                                    <td className="p-2 font-mono text-xs text-muted-foreground">
                                      {product?.sku || "—"}
                                    </td>
                                    <td className="p-2 text-right tabular-nums">{line.expected}</td>
                                    <td className="p-2 text-right tabular-nums">{line.actual}</td>
                                    <td className="p-2 text-right tabular-nums">{line.merma ?? "—"}</td>
                                    <td className="p-2 text-right">
                                      <MermaBadge percent={line.merma_percent} />
                                    </td>
                                  </tr>
                                );
                              })}
                            </tbody>
                          </table>
                        </div>
                      </AccordionContent>
                    </AccordionItem>
                  );
                })}
              </Accordion>
            )}
          </TabsContent>

          <TabsContent value="line" className="space-y-4">
            {byLine.length === 0 ? (
              <Card>
                <CardContent className="pt-6">
                  <EmptyState
                    title="Sin líneas de producción"
                    description="No hay líneas configuradas o no hubo OP en el período seleccionado."
                    icon={Factory}
                  />
                </CardContent>
              </Card>
            ) : (
              <>
                <Card>
                  <CardHeader>
                    <CardTitle className="text-base">Planificado vs producido por línea</CardTitle>
                  </CardHeader>
                  <CardContent className="h-[320px]">
                    <ResponsiveContainer width="100%" height="100%">
                      <BarChart data={lineChartData} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
                        <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                        <XAxis dataKey="name" tick={{ fontSize: 11 }} />
                        <YAxis tick={{ fontSize: 11 }} />
                        <Tooltip
                          formatter={(value) => Number(value).toLocaleString("es-CL")}
                          labelFormatter={(_, payload) => payload?.[0]?.payload?.fullName || ""}
                        />
                        <Legend />
                        <Bar dataKey="planificado" fill="#3b82f6" name="Planificado" radius={[4, 4, 0, 0]} />
                        <Bar dataKey="producido" fill="#22c55e" name="Producido" radius={[4, 4, 0, 0]} />
                      </BarChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <CardTitle className="text-base">Resumen por línea</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="overflow-x-auto border rounded-lg">
                      <table className="w-full text-sm">
                        <thead>
                          <tr className="text-left border-b bg-muted/40">
                            <th className="p-3">Línea</th>
                            <th className="p-3">Tipo</th>
                            <th className="p-3 text-right">Órdenes</th>
                            <th className="p-3 text-right">Consolidadas</th>
                            <th className="p-3 text-right">Planificado</th>
                            <th className="p-3 text-right">Producido</th>
                            <th className="p-3 text-right">Cumplimiento</th>
                          </tr>
                        </thead>
                        <tbody>
                          {byLine.map((row) => {
                            const pct =
                              row.planned_quantity > 0
                                ? ((row.produced_quantity / row.planned_quantity) * 100).toFixed(1)
                                : null;
                            return (
                              <tr key={row.idproduction_line} className="border-b">
                                <td className="p-3 font-medium">{row.name}</td>
                                <td className="p-3">
                                  <Badge variant="outline">{row.line_type || "—"}</Badge>
                                </td>
                                <td className="p-3 text-right tabular-nums">{row.orders}</td>
                                <td className="p-3 text-right tabular-nums">{row.consolidated ?? 0}</td>
                                <td className="p-3 text-right tabular-nums">{row.planned_quantity}</td>
                                <td className="p-3 text-right tabular-nums">{row.produced_quantity}</td>
                                <td className="p-3 text-right">
                                  {pct != null ? (
                                    <Badge
                                      variant="outline"
                                      className={
                                        Number(pct) >= 90
                                          ? "bg-emerald-100 text-emerald-800 border-emerald-200"
                                          : Number(pct) >= 70
                                            ? "bg-amber-100 text-amber-900 border-amber-200"
                                            : "bg-red-100 text-red-800 border-red-200"
                                      }
                                    >
                                      {pct}%
                                    </Badge>
                                  ) : (
                                    "—"
                                  )}
                                </td>
                              </tr>
                            );
                          })}
                        </tbody>
                      </table>
                    </div>
                  </CardContent>
                </Card>
              </>
            )}
          </TabsContent>
        </Tabs>
      )}
    </div>
  );
}