'use client';

const cases = [
  { id: 'DC-001', name: 'R. Kariuki', severity: 'High', status: 'Pending Review', dept: 'ICT' },
  { id: 'DC-002', name: 'S. Kipchoge', severity: 'Medium', status: 'Under Investigation', dept: 'Transport' },
  { id: 'DC-003', name: 'E. Njeri', severity: 'Low', status: 'Hearing Scheduled', dept: 'M&E' },
  { id: 'DC-004', name: 'J. Mutua', severity: 'High', status: 'Pending Review', dept: 'Procurement' },
];

const sevColor: Record<string, string> = {
  High: 'bg-red-100 text-red-600',
  Medium: 'bg-yellow-100 text-yellow-700',
  Low: 'bg-blue-100 text-blue-600',
};

export default function DashboardDisciplinaryWidget() {
  const high = cases.filter(c => c.severity === 'High').length;
  const medium = cases.filter(c => c.severity === 'Medium').length;
  const low = cases.filter(c => c.severity === 'Low').length;
  const pendingReview = cases.filter(c => c.status === 'Pending Review').length;

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 hover:-translate-y-1 transition-transform duration-200">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-red-600">
            <i className="ri-shield-cross-line text-white text-sm"></i>
          </div>
          <h3 className="font-semibold text-gray-800 text-sm">Disciplinary Cases</h3>
        </div>
        <span className="text-xs bg-red-100 text-red-600 font-semibold px-2 py-0.5 rounded-full">{cases.length} Active</span>
      </div>
      <div className="grid grid-cols-3 gap-2 mb-4">
        <div className="bg-red-50 rounded-xl p-2.5 text-center">
          <p className="text-xl font-bold text-red-600">{high}</p>
          <p className="text-xs text-gray-500 mt-0.5">High</p>
        </div>
        <div className="bg-yellow-50 rounded-xl p-2.5 text-center">
          <p className="text-xl font-bold text-yellow-600">{medium}</p>
          <p className="text-xs text-gray-500 mt-0.5">Medium</p>
        </div>
        <div className="bg-blue-50 rounded-xl p-2.5 text-center">
          <p className="text-xl font-bold text-blue-600">{low}</p>
          <p className="text-xs text-gray-500 mt-0.5">Low</p>
        </div>
      </div>
      <div className="bg-orange-50 rounded-xl px-3 py-2 mb-3 flex items-center gap-2">
        <div className="w-5 h-5 flex items-center justify-center"><i className="ri-time-line text-orange-500 text-sm"></i></div>
        <p className="text-xs text-orange-700 font-semibold">{pendingReview} cases pending committee review</p>
      </div>
      <div className="space-y-1.5">
        {cases.map(c => (
          <div key={c.id} className="flex items-center justify-between bg-gray-50 rounded-xl px-3 py-2">
            <div>
              <p className="text-xs font-semibold text-gray-800">{c.id} · {c.name}</p>
              <p className="text-xs text-gray-400">{c.dept} · {c.status}</p>
            </div>
            <span className={`text-xs font-semibold px-2 py-0.5 rounded-full whitespace-nowrap ${sevColor[c.severity]}`}>{c.severity}</span>
          </div>
        ))}
      </div>
    </div>
  );
}