import React, { useMemo, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";

import { OcBookAPI } from "@/apis/OcBookAPI";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
import { Textarea } from "@/components/ui/textarea";
import { useCompanyStore } from "@/hooks/store/useCompanyStore";

const MATCH_DECISION_OPTIONS = [
  {
    value: "keep_pending",
    title: "No contabilizar en este proceso",
    description: "La OC queda en pendiente de validación para revisión manual.",
  },
  {
    value: "account_against_oc",
    title: "Contabilizar con datos de la Orden de Compra",
    description: "Envía la OC a contabilización usando la referencia de la OC.",
  },
  {
    value: "account_against_contract",
    title: "Contabilizar contra contrato vigente del proveedor",
    description: "Solo contabiliza si existe contrato activo y la diferencia está dentro del margen.",
  },
];

const STATUS_LABEL = {
  issued: "Emitida",
  pending_validation: "Pendiente validación",
  validated: "Validada",
  paid: "Pagada",
  accounted: "Contabilizada",
  inventoried: "Inventariada",
};

const STATUS_BADGE_CLASS = {
  issued: "bg-slate-100 text-slate-700 hover:bg-slate-100",
  pending_validation: "bg-orange-100 text-orange-700 hover:bg-orange-100",
  validated: "bg-sky-100 text-sky-700 hover:bg-sky-100",
  paid: "bg-indigo-100 text-indigo-700 hover:bg-indigo-100",
  accounted: "bg-emerald-100 text-emerald-700 hover:bg-emerald-100",
  inventoried: "bg-cyan-100 text-cyan-700 hover:bg-cyan-100",
};

export default function OCBookPendingOrders() {
  const queryClient = useQueryClient();
  const { selectedCompany } = useCompanyStore();
  const companyId = String(selectedCompany?.id ?? "");
  const [status, setStatus] = useState("all");
  const [dateFrom, setDateFrom] = useState("");
  const [dateTo, setDateTo] = useState("");
  const [drawerOrder, setDrawerOrder] = useState(null);
  const [candidateSelected, setCandidateSelected] = useState(null);
  const [docType, setDocType] = useState("33");
  const [folioFilter, setFolioFilter] = useState("");
  const [showDecisionDialog, setShowDecisionDialog] = useState(false);
  const [selectedDecision, setSelectedDecision] = useState("keep_pending");
  const [authorizeSectorized, setAuthorizeSectorized] = useState(false);
  const [decisionObservations, setDecisionObservations] = useState("");
  const [resolutionData, setResolutionData] = useState(null);

  const filters = useMemo(
    () => ({
      ...(status !== "all" ? { status } : {}),
      ...(dateFrom ? { date_from: dateFrom } : {}),
      ...(dateTo ? { date_to: dateTo } : {}),
    }),
    [status, dateFrom, dateTo],
  );

  const ordersQuery = useQuery({
    queryKey: ["oc-book-match-orders", companyId, filters],
    queryFn: () => OcBookAPI.getMatchOrders(companyId, filters),
    enabled: Boolean(companyId),
  });

  const candidatesQuery = useQuery({
    queryKey: ["oc-book-match-candidates", companyId, drawerOrder?.id, docType, folioFilter],
    queryFn: () =>
      OcBookAPI.getMatchCandidates(companyId, String(drawerOrder?.id), {
        document_type: docType,
        folio: folioFilter || undefined,
      }),
    enabled: Boolean(companyId && drawerOrder?.id),
  });

  const confirmMatchMutation = useMutation({
    mutationFn: () =>
      OcBookAPI.confirmMatch(companyId, String(drawerOrder?.id), String(candidateSelected?.id), {
        accounting_decision: selectedDecision,
        authorize_sectorized: authorizeSectorized,
        observations: decisionObservations.trim(),
      }),
    onSuccess: async (result) => {
      await queryClient.invalidateQueries({ queryKey: ["oc-book-match-orders", companyId] });
      await queryClient.invalidateQueries({ queryKey: ["oc-book-tracking", companyId] });
      await queryClient.invalidateQueries({ queryKey: ["oc-book-validation", companyId] });
      await queryClient.invalidateQueries({ queryKey: ["oc-sectorized-authorizations", companyId] });
      await queryClient.invalidateQueries({ queryKey: ["oc-sectorized-panel", companyId] });
      await queryClient.invalidateQueries({ queryKey: ["oc-accounted-document-differences", companyId] });
      await queryClient.invalidateQueries({ queryKey: ["oc-book-bitacora", companyId] });

      setShowDecisionDialog(false);
      setDrawerOrder(null);
      setCandidateSelected(null);
      setDecisionObservations("");
      setAuthorizeSectorized(false);
      setSelectedDecision("keep_pending");
      setResolutionData(result ?? null);
      toast.success("Validación de match ejecutada correctamente.");
    },
    onError: () => toast.error("No se pudo confirmar la relación."),
  });

  return (
    <div className="p-4 lg:p-8 space-y-8">
      <div>
        <h1 className="text-3xl font-bold text-gradient">Gestión de Match de Órdenes de Compra</h1>
        <p className="text-gray-600 mt-1">{selectedCompany?.name} • Relación entre OC y documentos tributarios.</p>
      </div>

      <Card className="glass-card border-white/20">
        <CardContent className="p-4 space-y-4">
          <h2 className="text-lg font-semibold">Filtros de Búsqueda</h2>
          <div className="grid md:grid-cols-4 gap-3 items-end">
            <div className="space-y-1">
              <Label>Estado</Label>
              <Select value={status} onValueChange={setStatus}>
                <SelectTrigger><SelectValue placeholder="Todos" /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Todos</SelectItem>
                  <SelectItem value="issued">Pendientes</SelectItem>
                  <SelectItem value="pending_validation">Pendiente Validación</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-1">
              <Label>Fecha Desde</Label>
              <Input type="date" value={dateFrom} onChange={(e) => setDateFrom(e.target.value)} />
            </div>
            <div className="space-y-1">
              <Label>Fecha Hasta</Label>
              <Input type="date" value={dateTo} onChange={(e) => setDateTo(e.target.value)} />
            </div>
            <Button className="bg-blue-600 hover:bg-blue-700">Filtrar</Button>
          </div>
        </CardContent>
      </Card>

      <Card className="glass-card border-white/20">
        <CardContent className="p-4">
          <h2 className="text-lg font-semibold mb-3">Libro de Órdenes de Compra</h2>
          <div className="overflow-auto rounded-xl border border-slate-100">
            <table className="w-full min-w-[980px]">
              <thead className="bg-slate-50">
                <tr>
                  <th className="p-3 text-left text-xs font-semibold text-slate-600">Fecha Emisión</th>
                  <th className="p-3 text-left text-xs font-semibold text-slate-600">Folio (Tipo)</th>
                  <th className="p-3 text-left text-xs font-semibold text-slate-600">RUT</th>
                  <th className="p-3 text-left text-xs font-semibold text-slate-600">Razón Social</th>
                  <th className="p-3 text-right text-xs font-semibold text-slate-600">Monto</th>
                  <th className="p-3 text-left text-xs font-semibold text-slate-600">Estado</th>
                  <th className="p-3 text-left text-xs font-semibold text-slate-600">Acciones</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {ordersQuery.isLoading ? (
                  <tr><td className="p-4 text-center text-gray-600" colSpan={7}>Cargando...</td></tr>
                ) : (ordersQuery.data ?? []).length === 0 ? (
                  <tr><td className="p-4 text-center text-gray-600" colSpan={7}>Sin registros</td></tr>
                ) : (
                  (ordersQuery.data ?? []).map((row) => (
                    <tr key={row.id}>
                      <td className="p-3 text-sm">{row.emission_date}</td>
                      <td className="p-3 text-sm">{row.folio} ({row.document_type})</td>
                      <td className="p-3 text-sm">{row.supplier_rut}</td>
                      <td className="p-3 text-sm">{row.supplier_name}</td>
                      <td className="p-3 text-sm text-right">${Number(row.total ?? 0).toLocaleString("es-CL")}</td>
                      <td className="p-3 text-sm">
                        <Badge className={STATUS_BADGE_CLASS[row.status] ?? "bg-slate-100 text-slate-700 hover:bg-slate-100"}>
                          {STATUS_LABEL[row.status] ?? row.status}
                        </Badge>
                      </td>
                      <td className="p-3">
                        <Button size="sm" variant="outline" onClick={() => setDrawerOrder(row)}>
                          Gestionar Match
                        </Button>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

      <Sheet open={Boolean(drawerOrder)} onOpenChange={(open) => !open && setDrawerOrder(null)}>
        <SheetContent side="right" className="sm:max-w-3xl w-full overflow-y-auto">
          <SheetHeader>
            <SheetTitle>Gestión de Match Orden de Compra</SheetTitle>
            <SheetDescription>Relaciona la OC con la factura correspondiente.</SheetDescription>
          </SheetHeader>
          {drawerOrder ? (
            <div className="mt-4 space-y-4">
              <Card>
                <CardContent className="p-4 grid md:grid-cols-2 gap-2 text-sm">
                  <div><span className="text-gray-500">Proveedor:</span> {drawerOrder.supplier_name} ({drawerOrder.supplier_rut})</div>
                  <div><span className="text-gray-500">Fecha:</span> {drawerOrder.emission_date}</div>
                  <div><span className="text-gray-500">OC N°:</span> {drawerOrder.folio}</div>
                  <div><span className="text-gray-500">Total OC:</span> ${Number(drawerOrder.total ?? 0).toLocaleString("es-CL")}</div>
                </CardContent>
              </Card>

              <div className="grid md:grid-cols-3 gap-3">
                <div className="space-y-1">
                  <Label>Tipo Documento</Label>
                  <Select value={docType} onValueChange={setDocType}>
                    <SelectTrigger><SelectValue /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="33">Factura Electrónica (33)</SelectItem>
                      <SelectItem value="34">Factura Exenta (34)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-1">
                  <Label>Folio</Label>
                  <Input value={folioFilter} onChange={(e) => setFolioFilter(e.target.value)} placeholder="Buscar por folio" />
                </div>
              </div>

              <div className="overflow-auto">
                <table className="w-full min-w-[700px] border-collapse">
                  <thead>
                    <tr>
                      <th className="border p-2 text-left bg-slate-50">Fecha</th>
                      <th className="border p-2 text-left bg-slate-50">Folio</th>
                      <th className="border p-2 text-right bg-slate-50">Monto</th>
                      <th className="border p-2 text-center bg-slate-50">Seleccionar</th>
                    </tr>
                  </thead>
                  <tbody>
                    {candidatesQuery.isLoading ? (
                      <tr><td colSpan={4} className="border p-3 text-center text-gray-600">Cargando...</td></tr>
                    ) : (candidatesQuery.data ?? []).length === 0 ? (
                      <tr><td colSpan={4} className="border p-3 text-center text-gray-600">Sin facturas candidatas</td></tr>
                    ) : (
                      (candidatesQuery.data ?? []).map((candidate) => (
                        <tr key={candidate.id}>
                          <td className="border p-2">{candidate.emission_date}</td>
                          <td className="border p-2">{candidate.folio}</td>
                          <td className="border p-2 text-right">${Number(candidate.amount ?? 0).toLocaleString("es-CL")}</td>
                          <td className="border p-2 text-center">
                            <input
                              type="radio"
                              checked={String(candidateSelected?.id ?? "") === String(candidate.id)}
                              onChange={() => setCandidateSelected(candidate)}
                            />
                          </td>
                        </tr>
                      ))
                    )}
                  </tbody>
                </table>
              </div>

              <div className="flex justify-end">
                <Button
                  className="bg-green-600 hover:bg-green-700"
                  disabled={!candidateSelected || confirmMatchMutation.isPending}
                  onClick={() => setShowDecisionDialog(true)}
                >
                  Confirmar y validar OC
                </Button>
              </div>
            </div>
          ) : null}
        </SheetContent>
      </Sheet>

      <Dialog open={showDecisionDialog} onOpenChange={setShowDecisionDialog}>
        <DialogContent className="sm:max-w-[640px]">
          <DialogHeader>
            <DialogTitle>Confirmar y validar Orden de Compra</DialogTitle>
            <DialogDescription>
              Seleccione cómo se debe resolver la contabilización y si autoriza el inventario sectorizado en este mismo proceso.
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-3 text-sm">
            <div className="rounded-lg border border-slate-200 bg-slate-50 p-3">
              <p><span className="font-semibold">Total OC:</span> ${Number(drawerOrder?.total ?? 0).toLocaleString("es-CL")}</p>
              <p><span className="font-semibold">Total Factura:</span> ${Number(candidateSelected?.amount ?? 0).toLocaleString("es-CL")}</p>
              <p>
                <span className="font-semibold">Diferencia:</span>{" "}
                ${Math.abs(Number(drawerOrder?.total ?? 0) - Number(candidateSelected?.amount ?? 0)).toLocaleString("es-CL")}
              </p>
            </div>

            <div className="space-y-2">
              <Label className="text-sm font-semibold">Contabilización de factura</Label>
              <div className="space-y-2">
                {MATCH_DECISION_OPTIONS.map((option) => (
                  <label
                    key={option.value}
                    className="flex items-start gap-2 rounded-md border border-slate-200 p-3 cursor-pointer hover:bg-slate-50"
                  >
                    <input
                      type="radio"
                      className="mt-1"
                      name="match-decision"
                      value={option.value}
                      checked={selectedDecision === option.value}
                      onChange={() => setSelectedDecision(option.value)}
                    />
                    <span>
                      <span className="block font-medium text-slate-900">{option.title}</span>
                      <span className="block text-xs text-slate-600">{option.description}</span>
                    </span>
                  </label>
                ))}
              </div>
            </div>

            <label className="flex items-start gap-2 rounded-md border border-slate-200 p-3 cursor-pointer hover:bg-slate-50">
              <input
                type="checkbox"
                className="mt-1"
                checked={authorizeSectorized}
                onChange={(e) => setAuthorizeSectorized(e.target.checked)}
              />
              <span>
                <span className="block font-medium text-slate-900">Autorizar para Inventario Sectorizado</span>
                <span className="block text-xs text-slate-600">Si queda contabilizada en este paso, también quedará inventariada.</span>
              </span>
            </label>

            <div className="space-y-1">
              <Label>Observaciones (opcional)</Label>
              <Textarea
                value={decisionObservations}
                onChange={(e) => setDecisionObservations(e.target.value)}
                placeholder="Registre contexto de esta decisión..."
                className="bg-white min-h-[90px]"
              />
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setShowDecisionDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={() => confirmMatchMutation.mutate()} disabled={confirmMatchMutation.isPending}>
              {confirmMatchMutation.isPending ? "Procesando..." : "Sí, continuar"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={Boolean(resolutionData)} onOpenChange={(open) => !open && setResolutionData(null)}>
        <DialogContent className="sm:max-w-[560px]">
          <DialogHeader>
            <DialogTitle>Resultado de validación OC</DialogTitle>
            <DialogDescription>
              Revisión completada. Se aplicó la lógica de contabilización según la opción seleccionada.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-2 text-sm">
            <p>
              <span className="font-semibold">Estado final OC:</span>{" "}
              {STATUS_LABEL[resolutionData?.order?.status] ?? resolutionData?.order?.status ?? "—"}
            </p>
            <p>
              <span className="font-semibold">Resolución:</span> {resolutionData?.resolution_reason ?? "—"}
            </p>
            <p>
              <span className="font-semibold">Diferencia detectada:</span>{" "}
              ${Math.abs(Number(resolutionData?.difference ?? 0)).toLocaleString("es-CL")}
            </p>
            {resolutionData?.contract_check?.has_contract ? (
              <p>
                <span className="font-semibold">Contrato:</span>{" "}
                ${Number(resolutionData?.contract_check?.contract_amount ?? 0).toLocaleString("es-CL")} ·
                tolerancia {Number(resolutionData?.contract_check?.tolerance_percent ?? 0).toLocaleString("es-CL")}%
              </p>
            ) : (
              <p>
                <span className="font-semibold">Contrato:</span> Sin contrato vigente para evaluación automática.
              </p>
            )}
            <p>
              <span className="font-semibold">Inventario sectorizado:</span>{" "}
              {resolutionData?.authorize_sectorized_applied ? "Autorizado en este paso" : "No aplicado en este paso"}
            </p>
          </div>
          <DialogFooter>
            <Button onClick={() => setResolutionData(null)}>Entendido</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}