// @ts-nocheck
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Loader2, LogIn, DollarSign, History } from "lucide-react";
import { useCashRegister } from "@/hooks/useCashRegister";
import CashDashboard from "@/components/cash-register/CashDashboard";
import CashSessionHistory from "@/components/cash-register/CashSessionHistory";
import CashMovementDialog from "@/components/cash-register/CashMovementDialog";
import CloseSessionDialog from "@/components/cash-register/CloseSessionDialog";

export default function CashRegisterPage() {
  const {
    selectedCompany,
    currentUser,
    currentSeller,
    activeSession,
    sessions,
    sellers,
    summary,
    movements,
    historyFilters,
    showOpenDialog,
    showCloseDialog,
    showMovementDialog,
    openingCash,
    actualCash,
    closeNotes,
    envelopeDelivered,
    isLoading,
    isLoadingSummary,
    isOpeningSession,
    isClosingSession,
    isCreatingMovement,
    isReviewingSession,
    setHistoryFilters,
    setShowOpenDialog,
    setShowCloseDialog,
    setShowMovementDialog,
    setOpeningCash,
    setActualCash,
    setCloseNotes,
    setEnvelopeDelivered,
    openSession,
    closeSession,
    createMovement,
    deleteMovement,
    reviewSession,
  } = useCashRegister();

  const isSupervisor = currentUser?.role === "Supervisor";

  if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center h-[60vh]">
        <Loader2 className="w-8 h-8 animate-spin text-blue-600 mb-4" />
        <p className="text-gray-600">Cargando...</p>
      </div>
    );
  }

  if (!selectedCompany || !currentSeller) {
    return (
      <div className="flex flex-col items-center justify-center h-[60vh]">
        <DollarSign className="w-12 h-12 text-gray-300 mb-4" />
        <p className="text-gray-600">
          {!currentSeller ? "No estás registrado como vendedor" : "No se encontró empresa"}
        </p>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-4 md:p-6">
      <div className="max-w-7xl mx-auto">
        <div className="mb-6">
          <h1 className="text-2xl md:text-3xl font-bold text-gray-900">Caja - POS</h1>
          <p className="text-gray-500 text-sm mt-1">Gestión de turnos, ventas y cierres de caja</p>
        </div>

        <Tabs defaultValue={!isSupervisor && activeSession ? "current" : "history"}>
          <TabsList className="mb-6">
            {!isSupervisor && (
            <TabsTrigger value="current" className="gap-1.5">
              <DollarSign className="w-4 h-4" />
              Turno Actual
            </TabsTrigger>
            )}
            <TabsTrigger value="history" className="gap-1.5">
              <History className="w-4 h-4" />
              Historial
            </TabsTrigger>
          </TabsList>
          {!isSupervisor && (
          <TabsContent value="current">
            {activeSession ? (
              <CashDashboard
                activeSession={activeSession}
                currentSeller={currentSeller}
                summary={summary}
                movements={movements}
                isLoadingSummary={isLoadingSummary}
                onOpenCloseDialog={() => setShowCloseDialog(true)}
                onOpenMovementDialog={() => setShowMovementDialog(true)}
                onDeleteMovement={deleteMovement}
              />
            ) : (
              <Card className="max-w-md mx-auto">
                <CardContent className="pt-8 pb-8 text-center">
                  <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <DollarSign className="w-8 h-8 text-blue-600" />
                  </div>
                  <h3 className="text-lg font-semibold mb-2">No hay turno abierto</h3>
                  <p className="text-gray-500 text-sm mb-6">
                    Abre un turno para comenzar a registrar ventas
                  </p>
                  <Button
                    onClick={() => setShowOpenDialog(true)}
                    className="bg-gradient-to-r from-blue-600 to-blue-700"
                    size="lg"
                  >
                    <LogIn className="w-4 h-4 mr-2" />
                    Abrir Turno
                  </Button>
                </CardContent>
              </Card>
            )}
          </TabsContent>
          )}
          <TabsContent value="history">
            <CashSessionHistory
              sessions={sessions}
              sellers={sellers}
              isLoading={isLoading}
              filters={historyFilters}
              onFilterChange={setHistoryFilters}
              onReviewSession={reviewSession}
              isReviewingSession={isReviewingSession}
            />
          </TabsContent>
        </Tabs>

        {/* Open Session Dialog */}
        <Dialog open={showOpenDialog} onOpenChange={setShowOpenDialog}>
          <DialogContent className="sm:max-w-md">
            <DialogHeader>
              <DialogTitle>Abrir Turno</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <div className="bg-blue-50 p-3 rounded-lg text-sm">
                <p className="text-gray-600">
                  Vendedor: <span className="font-semibold">{currentSeller.full_name}</span>
                </p>
              </div>
              <div>
                <Label>Efectivo Inicial</Label>
                <Input
                  type="number"
                  step="1"
                  value={openingCash || ""}
                  onChange={(e) => setOpeningCash(parseFloat(e.target.value) || 0)}
                  placeholder="0"
                  className="mt-1 text-lg font-semibold"
                />
                <p className="text-xs text-gray-500 mt-1">Monto en efectivo con el que inicias</p>
              </div>
              <div className="flex justify-end gap-3 pt-2">
                <Button variant="outline" onClick={() => setShowOpenDialog(false)}>
                  Cancelar
                </Button>
                <Button onClick={openSession} disabled={isOpeningSession}>
                  {isOpeningSession ? (
                    <>
                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                      Abriendo...
                    </>
                  ) : (
                    "Abrir Turno"
                  )}
                </Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>

        {/* Close Session Dialog */}
        <CloseSessionDialog
          open={showCloseDialog}
          onOpenChange={setShowCloseDialog}
          summary={summary}
          isLoadingSummary={isLoadingSummary}
          actualCash={actualCash}
          setActualCash={setActualCash}
          closeNotes={closeNotes}
          setCloseNotes={setCloseNotes}
          envelopeDelivered={envelopeDelivered}
          setEnvelopeDelivered={setEnvelopeDelivered}
          onClose={closeSession}
          isClosing={isClosingSession}
        />

        {/* Cash Movement Dialog */}
        <CashMovementDialog
          open={showMovementDialog}
          onOpenChange={setShowMovementDialog}
          onSubmit={createMovement}
          isLoading={isCreatingMovement}
        />
      </div>
    </div>
  );
}