'use client';
import { useState } from 'react';
import { PositionGradeMapping, initialPositionMappings, initialGrades } from './gradingData';

function PositionModal({ mapping, onClose, onSave }: { mapping?: PositionGradeMapping | null; onClose: () => void; onSave: (m: PositionGradeMapping) => void }) {
  const [form, setForm] = useState<PositionGradeMapping>(mapping || {
    id: `pm${Date.now()}`, position: '', department: '', defaultGrade: 3, allowOverride: true,
  });

  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-md p-6">
        <div className="flex items-center justify-between mb-5">
          <h3 className="text-base font-bold text-gray-800">{mapping ? 'Edit Position Mapping' : 'Add Position Mapping'}</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>
            <label className="text-xs font-semibold text-gray-600 block mb-1">Position Title</label>
            <input value={form.position} onChange={e => setForm(p => ({ ...p, position: 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-2">Default Grade Level</label>
            <div className="flex flex-wrap gap-1.5">
              {initialGrades.sort((a,b) => a.level-b.level).map(g => (
                <button key={g.level} onClick={() => setForm(p => ({ ...p, defaultGrade: g.level }))}
                  className={`px-3 py-1.5 rounded-lg text-xs font-medium cursor-pointer whitespace-nowrap border transition-all ${form.defaultGrade === g.level ? 'text-white border-transparent' : 'bg-gray-50 text-gray-600 border-gray-200'}`}
                  style={form.defaultGrade === g.level ? { background: '#b828a0' } : {}}>
                  G{g.level} — {g.title}
                </button>
              ))}
            </div>
          </div>
          <div className="flex items-center gap-3">
            <button onClick={() => setForm(p => ({ ...p, allowOverride: !p.allowOverride }))}
              className={`w-10 h-6 rounded-full transition-all cursor-pointer ${form.allowOverride ? '' : 'bg-gray-200'}`}
              style={form.allowOverride ? { background: '#b828a0' } : {}}>
              <div className={`w-4 h-4 bg-white rounded-full shadow transition-transform mx-1 ${form.allowOverride ? 'translate-x-4' : 'translate-x-0'}`}></div>
            </button>
            <label className="text-sm text-gray-700 font-medium">Allow Manual Override (with reason code)</label>
          </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' }}>
            {mapping ? 'Save Changes' : 'Add Mapping'}
          </button>
        </div>
      </div>
    </div>
  );
}

export default function PositionMappingTab() {
  const [mappings, setMappings] = useState<PositionGradeMapping[]>(initialPositionMappings);
  const [modal, setModal] = useState(false);
  const [editing, setEditing] = useState<PositionGradeMapping | null>(null);
  const [search, setSearch] = useState('');

  const gradeTitle = (level: number) => initialGrades.find(g => g.level === level)?.title || '';
  const filtered = mappings.filter(m =>
    m.position.toLowerCase().includes(search.toLowerCase()) ||
    m.department.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div>
      {modal && <PositionModal mapping={editing} onClose={() => { setModal(false); setEditing(null); }}
        onSave={m => {
          if (editing) setMappings(ms => ms.map(x => x.id === m.id ? m : x));
          else setMappings(ms => [...ms, m]);
        }} />}
      <div className="flex items-center justify-between mb-4">
        <div>
          <h3 className="text-sm font-bold text-gray-800">Position-to-Grade Mapping</h3>
          <p className="text-xs text-gray-500 mt-0.5">Auto-assign grades when employees are appointed to positions</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 Position
        </button>
      </div>
      <div className="relative mb-4">
        <div className="w-4 h-4 flex items-center justify-center absolute left-3 top-1/2 -translate-y-1/2">
          <i className="ri-search-line text-gray-400 text-sm"></i>
        </div>
        <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search positions or departments..."
          className="w-full pl-9 pr-4 py-2.5 border border-gray-200 rounded-xl text-sm outline-none focus:border-pink-400 bg-white" />
      </div>
      <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' }}>
              {['Position Title', 'Department', 'Default Grade', 'Override Allowed', ''].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>
            {filtered.map(m => (
              <tr key={m.id} className="border-b border-gray-50 hover:bg-pink-50/20 transition-colors">
                <td className="px-4 py-3 text-sm font-semibold text-gray-800">{m.position}</td>
                <td className="px-4 py-3">
                  <span className="text-xs px-2.5 py-1 rounded-full bg-gray-100 text-gray-600 font-medium">{m.department}</span>
                </td>
                <td className="px-4 py-3">
                  <div className="flex items-center gap-2">
                    <div className="w-7 h-7 rounded-lg flex items-center justify-center text-white text-xs font-bold" style={{ background: '#b828a0' }}>
                      {m.defaultGrade}
                    </div>
                    <div>
                      <p className="text-xs font-semibold text-gray-800">Grade {m.defaultGrade}</p>
                      <p className="text-xs text-gray-500">{gradeTitle(m.defaultGrade)}</p>
                    </div>
                  </div>
                </td>
                <td className="px-4 py-3">
                  {m.allowOverride ? (
                    <span className="text-xs px-2.5 py-1 rounded-full bg-blue-100 text-blue-700 font-medium">Allowed</span>
                  ) : (
                    <span className="text-xs px-2.5 py-1 rounded-full bg-red-100 text-red-600 font-medium">Fixed</span>
                  )}
                </td>
                <td className="px-4 py-3">
                  <button onClick={() => { setEditing(m); 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>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {filtered.length === 0 && (
          <div className="text-center py-8 text-gray-400 text-sm">No positions match your search</div>
        )}
      </div>
    </div>
  );
}