import React, { useEffect, useState } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { createUser, updateUser } from '../api/users.ts';
import { fetchRoles, fetchUserRoles, assignUserRole, revokeUserRole } from '../api/rbac';
import { useNotification } from '../context/NotificationContext';

const initialForm = {
  username: '',
  email: '',
  first_name: '',
  last_name: '',
  password: '',
  confirmPassword: '',
  rfc: [],
  userType: 'agente', // 'agente' | 'importador'
  is_active: true,
};

export default function UserForm() {
  const { id } = useParams();
  const isEditing = Boolean(id);
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const { showMessage } = useNotification();

  const initialType = searchParams.get('type') === 'importador' ? 'importador' : 'agente';

  const [form, setForm] = useState({ ...initialForm, userType: initialType });
  const [importadores, setImportadores] = useState([]);
  const [submitting, setSubmitting] = useState(false);
  const [loadingUser, setLoadingUser] = useState(isEditing);

  // RBAC: roles disponibles de la organización
  const [availableRoles, setAvailableRoles] = useState([]);
  const [loadingRoles, setLoadingRoles] = useState(true);
  // IDs de roles seleccionados en el formulario
  const [selectedRoleIds, setSelectedRoleIds] = useState([]);
  // Asignaciones actuales del usuario (para calcular diff en edición): [{ id, role }]
  const [currentUserRoles, setCurrentUserRoles] = useState([]);

  // Validación de contraseña
  const [passwordValidation, setPasswordValidation] = useState({
    length: false, uppercase: false, lowercase: false, number: false, special: false,
  });
  const [showPasswordValidation, setShowPasswordValidation] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [passwordsMatch, setPasswordsMatch] = useState(true);
  const [showPasswordMatchValidation, setShowPasswordMatchValidation] = useState(false);

  // Inyectar animaciones
  useEffect(() => {
    if (typeof window !== 'undefined' && !document.getElementById('users-animations')) {
      const style = document.createElement('style');
      style.id = 'users-animations';
      style.innerHTML = `
        @keyframes fadeInUpUsers {
          0% { opacity: 0; transform: translateY(32px); }
          100% { opacity: 1; transform: translateY(0); }
        }
        .fade-in-up-users { animation: fadeInUpUsers 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
        @keyframes bounce-slow {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-8px); }
        }
        .animate-bounce-slow { animation: bounce-slow 2.2s infinite; }
      `;
      document.head.appendChild(style);
    }
  }, []);

  // Cargar roles disponibles de la organización
  useEffect(() => {
    fetchRoles()
      .then(data => {
        const list = Array.isArray(data) ? data : (data?.results ?? []);
        setAvailableRoles(list);
        // Preselección por tipo inicial solo en creación
        if (!isEditing) {
          setSelectedRoleIds(getDefaultRoleIds(list, initialType));
        }
      })
      .catch(err => {
        showMessage(err.message || 'Error al cargar los perfiles disponibles', 'error');
        setAvailableRoles([]);
      })
      .finally(() => setLoadingRoles(false));
  }, []);

  // Cargar importadores
  useEffect(() => {
    const access = localStorage.getItem('access');
    if (!access) {
      const _hub = import.meta.env.VITE_HUB_URL || 'http://localhost:3001';
      window.location.href = `${_hub}/login?return_to=${encodeURIComponent(window.location.origin + '/auth/sso')}`;
      return;
    }
    fetch(`${import.meta.env.VITE_EFC_API_URL}/customs/importadores/`, {
      headers: { Authorization: `Bearer ${access}` },
    })
      .then(r => {
        if (!r.ok) throw new Error(`Error ${r.status} al cargar importadores`);
        return r.json();
      })
      .then(data => setImportadores(Array.isArray(data) ? data : []))
      .catch(err => {
        showMessage(err.message || 'Error al cargar el catálogo de importadores', 'error');
        setImportadores([]);
      });
  }, []);

  // Cargar datos del usuario si es edición
  useEffect(() => {
    if (!isEditing) return;
    const access = localStorage.getItem('access');

    Promise.all([
      fetch(`${import.meta.env.VITE_EFC_API_URL}/user/users/${id}/`, {
        headers: { Authorization: `Bearer ${access}` },
      }).then(r => r.json()),
      fetchUserRoles(id).catch(() => []),
    ])
      .then(([data, userRoles]) => {
        const isImportador = data.is_importador === true;
        setForm({
          username: data.username || '',
          email: data.email || '',
          first_name: data.first_name || '',
          last_name: data.last_name || '',
          password: '',
          confirmPassword: '',
          rfc: Array.isArray(data.rfc) ? data.rfc : (data.rfc ? [data.rfc] : []),
          userType: isImportador ? 'importador' : 'agente',
          is_active: data.is_active !== false,
        });

        // user-roles respuesta: [{ id, user: {...}, role: { id, nombre, ... }, created_at }]
        const normalized = (Array.isArray(userRoles) ? userRoles : (userRoles?.results ?? []))
          .map(ur => ({
            id: ur.id,
            role: typeof ur.role === 'object' ? ur.role?.id : ur.role,
          }))
          .filter(ur => ur.role);

        setCurrentUserRoles(normalized);
        setSelectedRoleIds(normalized.map(ur => ur.role));
        setLoadingUser(false);
      })
      .catch(() => {
        showMessage('Error al cargar datos del usuario', 'error');
        setLoadingUser(false);
      });
  }, [id, isEditing, showMessage]);

  // Preseleccionar roles por defecto según tipo de usuario
  function getDefaultRoleIds(roles, type) {
    const keyword = type === 'importador' ? 'importador' : 'agente';
    const matches = roles
      .filter(r => r.nombre?.toLowerCase().includes(keyword))
      .map(r => r.id);
    return matches;
  }

  const validatePassword = (password) => {
    const v = {
      length: password.length >= 8,
      uppercase: /[A-Z]/.test(password),
      lowercase: /[a-z]/.test(password),
      number: /\d/.test(password),
      special: /[!@#$%^&*(),.?":{}|<>]/.test(password),
    };
    setPasswordValidation(v);
    setShowPasswordValidation(password.length > 0);
  };

  const validatePasswordMatch = (password, confirm) => {
    setPasswordsMatch(password === confirm);
    setShowPasswordMatchValidation(confirm.length > 0);
  };

  const isPasswordValid = () => Object.values(passwordValidation).every(Boolean);

  const isFormValid = () => {
    if (!isEditing) {
      return isPasswordValid() && passwordsMatch &&
        form.password.length > 0 && form.confirmPassword.length > 0;
    }
    if (form.password.length > 0) {
      return isPasswordValid() && passwordsMatch && form.confirmPassword.length > 0;
    }
    return true;
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
    if (name === 'password') {
      validatePassword(value);
      if (form.confirmPassword) validatePasswordMatch(value, form.confirmPassword);
    }
    if (name === 'confirmPassword') validatePasswordMatch(form.password, value);
  };

  const handleUserTypeChange = (type) => {
    setForm(prev => ({
      ...prev,
      userType: type,
      rfc: type === 'agente' ? [] : prev.rfc,
    }));
    // Preseleccionar roles según tipo
    setSelectedRoleIds(getDefaultRoleIds(availableRoles, type));
  };

  const handleRoleToggle = (roleId) => {
    setSelectedRoleIds(prev =>
      prev.includes(roleId)
        ? prev.filter(id => id !== roleId)
        : [...prev, roleId]
    );
  };

  const handleRfcToggle = (rfc) => {
    setForm(prev => {
      const current = Array.isArray(prev.rfc) ? prev.rfc : [];
      const next = current.includes(rfc)
        ? current.filter(r => r !== rfc)
        : [...current, rfc];
      return { ...prev, rfc: next };
    });
  };

  // Sincronizar roles: calcular diff y llamar assign/revoke
  const syncRoles = async (userId) => {
    const currentRoleIds = currentUserRoles.map(ur => ur.role);
    const toAdd = selectedRoleIds.filter(id => !currentRoleIds.includes(id));
    const toRemove = currentUserRoles.filter(ur => !selectedRoleIds.includes(ur.role));

    await Promise.all([
      ...toAdd.map(roleId => assignUserRole(userId, roleId).catch(() => null)),
      ...toRemove.map(ur => revokeUserRole(ur.id).catch(() => null)),
    ]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!isFormValid()) return;
    setSubmitting(true);
    try {
      const payload = {
        username: form.username,
        email: form.email,
        first_name: form.first_name,
        last_name: form.last_name,
        is_importador: form.userType === 'importador',
        is_active: form.is_active,
      };
      if (form.userType === 'importador') {
        payload.rfc = Array.isArray(form.rfc) ? form.rfc : [];
      }
      if (form.password) payload.password = form.password;

      if (isEditing) {
        await updateUser(id, payload);
        await syncRoles(id);
        showMessage('Usuario actualizado exitosamente', 'success');
      } else {
        const newUser = await createUser(payload);
        const newUserId = newUser?.id;
        if (newUserId && selectedRoleIds.length > 0) {
          await Promise.all(
            selectedRoleIds.map(roleId => assignUserRole(newUserId, roleId).catch(() => null))
          );
        }
        showMessage('Usuario creado exitosamente', 'success');
      }
      navigate('/users');
    } catch (err) {
      showMessage(err.message, 'error');
    } finally {
      setSubmitting(false);
    }
  };

  const isImportador = form.userType === 'importador';

  if (loadingUser) {
    return (
      <div className="min-h-screen p-4 sm:p-6 bg-gradient-to-br from-gray-50 to-blue-50 flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
      </div>
    );
  }

  return (
    <div className="min-h-screen p-4 sm:p-6 bg-gradient-to-br from-gray-50 to-blue-50">
      <div className="max-w-3xl mx-auto">

        {/* Header */}
        <div className="mb-8 relative overflow-hidden rounded-2xl shadow bg-gradient-to-r from-blue-600 via-blue-700 to-blue-800 border border-blue-200 p-6 sm:p-8 flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6">
          <div className="flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-full p-3 sm:p-4 shadow-lg animate-bounce-slow">
            <svg className="h-8 w-8 sm:h-10 sm:w-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </svg>
          </div>
          <div className="flex-1">
            <h1 className="text-2xl sm:text-3xl font-extrabold text-white tracking-tight mb-1">
              {isEditing ? 'Editar Usuario' : 'Nuevo Usuario'}
            </h1>
            <p className="text-sm sm:text-base text-white/80 font-medium">
              {isEditing ? 'Modifica los datos del usuario seleccionado' : 'Registro en el Sistema de Gestión de Usuarios'}
            </p>
          </div>
          <button
            type="button"
            onClick={() => navigate('/users')}
            className="flex-shrink-0 inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 text-white text-sm font-medium rounded-lg border border-white/30 transition-all duration-200"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            Regresar
          </button>
          <div className="absolute -top-10 -right-10 opacity-20 pointer-events-none select-none">
            <svg width="120" height="120" viewBox="0 0 120 120" fill="none">
              <circle cx="60" cy="60" r="50" fill="white" fillOpacity="0.15" />
            </svg>
          </div>
        </div>

        <form onSubmit={handleSubmit} className="space-y-6">

          {/* Tipo de usuario — solo en creación */}
          {!isEditing && (
            <div className="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 fade-in-up-users">
              <div className="flex items-center mb-4 pb-3 border-b border-gray-200">
                <div className="bg-purple-600 rounded-lg p-2 mr-3 shadow-sm">
                  <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
                  </svg>
                </div>
                <div>
                  <h4 className="text-sm font-semibold text-slate-800">Tipo de Usuario</h4>
                  <p className="text-xs text-slate-500">Define el rol principal del nuevo usuario</p>
                </div>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <button
                  type="button"
                  onClick={() => handleUserTypeChange('agente')}
                  className={`relative flex flex-col items-start p-4 rounded-xl border-2 transition-all duration-200 ${
                    !isImportador
                      ? 'border-blue-500 bg-blue-50 shadow-md'
                      : 'border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-50/50'
                  }`}
                >
                  <div className={`w-10 h-10 rounded-lg flex items-center justify-center mb-3 ${!isImportador ? 'bg-blue-600' : 'bg-gray-200'}`}>
                    <svg className={`w-5 h-5 ${!isImportador ? 'text-white' : 'text-gray-500'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                  </div>
                  <span className={`text-sm font-semibold ${!isImportador ? 'text-blue-800' : 'text-gray-700'}`}>Agente Aduanal</span>
                  <span className="text-xs text-gray-500 mt-1">Gestión de trámites aduaneros</span>
                  {!isImportador && (
                    <div className="absolute top-3 right-3 w-5 h-5 bg-blue-600 rounded-full flex items-center justify-center">
                      <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                  )}
                </button>
                <button
                  type="button"
                  onClick={() => handleUserTypeChange('importador')}
                  className={`relative flex flex-col items-start p-4 rounded-xl border-2 transition-all duration-200 ${
                    isImportador
                      ? 'border-blue-500 bg-blue-50 shadow-md'
                      : 'border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-50/50'
                  }`}
                >
                  <div className={`w-10 h-10 rounded-lg flex items-center justify-center mb-3 ${isImportador ? 'bg-blue-600' : 'bg-gray-200'}`}>
                    <svg className={`w-5 h-5 ${isImportador ? 'text-white' : 'text-gray-500'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                    </svg>
                  </div>
                  <span className={`text-sm font-semibold ${isImportador ? 'text-blue-800' : 'text-gray-700'}`}>Importador</span>
                  <span className="text-xs text-gray-500 mt-1">Empresa con RFCs asociados</span>
                  {isImportador && (
                    <div className="absolute top-3 right-3 w-5 h-5 bg-blue-600 rounded-full flex items-center justify-center">
                      <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                  )}
                </button>
              </div>
            </div>
          )}

          {/* Información Personal */}
          <div className="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 fade-in-up-users" style={{ animationDelay: '0.05s' }}>
            <div className="flex items-center mb-4 pb-3 border-b border-gray-200">
              <div className="bg-blue-600 rounded-lg p-2 mr-3 shadow-sm">
                <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
              </div>
              <div>
                <h4 className="text-sm font-semibold text-slate-800">Información Personal</h4>
                <p className="text-xs text-slate-500">Datos de identificación del usuario</p>
              </div>
            </div>
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
              <div className="space-y-1">
                <label className="block text-xs font-semibold text-slate-700">
                  Nombre de usuario <span className="text-red-600">*</span>
                </label>
                <input
                  type="text"
                  name="username"
                  value={form.username}
                  onChange={handleChange}
                  required
                  className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm"
                  placeholder="nombre_usuario"
                />
              </div>
              <div className="space-y-1">
                <label className="block text-xs font-semibold text-slate-700">
                  Correo electrónico <span className="text-red-600">*</span>
                </label>
                <input
                  type="email"
                  name="email"
                  value={form.email}
                  onChange={handleChange}
                  required
                  className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm"
                  placeholder="usuario@ejemplo.com"
                />
              </div>
              <div className="space-y-1">
                <label className="block text-xs font-semibold text-slate-700">Nombre</label>
                <input
                  type="text"
                  name="first_name"
                  value={form.first_name}
                  onChange={handleChange}
                  className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm"
                  placeholder="Nombre del usuario"
                />
              </div>
              <div className="space-y-1">
                <label className="block text-xs font-semibold text-slate-700">Apellido</label>
                <input
                  type="text"
                  name="last_name"
                  value={form.last_name}
                  onChange={handleChange}
                  className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm"
                  placeholder="Apellido del usuario"
                />
              </div>
            </div>
          </div>

          {/* RFC — solo para importadores */}
          {isImportador && (
            <div className="bg-white rounded-2xl shadow-lg border border-blue-100 p-6 fade-in-up-users" style={{ animationDelay: '0.1s' }}>
              <div className="flex items-center mb-4 pb-3 border-b border-blue-200">
                <div className="bg-blue-700 rounded-lg p-2 mr-3 shadow-sm">
                  <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
                </div>
                <div>
                  <h4 className="text-sm font-semibold text-slate-800">Información Fiscal</h4>
                  <p className="text-xs text-slate-500">RFCs de importadores asociados al usuario (puede ser más de uno)</p>
                </div>
              </div>
              {importadores.length === 0 ? (
                <p className="text-sm text-gray-500 italic">No hay importadores disponibles en el catálogo.</p>
              ) : (
                <div className="flex flex-col sm:flex-row gap-3 items-stretch">
                  {/* Columna izquierda — disponibles */}
                  <div className="flex-1 flex flex-col min-w-0">
                    <div className="flex items-center justify-between mb-1.5">
                      <span className="text-xs font-semibold text-slate-600 uppercase tracking-wide">Disponibles</span>
                      <span className="text-xs text-slate-400 font-mono">
                        {importadores.filter(imp => !(Array.isArray(form.rfc) && form.rfc.includes(imp.rfc))).length}
                      </span>
                    </div>
                    <div className="border border-slate-200 rounded-xl bg-slate-50 overflow-hidden flex flex-col" style={{ minHeight: '200px', maxHeight: '280px' }}>
                      <div className="overflow-y-auto flex-1">
                        {importadores.filter(imp => !(Array.isArray(form.rfc) && form.rfc.includes(imp.rfc))).length === 0 ? (
                          <div className="flex items-center justify-center h-full py-8 text-xs text-slate-400 italic">
                            Todos los RFC han sido asignados
                          </div>
                        ) : (
                          importadores
                            .filter(imp => !(Array.isArray(form.rfc) && form.rfc.includes(imp.rfc)))
                            .map(imp => (
                              <div
                                key={imp.rfc}
                                onDoubleClick={() => handleRfcToggle(imp.rfc)}
                                className="flex items-center justify-between px-3 py-2 border-b border-slate-100 last:border-b-0 text-xs font-mono text-slate-700 hover:bg-blue-50 hover:text-blue-800 cursor-pointer select-none group transition-colors duration-100"
                                title="Doble clic para agregar"
                              >
                                <span className="uppercase truncate">{imp.rfc}</span>
                                <svg className="w-3.5 h-3.5 text-slate-300 group-hover:text-blue-400 flex-shrink-0 ml-2 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
                                </svg>
                              </div>
                            ))
                        )}
                      </div>
                    </div>
                  </div>

                  {/* Botones centrales */}
                  <div className="flex sm:flex-col items-center justify-center gap-2 py-2 sm:py-0">
                    <button
                      type="button"
                      title="Agregar todos"
                      onClick={() => setForm(prev => ({ ...prev, rfc: importadores.map(i => i.rfc) }))}
                      className="w-8 h-8 rounded-lg border border-slate-300 bg-white hover:bg-blue-50 hover:border-blue-400 flex items-center justify-center transition-colors shadow-sm"
                    >
                      <svg className="w-4 h-4 text-slate-500 hover:text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
                      </svg>
                    </button>
                    <button
                      type="button"
                      title="Quitar todos"
                      onClick={() => setForm(prev => ({ ...prev, rfc: [] }))}
                      className="w-8 h-8 rounded-lg border border-slate-300 bg-white hover:bg-red-50 hover:border-red-400 flex items-center justify-center transition-colors shadow-sm"
                    >
                      <svg className="w-4 h-4 text-slate-500 hover:text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
                      </svg>
                    </button>
                  </div>

                  {/* Columna derecha — seleccionados */}
                  <div className="flex-1 flex flex-col min-w-0">
                    <div className="flex items-center justify-between mb-1.5">
                      <span className="text-xs font-semibold text-blue-700 uppercase tracking-wide">Asignados</span>
                      <span className="text-xs text-blue-500 font-mono font-semibold">
                        {Array.isArray(form.rfc) ? form.rfc.length : 0}
                      </span>
                    </div>
                    <div className="border border-blue-200 rounded-xl bg-blue-50/40 overflow-hidden flex flex-col" style={{ minHeight: '200px', maxHeight: '280px' }}>
                      <div className="overflow-y-auto flex-1">
                        {!Array.isArray(form.rfc) || form.rfc.length === 0 ? (
                          <div className="flex items-center justify-center h-full py-8 text-xs text-slate-400 italic">
                            Sin RFC asignados
                          </div>
                        ) : (
                          form.rfc.map(r => (
                            <div
                              key={r}
                              onDoubleClick={() => handleRfcToggle(r)}
                              className="flex items-center justify-between px-3 py-2 border-b border-blue-100 last:border-b-0 text-xs font-mono text-blue-800 hover:bg-red-50 hover:text-red-700 cursor-pointer select-none group transition-colors duration-100"
                              title="Doble clic para quitar"
                            >
                              <svg className="w-3.5 h-3.5 text-blue-300 group-hover:text-red-400 flex-shrink-0 mr-2 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
                              </svg>
                              <span className="uppercase truncate flex-1">{r}</span>
                            </div>
                          ))
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* Perfiles RBAC */}
          <div className="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 fade-in-up-users" style={{ animationDelay: '0.15s' }}>
            <div className="flex items-center justify-between mb-4 pb-3 border-b border-gray-200">
              <div className="flex items-center">
                <div className="bg-indigo-600 rounded-lg p-2 mr-3 shadow-sm">
                  <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                  </svg>
                </div>
                <div>
                  <h4 className="text-sm font-semibold text-slate-800">Perfiles</h4>
                  <p className="text-xs text-slate-500">
                    Asigna los perfiles que tendrá este usuario en la organización
                  </p>
                </div>
              </div>
              {selectedRoleIds.length > 0 && (
                <span className="text-xs text-indigo-600 font-semibold bg-indigo-50 px-2 py-0.5 rounded-full border border-indigo-200">
                  {selectedRoleIds.length} seleccionado{selectedRoleIds.length !== 1 ? 's' : ''}
                </span>
              )}
            </div>

            {loadingRoles ? (
              <div className="flex items-center justify-center py-8">
                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-indigo-600" />
              </div>
            ) : availableRoles.length === 0 ? (
              <div className="text-center py-8 text-slate-400">
                <svg className="w-8 h-8 mx-auto mb-2 opacity-40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
                <p className="text-xs">No hay perfiles disponibles en la organización</p>
              </div>
            ) : (
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                {availableRoles.map(role => {
                  const active = selectedRoleIds.includes(role.id);
                  return (
                    <button
                      key={role.id}
                      type="button"
                      onClick={() => handleRoleToggle(role.id)}
                      className={`relative flex flex-col items-start p-3 rounded-xl border-2 text-left transition-all duration-200 ${
                        active
                          ? 'border-indigo-500 bg-indigo-50'
                          : 'border-gray-200 bg-white hover:border-indigo-300 hover:bg-indigo-50/40'
                      }`}
                    >
                      <div className="flex items-center gap-2 w-full">
                        <div className={`w-6 h-6 rounded-md flex items-center justify-center flex-shrink-0 ${active ? 'bg-indigo-600' : 'bg-gray-100'}`}>
                          {role.is_admin_role ? (
                            <svg className={`w-3.5 h-3.5 ${active ? 'text-white' : 'text-amber-500'}`} fill="currentColor" viewBox="0 0 24 24">
                              <path d="M12 2l2.09 6.26L20 10l-5 4.87L16.18 22 12 18.77 7.82 22 9 14.87 4 10l5.91-1.74z" />
                            </svg>
                          ) : (
                            <svg className={`w-3.5 h-3.5 ${active ? 'text-white' : 'text-gray-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                            </svg>
                          )}
                        </div>
                        <span className={`text-xs font-semibold truncate flex-1 ${active ? 'text-indigo-800' : 'text-gray-700'}`}>
                          {role.nombre}
                        </span>
                      </div>
                      {role.is_admin_role && (
                        <span className="mt-1.5 text-xs text-amber-600 font-medium">Administrador</span>
                      )}
                      {active && (
                        <div className="absolute top-2 right-2 w-4 h-4 bg-indigo-600 rounded-full flex items-center justify-center">
                          <svg className="w-2.5 h-2.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                          </svg>
                        </div>
                      )}
                    </button>
                  );
                })}
              </div>
            )}
          </div>

          {/* Credenciales */}
          <div className="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 fade-in-up-users" style={{ animationDelay: '0.2s' }}>
            <div className="flex items-center mb-4 pb-3 border-b border-gray-200">
              <div className="bg-red-600 rounded-lg p-2 mr-3 shadow-sm">
                <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
              </div>
              <div>
                <h4 className="text-sm font-semibold text-slate-800">Credenciales de Acceso</h4>
                <p className="text-xs text-slate-500">
                  {isEditing ? 'Deja en blanco para mantener la contraseña actual' : 'Configura la contraseña de acceso'}
                </p>
              </div>
            </div>
            <div className="space-y-4">

              {/* Estado */}
              <div className="flex items-center justify-between p-3 rounded-xl border border-slate-200 bg-slate-50">
                <div className="flex items-center gap-3">
                  <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${form.is_active ? 'bg-blue-100' : 'bg-slate-200'}`}>
                    <svg className={`w-4 h-4 ${form.is_active ? 'text-blue-600' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={form.is_active ? 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z' : 'M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636'} />
                    </svg>
                  </div>
                  <div>
                    <p className="text-xs font-semibold text-slate-700">Estado de la cuenta</p>
                    <p className={`text-xs ${form.is_active ? 'text-blue-600' : 'text-slate-400'}`}>
                      {form.is_active ? 'Activo — el usuario puede iniciar sesión' : 'Inactivo — acceso bloqueado'}
                    </p>
                  </div>
                </div>
                <button
                  type="button"
                  onClick={() => setForm(prev => ({ ...prev, is_active: !prev.is_active }))}
                  className={`relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${form.is_active ? 'bg-blue-600' : 'bg-slate-300'}`}
                  role="switch"
                  aria-checked={form.is_active}
                >
                  <span className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition-transform duration-200 ${form.is_active ? 'translate-x-5' : 'translate-x-0'}`} />
                </button>
              </div>

              {/* Contraseña */}
              <div className="space-y-1">
                <label className="block text-xs font-semibold text-slate-700">
                  Contraseña {!isEditing && <span className="text-red-600">*</span>}
                </label>
                <div className="relative">
                  <input
                    type={showPassword ? 'text' : 'password'}
                    name="password"
                    value={form.password}
                    onChange={handleChange}
                    required={!isEditing}
                    className={`w-full px-3 py-2 pr-10 border rounded-md shadow-sm focus:ring-2 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm ${
                      showPasswordValidation && isPasswordValid()
                        ? 'border-green-300 focus:ring-green-500 focus:border-green-500'
                        : showPasswordValidation
                        ? 'border-red-300 focus:ring-red-500 focus:border-red-500'
                        : 'border-slate-300 focus:ring-red-500 focus:border-red-500'
                    }`}
                    placeholder={isEditing ? 'Dejar vacío para mantener actual' : 'Contraseña segura del usuario'}
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(v => !v)}
                    className="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600"
                  >
                    {showPassword ? (
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L8.464 8.464m1.414 1.414L21.536 21.536" />
                      </svg>
                    ) : (
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                      </svg>
                    )}
                  </button>
                </div>
                {showPasswordValidation && (
                  <div className="mt-3 p-3 bg-slate-100 rounded-lg border">
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-xs font-semibold text-slate-700">Requisitos de contraseña:</span>
                      {isPasswordValid() && (
                        <div className="flex items-center text-green-600">
                          <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                          </svg>
                          <span className="text-xs font-medium">Válida</span>
                        </div>
                      )}
                    </div>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                      {[
                        { key: 'length', label: 'Mínimo 8 caracteres' },
                        { key: 'uppercase', label: 'Una letra mayúscula' },
                        { key: 'lowercase', label: 'Una letra minúscula' },
                        { key: 'number', label: 'Un número' },
                        { key: 'special', label: 'Un carácter especial (!@#$%^&*)', span: true },
                      ].map(({ key, label, span }) => (
                        <div key={key} className={`flex items-center text-xs ${passwordValidation[key] ? 'text-green-600' : 'text-red-500'} ${span ? 'sm:col-span-2' : ''}`}>
                          <svg className="w-3 h-3 mr-1.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={passwordValidation[key] ? 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z' : 'M6 18L18 6M6 6l12 12'} />
                          </svg>
                          {label}
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>

              {/* Confirmar contraseña */}
              <div className="space-y-1">
                <label className="block text-xs font-semibold text-slate-700">
                  Confirmar Contraseña {!isEditing && <span className="text-red-600">*</span>}
                </label>
                <div className="relative">
                  <input
                    type={showConfirmPassword ? 'text' : 'password'}
                    name="confirmPassword"
                    value={form.confirmPassword}
                    onChange={handleChange}
                    required={!isEditing}
                    className={`w-full px-3 py-2 pr-10 border rounded-md shadow-sm focus:ring-2 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm ${
                      showPasswordMatchValidation && passwordsMatch && form.confirmPassword.length > 0
                        ? 'border-green-300 focus:ring-green-500 focus:border-green-500'
                        : showPasswordMatchValidation && !passwordsMatch
                        ? 'border-red-300 focus:ring-red-500 focus:border-red-500'
                        : 'border-slate-300 focus:ring-red-500 focus:border-red-500'
                    }`}
                    placeholder="Confirme la contraseña"
                  />
                  <button
                    type="button"
                    onClick={() => setShowConfirmPassword(v => !v)}
                    className="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600"
                  >
                    {showConfirmPassword ? (
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L8.464 8.464m1.414 1.414L21.536 21.536" />
                      </svg>
                    ) : (
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                      </svg>
                    )}
                  </button>
                </div>
                {showPasswordMatchValidation && (
                  <div className={`mt-2 flex items-center text-xs ${passwordsMatch ? 'text-green-600' : 'text-red-500'}`}>
                    <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={passwordsMatch ? 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z' : 'M6 18L18 6M6 6l12 12'} />
                    </svg>
                    <span className="font-medium">
                      {passwordsMatch ? 'Las contraseñas coinciden' : 'Las contraseñas no coinciden'}
                    </span>
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Botones */}
          <div className="flex flex-col sm:flex-row justify-end gap-3 pb-8 fade-in-up-users" style={{ animationDelay: '0.25s' }}>
            <button
              type="button"
              onClick={() => navigate('/users')}
              disabled={submitting}
              className="w-full sm:w-auto px-6 py-2.5 border border-slate-300 rounded-lg shadow-sm text-sm font-semibold text-slate-700 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 transition-all duration-200 disabled:opacity-50"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={submitting || (showPasswordValidation && !isFormValid())}
              className="w-full sm:w-auto px-6 py-2.5 border border-transparent rounded-lg shadow-lg text-sm font-semibold text-white bg-gradient-to-r from-blue-700 to-blue-900 hover:from-blue-800 hover:to-blue-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {submitting && <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white" />}
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={isEditing ? 'M5 13l4 4L19 7' : 'M12 6v6m0 0v6m0-6h6m-6 0H6'} />
              </svg>
              <span>
                {submitting
                  ? (isEditing ? 'Actualizando...' : 'Creando...')
                  : (isEditing ? 'Actualizar Usuario' : 'Crear Usuario')}
              </span>
            </button>
          </div>

        </form>
      </div>
    </div>
  );
}