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

import { OcBookAPI } from "@/apis/OcBookAPI";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
import { useCompanyStore } from "@/hooks/store/useCompanyStore";

const statusClass = {
  validated: "bg-sky-100 text-sky-700 hover:bg-sky-100",
  pending_validation: "bg-orange-100 text-orange-700 hover:bg-orange-100",
  accounted: "bg-emerald-100 text-emerald-700 hover:bg-emerald-100",
  inventoried: "bg-cyan-100 text-cyan-700 hover:bg-cyan-100",
};

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

export default function OCBookBitacora() {
  const { selectedCompany } = useCompanyStore();
  const companyId = String(selectedCompany?.id ?? "");
  const [dateFrom, setDateFrom] = useState("");
  const [dateTo, setDateTo] = useState("");
  const [drawerOrderId, setDrawerOrderId] = useState(null);

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

  const bitacoraQuery = useQuery({
    queryKey: ["oc-book-bitacora", companyId, filters],
    queryFn: () => OcBookAPI.getBitacora(companyId, filters),
    enabled: Boolean(companyId),
  });

  const detailQuery = useQuery({
    queryKey: ["oc-book-bitacora-detail", companyId, drawerOrderId],
    queryFn: () => OcBookAPI.getBitacoraDetail(companyId, String(drawerOrderId)),
    enabled: Boolean(companyId && drawerOrderId),
  });

  return (
    <div className="p-4 lg:p-8 space-y-8">
      <div>
        <h1 className="text-3xl font-bold text-gradient">Bitácora de Órdenes de Compra</h1>
        <p className="text-gray-600 mt-1">{selectedCompany?.name} • Historial detallado de cambios.</p>
      </div>

      <Card className="glass-card border-white/20">
        <CardContent className="p-4 space-y-4">
          <h2 className="text-lg font-semibold">Filtros</h2>
          <div className="grid md:grid-cols-3 gap-3 items-end">
            <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</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-left text-xs font-semibold text-slate-600">Solicitado por</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">Ver Bitácora</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {bitacoraQuery.isLoading ? (
                  <tr><td className="p-4 text-center text-gray-600" colSpan={8}>Cargando...</td></tr>
                ) : (bitacoraQuery.data ?? []).length === 0 ? (
                  <tr><td className="p-4 text-center text-gray-600" colSpan={8}>Sin registros</td></tr>
                ) : (
                  (bitacoraQuery.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">{row.requested_by}</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={statusClass[row.status] ?? "bg-slate-100 text-slate-700 hover:bg-slate-100"}>
                          {statusLabel[row.status] ?? row.status}
                        </Badge>
                      </td>
                      <td className="p-3">
                        <Button
                          variant="outline"
                          size="sm"
                          disabled={false}
                          onClick={() => setDrawerOrderId(String(row.id))}
                        >
                          Ver
                        </Button>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

      <Sheet open={Boolean(drawerOrderId)} onOpenChange={(open) => !open && setDrawerOrderId(null)}>
        <SheetContent side="right" className="sm:max-w-3xl w-full overflow-y-auto">
          <SheetHeader>
            <SheetTitle>Bitácora de Orden de Compra</SheetTitle>
            <SheetDescription>Registro histórico de eventos y cambios asociados al documento.</SheetDescription>
          </SheetHeader>
          <div className="mt-4 space-y-4">
            <Card>
              <CardHeader><CardTitle className="text-base">Información General</CardTitle></CardHeader>
              <CardContent className="grid md:grid-cols-2 gap-2 text-sm">
                <div><span className="text-gray-500">Proveedor</span><p className="font-medium">{detailQuery.data?.order?.supplier_name} ({detailQuery.data?.order?.supplier_rut})</p></div>
                <div><span className="text-gray-500">Fecha</span><p className="font-medium">{detailQuery.data?.order?.emission_date}</p></div>
                <div><span className="text-gray-500">Folio</span><p className="font-medium">{detailQuery.data?.order?.folio} ({detailQuery.data?.order?.document_type})</p></div>
                <div><span className="text-gray-500">Estado actual</span><p className="font-medium">{statusLabel[detailQuery.data?.order?.status] ?? "-"}</p></div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader><CardTitle className="text-base">Historial de Movimientos</CardTitle></CardHeader>
              <CardContent className="space-y-3">
                {detailQuery.isLoading ? (
                  <p className="text-sm text-gray-600">Cargando historial...</p>
                ) : (detailQuery.data?.logs ?? []).length === 0 ? (
                  <p className="text-sm text-gray-600">Sin eventos registrados.</p>
                ) : (
                  (detailQuery.data?.logs ?? []).map((log) => (
                    <div key={log.id} className="rounded-md border p-3">
                      <p className="font-semibold">{log.event_type}</p>
                      <p className="text-sm text-gray-700">{log.description}</p>
                      <p className="text-xs text-gray-500 mt-1">
                        Responsable: {log.performed_by ?? "N/A"} | Fecha: {log.event_at ?? "-"}
                      </p>
                    </div>
                  ))
                )}
              </CardContent>
            </Card>
          </div>
        </SheetContent>
      </Sheet>
    </div>
  );
}