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

interface LeaderModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (leader: Omit<Leader, 'id'>) => void;
  editingLeader: Leader | null;
}

export default function LeaderModal({
  isOpen,
  onClose,
  onSave,
  editingLeader
}: LeaderModalProps) {
  const [leaderName, setLeaderName] = useState('');
  const [leaderPosition, setLeaderPosition] = useState('');
  const [leaderDept, setLeaderDept] = useState('');

  useEffect(() => {
    if (editingLeader) {
      setLeaderName(editingLeader.name);
      setLeaderPosition(editingLeader.position);
      setLeaderDept(editingLeader.department);
    } else {
      setLeaderName('');
      setLeaderPosition('');
      setLeaderDept('');
    }
  }, [editingLeader, isOpen]);

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    if (!leaderPosition.trim() || !leaderDept.trim()) return;
    const finalName = leaderName.trim() || leaderPosition.trim();
    onSave({
      name: finalName,
      position: leaderPosition.trim(),
      department: leaderDept.trim()
    });
  };

  if (!isOpen) return null;

  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-md w-full rounded-2xl shadow-xl border border-slate-100 dark:border-slate-700 overflow-hidden"
      >
        <div className="p-5 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-sm uppercase tracking-wide text-slate-800 dark:text-white">
            {editingLeader ? 'Modifikasi Data Pimpinan' : 'Daftarkan Pimpinan Baru'}
          </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-6 space-y-4">
          <div>
            <label htmlFor="modal-leader-name" className="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1.5">Nama Pimpinan Lengkap (Opsional)</label>
            <input
              id="modal-leader-name"
              type="text"
              value={leaderName}
              onChange={(e) => setLeaderName(e.target.value)}
              placeholder="Kosongkan jika ingin memakai Jabatan"
              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-leader-position" className="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1.5">Jabatan / Sebutan</label>
            <input
              id="modal-leader-position"
              type="text"
              required
              value={leaderPosition}
              onChange={(e) => setLeaderPosition(e.target.value)}
              placeholder="Contoh: Rektor, Dekan, Kepala Biro"
              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-leader-dept" className="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1.5">Unit Kerja / Prodi</label>
            <input
              id="modal-leader-dept"
              type="text"
              required
              value={leaderDept}
              onChange={(e) => setLeaderDept(e.target.value)}
              placeholder="Contoh: Fakultas Farmasi, Biro Kepegawaian"
              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-4 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"
            >
              Simpan Perubahan
            </button>
          </div>
        </form>
      </motion.div>
    </div>
  );
}