import { useState } from 'react';
import Swal from 'sweetalert2';
import { 
  Plus, 
  Edit, 
  Trash2, 
  Shield 
} from 'lucide-react';
import { Leader, AdminUser } from '../../types';
import LeaderModal from './LeaderModal';
import AdminModal from './AdminModal';

interface UserManagementProps {
  leaders: Leader[];
  admins: AdminUser[];
  onAddLeader: (leader: Omit<Leader, 'id'>) => void;
  onEditLeader: (id: string, leader: Omit<Leader, 'id'>) => void;
  onDeleteLeader: (id: string) => void;
  onAddAdmin: (admin: Omit<AdminUser, 'id' | 'createdAt'> & { password?: string }) => void;
  onEditAdmin: (id: string, admin: Omit<AdminUser, 'id' | 'createdAt'> & { password?: string }) => Promise<void>;
  onDeleteAdmin: (id: string) => void;
  triggerBanner: (msg: string) => void;
}

export default function UserManagement({
  leaders,
  admins,
  onAddLeader,
  onEditLeader,
  onDeleteLeader,
  onAddAdmin,
  onEditAdmin,
  onDeleteAdmin
}: UserManagementProps) {
  // Modal / Editor States for Leaders
  const [isLeaderModalOpen, setIsLeaderModalOpen] = useState(false);
  const [editingLeader, setEditingLeader] = useState<Leader | null>(null);

  // Modal for Admin accounts
  const [isAdminModalOpen, setIsAdminModalOpen] = useState(false);
  const [editingAdmin, setEditingAdmin] = useState<AdminUser | null>(null);

  // Handle Leader Save (Add / Edit)
  const handleLeaderSave = (leaderData: Omit<Leader, 'id'>) => {
    if (editingLeader) {
      onEditLeader(editingLeader.id, leaderData);
      Swal.fire({
        icon: 'success',
        title: 'Berhasil!',
        text: `Data Pimpinan '${leaderData.name}' berhasil diperbarui.`,
        timer: 2000,
        showConfirmButton: false
      });
    } else {
      onAddLeader(leaderData);
      Swal.fire({
        icon: 'success',
        title: 'Berhasil!',
        text: `Pimpinan baru '${leaderData.name}' berhasil didaftarkan.`,
        timer: 2000,
        showConfirmButton: false
      });
    }
    setEditingLeader(null);
    setIsLeaderModalOpen(false);
  };

  // Handle Admin Save (Add / Edit)
  const handleAdminSave = async (adminData: Omit<AdminUser, 'id' | 'createdAt'> & { password?: string }) => {
    if (editingAdmin) {
      try {
        await onEditAdmin(editingAdmin.id, adminData);
        Swal.fire({
          icon: 'success',
          title: 'Berhasil!',
          text: `Akun admin '${adminData.name}' berhasil diperbarui.`,
          timer: 2000,
          showConfirmButton: false
        });
        setEditingAdmin(null);
        setIsAdminModalOpen(false);
      } catch (err: any) {
        Swal.fire({
          icon: 'error',
          title: 'Gagal',
          text: err.message || 'Gagal memperbarui admin.'
        });
      }
    } else {
      if (admins.some(a => a.username === adminData.username)) {
        Swal.fire({
          icon: 'error',
          title: 'Gagal',
          text: `Username admin '${adminData.username}' sudah terdaftar.`
        });
        return;
      }

      onAddAdmin(adminData);
      Swal.fire({
        icon: 'success',
        title: 'Berhasil!',
        text: `Pengguna admin '${adminData.name}' berhasil terdaftar.`,
        timer: 2000,
        showConfirmButton: false
      });
      setIsAdminModalOpen(false);
    }
  };

  return (
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
      {/* Section A: Leaders management list (Left panel) */}
      <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">
        <div className="flex justify-between items-center mb-6">
          <div>
            <h3 className="font-extrabold text-slate-800 dark:text-white text-base">Kelola Pimpinan Akademik ({leaders.length})</h3>
            <p className="text-xs text-slate-400 mt-0.5">Daftar pimpinan YPT-GKP yang tertera di form dropdown penilaian</p>
          </div>
          
          <button
            onClick={() => {
              setEditingLeader(null);
              setIsLeaderModalOpen(true);
            }}
            id="btn-add-leader-trigger"
            className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold rounded-lg transition cursor-pointer"
          >
            <Plus className="h-4 w-4" />
            <span>Tambah Pimpinan</span>
          </button>
        </div>

        {/* Leaders interactive lists */}
        <div className="space-y-3.5">
          {leaders.map(lead => (
            <div 
              key={lead.id}
              className="p-4 bg-slate-50 dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-xl flex justify-between items-center hover:border-slate-200 dark:hover:border-slate-700 transition"
            >
              <div>
                <div className="flex items-center gap-2">
                  <span className="text-[10px] font-bold text-blue-600 dark:text-blue-400 uppercase tracking-widest bg-blue-50 dark:bg-blue-950/40 px-2 py-0.5 rounded">
                    {lead.position}
                  </span>
                  <span className="text-[10px] text-slate-400 font-semibold font-mono bg-white dark:bg-slate-800 border dark:border-slate-700 px-1.5 py-0.5 rounded">
                    ID: {lead.id}
                  </span>
                </div>
                <h4 className="font-bold text-sm text-slate-800 dark:text-white mt-1.5">
                  {lead.name === lead.position ? lead.position : lead.name}
                </h4>
                <p className="text-xs text-slate-500 mt-0.5">
                  {lead.name === lead.position ? lead.department : `${lead.position} — ${lead.department}`}
                </p>
              </div>

              <div className="flex gap-2 shrink-0">
                <button
                  onClick={() => {
                    setEditingLeader(lead);
                    setIsLeaderModalOpen(true);
                  }}
                  className="p-2 text-slate-500 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-slate-800 dark:text-slate-400 rounded-lg transition cursor-pointer"
                  title="Modifikasi data pimpinan"
                >
                  <Edit className="h-4 w-4" />
                </button>
                <button
                  onClick={() => {
                    Swal.fire({
                      title: 'Hapus Pimpinan?',
                      text: `Apakah Anda yakin menghapus Pimpinan '${lead.name}'? Evaluasi yang terhubung ke pimpinan ini mungkin kehilangan identitas relasinya.`,
                      icon: 'warning',
                      showCancelButton: true,
                      confirmButtonColor: '#d33',
                      cancelButtonColor: '#3085d6',
                      confirmButtonText: 'Ya, Hapus!',
                      cancelButtonText: 'Batal'
                    }).then((result) => {
                      if (result.isConfirmed) {
                        onDeleteLeader(lead.id);
                        Swal.fire({
                          icon: 'success',
                          title: 'Terhapus!',
                          text: `Berhasil menghapus pimpinan '${lead.name}'.`,
                          timer: 2000,
                          showConfirmButton: false
                        });
                      }
                    });
                  }}
                  className="p-2 text-slate-500 hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/20 dark:text-slate-400 rounded-lg transition cursor-pointer"
                  title="Hapus pimpinan"
                >
                  <Trash2 className="h-4 w-4" />
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Section B: Administrator accounts checklist (Right panel) */}
      <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 flex flex-col justify-between">
        <div>
          <div className="flex justify-between items-center mb-4">
            <div>
              <h3 className="font-extrabold text-slate-800 dark:text-white text-sm">Kelola Keanggotaan Admin</h3>
              <p className="text-[11px] text-slate-400 mt-0.5">Pemegang hak akses portal komando</p>
            </div>

            <button
              onClick={() => {
                setEditingAdmin(null);
                setIsAdminModalOpen(true);
              }}
              id="btn-add-admin-trigger"
              className="p-1 px-2 border border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-600 rounded-md text-[10px] font-bold text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-750 shrink-0 transition cursor-pointer"
            >
              <span>Daftarkan Akun</span>
            </button>
          </div>

          <div className="space-y-2.5">
            {admins.map(adm => (
              <div 
                key={adm.id} 
                className="p-3 bg-slate-50 dark:bg-slate-900 rounded-xl border border-slate-100 dark:border-slate-800 flex items-center justify-between"
              >
                <div className="flex items-center gap-2.5">
                  <div className="h-8 w-8 bg-slate-200 dark:bg-slate-800 rounded-full flex items-center justify-center font-bold text-slate-700 dark:text-slate-300 font-mono text-xs">
                    {adm.username.slice(0,2).toUpperCase()}
                  </div>
                  <div>
                    <div className="flex items-center gap-1.5">
                      <span className="font-bold text-xs text-slate-800 dark:text-white">{adm.name}</span>
                      <span className={`text-[8px] font-bold uppercase px-1 rounded ${
                        adm.role === 'Super Admin' 
                          ? 'bg-amber-100 text-amber-700' 
                          : 'bg-slate-200 text-slate-600 dark:bg-slate-800 dark:text-slate-400'
                      }`}>
                        {adm.role === 'Super Admin' ? 'Super' : 'Staf'}
                      </span>
                    </div>
                    <span className="text-[10px] text-slate-400 font-mono block">@{adm.username}</span>
                  </div>
                </div>

                <div className="flex gap-1 shrink-0">
                  <button
                    onClick={() => {
                      setEditingAdmin(adm);
                      setIsAdminModalOpen(true);
                    }}
                    className="p-1.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-slate-800 rounded-md transition cursor-pointer"
                    title="Ubah Kredensial Admin"
                  >
                    <Edit className="h-3.5 w-3.5" />
                  </button>

                  {adm.username !== 'admin' && (
                    <button
                      onClick={() => {
                        Swal.fire({
                          title: 'Hapus Akses Admin?',
                          text: `Apakah Anda yakin ingin menghapus hak akses administrator '@${adm.username}'?`,
                          icon: 'warning',
                          showCancelButton: true,
                          confirmButtonColor: '#d33',
                          cancelButtonColor: '#3085d6',
                          confirmButtonText: 'Ya, Hapus!',
                          cancelButtonText: 'Batal'
                        }).then((result) => {
                          if (result.isConfirmed) {
                            onDeleteAdmin(adm.id);
                            Swal.fire({
                              icon: 'success',
                              title: 'Berhasil!',
                              text: `Berhasil memblokir akses admin '@${adm.username}'.`,
                              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 Hak Akses Admin"
                    >
                      <Trash2 className="h-3.5 w-3.5" />
                    </button>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="mt-8 bg-slate-50 dark:bg-slate-900/50 p-3.5 rounded-xl border border-slate-100 dark:border-slate-800 text-[10px] text-slate-500 dark:text-slate-400 flex items-start gap-1.5">
          <Shield className="h-4 w-4 text-blue-600 shrink-0 mt-0.5" />
          <span>
            <strong>Keamanan Data:</strong> Password default untuk seluruh user admin yang baru dibuat adalah <code className="font-semibold bg-white dark:bg-slate-800 border dark:border-slate-700 px-1 rounded">admin123</code>.
          </span>
        </div>
      </div>

      {/* --- ADD/EDIT LEADER MODAL --- */}
      <LeaderModal
        isOpen={isLeaderModalOpen}
        onClose={() => setIsLeaderModalOpen(false)}
        onSave={handleLeaderSave}
        editingLeader={editingLeader}
      />

      {/* --- REGISTER/EDIT ADMIN MODAL --- */}
      <AdminModal
        isOpen={isAdminModalOpen}
        onClose={() => {
          setIsAdminModalOpen(false);
          setEditingAdmin(null);
        }}
        onSave={handleAdminSave}
        editingAdmin={editingAdmin}
      />
    </div>
  );
}