'use client';
import { useState } from 'react';
import SectionHeader from './SectionHeader';
import ToastNotif from './ToastNotif';
import ConfirmDialog from './ConfirmDialog';

interface Grade {
  id: number;
  level: number;
  title: string;
  category: string;
  minSalary: number;
  midSalary: number;
  maxSalary: number;
  yearsRequired: number;
  trainingHours: number;
}

const initialGrades: Grade[] = [
  { id: 1, level: 1, title: 'Intern / Attachee', category: 'Intern', minSalary: 15000, midSalary: 18000, maxSalary: 22000, yearsRequired: 0, trainingHours: 20 },
  { id: 2, level: 2, title: 'Junior Officer', category: 'Temporary', minSalary: 28000, midSalary: 35000, maxSalary: 42000, yearsRequired: 1, trainingHours: 40 },
  { id: 3, level: 3, title: 'Officer I', category: 'Contract', minSalary: 45000, midSalary: 55000, maxSalary: 65000, yearsRequired: 2, trainingHours: 60 },
  { id: 4, level: 4, title: 'Officer II', category: 'Contract', minSalary: 60000, midSalary: 72000, maxSalary: 85000, yearsRequired: 3, trainingHours: 80 },
  { id: 5, level: 5, title: 'Senior Officer', category: 'Permanent', minSalary: 80000, midSalary: 95000, maxSalary: 110000, yearsRequired: 4, trainingHours: 100 },
  { id: 6, level: 6, title: 'Principal Officer', category: 'Permanent', minSalary: 100000, midSalary: 120000, maxSalary: 140000, yearsRequired: 5, trainingHours: 120 },
  { id: 7, level: 7, title: 'Manager I', category: 'Permanent', minSalary: 130000, midSalary: 155000, maxSalary: 180000, yearsRequired: 7, trainingHours: 150 },
  { id: 8, level: 8, title: 'Senior Manager', category: 'Permanent', minSalary: 170000, midSalary: 200000, maxSalary: 240000, yearsRequired: 9, trainingHours: 180 },
  { id: 9, level: 9, title: 'Director', category: 'Permanent', minSalary: 220000, midSalary: 270000, maxSalary: 320000, yearsRequired: 12, trainingHours: 200 },
  { id: 10, level: 10, title: 'Executive Director', category: 'Permanent', minSalary: 300000, midSalary: 375000, maxSalary: 450000, yearsRequired: 15, trainingHours: 240 },
];

const CATEGORIES = [
  { id: 'perm', label: 'Permanent', leave: 21, probation: '6 months', benefits: ['Medical Cover', 'Pension', 'Group Life', 'Leave Allowance'] },
  { id: 'contract', label: 'Contract', leave: 15, probation: '3 months', benefits: ['Medical Cover', 'Group Life'] },
  { id: 'temp', label: 'Temporary', leave: 10, probation: 'None', benefits: ['NHIF Only'] },
  { id: 'intern', label: 'Intern', leave: 0, probation: 'None', benefits: ['Stipend Only'] },
  { id: 'consultant', label: 'Consultant', leave: 0, probation: 'None', benefits: ['Professional Fee Only'] },
];

interface GradeModalProps { grade?: Grade | null; onClose: () => void; onSave: (g: Omit<Grade, 'id'>) => void; }
function GradeModal({ grade, onClose, onSave }: GradeModalProps) {
  const [form, setForm] = useState({
    level: grade?.level || 1, title: grade?.title || '', category: grade?.category || 'Permanent',
    minSalary: grade?.minSalary || 0, midSalary: grade?.midSalary || 0, maxSalary: grade?.maxSalary || 0,
    yearsRequired: grade?.yearsRequired || 0, trainingHours: grade?.trainingHours || 0,
  });
  const set = (k: string, v: string | number) => setForm(p => ({ ...p, [k]: v }));
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg p-6">
        <div className="flex items-center justify-between mb-5">
          <h3 className="text-base font-bold text-gray-800">{grade ? 'Edit Grade' : 'Add Grade Level'}</h3>
          <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 cursor-pointer"><i className="ri-close-line text-gray-500"></i></button>
        </div>
        <div className="grid grid-cols-2 gap-4">
          {[{ label: 'Grade Level', key: 'level', type: 'number' }, { label: 'Title', key: 'title', type: 'text' }].map(f => (
            <div key={f.key}>
              <label className="text-xs font-semibold text-gray-600 block mb-1">{f.label}</label>
              <input type={f.type} value={(form as any)[f.key]} onChange={e => set(f.key, f.type === 'number' ? +e.target.value : e.target.value)}
                className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none" />
            </div>
          ))}
          <div className="col-span-2">
            <label className="text-xs font-semibold text-gray-600 block mb-1">Category</label>
            <div className="flex gap-2 flex-wrap">
              {['Permanent', 'Contract', 'Temporary', 'Intern', 'Consultant'].map(c => (
                <button key={c} onClick={() => set('category', c)}
                  className={`px-3 py-1.5 rounded-full text-xs font-medium cursor-pointer whitespace-nowrap border transition-all ${form.category === c ? 'text-white border-transparent' : 'bg-gray-50 text-gray-600 border-gray-200'}`}
                  style={form.category === c ? { background: '#b828a0' } : {}}>{c}</button>
              ))}
            </div>
          </div>
          {[{ label: 'Min Salary (KSh)', key: 'minSalary' }, { label: 'Mid Salary (KSh)', key: 'midSalary' }, { label: 'Max Salary (KSh)', key: 'maxSalary' }].map(f => (
            <div key={f.key}>
              <label className="text-xs font-semibold text-gray-600 block mb-1">{f.label}</label>
              <input type="number" value={(form as any)[f.key]} onChange={e => set(f.key, +e.target.value)} className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none" />
            </div>
          ))}
          {[{ label: 'Years Required', key: 'yearsRequired' }, { label: 'Training Hours Required', key: 'trainingHours' }].map(f => (
            <div key={f.key}>
              <label className="text-xs font-semibold text-gray-600 block mb-1">{f.label}</label>
              <input type="number" value={(form as any)[f.key]} onChange={e => set(f.key, +e.target.value)} className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none" />
            </div>
          ))}
        </div>
        <div className="flex gap-3 mt-6">
          <button onClick={onClose} className="flex-1 px-4 py-2.5 rounded-xl border border-gray-200 text-sm font-medium text-gray-600 hover:bg-gray-50 cursor-pointer whitespace-nowrap">Cancel</button>
          <button onClick={() => { onSave(form); onClose(); }} className="flex-1 px-4 py-2.5 rounded-xl text-white text-sm font-semibold cursor-pointer whitespace-nowrap" style={{ background: '#b828a0' }}>
            {grade ? 'Save Changes' : 'Add Grade'}
          </button>
        </div>
      </div>
    </div>
  );
}

export default function GradeScaleSection() {
  const [grades, setGrades] = useState<Grade[]>(initialGrades);
  const [modal, setModal] = useState(false);
  const [editing, setEditing] = useState<Grade | null>(null);
  const [delTarget, setDelTarget] = useState<Grade | null>(null);
  const [toast, setToast] = useState('');
  const [activeTab, setActiveTab] = useState<'grades' | 'categories'>('grades');

  return (
    <div>
      {toast && <ToastNotif message={toast} onDone={() => setToast('')} />}
      {modal && <GradeModal grade={editing} onClose={() => { setModal(false); setEditing(null); }}
        onSave={data => {
          if (editing) setGrades(gs => gs.map(g => g.id === editing.id ? { ...g, ...data } : g));
          else setGrades(gs => [...gs, { ...data, id: Date.now() }]);
          setToast(editing ? 'Grade updated' : 'Grade added');
        }} />}
      {delTarget && <ConfirmDialog title="Delete Grade" message={`Remove Grade Level ${delTarget.level} — "${delTarget.title}"?`}
        onConfirm={() => { setGrades(gs => gs.filter(g => g.id !== delTarget.id)); setDelTarget(null); setToast('Grade deleted'); }}
        onCancel={() => setDelTarget(null)} />}

      <SectionHeader icon="ri-medal-line" title="Employee Categories & Grade Scale" desc="Define categories, benefits, probation, and salary bands"
        action={<button onClick={() => { setEditing(null); setModal(true); }} className="flex items-center gap-2 px-4 py-2 rounded-xl text-white text-xs font-semibold cursor-pointer whitespace-nowrap" style={{ background: '#b828a0' }}>
          <div className="w-4 h-4 flex items-center justify-center"><i className="ri-add-line text-sm"></i></div> Add Grade
        </button>} />

      <div className="flex gap-2 mb-4">
        {[{ k: 'grades' as const, l: 'Grade Scale Matrix' }, { k: 'categories' as const, l: 'Category Benefits' }].map(t => (
          <button key={t.k} onClick={() => setActiveTab(t.k)}
            className={`px-4 py-2 rounded-xl text-xs font-semibold cursor-pointer whitespace-nowrap border transition-all ${activeTab === t.k ? 'text-white border-transparent' : 'bg-white text-gray-600 border-gray-200 hover:border-pink-300'}`}
            style={activeTab === t.k ? { background: '#b828a0' } : {}}>
            {t.l}
          </button>
        ))}
      </div>

      {activeTab === 'grades' && (
        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
          <table className="w-full">
            <thead>
              <tr className="border-b border-gray-100" style={{ background: '#fdf0fb' }}>
                {['Grade', 'Title', 'Category', 'Min (KSh)', 'Mid (KSh)', 'Max (KSh)', 'Yrs Req.', 'Training Hrs', ''].map(h => (
                  <th key={h} className="text-left text-xs font-semibold text-gray-600 px-4 py-3">{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {grades.map(g => (
                <tr key={g.id} className="border-b border-gray-50 hover:bg-pink-50/30 transition-colors">
                  <td className="px-4 py-3"><span className="w-7 h-7 rounded-lg flex items-center justify-center text-white text-xs font-bold" style={{ background: '#b828a0' }}>{g.level}</span></td>
                  <td className="px-4 py-3 text-sm font-semibold text-gray-800">{g.title}</td>
                  <td className="px-4 py-3"><span className="text-xs px-2.5 py-1 rounded-full bg-pink-100 font-medium" style={{ color: '#b828a0' }}>{g.category}</span></td>
                  <td className="px-4 py-3 text-sm text-gray-600">{g.minSalary.toLocaleString()}</td>
                  <td className="px-4 py-3 text-sm font-semibold text-gray-800">{g.midSalary.toLocaleString()}</td>
                  <td className="px-4 py-3 text-sm text-gray-600">{g.maxSalary.toLocaleString()}</td>
                  <td className="px-4 py-3 text-sm text-gray-600">{g.yearsRequired} yrs</td>
                  <td className="px-4 py-3 text-sm text-gray-600">{g.trainingHours} hrs</td>
                  <td className="px-4 py-3">
                    <div className="flex items-center gap-1">
                      <button onClick={() => { setEditing(g); setModal(true); }} className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-blue-50 cursor-pointer"><i className="ri-edit-2-line text-blue-500 text-xs"></i></button>
                      <button onClick={() => setDelTarget(g)} className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-red-50 cursor-pointer"><i className="ri-delete-bin-line text-red-400 text-xs"></i></button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {activeTab === 'categories' && (
        <div className="grid grid-cols-1 gap-4">
          {CATEGORIES.map(cat => (
            <div key={cat.id} className="bg-white rounded-2xl border border-gray-100 shadow-sm p-5 hover:-translate-y-0.5 transition-transform">
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-2">
                  <div className="w-8 h-8 rounded-xl flex items-center justify-center text-white text-xs font-bold" style={{ background: '#b828a0' }}>{cat.label[0]}</div>
                  <p className="text-sm font-bold text-gray-800">{cat.label}</p>
                </div>
                <button className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-blue-50 cursor-pointer"><i className="ri-edit-2-line text-blue-500 text-xs"></i></button>
              </div>
              <div className="grid grid-cols-3 gap-3 mb-3">
                <div className="bg-gray-50 rounded-xl p-3 text-center">
                  <p className="text-lg font-bold text-gray-800">{cat.leave}</p>
                  <p className="text-xs text-gray-500">Days Leave/yr</p>
                </div>
                <div className="bg-gray-50 rounded-xl p-3 text-center">
                  <p className="text-sm font-bold text-gray-800">{cat.probation}</p>
                  <p className="text-xs text-gray-500">Probation</p>
                </div>
                <div className="bg-pink-50 rounded-xl p-3 text-center">
                  <p className="text-xs font-bold" style={{ color: '#b828a0' }}>{cat.benefits.length} Benefits</p>
                  <p className="text-xs text-gray-500">Packages</p>
                </div>
              </div>
              <div className="flex flex-wrap gap-1.5">
                {cat.benefits.map(b => <span key={b} className="text-xs px-2.5 py-1 rounded-full bg-green-100 text-green-700">{b}</span>)}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}