// @ts-nocheck
import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  MessageSquare,
  Mail,
  ShieldCheck,
  Printer,
  ChevronDown,
  ChevronUp,
  ClipboardCheck,
  Filter,
  Loader2,
  Package,
  X,
} from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import type {
  CashRegisterSessionRecord,
  CashRegisterSellerRecord,
} from "@/types/modules/cashRegister";

interface Props {
  sessions: CashRegisterSessionRecord[];
  sellers: CashRegisterSellerRecord[];
  isLoading: boolean;
  filters: {
    idseller?: string;
    status?: string;
    opening_date_from?: string;
    opening_date_to?: string;
  };
  onFilterChange: (filters: Props["filters"]) => void;
  onReviewSession?: (
    sessionId: string,
    reviewNotes?: string,
  ) => Promise<unknown>;
  isReviewingSession?: boolean;
}

const isAdminOrSupervisor = (user) => {
  const type = Number(user?.iduser_type ?? user?.iduserType ?? 0);
  return type === 1 || type === 2 || type === 4;
};

export default function CashSessionHistory({
  sessions,
  sellers,
  isLoading,
  filters,
  onFilterChange,
  onReviewSession,
  isReviewingSession = false,
}: Props) {
  const { user } = useAuth();
  const canReview = isAdminOrSupervisor(user);
  const [expandedPayment, setExpandedPayment] = useState<number | null>(null);
  const [expandedId, setExpandedId] = useState<string | null>(null);
  const [showFilters, setShowFilters] = useState(false);

  const [showReviewDialog, setShowReviewDialog] = useState(false);
  const [reviewSessionId, setReviewSessionId] = useState<string>("");
  const [reviewNotes, setReviewNotes] = useState("");

  const hasActiveFilters = Object.values(filters).some(Boolean);

  const clearFilters = () => {
    onFilterChange({});
  };

  const openReviewDialog = (sessionId: string) => {
    setReviewSessionId(sessionId);
    setReviewNotes("");
    setShowReviewDialog(true);
  };

  const handleConfirmReview = async () => {
    if (!onReviewSession || !reviewSessionId) return;
    try {
      await onReviewSession(reviewSessionId, reviewNotes || undefined);
      setShowReviewDialog(false);
      setReviewSessionId("");
      setReviewNotes("");
    } catch {
      // El hook muestra el toast de error
    }
  };

  const reviewStatusMeta = (status: string | null | undefined) => {
    if (status === "reviewed")
      return { label: "Revisada", className: "bg-green-100 text-green-800" };
    if (status === "pending_review")
      return {
        label: "Pendiente de revisión",
        className: "bg-amber-100 text-amber-800",
      };
    return null;
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <Button
          variant="outline"
          size="sm"
          onClick={() => setShowFilters(!showFilters)}
          className={hasActiveFilters ? "border-blue-300 text-blue-700" : ""}
        >
          <Filter className="w-4 h-4 mr-1" />
          Filtros
          {hasActiveFilters && (
            <Badge className="ml-2 bg-blue-100 text-blue-800 text-xs px-1.5">
              Activos
            </Badge>
          )}
        </Button>
        {hasActiveFilters && (
          <Button variant="ghost" size="sm" onClick={clearFilters}>
            <X className="w-4 h-4 mr-1" />
            Limpiar
          </Button>
        )}
      </div>

      {showFilters && (
        <Card>
          <CardContent className="pt-4 pb-4">
            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
              <div>
                <Label className="text-xs">Vendedor</Label>
                <Select
                  value={filters.idseller || "all"}
                  onValueChange={(v) =>
                    onFilterChange({
                      ...filters,
                      idseller: v === "all" ? undefined : v,
                    })
                  }
                >
                  <SelectTrigger className="mt-1">
                    <SelectValue placeholder="Todos" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Todos</SelectItem>
                    {sellers.map((s) => (
                      <SelectItem key={s.id} value={String(s.id)}>
                        {s.full_name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-xs">Estado</Label>
                <Select
                  value={filters.status || "all"}
                  onValueChange={(v) =>
                    onFilterChange({
                      ...filters,
                      status: v === "all" ? undefined : v,
                    })
                  }
                >
                  <SelectTrigger className="mt-1">
                    <SelectValue placeholder="Todos" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Todos</SelectItem>
                    <SelectItem value="open">Abierta</SelectItem>
                    <SelectItem value="closed">Cerrada</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-xs">Desde</Label>
                <Input
                  type="date"
                  value={filters.opening_date_from || ""}
                  onChange={(e) =>
                    onFilterChange({
                      ...filters,
                      opening_date_from: e.target.value || undefined,
                    })
                  }
                  className="mt-1"
                />
              </div>
              <div>
                <Label className="text-xs">Hasta</Label>
                <Input
                  type="date"
                  value={filters.opening_date_to || ""}
                  onChange={(e) =>
                    onFilterChange({
                      ...filters,
                      opening_date_to: e.target.value || undefined,
                    })
                  }
                  className="mt-1"
                />
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Historial de Turnos</CardTitle>
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <div className="flex justify-center py-8">
              <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
            </div>
          ) : sessions.length === 0 ? (
            <p className="text-center text-gray-500 py-8 text-sm">
              No hay turnos registrados
            </p>
          ) : (
            <div className="space-y-2">
              {sessions.map((session) => {
                const isExpanded = expandedId === String(session.id);
                const diff = Number(session.difference ?? 0);
                const diffColor =
                  diff === 0
                    ? "text-emerald-600"
                    : diff > 0
                      ? "text-blue-600"
                      : "text-red-600";
                const reviewMeta = reviewStatusMeta(session.review_status);
                const canBeReviewed =
                  canReview &&
                  session.status === "closed" &&
                  session.review_status === "pending_review";

                return (
                  <div
                    key={session.id}
                    className="border rounded-lg overflow-hidden"
                  >
                    <div
                      className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50"
                      onClick={() =>
                        setExpandedId(isExpanded ? null : String(session.id))
                      }
                    >
                      <div className="flex items-center gap-4 min-w-0">
                        <div className="min-w-0">
                          <div className="flex items-center gap-2 mb-0.5 flex-wrap">
                            <span className="font-semibold text-sm truncate">
                              {session.seller_name}
                            </span>
                            <Badge
                              className={`text-xs ${
                                session.status === "open"
                                  ? "bg-emerald-100 text-emerald-800"
                                  : "bg-gray-100 text-gray-800"
                              }`}
                            >
                              {session.status === "open"
                                ? "Abierta"
                                : "Cerrada"}
                            </Badge>
                            {reviewMeta && (
                              <Badge
                                className={`text-xs ${reviewMeta.className}`}
                              >
                                {reviewMeta.label}
                              </Badge>
                            )}
                          </div>
                          <p className="text-xs text-gray-500">
                            {session.session_number} &middot;{" "}
                            {new Date(session.opening_date!).toLocaleDateString(
                              "es-CL",
                            )}
                          </p>
                        </div>
                      </div>
                      <div className="flex items-center gap-3">
                        {session.status === "closed" && (
                          <span
                            className={`text-sm font-semibold ${diffColor}`}
                          >
                            Dif: ${diff.toLocaleString("es-CL")}
                            {session.status === "closed" && (
                              <Badge
                                className={`text-xs ${
                                  Number(session.difference) === 0
                                    ? "bg-emerald-100 text-emerald-800"
                                    : Number(session.difference) > 0
                                      ? "bg-blue-100 text-blue-800"
                                      : "bg-red-100 text-red-800"
                                }`}
                              >
                                {Number(session.difference) === 0
                                  ? "Cuadrado"
                                  : Number(session.difference) > 0
                                    ? "Sobrante"
                                    : "Faltante"}
                              </Badge>
                            )}
                          </span>
                        )}
                        {canBeReviewed && (
                          <Button
                            size="sm"
                            variant="outline"
                            disabled={isReviewingSession}
                            className="border-green-300 text-green-700 hover:bg-green-50 gap-1"
                            onClick={(e) => {
                              e.stopPropagation();
                              openReviewDialog(String(session.id));
                            }}
                          >
                            <ClipboardCheck className="w-4 h-4" />
                            Revisar
                          </Button>
                        )}
                        {isExpanded ? (
                          <ChevronUp className="w-4 h-4 text-gray-400" />
                        ) : (
                          <ChevronDown className="w-4 h-4 text-gray-400" />
                        )}
                      </div>
                    </div>

                    {isExpanded && (
                      <div className="border-t bg-gray-50/30 p-6">
                        {" "}
                        {/* Fondo más sutil estilo Apple */}
                        {/* 1. SECCIÓN DE MÉTRICAS PRINCIPALES (Bento Grid Style) */}
                        {session.status === "closed" && (
                          <div className="mb-8">
                            <h4 className="text-xs font-bold uppercase tracking-wider text-gray-400 mb-4 ml-1">
                              Balance de Cierre
                            </h4>
                            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                              {/* Card: Ingresos Totales */}
                              <div className="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
                                <p className="text-xs font-medium text-gray-500 mb-1">
                                  Ventas Totales
                                </p>
                                <p className="text-xl font-bold text-gray-900">
                                  $
                                  {Number(
                                    session.total_sales || 0,
                                  ).toLocaleString("es-CL")}
                                </p>
                                <p className="text-[10px] text-gray-400 mt-1">
                                  {session.total_transactions ?? 0} operaciones
                                </p>
                              </div>

                              {/* Card: Esperado */}
                              <div className="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm">
                                <p className="text-xs font-medium text-gray-500 mb-1">
                                  Efectivo Esperado
                                </p>
                                <p className="text-xl font-bold text-gray-900">
                                  $
                                  {Number(
                                    session.expected_cash || 0,
                                  ).toLocaleString("es-CL")}
                                </p>
                                <p className="text-[10px] text-gray-400 mt-1">
                                  Suma de Apertura + Ventas
                                </p>
                              </div>

                              {/* Card: Real */}
                              <div className="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm">
                                <p className="text-xs font-medium text-gray-500 mb-1">
                                  Efectivo Real
                                </p>
                                <p className="text-xl font-bold text-emerald-600">
                                  $
                                  {Number(
                                    session.actual_cash || 0,
                                  ).toLocaleString("es-CL")}
                                </p>
                                <p className="text-[10px] text-gray-400 mt-1">
                                  Declarado por cajero
                                </p>
                              </div>

                              {/* Card: Diferencia (Dinámica) */}
                              <div
                                className={`p-4 rounded-2xl border shadow-sm ${
                                  Number(session.difference) >= 0
                                    ? "bg-white border-gray-100"
                                    : "bg-red-50/50 border-red-100"
                                }`}
                              >
                                <p className="text-xs font-medium text-gray-500 mb-1">
                                  Diferencia Final
                                </p>
                                <p
                                  className={`text-xl font-bold ${
                                    Number(session.difference) === 0
                                      ? "text-emerald-600"
                                      : Number(session.difference) > 0
                                        ? "text-blue-600"
                                        : "text-red-600"
                                  }`}
                                >
                                  $
                                  {Number(
                                    session.difference || 0,
                                  ).toLocaleString("es-CL")}
                                </p>
                                <p className="text-[10px] text-gray-400 mt-1">
                                  {Number(session.difference) < 0
                                    ? "Faltante en caja"
                                    : "Caja cuadrada"}
                                </p>
                              </div>
                            </div>
                          </div>
                        )}
                        {/* 2. TIMELINE Y DETALLES (Estilo Call Center) */}
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                          {/* Columna: Tiempos y Apertura */}
                          <div className="space-y-4">
                            <h4 className="text-xs font-bold uppercase tracking-wider text-gray-400 ml-1">
                              Tiempos y Montos
                            </h4>
                            <div className="bg-white rounded-2xl border border-gray-100 p-4 space-y-4">
                              <div className="flex items-center justify-between">
                                <span className="text-xs text-gray-500">
                                  Monto Inicial
                                </span>
                                <span className="text-sm font-semibold">
                                  $
                                  {Number(
                                    session.opening_cash || 0,
                                  ).toLocaleString("es-CL")}
                                </span>
                              </div>
                              <div className="flex flex-col border-t pt-3">
                                <span className="text-[10px] text-gray-400 uppercase font-bold">
                                  Iniciado el
                                </span>
                                <span className="text-sm text-gray-700">
                                  {new Date(
                                    session.opening_date!,
                                  ).toLocaleString("es-CL")}
                                </span>
                              </div>
                              {session.closing_date && (
                                <div className="flex flex-col border-t pt-3">
                                  <span className="text-[10px] text-gray-400 uppercase font-bold">
                                    Cerrado el
                                  </span>
                                  <span className="text-sm text-gray-700">
                                    {new Date(
                                      session.closing_date,
                                    ).toLocaleString("es-CL")}
                                  </span>
                                </div>
                              )}
                            </div>
                          </div>

                          {/* Columna: Auditoría (Sobre entregado / Revisado) */}
                          <div className="space-y-4">
                            <h4 className="text-xs font-bold uppercase tracking-wider text-gray-400 ml-1">
                              Auditoría
                            </h4>
                            <div className="bg-white rounded-2xl border border-gray-100 p-4 space-y-3">
                              <div className="flex items-center gap-3 p-2 rounded-xl bg-gray-50">
                                <div
                                  className={`w-2 h-2 rounded-full ${session.envelope_delivered ? "bg-emerald-500" : "bg-red-500"}`}
                                />
                                <span className="text-xs text-gray-600">
                                  Sobre entregado:{" "}
                                  <strong>
                                    {session.envelope_delivered ? "Sí" : "No"}
                                  </strong>
                                </span>
                              </div>
                              {session.reviewed_at && (
                                <div className="flex items-start gap-3 p-2">
                                  <ClipboardCheck className="w-4 h-4 text-emerald-500 mt-0.5" />
                                  <div className="flex flex-col">
                                    <span className="text-[10px] text-gray-400 uppercase font-bold">
                                      Validado el
                                    </span>
                                    <span className="text-xs text-gray-700">
                                      {new Date(
                                        session.reviewed_at,
                                      ).toLocaleString("es-CL")}
                                    </span>
                                  </div>
                                </div>
                              )}
                            </div>
                          </div>

                          {/* Columna: Notas (Corregida para leer "notes") */}
                          <div className="space-y-4">
                            <h4 className="text-xs font-bold uppercase tracking-wider text-gray-400 ml-1">
                              Notas
                            </h4>
                            <div className="bg-white rounded-2xl border border-gray-100 p-5 h-full space-y-5">
                              {/* Nota del Vendedor - Usamos session.notes que es el campo real de tu JSON */}
                              <div className="relative pl-4 border-l-2 border-gray-100">
                                <div className="flex items-center gap-2 mb-1">
                                  <span className="text-[10px] font-bold text-gray-400 uppercase tracking-tight">
                                    Vendedor
                                  </span>
                                </div>
                                <p className="text-xs text-gray-600 leading-relaxed">
                                  {session.notes ||
                                    "El vendedor no dejó observaciones."}
                                </p>
                              </div>

                              {/* Nota del Supervisor - Usamos session.review_notes según tu JSON */}
                              {(session.review_status === "reviewed" ||
                                session.review_notes) && (
                                <div className="relative pl-4 border-l-2 border-blue-200 bg-blue-50/30 py-2 pr-2 rounded-r-lg">
                                  <div className="flex items-center gap-2 mb-1">
                                    <span className="text-[10px] font-bold text-blue-500 uppercase tracking-tight">
                                      Supervisor
                                    </span>
                                    <div className="w-1 h-1 rounded-full bg-blue-400" />
                                  </div>
                                  <p className="text-xs text-gray-700 font-medium leading-relaxed">
                                    {session.review_notes ||
                                      "Sin observaciones de revisión."}
                                  </p>
                                </div>
                              )}

                              {/* Estado vacío - Si ambos campos de tu API están nulos */}
                              {!session.notes && !session.review_notes && (
                                <div className="flex flex-col items-center justify-center h-full opacity-40">
                                  <MessageSquare className="w-5 h-5 mb-2" />
                                  <p className="text-[10px] uppercase font-bold">
                                    Sin notas
                                  </p>
                                </div>
                              )}
                            </div>
                          </div>
                        </div>
                        {/* 3. MÉTODOS DE PAGO (Desplegable por click) */}
                        {session.payment_summary?.length > 0 && (
                          <div className="mt-8">
                            <h4 className="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-4 ml-1">
                              Desglose por Pago
                            </h4>

                            <div className="space-y-3">
                              {session.payment_summary.map((payment, idx) => {
                                const isOpen = expandedPayment === idx;

                                return (
                                  <div
                                    key={idx}
                                    className="border border-gray-100 rounded-xl bg-white shadow-sm overflow-hidden"
                                  >
                                    {/* HEADER CLICKABLE */}
                                    <div
                                      onClick={() =>
                                        setExpandedPayment(isOpen ? null : idx)
                                      }
                                      className="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-50 transition"
                                    >
                                      <div className="flex items-center gap-3">
                                        <div className="px-3 py-1.5 bg-gray-100 rounded-lg">
                                          <span className="text-xs font-bold text-gray-700">
                                            {payment.payment_method_name}
                                          </span>
                                        </div>

                                        <span className="text-sm font-bold text-gray-900">
                                          $
                                          {Number(
                                            payment.total_amount,
                                          ).toLocaleString("es-CL")}
                                        </span>

                                        <span className="text-[10px] bg-blue-50 text-blue-600 px-2 py-0.5 rounded-full font-bold">
                                          {payment.transaction_count} op.
                                        </span>
                                      </div>

                                      <div className="text-gray-400 text-sm">
                                        {isOpen ? "▲" : "▼"}
                                      </div>
                                    </div>

                                    {/* CONTENIDO DESPLEGABLE */}
                                    {isOpen && (
                                      <div className="border-t bg-gray-50 p-3">
                                        {payment.related_sales &&
                                        payment.related_sales.length > 0 ? (
                                          <div className="space-y-2 max-h-60 overflow-y-auto pr-1">
                                            {payment.related_sales.map(
                                              (sale, sIdx) => (
                                                <div
                                                  key={sIdx}
                                                  className="flex justify-between items-center bg-white border border-gray-100 rounded-lg px-3 py-2 hover:shadow-sm transition"
                                                >
                                                  <div className="flex flex-col">
                                                    {/* Número de venta */}
                                                    <span className="text-xs font-bold text-blue-600">
                                                      {sale.sale_number ||
                                                        `#${sale.sale_id}`}
                                                    </span>

                                                    {/* Cliente */}
                                                    <span className="text-[11px] text-gray-600 truncate max-w-[180px]">
                                                      {sale.customer_name ||
                                                        "Cliente no registrado"}
                                                    </span>

                                                    {/* Fecha y hora */}
                                                    <span className="text-[10px] text-gray-400">
                                                      {sale.date || ""} ·{" "}
                                                      {sale.time} hrs
                                                    </span>
                                                  </div>

                                                  <span className="text-sm font-semibold text-gray-800">
                                                    $
                                                    {Number(
                                                      sale.paid_amount ??
                                                        sale.total ??
                                                        0,
                                                    ).toLocaleString("es-CL")}
                                                  </span>
                                                </div>
                                              ),
                                            )}
                                          </div>
                                        ) : (
                                          <p className="text-xs text-gray-500 italic text-center py-2">
                                            No hay detalles disponibles
                                          </p>
                                        )}
                                      </div>
                                    )}
                                  </div>
                                );
                              })}
                            </div>
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Dialog de revisión de supervisor */}
      <Dialog open={showReviewDialog} onOpenChange={setShowReviewDialog}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-green-700">
              <ClipboardCheck className="w-5 h-5" />
              Validar cierre de turno
            </DialogTitle>
          </DialogHeader>
          <div className="space-y-3">
            <p className="text-sm text-gray-700">
              Estás validando el cierre del turno{" "}
              <strong>#{reviewSessionId}</strong>. Esto confirma que el efectivo
              real fue verificado contra el sistema.
            </p>
            <div className="space-y-1">
              <Label htmlFor="review-notes">Observaciones (opcional)</Label>
              <Textarea
                id="review-notes"
                value={reviewNotes}
                onChange={(e) => setReviewNotes(e.target.value)}
                placeholder="Ej: Todo en orden, diferencia justificada..."
                rows={3}
              />
            </div>
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setShowReviewDialog(false)}
              disabled={isReviewingSession}
            >
              Cancelar
            </Button>
            <Button
              onClick={handleConfirmReview}
              disabled={isReviewingSession}
              className="bg-green-600 hover:bg-green-700 text-white"
            >
              {isReviewingSession ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  Validando...
                </>
              ) : (
                <>
                  <ClipboardCheck className="w-4 h-4 mr-2" />
                  Confirmar validación
                </>
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}