import { useState } from 'react';
import { usuarioService } from '../../services/api';
import type { Usuario } from '../../types';
import { Button } from '../ui/Button';
import { Input } from '../ui/Input';
import { X } from 'lucide-react';

interface UserFormProps {
  usuario: Usuario | null;
  onClose: () => void;
}

export function UserForm({ usuario, onClose }: UserFormProps) {
  const [formData, setFormData] = useState({
    nombre: usuario?.nombre || '',
    username: usuario?.username || '',
    email: usuario?.email || '',
    password: '',
    rol: usuario?.rol || 'estudiante' as 'admin' | 'estudiante',
    activo: usuario?.activo ?? true,
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    // Validaciones
    if (!formData.username.trim()) {
      setError('El nombre de usuario es requerido');
      setLoading(false);
      return;
    }

    if (!formData.nombre.trim()) {
      setError('El nombre completo es requerido');
      setLoading(false);
      return;
    }

    try {
      if (usuario) {
        await usuarioService.updateUsuario(usuario.id, formData);
      } else {
        if (!formData.password) {
          setError('La contraseña es requerida para nuevos usuarios');
          setLoading(false);
          return;
        }
        await usuarioService.createUsuario({
          ...formData,
          password: formData.password,
        } as Omit<Usuario, 'id'> & { password: string });
      }
      onClose();
    } catch (err) {
      setError('Error al guardar el usuario');
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold">
          {usuario ? 'Editar usuario' : 'Nuevo usuario'}
        </h3>
        <Button variant="ghost" size="sm" onClick={onClose}>
          <X className="w-5 h-5" />
        </Button>
      </div>

      {error && (
        <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
          {error}
        </div>
      )}

      <Input
        label="Nombre de usuario *"
        value={formData.username}
        onChange={(e) => setFormData({ ...formData, username: e.target.value })}
        placeholder="usuario123"
        required
      />

      <Input
        label="Nombre completo *"
        value={formData.nombre}
        onChange={(e) => setFormData({ ...formData, nombre: e.target.value })}
        placeholder="Nombre completo"
        required
      />

      <Input
        label="Email (opcional)"
        type="email"
        value={formData.email}
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
        placeholder="email@ejemplo.com"
      />

      {!usuario && (
        <Input
          label="Contraseña"
          type="password"
          value={formData.password}
          onChange={(e) => setFormData({ ...formData, password: e.target.value })}
          placeholder="••••••••"
          required
        />
      )}

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">Rol</label>
        <select
          value={formData.rol}
          onChange={(e) => setFormData({ ...formData, rol: e.target.value as 'admin' | 'estudiante' })}
          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
        >
          <option value="estudiante">Estudiante</option>
          <option value="admin">Administrador</option>
        </select>
      </div>

      <div className="flex items-center gap-2">
        <input
          type="checkbox"
          id="activo"
          checked={formData.activo}
          onChange={(e) => setFormData({ ...formData, activo: e.target.checked })}
          className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary"
        />
        <label htmlFor="activo" className="text-sm text-gray-700">
          Usuario activo
        </label>
      </div>

      <div className="flex gap-3 pt-2">
        <Button type="submit" isLoading={loading} className="flex-1">
          {usuario ? 'Guardar cambios' : 'Crear usuario'}
        </Button>
        <Button type="button" variant="outline" onClick={onClose}>
          Cancelar
        </Button>
      </div>
    </form>
  );
}
