'use client';
import { DisciplinaryCase } from './disciplinaryData';

const PRIMARY = '#B22698';
const YELLOW = '#FFC107';
const DARK = '#212121';

interface Props {
  cases: DisciplinaryCase[];
  onFilterSeverity: (s: string) => void;
  activeFilter: string;
  onNew: () => void;
  onViewRegister: () => void;
}

export default function DisciplinaryDashboard({ cases, onFilterSeverity, activeFilter, onNew, onViewRegister }: Props) {
  const total = cases.length;
  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 cards = [
    { label: 'Total Cases', value: total, filter: 'All', icon: 'ri-file-list-3-line', color: PRIMARY, light: '#F9E6F5' },
    { label: 'High Severity', value: high, filter: 'High', icon: 'ri-error-warning-fill', color: '#C62828', light: '#FFEBEE' },
    { label: 'Medium Severity', value: medium, filter: 'Medium', icon: 'ri-alert-fill', color: '#E65100', light: '#FFF3E0' },
    { label: 'Low Severity', value: low, filter: 'Low', icon: 'ri-information-fill', color: '#2E7D32', light: '#E8F5E9' },
  ];

  return (
    <div className="mb-8">
      <div className="flex items-center justify-between mb-5">
        <div>
          <h1 className="text-2xl font-bold" style={{ color: DARK }}>Disciplinary Cases</h1>
          <p className="text-sm text-gray-500 mt-0.5">Record and manage employee disciplinary cases</p>
        </div>
      </div>

      <div className="grid grid-cols-4 gap-4 mb-5">
        {cards.map(card => {
          const isActive = activeFilter === card.filter;
          return (
            <button key={card.filter} onClick={() => onFilterSeverity(card.filter)}
              className={`text-left p-5 rounded-2xl border-2 cursor-pointer transition-all hover:shadow-md ${isActive ? 'shadow-lg scale-[1.02]' : 'hover:scale-[1.01]'}`}
              style={{
                background: isActive ? card.color : card.light,
                borderColor: isActive ? card.color : 'transparent',
              }}>
              <div className="flex items-start justify-between mb-3">
                <div className="w-10 h-10 rounded-xl flex items-center justify-center"
                  style={{ background: isActive ? 'rgba(255,255,255,0.25)' : card.color }}>
                  <i className={`${card.icon} text-xl text-white`}></i>
                </div>
                {isActive && (
                  <div className="w-5 h-5 flex items-center justify-center">
                    <i className="ri-filter-fill text-white text-sm"></i>
                  </div>
                )}
              </div>
              <p className="text-3xl font-bold mb-1" style={{ color: isActive ? '#fff' : card.color }}>{card.value}</p>
              <p className="text-sm font-medium" style={{ color: isActive ? 'rgba(255,255,255,0.85)' : '#555' }}>{card.label}</p>
              {isActive && <p className="text-xs mt-1" style={{ color: 'rgba(255,255,255,0.7)' }}>Click to clear filter</p>}
            </button>
          );
        })}
      </div>

      <div className="flex gap-3 mb-2">
        <button onClick={onNew}
          className="flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold text-white cursor-pointer whitespace-nowrap shadow-md transition-all hover:opacity-90"
          style={{ background: PRIMARY }}>
          <div className="w-4 h-4 flex items-center justify-center"><i className="ri-add-line text-base"></i></div>
          New Case
        </button>
        <button onClick={onViewRegister}
          className="flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold border-2 cursor-pointer whitespace-nowrap transition-all hover:bg-purple-50"
          style={{ borderColor: PRIMARY, color: PRIMARY }}>
          <div className="w-4 h-4 flex items-center justify-center"><i className="ri-file-list-3-line text-base"></i></div>
          View Register
        </button>
      </div>
    </div>
  );
}