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

interface WAInvitationModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (invite: Omit<WAInvitation, 'id' | 'sentCount'>) => void;
  editingInvitation: WAInvitation | null;
  units: UnitProdi[];
}

export default function WAInvitationModal({
  isOpen,
  onClose,
  onSave,
  editingInvitation,
  units
}: WAInvitationModalProps) {
  const [invitationName, setInvitationName] = useState('');
  const [invitationPhone, setInvitationPhone] = useState('');
  const [invitationRole, setInvitationRole] = useState<'Dosen' | 'Tenaga Kependidikan'>('Dosen');
  const [invitationUnit, setInvitationUnit] = useState('');

  useEffect(() => {
    if (editingInvitation) {
      setInvitationName(editingInvitation.name);
      setInvitationPhone(editingInvitation.phone);
      setInvitationRole(editingInvitation.role);
      setInvitationUnit(editingInvitation.unit);
    } else {
      setInvitationName('');
      setInvitationPhone('');
      setInvitationRole('Dosen');
      setInvitationUnit('');
    }
  }, [editingInvitation, isOpen]);

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    if (!invitationName.trim() || !invitationPhone.trim() || !invitationUnit.trim()) return;
    
    let cleanedPhone = invitationPhone.trim().replace(/[^\d+]/g, '');
    if (cleanedPhone.startsWith('0')) {
      cleanedPhone = '62' + cleanedPhone.slice(1);
    } else if (cleanedPhone.startsWith('+')) {
      cleanedPhone = cleanedPhone.slice(1);
    }

    onSave({
      name: invitationName.trim(),
      phone: cleanedPhone,
      role: invitationRole,
      unit: invitationUnit.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/60 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-xs uppercase tracking-wider flex items-center gap-1.5 font-sans text-slate-800 dark:text-white">
            <UserPlus className="h-4.5 w-4.5 text-emerald-600 dark:text-emerald-400" />
            <span>{editingInvitation ? 'Modifikasi Target Peserta' : 'Daftarkan Target Peserta 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 font-sans">
          <div>
            <label htmlFor="modal-inv-name" className="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1">Nama Penerima Lengkap</label>
            <input
              id="modal-inv-name"
              type="text"
              required
              value={invitationName}
              onChange={(e) => setInvitationName(e.target.value)}
              placeholder="Contoh: Ibu Roro Fitri Lestari"
              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-inv-phone" className="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1">No. WhatsApp / HP</label>
            <input
              id="modal-inv-phone"
              type="text"
              required
              value={invitationPhone}
              onChange={(e) => setInvitationPhone(e.target.value)}
              placeholder="Contoh: 08123456789 atau 628123456789"
              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">Gunakan format nomor biasa. Sistem akan mengonversinya secara aman.</span>
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label htmlFor="modal-inv-role" className="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1">Kategori Status Deklarasi</label>
              <select
                id="modal-inv-role"
                value={invitationRole}
                onChange={(e) => setInvitationRole(e.target.value as 'Dosen' | 'Tenaga Kependidikan')}
                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="Dosen">Dosen</option>
                <option value="Tenaga Kependidikan">Tenaga Kependidikan</option>
              </select>
            </div>

            <div>
              <label htmlFor="modal-inv-unit" className="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1 flex items-center gap-1">Unit Kerja / Prodi</label>
              <select
                id="modal-inv-unit"
                required
                value={invitationUnit}
                onChange={(e) => setInvitationUnit(e.target.value)}
                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 cursor-pointer"
              >
                <option value="">-- Pilih Unit Kerja / Prodi --</option>
                {units.map((u) => (
                  <option key={u.id} value={u.nama}>{u.nama}</option>
                ))}
              </select>
            </div>
          </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-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-bold cursor-pointer shadow-md"
            >
              {editingInvitation ? 'Simpan Perubahan' : 'Daftarkan Target'}
            </button>
          </div>
        </form>
      </motion.div>
    </div>
  );
}