'use client';
import { TerminationRecord } from './terminationData';

interface Props {
  record: TerminationRecord;
  onClose: () => void;
}

const catColors: Record<string, string> = {
  Voluntary: 'bg-purple-100 text-purple-700',
  Involuntary: 'bg-red-100 text-red-700',
  Other: 'bg-gray-100 text-gray-600',
};

export default function TerminationDetailModal({ record, onClose }: Props) {
  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
        <div className="px-6 py-4 border-b border-gray-100 flex items-start justify-between" style={{ background: '#fdf0fc' }}>
          <div>
            <div className="flex items-center gap-2 mb-1">
              <span className="font-mono text-xs text-gray-500">{record.caseNo}</span>
              <span className={`px-2 py-0.5 rounded-full text-xs font-semibold ${catColors[record.category]}`}>{record.category}</span>
            </div>
            <h2 className="text-lg font-bold text-gray-800">{record.employeeName}</h2>
            <p className="text-xs text-gray-500">{record.position} · {record.department}</p>
          </div>
          <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-pink-100 cursor-pointer">
            <i className="ri-close-line text-gray-500"></i>
          </button>
        </div>

        <div className="flex-1 overflow-y-auto p-6 space-y-4">
          <div className="grid grid-cols-2 gap-4">
            {[
              { label: 'Employee ID', value: record.employeeId },
              { label: 'Department', value: record.department },
              { label: 'Position', value: record.position },
              { label: 'Termination Date', value: record.terminationDate },
              { label: 'Category', value: record.category },
              { label: 'Reason', value: record.reason },
              { label: 'Initiated Date', value: record.initiatedDate },
              { label: 'Initiated By', value: record.initiatedBy },
            ].map(item => (
              <div key={item.label} className="bg-gray-50 rounded-xl p-3">
                <p className="text-xs font-semibold text-gray-500 mb-1">{item.label.toUpperCase()}</p>
                <p className="text-sm font-medium text-gray-800">{item.value}</p>
              </div>
            ))}
          </div>

          {record.supportingLetter && (
            <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="w-9 h-9 rounded-xl bg-blue-100 flex items-center justify-center">
                  <i className="ri-file-text-line text-blue-600"></i>
                </div>
                <div>
                  <p className="text-sm font-semibold text-blue-800">Supporting Letter</p>
                  <p className="text-xs text-blue-600">{record.supportingLetter}</p>
                </div>
              </div>
              <button className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-blue-600 text-white text-xs font-medium cursor-pointer whitespace-nowrap">
                <div className="w-4 h-4 flex items-center justify-center"><i className="ri-download-line"></i></div>
                Download
              </button>
            </div>
          )}

          <div className="p-4 rounded-xl border border-gray-200 bg-gray-50">
            <p className="text-xs font-semibold text-gray-500 mb-1">SOURCE</p>
            <p className="text-sm text-gray-700">{record.source === 'hr' ? 'Initiated by HR Admin' : 'Employee Self-Application (HR Approved)'}</p>
          </div>
        </div>

        <div className="px-6 py-4 border-t border-gray-100 flex justify-end">
          <button onClick={onClose}
            className="px-5 py-2 rounded-lg text-white text-sm font-semibold cursor-pointer whitespace-nowrap"
            style={{ background: '#b828a0' }}>
            Close
          </button>
        </div>
      </div>
    </div>
  );
}