// @ts-nocheck
import { useEffect, useState } from "react";
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 { Badge } from "@/components/ui/badge";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Switch } from "@/components/ui/switch";
import { Loader2, Plus, Edit, Users, Search } from "lucide-react";
import { Textarea } from "@/components/ui/textarea";
import { useSeller } from "@/hooks/useSeller";

export default function SellersPage() {
  const {
    selectedCompany,
    isLoadingCompany,
    isLoadingSellers,
    isSaving,
    sellers,
    searchTerm,
    setSearchTerm,
    showForm,
    closeForm,
    editingSeller,
    formData,
    updateFormField,
    openCreateForm,
    openEditForm,
    submitForm,
  } = useSeller();
  const [commissionInput, setCommissionInput] = useState(String(formData.commission_rate ?? 0));

  useEffect(() => {
    setCommissionInput(String(formData.commission_rate ?? 0));
  }, [formData.commission_rate, showForm, editingSeller?.id]);

  const handleSubmit = async (event) => {
    event.preventDefault();
    await submitForm();
  };

  if (isLoadingCompany || !selectedCompany) {
        return (
            <div className="flex items-center justify-center h-screen">
                <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
            </div>
        );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-6">
      <div className="max-w-6xl mx-auto">
        <div className="flex justify-between items-center mb-6">
          <div>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">Vendedores</h1>
            <p className="text-gray-600">Gestiona los usuarios vendedores del POS</p>
          </div>
          <Button
            onClick={openCreateForm}
            className="bg-gradient-to-r from-blue-600 to-blue-700"
          >
            <Plus className="w-4 h-4 mr-2" />
            Nuevo Vendedor
          </Button>
        </div>

        <Card className="mb-6">
          <CardContent className="pt-6">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
              <Input
                placeholder="Buscar por nombre, código o email..."
                value={searchTerm}
                onChange={(event) => setSearchTerm(event.target.value)}
                className="pl-10"
              />
            </div>
          </CardContent>
        </Card>

        {isLoadingSellers ? (
          <div className="flex justify-center py-12">
            <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
          </div>
        ) : sellers.length === 0 ? (
          <Card>
            <CardContent className="py-12 text-center">
              <Users className="w-12 h-12 text-gray-400 mx-auto mb-4" />
              <p className="text-gray-600">No hay vendedores registrados</p>
            </CardContent>
          </Card>
        ) : (
          <div className="grid gap-4">
            {sellers.map((seller) => (
              <Card key={seller.id} className="hover:shadow-lg transition-shadow">
                <CardContent className="pt-6">
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <h3 className="text-lg font-semibold text-gray-900">
                          {seller.full_name}
                        </h3>
                        <Badge
                          className={
                            seller.is_active
                              ? "bg-emerald-100 text-emerald-800"
                              : "bg-gray-100 text-gray-800"
                          }
                        >
                          {seller.is_active ? "Activo" : "Inactivo"}
                        </Badge>
                      </div>
                      <div className="grid md:grid-cols-3 gap-3 text-sm text-gray-600">
                        <div>
                          <span className="font-medium">Código:</span> {seller.seller_code}
                        </div>
                        <div>
                          <span className="font-medium">Email:</span> {seller.user_email}
                        </div>
                        {seller.phone && (
                          <div>
                            <span className="font-medium">Teléfono:</span> {seller.phone}
                          </div>
                        )}
                        {seller.commission_rate > 0 && (
                          <div>
                            <span className="font-medium">Comisión:</span> {seller.commission_rate}%
                          </div>
                        )}
                      </div>
                      {seller.notes && (
                        <p className="text-sm text-gray-500 mt-2">{seller.notes}</p>
                      )}
                    </div>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => openEditForm(seller)}
                    >
                      <Edit className="w-4 h-4 mr-2" />
                      Editar
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}

        <Dialog open={showForm} onOpenChange={closeForm}>
          <DialogContent className="max-w-2xl">
            <DialogHeader>
              <DialogTitle>
                {editingSeller ? "Editar Vendedor" : "Nuevo Vendedor"}
              </DialogTitle>
            </DialogHeader>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <Label>Nombre Completo *</Label>
                  <Input
                    value={formData.full_name}
                    onChange={(event) => updateFormField("full_name", event.target.value)}
                    required
                  />
                </div>
                <div>
                  <Label>Código de Vendedor *</Label>
                  <Input
                    value={formData.seller_code}
                    onChange={(event) => updateFormField("seller_code", event.target.value)}
                    required
                  />
                </div>
              </div>

              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <Label>Email *</Label>
                  <Input
                    type="email"
                    value={formData.user_email}
                    onChange={(event) => updateFormField("user_email", event.target.value)}
                    required
                  />
                </div>
                <div>
                  <Label>Teléfono</Label>
                  <Input
                    value={formData.phone}
                    onChange={(event) => updateFormField("phone", event.target.value)}
                  />
                </div>
              </div>

              <div>
                <Label>Comisión (%)</Label>
                <Input
                  type="number"
                  step="0.01"
                  value={commissionInput}
                  onChange={(event) => {
                    const raw = event.target.value;
                    setCommissionInput(raw);
                    if (raw === "") {
                      updateFormField("commission_rate", 0);
                      return;
                    }
                    const number = Number.parseFloat(raw);
                    if (Number.isNaN(number)) {
                      return;
                    }
                    updateFormField("commission_rate", number);
                  }}
                />
              </div>

              <div>
                <Label>Notas</Label>
                <Textarea
                  value={formData.notes}
                  onChange={(event) => updateFormField("notes", event.target.value)}
                  rows={3}
                />
              </div>

              <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                <div>
                  <Label className="text-base">Vendedor Activo</Label>
                  <p className="text-xs text-gray-500">Puede realizar ventas</p>
                </div>
                <Switch
                  checked={formData.is_active}
                  onCheckedChange={(checked) => updateFormField("is_active", checked)}
                />
              </div>

              <div className="flex justify-end gap-3 pt-4">
                <Button type="button" variant="outline" onClick={closeForm}>
                  Cancelar
                </Button>
                <Button type="submit" disabled={isSaving}>
                  {isSaving ? (
                    <>
                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                      Guardando...
                    </>
                  ) : (
                    "Guardar"
                  )}
                </Button>
              </div>
            </form>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  );
}