// @ts-nocheck
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Textarea } from "@/components/ui/textarea";
import { Separator } from "@/components/ui/separator";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Checkbox } from "@/components/ui/checkbox";
import { Loader2, AlertTriangle, Package, TrendingUp, TrendingDown, Minus } from "lucide-react";
import type { SessionSummary } from "@/types/modules/cashRegister";

interface Props {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  summary: SessionSummary | undefined;
  isLoadingSummary: boolean;
  actualCash: number;
  setActualCash: (v: number) => void;
  closeNotes: string;
  setCloseNotes: (v: string) => void;
  envelopeDelivered: boolean;
  setEnvelopeDelivered: (v: boolean) => void;
  onClose: () => void;
  isClosing: boolean;
}

const DIFFERENCE_THRESHOLD = 1000;

export default function CloseSessionDialog({
  open,
  onOpenChange,
  summary,
  isLoadingSummary,
  actualCash,
  setActualCash,
  closeNotes,
  setCloseNotes,
  envelopeDelivered,
  setEnvelopeDelivered,
  onClose,
  isClosing,
}: Props) {
  const expectedCash = summary?.expected_cash ?? 0;
  const difference = actualCash - expectedCash;
  const absDiff = Math.abs(difference);
  const isLargeDifference = absDiff > DIFFERENCE_THRESHOLD;

  const DiffIcon = difference === 0 ? Minus : difference > 0 ? TrendingUp : TrendingDown;
  const diffColor =
    difference === 0 ? "text-emerald-600" : difference > 0 ? "text-blue-600" : "text-red-600";

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-lg max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Cerrar Turno</DialogTitle>
        </DialogHeader>

        {isLoadingSummary ? (
          <div className="flex justify-center py-8">
            <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
          </div>
        ) : (
          <div className="space-y-4">
            <div className="bg-blue-50 p-4 rounded-lg space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-gray-600">Ventas del turno:</span>
                <span className="font-semibold">{summary?.total_transactions ?? 0}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">Total vendido:</span>
                <span className="font-semibold">
                  ${(summary?.total_sales ?? 0).toLocaleString("es-CL")}
                </span>
              </div>
            </div>

            {summary?.payment_breakdown && summary.payment_breakdown.length > 0 && (
              <div>
                <p className="text-sm font-medium text-gray-700 mb-2">Desglose por forma de pago</p>
                <div className="space-y-1">
                  {summary.payment_breakdown.map((item, idx) => (
                    <div key={idx} className="flex justify-between text-sm bg-gray-50 px-3 py-1.5 rounded">
                      <span>
                        <Badge variant="outline" className="text-xs mr-2">
                          {item.payment_method_name}
                        </Badge>
                        ({item.transaction_count} trans.)
                      </span>
                      <span className="font-medium">${item.total_amount.toLocaleString("es-CL")}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {((summary?.movements_income ?? 0) > 0 || (summary?.movements_expense ?? 0) > 0) && (
              <div className="bg-amber-50 p-3 rounded-lg text-sm space-y-1">
                <p className="font-medium text-amber-800">Movimientos de Caja</p>
                {(summary?.movements_income ?? 0) > 0 && (
                  <div className="flex justify-between">
                    <span className="text-gray-600">Ingresos:</span>
                    <span className="text-emerald-600 font-medium">
                      +${summary!.movements_income.toLocaleString("es-CL")}
                    </span>
                  </div>
                )}
                {(summary?.movements_expense ?? 0) > 0 && (
                  <div className="flex justify-between">
                    <span className="text-gray-600">Egresos:</span>
                    <span className="text-red-600 font-medium">
                      -${summary!.movements_expense.toLocaleString("es-CL")}
                    </span>
                  </div>
                )}
              </div>
            )}

            <Separator />

            <div className="bg-gray-100 p-3 rounded-lg">
              <div className="flex justify-between text-sm">
                <span className="text-gray-600">Efectivo esperado en caja:</span>
                <span className="font-bold text-lg">${expectedCash.toLocaleString("es-CL")}</span>
              </div>
            </div>

            <div>
              <Label>Efectivo Real Contado</Label>
              <Input
                type="number"
                step="1"
                value={actualCash || ""}
                onChange={(e) => setActualCash(parseFloat(e.target.value) || 0)}
                placeholder="0"
                className="mt-1 text-lg font-semibold"
              />
              <p className="text-xs text-gray-500 mt-1">Cuenta el efectivo físico en la caja</p>
            </div>

            {actualCash > 0 && (
              <div
                className={`flex items-center justify-between p-3 rounded-lg border-2 ${
                  difference === 0
                    ? "border-emerald-200 bg-emerald-50"
                    : isLargeDifference
                      ? "border-red-300 bg-red-50"
                      : "border-amber-200 bg-amber-50"
                }`}
              >
                <div className="flex items-center gap-2">
                  <DiffIcon className={`w-5 h-5 ${diffColor}`} />
                  <span className="text-sm font-medium">Diferencia:</span>
                </div>
                <span className={`text-lg font-bold ${diffColor}`}>
                  {difference >= 0 ? "+" : ""}${difference.toLocaleString("es-CL")}
                </span>
              </div>
            )}

            {isLargeDifference && actualCash > 0 && (
              <div className="flex items-start gap-2 p-3 bg-red-50 border border-red-200 rounded-lg">
                <AlertTriangle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
                <div className="text-sm text-red-800">
                  <p className="font-medium">Diferencia significativa detectada</p>
                  <p>La diferencia supera ${DIFFERENCE_THRESHOLD.toLocaleString("es-CL")}. Revisa el conteo antes de confirmar.</p>
                </div>
              </div>
            )}

            <div>
              <Label>Notas del Cierre</Label>
              <Textarea
                value={closeNotes}
                onChange={(e) => setCloseNotes(e.target.value)}
                rows={2}
                placeholder="Observaciones..."
                className="mt-1"
              />
            </div>

            <div className="flex items-start gap-3 p-3 bg-amber-50 border border-amber-200 rounded-lg">
              <Checkbox
                id="envelope-delivered"
                checked={envelopeDelivered}
                onCheckedChange={(v) => setEnvelopeDelivered(Boolean(v))}
                className="mt-0.5"
              />
              <label htmlFor="envelope-delivered" className="text-sm cursor-pointer">
                <div className="flex items-center gap-1.5 font-medium text-amber-800">
                  <Package className="w-4 h-4" />
                  Confirmo entrega de sobre
                </div>
                <p className="text-xs text-amber-700 mt-0.5">
                  El efectivo contado ha sido depositado en el sobre y entregado al supervisor.
                </p>
              </label>
            </div>

            <div className="flex justify-end gap-3 pt-2">
              <Button variant="outline" onClick={() => onOpenChange(false)}>
                Cancelar
              </Button>
              <Button
                onClick={onClose}
                disabled={isClosing}
                className="bg-gradient-to-r from-red-600 to-red-700"
              >
                {isClosing ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    Cerrando...
                  </>
                ) : (
                  "Confirmar Cierre"
                )}
              </Button>
            </div>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}