'use client';
import { useState } from 'react';
import { Grade, initialGrades, initialCategories } from './gradingData';

function GradeModal({ grade, onClose, onSave }: { grade?: Grade | null; onClose: () => void; onSave: (g: Grade) => void }) {
  const [form, setForm] = useState<Grade>(grade || {
    id: `g${Date.now()}`, level: 1, title: '', categoryId: 'perm', minSalary: 0, midSalary: 0, maxSalary: 0,
    currency: 'KSh', effectiveDate: '2024-01-01', minYears: 0, trainingHoursRequired: 0, performanceRatingRequired: 3,
  });
  const set = (k: keyof Grade, v: any) => 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-xl p-6 max-h-[90vh] overflow-y-auto">
        <div className="flex items-center justify-between mb-5">
          <h3 className="text-base font-bold text-gray-800">{grade ? 'Edit Grade Level' : '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">
          <div>
            <label className="text-xs font-semibold text-gray-600 block mb-1">Grade Level (Number)</label>
            <input type="number" value={form.level} onChange={e => set('level', +e.target.value)} className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400" />
          </div>
          <div>
            <label className="text-xs font-semibold text-gray-600 block mb-1">Grade Title</label>
            <input value={form.title} onChange={e => set('title', e.target.value)} className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400" />
          </div>
          <div>
            <label className="text-xs font-semibold text-gray-600 block mb-1">Category</label>
            <div className="flex flex-wrap gap-1.5">
              {initialCategories.map(c => (
                <button key={c.id} onClick={() => set('categoryId', c.id)}
                  className={`px-2.5 py-1 rounded-full text-xs font-medium cursor-pointer whitespace-nowrap border transition-all ${form.categoryId === c.id ? 'text-white border-transparent' : 'bg-gray-50 text-gray-600 border-gray-200'}`}
                  style={form.categoryId === c.id ? { background: '#b828a0' } : {}}>{c.name}</button>
              ))}
            </div>
          </div>
          <div>
            <label className="text-xs font-semibold text-gray-600 block mb-1">Currency</label>
            <input value={form.currency} onChange={e => set('currency', e.target.value)} className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400" />
          </div>
          <div className="col-span-2">
            <label className="text-xs font-semibold text-gray-600 block mb-2">Salary Band</label>
            <div className="grid grid-cols-3 gap-3">
              {[{ k: 'minSalary', l: 'Minimum' }, { k: 'midSalary', l: 'Midpoint' }, { k: 'maxSalary', l: 'Maximum' }].map(f => (
                <div key={f.k}>
                  <label className="text-xs text-gray-500 block mb-1">{f.l}</label>
                  <input type="number" value={(form as any)[f.k]} onChange={e => set(f.k as keyof Grade, +e.target.value)} className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400" />
                </div>
              ))}
            </div>
          </div>
          <div>
            <label className="text-xs font-semibold text-gray-600 block mb-1">Effective Date</label>
            <input type="date" value={form.effectiveDate} onChange={e => set('effectiveDate', e.target.value)} className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400" />
          </div>
          <div>
            <label className="text-xs font-semibold text-gray-600 block mb-1">Min Years in Grade</label>
            <input type="number" value={form.minYears} onChange={e => set('minYears', +e.target.value)} className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400" />
          </div>
          <div>
            <label className="text-xs font-semibold text-gray-600 block mb-1">Training Hours Required</label>
            <input type="number" value={form.trainingHoursRequired} onChange={e => set('trainingHoursRequired', +e.target.value)} className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400" />
          </div>
          <div>
            <label className="text-xs font-semibold text-gray-600 block mb-2">Performance Rating Required (1-5)</label>
            <div className="flex gap-1.5">
              {[1,2,3,4,5].map(r => (
                <button key={r} onClick={() => set('performanceRatingRequired', r)}
                  className={`w-8 h-8 flex items-center justify-center rounded-lg text-xs font-bold cursor-pointer border transition-all ${form.performanceRatingRequired >= r ? 'text-white border-transparent' : 'bg-gray-50 text-gray-500 border-gray-200'}`}
                  style={form.performanceRatingRequired >= r ? { background: '#b828a0' } : {}}>{r}</button>
              ))}
            </div>
          </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 GradeScaleTab() {
  const [grades, setGrades] = useState<Grade[]>(initialGrades);
  const [modal, setModal] = useState(false);
  const [editing, setEditing] = useState<Grade | null>(null);
  const [delId, setDelId] = useState<string | null>(null);

  const catName = (id: string) => initialCategories.find(c => c.id === id)?.name || id;
  const catColor = (id: string) => initialCategories.find(c => c.id === id)?.color || '#b828a0';

  return (
    <div>
      {modal && <GradeModal grade={editing} onClose={() => { setModal(false); setEditing(null); }}
        onSave={g => {
          if (editing) setGrades(gs => gs.map(x => x.id === g.id ? g : x));
          else setGrades(gs => [...gs, g]);
          setEditing(null);
        }} />}
      {delId && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <div className="bg-white rounded-2xl shadow-2xl p-6 w-80">
            <div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
              <i className="ri-delete-bin-line text-2xl text-red-500"></i>
            </div>
            <h3 className="text-center font-bold text-gray-800 mb-1">Remove Grade?</h3>
            <p className="text-xs text-center text-gray-500 mb-4">This action cannot be undone and will affect position mappings.</p>
            <div className="flex gap-3">
              <button onClick={() => setDelId(null)} className="flex-1 px-4 py-2.5 rounded-xl border border-gray-200 text-sm cursor-pointer whitespace-nowrap">Cancel</button>
              <button onClick={() => { setGrades(gs => gs.filter(g => g.id !== delId)); setDelId(null); }} className="flex-1 px-4 py-2.5 rounded-xl text-white text-sm font-semibold cursor-pointer whitespace-nowrap bg-red-500">Delete</button>
            </div>
          </div>
        </div>
      )}
      <div className="flex items-center justify-between mb-4">
        <div>
          <h3 className="text-sm font-bold text-gray-800">Grade Scale Matrix</h3>
          <p className="text-xs text-gray-500 mt-0.5">{grades.length} grade levels defined · KSh currency</p>
        </div>
        <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"></i></div>
          Add Grade Level
        </button>
      </div>
      <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full min-w-[900px]">
            <thead>
              <tr className="border-b border-gray-100" style={{ background: '#fdf0fb' }}>
                {['Grade', 'Title', 'Category', 'Min Salary', 'Midpoint', 'Max Salary', 'Yrs Required', 'Training Hrs', 'Perf. Rating', 'Effective', ''].map(h => (
                  <th key={h} className="text-left text-xs font-semibold text-gray-600 px-4 py-3 whitespace-nowrap">{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {grades.sort((a, b) => a.level - b.level).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">
                    <div className="w-8 h-8 rounded-lg flex items-center justify-center text-white text-xs font-bold" style={{ background: '#b828a0' }}>{g.level}</div>
                  </td>
                  <td className="px-4 py-3 text-sm font-semibold text-gray-800 whitespace-nowrap">{g.title}</td>
                  <td className="px-4 py-3">
                    <span className="text-xs px-2.5 py-1 rounded-full font-medium text-white" style={{ background: catColor(g.categoryId) }}>{catName(g.categoryId)}</span>
                  </td>
                  <td className="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">{g.currency} {g.minSalary.toLocaleString()}</td>
                  <td className="px-4 py-3 text-sm font-bold whitespace-nowrap" style={{ color: '#b828a0' }}>{g.currency} {g.midSalary.toLocaleString()}</td>
                  <td className="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">{g.currency} {g.maxSalary.toLocaleString()}</td>
                  <td className="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">{g.minYears} yrs</td>
                  <td className="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">{g.trainingHoursRequired} hrs</td>
                  <td className="px-4 py-3">
                    <div className="flex gap-0.5">
                      {[1,2,3,4,5].map(s => (
                        <div key={s} className={`w-3 h-3 rounded-sm ${s <= g.performanceRatingRequired ? '' : 'bg-gray-200'}`}
                          style={s <= g.performanceRatingRequired ? { background: '#b828a0' } : {}}></div>
                      ))}
                    </div>
                  </td>
                  <td className="px-4 py-3 text-xs text-gray-500 whitespace-nowrap">{g.effectiveDate}</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={() => setDelId(g.id)} 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>
      </div>
    </div>
  );
}