'use client';

import { useState, useEffect } from 'react';
import { api } from '@/lib/api';
import { useAuth } from '@/components/auth-context';
import { DataTable } from '@/components/data-table/DataTable';
import { useRequirePermission } from '@/lib/useRequirePermission';
import { toast } from 'react-toastify';
import { showConfirmDelete } from '@/lib/confirm';

interface Education {
  id: number;
  name: string;
  is_active: boolean;
  sort_order: number;
}

export default function EducationMasterPage() {
  useRequirePermission('master_data.view_education');
  const { user } = useAuth();
  const [rows, setRows] = useState<Education[]>([]);
  const [loading, setLoading] = useState(true);

  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [name, setName] = useState('');
  const [sortOrder, setSortOrder] = useState(0);
  const [isActive, setIsActive] = useState(true);
  const [submitting, setSubmitting] = useState(false);

  const unwrap = (res: any): Education[] => {
    const d = res?.data ?? res;
    return Array.isArray(d) ? d : (d?.results ?? []);
  };

  const load = async () => {
    setLoading(true);
    try {
      const res = (await api.get('/master-data/educations?page_size=500')) as any;
      setRows(unwrap(res));
    } catch (err) {
      console.error('Failed to load educations:', err);
    } finally { setLoading(false); }
  };

  useEffect(() => { if (!user) return; load(); /* eslint-disable-next-line */ }, [user]);

  const openCreate = () => { setEditingId(null); setName(''); setSortOrder(rows.length); setIsActive(true); setIsModalOpen(true); };
  const openEdit = (e: Education) => { setEditingId(e.id); setName(e.name); setSortOrder(e.sort_order); setIsActive(e.is_active); setIsModalOpen(true); };

  const save = async (ev: React.FormEvent) => {
    ev.preventDefault();
    if (!name.trim()) { toast.error('Name is required.'); return; }
    setSubmitting(true);
    try {
      const payload = { name: name.trim(), sort_order: sortOrder, is_active: isActive };
      if (editingId) await api.patch(`/master-data/educations/${editingId}`, payload);
      else await api.post('/master-data/educations', payload);
      toast.success(`Qualification ${editingId ? 'updated' : 'added'}.`);
      setIsModalOpen(false);
      await load();
    } catch (err: any) {
      toast.error(err?.data?.message || err?.data?.errors?.name?.[0] || 'Could not save.');
    } finally { setSubmitting(false); }
  };

  const remove = async (e: Education) => {
    const ok = await showConfirmDelete(`Delete "${e.name}"?`);
    if (!ok) return;
    try { await api.delete(`/master-data/educations/${e.id}`); toast.success('Deleted.'); await load(); }
    catch { toast.error('Could not delete.'); }
  };

  const columns = [
    { id: 'srNo', header: 'ID', cell: ({ row }: any) => <span className="font-semibold text-slate-500">{row.original.id}</span> },
    { accessorKey: 'name', header: 'Qualification', cell: ({ row }: any) => <p className="font-extrabold text-slate-800 dark:text-white text-sm">{row.original.name}</p> },
    { accessorKey: 'sort_order', header: 'Order', cell: ({ row }: any) => <span className="text-slate-600 dark:text-slate-400">{row.original.sort_order}</span> },
    {
      accessorKey: 'is_active', header: 'Status',
      cell: ({ row }: any) => (
        <span className={`text-xs px-2.5 py-1 rounded-full font-bold border ${row.original.is_active
          ? 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-950/40 dark:text-emerald-300'
          : 'bg-slate-100 text-slate-500 border-slate-200 dark:bg-slate-800 dark:text-slate-400'}`}>
          {row.original.is_active ? 'Active' : 'Inactive'}
        </span>
      ),
    },
    {
      id: 'actions', header: () => <div className="text-right">Actions</div>,
      cell: ({ row }: any) => (
        <div className="flex items-center justify-end gap-2">
          <button onClick={() => openEdit(row.original)} title="Edit" className="w-8 h-8 flex items-center justify-center border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition">
            <i className="fa-solid fa-pen text-xs" />
          </button>
          <button onClick={() => remove(row.original)} title="Delete" className="w-8 h-8 flex items-center justify-center border border-rose-200 dark:border-rose-900/50 text-rose-600 dark:text-rose-400 hover:bg-rose-600 hover:text-white transition">
            <i className="fa-solid fa-trash text-xs" />
          </button>
        </div>
      ),
    },
  ];

  if (!user) return null;

  return (
    <>
      <main className="flex-1 p-8 overflow-y-auto w-full space-y-6 max-w-5xl mx-auto">
          <div className="flex items-center justify-between gap-3 flex-wrap">
            <p className="text-sm text-slate-500 dark:text-slate-400">Manage the qualifications shown in the candidate profile dropdown.</p>
            <button onClick={openCreate} className="px-4 py-2 bg-[#405189] text-white font-bold text-sm hover:bg-[#334267] transition">
              <i className="fa-solid fa-plus mr-2" />Add Qualification
            </button>
          </div>
          <DataTable
            columns={columns}
            data={rows}
            loading={loading}
            searchPlaceholder="Search qualifications..."
            emptyStateTitle="No Qualifications"
            emptyStateDescription="Add qualifications candidates can pick from."
          />
      </main>

      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
          <form onSubmit={save} className="w-full max-w-md bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl p-6">
            <div className="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-3 mb-4">
              <h2 className="text-base font-black text-slate-800 dark:text-white">{editingId ? 'Edit' : 'Add'} Qualification</h2>
              <button type="button" onClick={() => setIsModalOpen(false)} className="text-slate-400 hover:text-slate-600">✕</button>
            </div>
            <label className="block text-xs font-bold uppercase tracking-wide text-slate-500 mb-1">Name</label>
            <input value={name} onChange={(e) => setName(e.target.value)} autoFocus
              className="w-full px-3 py-2.5 text-sm border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 focus:outline-none focus:border-[#405189]" />
            <div className="grid grid-cols-2 gap-3 mt-3">
              <div>
                <label className="block text-xs font-bold uppercase tracking-wide text-slate-500 mb-1">Sort order</label>
                <input type="number" value={sortOrder} onChange={(e) => setSortOrder(Number(e.target.value))}
                  className="w-full px-3 py-2.5 text-sm border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 focus:outline-none focus:border-[#405189]" />
              </div>
              <label className="flex items-end gap-2 pb-2 text-sm font-semibold text-slate-700 dark:text-slate-200 cursor-pointer">
                <input type="checkbox" checked={isActive} onChange={(e) => setIsActive(e.target.checked)} className="w-4 h-4 accent-[#405189]" />
                Active
              </label>
            </div>
            <div className="flex justify-end gap-2 mt-5">
              <button type="button" onClick={() => setIsModalOpen(false)} className="px-4 py-2 border border-slate-200 dark:border-slate-700 text-sm font-semibold">Cancel</button>
              <button type="submit" disabled={submitting} className="px-6 py-2 bg-[#405189] text-white font-bold text-sm hover:bg-[#334267] transition disabled:opacity-50">
                {submitting ? 'Saving…' : 'Save'}
              </button>
            </div>
          </form>
        </div>
      )}
    </>
  );
}