import { useState, useEffect, FormEvent } from 'react';
import { motion } from 'motion/react';
import { X, UserPlus, Edit } from 'lucide-react';
import { AdminUser } from '../../types';

interface AdminModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (admin: Omit<AdminUser, 'id' | 'createdAt'> & { password?: string }) => void;
  editingAdmin?: AdminUser | null;
}

export default function AdminModal({
  isOpen,
  onClose,
  onSave,
  editingAdmin
}: AdminModalProps) {
  const [adminUsernameInput, setAdminUsernameInput] = useState('');
  const [adminRealName, setAdminRealName] = useState('');
  const [adminRole, setAdminRole] = useState<'Super Admin' | 'Evaluator'>('Evaluator');
  const [adminPassword, setAdminPassword] = useState('');

  useEffect(() => {
    if (editingAdmin) {
      setAdminUsernameInput(editingAdmin.username);
      setAdminRealName(editingAdmin.name);
      setAdminRole(editingAdmin.role as 'Super Admin' | 'Evaluator');
      setAdminPassword('');
    } else {
      setAdminUsernameInput('');
      setAdminRealName('');
      setAdminRole('Evaluator');
      setAdminPassword('');
    }
  }, [editingAdmin, isOpen]);

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    if (!adminUsernameInput.trim() || !adminRealName.trim()) return;

    onSave({
      username: adminUsernameInput.trim().toLowerCase(),
      name: adminRealName.trim(),
      role: adminRole,
      password: adminPassword.trim() || undefined
    });

    setAdminUsernameInput('');
    setAdminRealName('');
    setAdminRole('Evaluator');
    setAdminPassword('');
  };

  if (!isOpen) return null;

  const isEdit = !!editingAdmin;

  return (
    <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4 z-50">
      <motion.div
        initial={{ scale: 0.98, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        exit={{ scale: 0.98, opacity: 0 }}
        className="bg-white dark:bg-slate-800 max-w-sm w-full rounded-2xl shadow-xl border border-slate-100 dark:border-slate-700 overflow-hidden"
      >
        <div className="p-4 bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700 text-slate-800 dark:text-white flex justify-between items-center">
          <h3 className="font-extrabold text-[11px] uppercase tracking-wider flex items-center gap-1.5 text-slate-800 dark:text-white">
            {isEdit ? (
              <>
                <Edit className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                <span>Ubah Kredensial Admin</span>
              </>
            ) : (
              <>
                <UserPlus className="h-4 w-4 text-slate-700 dark:text-white" />
                <span>Daftarkan Akun Administrasi Baru</span>
              </>
            )}
          </h3>
          <button 
            onClick={onClose}
            className="text-slate-500 hover:text-slate-800 dark:hover:text-white transition cursor-pointer"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="p-5 space-y-4">
          <div>
            <label htmlFor="modal-admin-user" className="block text-[10px] font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1">Username Unik</label>
            <input
              id="modal-admin-user"
              type="text"
              required
              value={adminUsernameInput}
              onChange={(e) => setAdminUsernameInput(e.target.value)}
              placeholder="Contoh: syarifmutu"
              className="w-full text-xs px-3 py-2 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-800 dark:text-white rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"
            />
            <span className="text-[9px] text-slate-400 dark:text-slate-500 block mt-1">Hanya huruf/angka biasa, tanpa spasi.</span>
          </div>

          <div>
            <label htmlFor="modal-admin-name" className="block text-[10px] font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1 flex items-center gap-1">Nama Lengkap</label>
            <input
              id="modal-admin-name"
              type="text"
              required
              value={adminRealName}
              onChange={(e) => setAdminRealName(e.target.value)}
              placeholder="Contoh: Prof. Syarifudin"
              className="w-full text-xs px-3 py-2 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-800 dark:text-white rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"
            />
          </div>

          <div>
            <label htmlFor="modal-admin-role" className="block text-[10px] font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1">Tingkatan Hak Akses</label>
            <select
              id="modal-admin-role"
              value={adminRole}
              onChange={(e) => setAdminRole(e.target.value as 'Super Admin' | 'Evaluator')}
              className="w-full text-xs px-3 py-2 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-800 dark:text-white rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"
            >
              <option value="Evaluator">Staf Evaluator Mutu</option>
              <option value="Super Admin">Super Administrator</option>
            </select>
          </div>

          <div>
            <label htmlFor="modal-admin-password" className="block text-[10px] font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1">
              {isEdit ? 'Password Baru' : 'Password'}
            </label>
            <input
              id="modal-admin-password"
              type="password"
              value={adminPassword}
              onChange={(e) => setAdminPassword(e.target.value)}
              placeholder={isEdit ? 'Kosongkan jika tidak diubah' : 'Kosongkan untuk default: admin123'}
              className="w-full text-xs px-3 py-2 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-800 dark:text-white rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"
            />
          </div>

          <div className="pt-4 border-t border-slate-50 dark:border-slate-700 flex gap-2 justify-end">
            <button
              type="button"
              onClick={onClose}
              className="px-3 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 dark:bg-slate-700 dark:text-slate-300 rounded-lg text-xs font-bold cursor-pointer"
            >
              Batal
            </button>
            <button
              type="submit"
              className="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-xs font-bold cursor-pointer shadow-md"
            >
              {isEdit ? 'Simpan Perubahan' : 'Buat Akun'}
            </button>
          </div>
        </form>
      </motion.div>
    </div>
  );
}