'use client';
import { useState } from 'react';
import { DeptGradeMapping, initialDeptMappings, initialGrades } from './gradingData';

function DeptModal({ mapping, onClose, onSave }: { mapping?: DeptGradeMapping | null; onClose: () => void; onSave: (m: DeptGradeMapping) => void }) {
  const maxGrade = Math.max(...initialGrades.map(g => g.level));
  const [form, setForm] = useState<DeptGradeMapping>(mapping || {
    id: `dm${Date.now()}`, department: '', minGrade: 1, maxGrade: 5, grades: [1,2,3,4,5],
  });

  const toggleGrade = (g: number) => {
    setForm(p => ({
      ...p,
      grades: p.grades.includes(g) ? p.grades.filter(x => x !== g) : [...p.grades, g].sort((a, b) => a - b),
    }));
  };

  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 Mapping' : 'Add Department 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">Department Name</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">Select Applicable Grade Levels</label>
            <div className="flex flex-wrap gap-2">
              {Array.from({ length: maxGrade }, (_, i) => i + 1).map(g => (
                <button key={g} onClick={() => toggleGrade(g)}
                  className={`w-9 h-9 flex items-center justify-center rounded-lg text-sm font-bold cursor-pointer border transition-all ${form.grades.includes(g) ? 'text-white border-transparent' : 'bg-gray-50 text-gray-600 border-gray-200 hover:border-pink-300'}`}
                  style={form.grades.includes(g) ? { background: '#b828a0' } : {}}>{g}</button>
              ))}
            </div>
            <p className="text-xs text-gray-400 mt-2">Selected: Grades {form.grades.join(', ') || 'none'}</p>
          </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, minGrade: Math.min(...form.grades), maxGrade: Math.max(...form.grades) }); 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 DeptMatrixTab() {
  const [mappings, setMappings] = useState<DeptGradeMapping[]>(initialDeptMappings);
  const [modal, setModal] = useState(false);
  const [editing, setEditing] = useState<DeptGradeMapping | null>(null);
  const maxGrade = Math.max(...initialGrades.map(g => g.level));

  return (
    <div>
      {modal && <DeptModal 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">Departmental Grading Matrix</h3>
          <p className="text-xs text-gray-500 mt-0.5">Map which grade levels are applicable per department</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 Department
        </button>
      </div>

      <div className="bg-violet-50 border border-violet-200 rounded-xl px-4 py-3 mb-4 flex items-start gap-3">
        <div className="w-7 h-7 flex items-center justify-center rounded-lg bg-violet-100 flex-shrink-0 mt-0.5">
          <i className="ri-information-line text-violet-700 text-sm"></i>
        </div>
        <div>
          <p className="text-xs font-bold text-violet-800">Intern Department Matrix — HOD Responsibility</p>
          <p className="text-xs text-violet-700 mt-0.5">
            For Interns (Grade 1), the departmental grading matrix is managed and reviewed by the Head of Department (HOD) of the respective department. 
            HODs are responsible for placing, tracking, and reviewing interns under their department. 
            Performance assessments and grading decisions for interns are done by the HOD, not HR.
          </p>
        </div>
      </div>
      <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-gray-100" style={{ background: '#fdf0fb' }}>
                <th className="text-left text-xs font-semibold text-gray-600 px-4 py-3 whitespace-nowrap w-40">Department</th>
                {Array.from({ length: maxGrade }, (_, i) => i + 1).map(g => (
                  <th key={g} className="text-center text-xs font-semibold text-gray-600 px-1 py-3 w-9">G{g}</th>
                ))}
                <th className="text-xs font-semibold text-gray-600 px-4 py-3 whitespace-nowrap">Range</th>
                <th className="w-16 px-4 py-3"></th>
              </tr>
            </thead>
            <tbody>
              <tr className="border-b border-violet-100 bg-violet-50/50">
                <td className="px-4 py-3 whitespace-nowrap">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-semibold text-violet-800">Interns (All Depts)</span>
                    <span className="text-xs px-2 py-0.5 rounded-full bg-violet-100 text-violet-700 font-medium">HOD Managed</span>
                  </div>
                </td>
                <td className="px-1 py-3 text-center">
                  <div className="w-6 h-6 rounded-md flex items-center justify-center mx-auto text-white text-xs" style={{ background: '#7c3aed' }}>
                    <i className="ri-check-line text-xs"></i>
                  </div>
                </td>
                {Array.from({ length: maxGrade - 1 }, (_, i) => i + 2).map(g => (
                  <td key={g} className="px-1 py-3 text-center">
                    <div className="w-6 h-6 rounded-md bg-gray-100 mx-auto"></div>
                  </td>
                ))}
                <td className="px-4 py-3 whitespace-nowrap">
                  <span className="text-xs px-2.5 py-1 rounded-full font-semibold bg-violet-100 text-violet-700">G1 only</span>
                </td>
                <td className="px-4 py-3">
                  <div className="w-7 h-7 flex items-center justify-center rounded-lg bg-violet-50">
                    <i className="ri-user-star-line text-violet-500 text-xs"></i>
                  </div>
                </td>
              </tr>
              {mappings.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 whitespace-nowrap">{m.department}</td>
                  {Array.from({ length: maxGrade }, (_, i) => i + 1).map(g => (
                    <td key={g} className="px-1 py-3 text-center">
                      {m.grades.includes(g) ? (
                        <div className="w-6 h-6 rounded-md flex items-center justify-center mx-auto text-white text-xs" style={{ background: '#b828a0' }}>
                          <i className="ri-check-line text-xs"></i>
                        </div>
                      ) : (
                        <div className="w-6 h-6 rounded-md bg-gray-100 mx-auto"></div>
                      )}
                    </td>
                  ))}
                  <td className="px-4 py-3 whitespace-nowrap">
                    <span className="text-xs px-2.5 py-1 rounded-full font-semibold" style={{ background: '#fdf0fb', color: '#b828a0' }}>G{m.minGrade}–G{m.maxGrade}</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>
        </div>
      </div>
    </div>
  );
}