'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Cookies from 'js-cookie';
import { api } from '@/lib/api';
import { DataTable } from '@/components/data-table/DataTable';
import { useRequirePermission } from '@/lib/useRequirePermission';
import { toast } from 'react-toastify';
import { showConfirmDelete } from '@/lib/confirm';

interface NoticePeriod {
  id: number;
  value: number;
  label: string;
  is_active: boolean;
  sort_order: number;
}

export default function NoticePeriodMasterPage() {
  useRequirePermission('master_data.view_noticeperiod');
  const router = useRouter();
  const [rows, setRows] = useState<NoticePeriod[]>([]);
  const [loading, setLoading] = useState(true);

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

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

  const load = async () => {
    setLoading(true);
    try {
      await api.get('/users/profile/');   // auth guard: redirects to /login on 401
      const res = (await api.get('/master-data/notice-periods?page_size=500')) as any;
      setRows(unwrap(res));
    } catch {
      Cookies.remove('access_token'); Cookies.remove('refresh_token'); router.push('/login');
    } finally { setLoading(false); }
  };

  useEffect(() => { load(); /* eslint-disable-next-line */ }, [router]);

  const openCreate = () => {
    setEditingId(null); setLabel(''); setValue(0); setSortOrder(rows.length); setIsActive(true); setIsModalOpen(true);
  };
  const openEdit = (n: NoticePeriod) => {
    setEditingId(n.id); setLabel(n.label); setValue(n.value); setSortOrder(n.sort_order); setIsActive(n.is_active); setIsModalOpen(true);
  };

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

  const toggleActive = async (n: NoticePeriod) => {
    try {
      await api.patch(`/master-data/notice-periods/${n.id}`, { is_active: !n.is_active });
      toast.success(n.is_active ? 'Deactivated.' : 'Activated.');
      await load();
    } catch { toast.error('Could not update status.'); }
  };

  const remove = async (n: NoticePeriod) => {
    const ok = await showConfirmDelete(`Delete "${n.label}"?`);
    if (!ok) return;
    try { await api.delete(`/master-data/notice-periods/${n.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: 'label', header: 'Notice Period', cell: ({ row }: any) => <p className="font-extrabold text-slate-800 dark:text-white text-sm">{row.original.label}</p> },
    { accessorKey: 'value', header: 'Days', cell: ({ row }: any) => <span className="text-slate-600 dark:text-slate-400">{row.original.value}</span> },
    { 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={() => toggleActive(row.original)}
            title={row.original.is_active ? 'Deactivate' : 'Activate'}
            className={`w-8 h-8 flex items-center justify-center border transition ${row.original.is_active
              ? 'border-amber-200 dark:border-amber-900/50 text-amber-600 dark:text-amber-400 hover:bg-amber-500 hover:text-white'
              : 'border-emerald-200 dark:border-emerald-900/50 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-600 hover:text-white'}`}
          >
            <i className={`fa-solid ${row.original.is_active ? 'fa-toggle-off' : 'fa-toggle-on'} text-xs`} />
          </button>
          <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>
      ),
    },
  ];

  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 notice period options 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 Notice Period
            </button>
          </div>
          <DataTable
            columns={columns}
            data={rows}
            loading={loading}
            searchPlaceholder="Search notice periods..."
            emptyStateTitle="No Notice Periods"
            emptyStateDescription="Add notice period options 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'} Notice Period</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">Label</label>
            <input value={label} onChange={(e) => setLabel(e.target.value)} autoFocus placeholder="e.g. 30 Days"
              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">Days (value)</label>
                <input type="number" value={value} onChange={(e) => setValue(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>
              <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>
            </div>
            <label className="flex items-center gap-2 mt-3 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 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>
      )}
    </>
  );
}