'use client';
import { useState } from 'react';
import { GradeChangeRecord, initialGradeHistory } from './gradingData';

const REASON_LABELS: Record<string, { label: string; color: string }> = {
  promotion: { label: 'Promotion', color: 'bg-green-100 text-green-700' },
  reclassification: { label: 'Reclassification', color: 'bg-blue-100 text-blue-700' },
  demotion: { label: 'Demotion', color: 'bg-red-100 text-red-600' },
  initial: { label: 'Initial Appointment', color: 'bg-gray-100 text-gray-600' },
};
const STATUS_LABELS: Record<string, { label: string; color: string }> = {
  approved: { label: 'Approved', color: 'bg-green-100 text-green-700' },
  pending: { label: 'Pending Signature', color: 'bg-yellow-100 text-yellow-700' },
  rejected: { label: 'Rejected', color: 'bg-red-100 text-red-600' },
};

function GradeChangeModal({ onClose, onSave }: { onClose: () => void; onSave: (r: GradeChangeRecord) => void }) {
  const [form, setForm] = useState({
    employeeId: '', employeeName: '', department: '', oldGrade: 1, newGrade: 2,
    effectiveDate: new Date().toISOString().split('T')[0],
    reason: 'promotion' as GradeChangeRecord['reason'],
    approver: '', notes: '',
  });

  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 max-h-[90vh] overflow-y-auto">
        <div className="flex items-center justify-between mb-5">
          <h3 className="text-base font-bold text-gray-800">Initiate Grade Change Request</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="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-xs font-semibold text-gray-600 block mb-1">Employee ID</label>
              <input value={form.employeeId} onChange={e => setForm(p => ({ ...p, employeeId: e.target.value }))} placeholder="EMP-2024-0001" 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">Employee Name</label>
              <input value={form.employeeName} onChange={e => setForm(p => ({ ...p, employeeName: 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">Department</label>
              <input value={form.department} onChange={e => setForm(p => ({ ...p, department: 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">Effective Date</label>
              <input type="date" value={form.effectiveDate} onChange={e => setForm(p => ({ ...p, 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">From Grade</label>
              <input type="number" min={1} max={12} value={form.oldGrade} onChange={e => setForm(p => ({ ...p, oldGrade: +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">To Grade</label>
              <input type="number" min={1} max={12} value={form.newGrade} onChange={e => setForm(p => ({ ...p, newGrade: +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>
            <label className="text-xs font-semibold text-gray-600 block mb-2">Reason Code</label>
            <div className="flex gap-2 flex-wrap">
              {(Object.keys(REASON_LABELS) as GradeChangeRecord['reason'][]).map(r => (
                <button key={r} onClick={() => setForm(p => ({ ...p, reason: r }))}
                  className={`px-3 py-1.5 rounded-full text-xs font-medium cursor-pointer whitespace-nowrap border transition-all ${form.reason === r ? 'text-white border-transparent' : 'bg-gray-50 text-gray-600 border-gray-200'}`}
                  style={form.reason === r ? { background: '#b828a0' } : {}}>
                  {REASON_LABELS[r].label}
                </button>
              ))}
            </div>
          </div>
          <div>
            <label className="text-xs font-semibold text-gray-600 block mb-1">Approver</label>
            <input value={form.approver} onChange={e => setForm(p => ({ ...p, approver: e.target.value }))} placeholder="e.g. James Mutua (HR Director)" 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">Notes / Justification</label>
            <textarea value={form.notes} onChange={e => setForm(p => ({ ...p, notes: e.target.value }))} rows={3} maxLength={500} className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400 resize-none"></textarea>
          </div>
        </div>
        <div className="bg-amber-50 border border-amber-200 rounded-xl p-3 mt-4 flex items-start gap-2">
          <div className="w-4 h-4 flex items-center justify-center mt-0.5 flex-shrink-0"><i className="ri-alert-line text-amber-500 text-sm"></i></div>
          <p className="text-xs text-amber-700">Grade changes trigger a payroll re-calculation flag and will notify the Payroll department automatically.</p>
        </div>
        <div className="flex gap-3 mt-5">
          <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, id: `gh${Date.now()}`, approverSignature: false, status: 'pending' });
            onClose();
          }} className="flex-1 px-4 py-2.5 rounded-xl text-white text-sm font-semibold cursor-pointer whitespace-nowrap" style={{ background: '#b828a0' }}>
            Submit Request
          </button>
        </div>
      </div>
    </div>
  );
}

export default function GradeHistoryTab() {
  const [records, setRecords] = useState<GradeChangeRecord[]>(initialGradeHistory);
  const [modal, setModal] = useState(false);
  const [filter, setFilter] = useState<'all' | 'pending' | 'approved'>('all');

  const filtered = records.filter(r => filter === 'all' || r.status === filter);

  return (
    <div>
      {modal && <GradeChangeModal onClose={() => setModal(false)} onSave={r => setRecords(rs => [r, ...rs])} />}
      <div className="flex items-center justify-between mb-4">
        <div>
          <h3 className="text-sm font-bold text-gray-800">Employee Grade History</h3>
          <p className="text-xs text-gray-500 mt-0.5">All grade changes with approver signatures and audit trail</p>
        </div>
        <button onClick={() => 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>
          Initiate Grade Change
        </button>
      </div>
      <div className="flex gap-2 mb-4">
        {[{ k: 'all', l: 'All Records' }, { k: 'pending', l: 'Pending Signature' }, { k: 'approved', l: 'Approved' }].map(t => (
          <button key={t.k} onClick={() => setFilter(t.k as any)}
            className={`px-4 py-2 rounded-xl text-xs font-semibold cursor-pointer whitespace-nowrap border transition-all ${filter === t.k ? 'text-white border-transparent' : 'bg-white text-gray-600 border-gray-200 hover:border-pink-300'}`}
            style={filter === t.k ? { background: '#b828a0' } : {}}>
            {t.l}
          </button>
        ))}
      </div>
      <div className="space-y-3">
        {filtered.map(r => {
          const reasonStyle = REASON_LABELS[r.reason];
          const statusStyle = STATUS_LABELS[r.status];
          const isUp = r.newGrade > r.oldGrade;
          return (
            <div key={r.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-start justify-between gap-4">
                <div className="flex items-center gap-3">
                  <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 ${isUp ? 'bg-green-100' : r.newGrade === r.oldGrade ? 'bg-blue-100' : 'bg-red-100'}`}>
                    <i className={`${isUp ? 'ri-arrow-up-line text-green-600' : r.newGrade === r.oldGrade ? 'ri-arrow-left-right-line text-blue-600' : 'ri-arrow-down-line text-red-500'} text-lg`}></i>
                  </div>
                  <div>
                    <p className="text-sm font-bold text-gray-800">{r.employeeName}</p>
                    <p className="text-xs text-gray-500">{r.employeeId} · {r.department}</p>
                  </div>
                </div>
                <div className="flex items-center gap-2 flex-shrink-0">
                  <span className={`text-xs px-2.5 py-1 rounded-full font-medium ${reasonStyle.color}`}>{reasonStyle.label}</span>
                  <span className={`text-xs px-2.5 py-1 rounded-full font-medium ${statusStyle.color}`}>{statusStyle.label}</span>
                </div>
              </div>
              <div className="mt-4 flex items-center gap-4">
                <div className="flex items-center gap-3 bg-gray-50 rounded-xl px-4 py-2.5">
                  <div className="text-center">
                    <div className="w-8 h-8 rounded-lg flex items-center justify-center text-white text-sm font-bold mx-auto mb-1 bg-gray-400">G{r.oldGrade}</div>
                    <p className="text-xs text-gray-500">Previous</p>
                  </div>
                  <div className="w-8 h-8 flex items-center justify-center">
                    <i className="ri-arrow-right-line text-gray-400 text-lg"></i>
                  </div>
                  <div className="text-center">
                    <div className="w-8 h-8 rounded-lg flex items-center justify-center text-white text-sm font-bold mx-auto mb-1" style={{ background: '#b828a0' }}>G{r.newGrade}</div>
                    <p className="text-xs text-gray-500">New Grade</p>
                  </div>
                </div>
                <div className="flex-1 grid grid-cols-3 gap-3">
                  <div>
                    <p className="text-xs text-gray-500">Effective Date</p>
                    <p className="text-sm font-semibold text-gray-800">{r.effectiveDate}</p>
                  </div>
                  <div>
                    <p className="text-xs text-gray-500">Approved By</p>
                    <p className="text-xs font-semibold text-gray-800">{r.approver}</p>
                  </div>
                  <div>
                    <p className="text-xs text-gray-500">Signature</p>
                    {r.approverSignature ? (
                      <span className="text-xs text-green-600 font-semibold flex items-center gap-1"><i className="ri-check-line"></i> Signed</span>
                    ) : (
                      <span className="text-xs text-yellow-600 font-semibold flex items-center gap-1"><i className="ri-time-line"></i> Pending</span>
                    )}
                  </div>
                </div>
              </div>
              {r.notes && (
                <div className="mt-3 bg-gray-50 rounded-xl px-4 py-2.5">
                  <p className="text-xs text-gray-500 italic">&ldquo;{r.notes}&rdquo;</p>
                </div>
              )}
              {r.status === 'pending' && (
                <div className="mt-3 flex gap-2 justify-end">
                  <button onClick={() => setRecords(rs => rs.map(x => x.id === r.id ? { ...x, status: 'approved', approverSignature: true } : x))}
                    className="px-4 py-1.5 rounded-lg text-xs font-semibold text-white bg-green-500 cursor-pointer whitespace-nowrap">
                    Approve & Sign
                  </button>
                  <button onClick={() => setRecords(rs => rs.map(x => x.id === r.id ? { ...x, status: 'rejected' } : x))}
                    className="px-4 py-1.5 rounded-lg text-xs font-semibold text-red-600 bg-red-50 cursor-pointer whitespace-nowrap">
                    Reject
                  </button>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}