import {
  Button,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  Input,
  Label,
} from "@repo/shadcn-ui/components";
import { Plus } from "lucide-react";

interface CustomerFormDialogProps {
  open: boolean;
  onOpenChange: (o: boolean) => void;
  client: Omit<Client, "id">;
  onChange: (c: Omit<Client, "id">) => void;
  onSubmit: () => void;
}

export const CreateCustomerFormDialog = ({
  open,
  onOpenChange,
  client,
  onChange,
  onSubmit,
}: CustomerFormDialogProps) => {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className='sm:max-w-[500px] bg-card border-border'>
        <DialogHeader>
          <DialogTitle className='flex items-center gap-2'>
            <Plus className='size-5' /> Agregar Nuevo Cliente
          </DialogTitle>
          <DialogDescription>
            Complete la información del cliente. Los campos marcados con * son obligatorios.
          </DialogDescription>
        </DialogHeader>
        <div className='grid gap-4 py-4'>
          {/* Nombre */}
          <div className='grid gap-2'>
            <Label htmlFor='name'>Nombre completo *</Label>
            <Input
              id='name'
              value={client.name}
              onChange={(e) => onChange({ ...client, name: e.target.value })}
            />
          </div>
          {/* Email */}
          <div className='grid gap-2'>
            <Label htmlFor='email'>Email *</Label>
            <Input
              id='email'
              type='email'
              value={client.email}
              onChange={(e) => onChange({ ...client, email: e.target.value })}
            />
          </div>
          {/* Teléfono / NIF */}
          <div className='grid grid-cols-2 gap-4'>
            <div className='grid gap-2'>
              <Label htmlFor='phone'>Teléfono</Label>
              <Input
                id='phone'
                value={client.phone ?? ""}
                onChange={(e) => onChange({ ...client, phone: e.target.value })}
              />
            </div>
            <div className='grid gap-2'>
              <Label htmlFor='taxId'>NIF/CIF</Label>
              <Input
                id='taxId'
                value={client.taxId ?? ""}
                onChange={(e) => onChange({ ...client, taxId: e.target.value })}
              />
            </div>
          </div>
          {/* Empresa */}
          <div className='grid gap-2'>
            <Label htmlFor='company'>Empresa</Label>
            <Input
              id='company'
              value={client.company ?? ""}
              onChange={(e) => onChange({ ...client, company: e.target.value })}
            />
          </div>
        </div>
        <DialogFooter>
          <Button variant='outline' onClick={() => onOpenChange(false)}>
            Cancelar
          </Button>
          <Button onClick={onSubmit} disabled={!client.name || !client.email}>
            <Plus className='mr-2 size-4' /> Crear Cliente
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};
