import { useState } from 'react';
import Swal from 'sweetalert2';
import { Plus, Trash2 } from 'lucide-react';
import { UnitProdi } from '../../types';

interface UnitProdiManagementProps {
  units: UnitProdi[];
  onAddUnit: (nama: string) => Promise<void>;
  onDeleteUnit: (id: string) => Promise<void>;
  triggerBanner: (msg: string) => void;
}

export default function UnitProdiManagement({
  units,
  onAddUnit,
  onDeleteUnit,
  triggerBanner
}: UnitProdiManagementProps) {
  const [newUnitName, setNewUnitName] = useState('');

  return (
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
      {/* Left panel: list of units */}
      <div className="bg-white dark:bg-slate-800 p-6 rounded-2xl border border-slate-100 dark:border-slate-700/60 shadow-sm lg:col-span-8">
        <h3 className="font-extrabold text-slate-800 dark:text-white text-base mb-1">Kelola Pilihan Unit Kerja / Program Studi</h3>
        <p className="text-xs text-slate-400 mb-6">Kelola pilihan unit kerja / prodi responden yang muncul di form kuesioner utama.</p>
        
        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs border-collapse">
            <thead>
              <tr className="border-b border-slate-100 dark:border-slate-700 text-slate-400 font-bold uppercase tracking-wider">
                <th className="pb-3 w-16">No</th>
                <th className="pb-3">Nama Unit / Prodi</th>
                <th className="pb-3 text-right pr-2">Aksi</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100 dark:divide-slate-700">
              {units.length === 0 ? (
                <tr>
                  <td colSpan={3} className="py-4 text-center text-slate-400 italic">
                    Belum ada unit kerja / prodi terdaftar.
                  </td>
                </tr>
              ) : (
                units.map((unit, idx) => (
                  <tr key={unit.id} className="text-slate-700 dark:text-slate-300">
                    <td className="py-3 font-mono text-[10px] text-slate-400">{idx + 1}</td>
                    <td className="py-3 font-bold text-slate-800 dark:text-white">{unit.nama}</td>
                    <td className="py-3 text-right pr-2">
                      <button
                        onClick={() => {
                          Swal.fire({
                            title: 'Hapus Unit/Prodi?',
                            text: `Apakah Anda yakin ingin menghapus "${unit.nama}"? Tindakan ini tidak menghapus data respons/undangan lama, namun opsi ini tidak akan lagi muncul di form.`,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#d33',
                            cancelButtonColor: '#3085d6',
                            confirmButtonText: 'Ya, Hapus!',
                            cancelButtonText: 'Batal'
                          }).then((result) => {
                            if (result.isConfirmed) {
                              onDeleteUnit(unit.id);
                              Swal.fire({
                                icon: 'success',
                                title: 'Terhapus!',
                                text: `Unit/prodi '${unit.nama}' berhasil dihapus.`,
                                timer: 2000,
                                showConfirmButton: false
                              });
                            }
                          });
                        }}
                        className="p-1.5 text-slate-400 hover:text-rose-500 rounded-md hover:bg-rose-50 dark:hover:bg-rose-950/20 transition cursor-pointer"
                        title="Hapus Unit/Prodi"
                      >
                        <Trash2 className="h-4 w-4" />
                      </button>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Right panel: add new unit */}
      <div className="bg-white dark:bg-slate-800 p-6 rounded-2xl border border-slate-100 dark:border-slate-700/60 shadow-sm lg:col-span-4 h-fit space-y-4">
        <h3 className="font-extrabold text-slate-800 dark:text-white text-base">Tambah Unit / Prodi</h3>
        <form
          onSubmit={(e) => {
            e.preventDefault();
            if (!newUnitName.trim()) return;
            if (units.some(u => u.nama.toLowerCase() === newUnitName.trim().toLowerCase())) {
              Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: 'Nama unit/prodi tersebut sudah terdaftar.'
              });
              return;
            }
            onAddUnit(newUnitName.trim());
            Swal.fire({
              icon: 'success',
              title: 'Berhasil!',
              text: `Unit kerja/prodi '${newUnitName}' berhasil didaftarkan.`,
              timer: 2000,
              showConfirmButton: false
            });
            setNewUnitName('');
          }}
          className="space-y-4"
        >
          <div>
            <label htmlFor="new-unit-input" className="block text-[10px] font-semibold text-slate-500 uppercase tracking-widest mb-1.5">
              Nama Unit Kerja / Program Studi
            </label>
            <input
              id="new-unit-input"
              type="text"
              required
              value={newUnitName}
              onChange={(e) => setNewUnitName(e.target.value)}
              placeholder="Contoh: S1 Farmasi, Kepegawaian, BAA"
              className="w-full text-xs px-3.5 py-2 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-800 dark:text-white rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          <button
            type="submit"
            className="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-xs font-bold transition shadow-md cursor-pointer flex items-center justify-center gap-1.5"
          >
            <Plus className="h-4 w-4" />
            <span>Daftarkan Unit / Prodi</span>
          </button>
        </form>
      </div>
    </div>
  );
}