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

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

interface Props {
  caseData: DisciplinaryCase;
  onClose: () => void;
  onEdit: (c: DisciplinaryCase) => void;
  onDelete: (id: string) => void;
  canEditDelete: boolean;
}

const severityConfig = {
  High: { icon: 'ri-error-warning-fill', color: '#C62828', light: '#FFEBEE', dot: '🔴' },
  Medium: { icon: 'ri-alert-fill', color: '#E65100', light: '#FFF3E0', dot: '🟠' },
  Low: { icon: 'ri-information-fill', color: '#2E7D32', light: '#E8F5E9', dot: '🟢' },
};

const fileIcon = (type: string) => {
  if (type === 'pdf') return 'ri-file-pdf-line';
  if (['doc', 'docx'].includes(type)) return 'ri-file-word-line';
  if (['jpg', 'png'].includes(type)) return 'ri-image-line';
  return 'ri-file-line';
};

export default function CaseDetailModal({ caseData, onClose, onEdit, onDelete, canEditDelete }: Props) {
  const sv = severityConfig[caseData.severity];

  const formatDate = (iso: string) => {
    try { return new Date(iso).toLocaleString('en-KE', { dateStyle: 'medium', timeStyle: 'short' }); }
    catch { return iso; }
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-start justify-center z-50 p-4 overflow-y-auto">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl my-8">
        <div className="flex items-start justify-between p-5 border-b rounded-t-2xl sticky top-0 bg-white z-10"
          style={{ borderColor: '#E9D5F5' }}>
          <div>
            <div className="flex items-center gap-3 flex-wrap">
              <span className="font-mono font-bold text-lg" style={{ color: DARK }}>{caseData.caseNumber}</span>
              <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold"
                style={{ background: sv.light, color: sv.color }}>
                <span>{sv.dot}</span> {caseData.severity} Severity
              </span>
              {caseData.isConfidential && (
                <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-600">
                  <i className="ri-lock-fill text-xs"></i> Confidential
                </span>
              )}
            </div>
            <p className="text-sm text-gray-500 mt-1">{caseData.employeeName} • {caseData.department} • {caseData.complaintType}</p>
          </div>
          <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 cursor-pointer flex-shrink-0">
            <i className="ri-close-line text-gray-500 text-lg"></i>
          </button>
        </div>

        <div className="p-5 space-y-5">
          <div className="grid grid-cols-2 gap-4">
            <div className="rounded-xl p-4" style={{ background: PRIMARY_LIGHT }}>
              <p className="text-xs font-semibold text-gray-400 uppercase mb-2">Employee Involved</p>
              <p className="font-bold text-gray-800">{caseData.employeeName}</p>
              <p className="text-sm text-gray-500 font-mono">{caseData.employeeId}</p>
              <p className="text-sm text-gray-500">{caseData.department}</p>
            </div>
            <div className="rounded-xl p-4" style={{ background: PRIMARY_LIGHT }}>
              <p className="text-xs font-semibold text-gray-400 uppercase mb-2">Case Information</p>
              <div className="space-y-1">
                <div className="flex justify-between text-sm">
                  <span className="text-gray-500">Complaint Type</span>
                  <span className="font-medium text-gray-800">{caseData.complaintType}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-gray-500">Incident Date</span>
                  <span className="font-medium text-gray-800">{caseData.incidentDate}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-gray-500">Confidential</span>
                  <span className={`font-medium ${caseData.isConfidential ? 'text-orange-600' : 'text-green-700'}`}>
                    {caseData.isConfidential ? 'Yes' : 'No'}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div className="rounded-xl p-4" style={{ background: '#FAF5FF' }}>
            <p className="text-xs font-semibold text-gray-400 uppercase mb-2">Description</p>
            <p className="text-sm text-gray-700 leading-relaxed">{caseData.description}</p>
          </div>

          {caseData.witnesses && (
            <div className="rounded-xl p-4 border" style={{ borderColor: '#E9D5F5' }}>
              <p className="text-xs font-semibold text-gray-400 uppercase mb-2">Witnesses</p>
              <p className="text-sm text-gray-700">{caseData.witnesses}</p>
            </div>
          )}

          {caseData.evidenceFiles.length > 0 && (
            <div>
              <p className="text-xs font-semibold text-gray-400 uppercase mb-2">Evidence Attachments</p>
              <div className="space-y-2">
                {caseData.evidenceFiles.map((file, i) => (
                  <div key={i} className="flex items-center gap-3 p-3 rounded-xl border"
                    style={{ borderColor: '#E9D5F5', background: '#FAF5FF' }}>
                    <div className="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0"
                      style={{ background: PRIMARY_LIGHT }}>
                      <i className={`${fileIcon(file.type)} text-lg`} style={{ color: PRIMARY }}></i>
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium text-gray-800 truncate">{file.name}</p>
                      <p className="text-xs text-gray-400">{file.size} • {file.type.toUpperCase()}</p>
                    </div>
                    <button className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold cursor-pointer whitespace-nowrap transition-colors hover:opacity-80"
                      style={{ background: PRIMARY, color: '#fff' }}>
                      <div className="w-3 h-3 flex items-center justify-center">
                        <i className="ri-download-line text-xs"></i>
                      </div>
                      Download
                    </button>
                  </div>
                ))}
              </div>
            </div>
          )}

          {caseData.evidenceFiles.length === 0 && (
            <div className="rounded-xl p-4 border border-dashed border-gray-200 text-center">
              <div className="w-8 h-8 flex items-center justify-center mx-auto mb-1">
                <i className="ri-attachment-line text-gray-300 text-2xl"></i>
              </div>
              <p className="text-sm text-gray-400">No evidence files attached</p>
            </div>
          )}

          <div className="rounded-xl p-4" style={{ background: PRIMARY_LIGHT }}>
            <p className="text-xs font-semibold text-gray-400 uppercase mb-2">Audit Trail</p>
            <div className="space-y-1 text-sm">
              <div className="flex justify-between">
                <span className="text-gray-500">Created By</span>
                <span className="font-medium text-gray-800">{caseData.createdBy} ({caseData.createdByRole})</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-500">Created At</span>
                <span className="font-medium text-gray-800">{formatDate(caseData.createdAt)}</span>
              </div>
              {caseData.updatedBy && (
                <div className="flex justify-between">
                  <span className="text-gray-500">Last Updated By</span>
                  <span className="font-medium text-gray-800">{caseData.updatedBy}</span>
                </div>
              )}
              {caseData.updatedAt && (
                <div className="flex justify-between">
                  <span className="text-gray-500">Last Updated At</span>
                  <span className="font-medium text-gray-800">{formatDate(caseData.updatedAt)}</span>
                </div>
              )}
            </div>
          </div>

          <div className="p-4 rounded-xl border-2 border-dashed flex items-start gap-3"
            style={{ borderColor: YELLOW, background: '#FFFDE7' }}>
            <div className="w-5 h-5 flex items-center justify-center flex-shrink-0 mt-0.5">
              <i className="ri-information-line text-base" style={{ color: '#F57F17' }}></i>
            </div>
            <p className="text-xs text-gray-600 leading-relaxed">
              <strong style={{ color: '#F57F17' }}>Note:</strong> No investigation, hearing, measures, appeal, or comments available. This case is for record-keeping only.
            </p>
          </div>
        </div>

        <div className="flex gap-3 p-5 border-t" style={{ borderColor: '#E9D5F5' }}>
          <button onClick={onClose}
            className="flex-1 py-2.5 rounded-xl border-2 text-sm font-semibold cursor-pointer whitespace-nowrap hover:bg-gray-50 transition-colors"
            style={{ borderColor: '#e5e7eb', color: '#555' }}>
            Close
          </button>
          {canEditDelete && (
            <>
              <button onClick={() => onEdit(caseData)}
                className="flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold cursor-pointer whitespace-nowrap border-2 transition-colors hover:bg-purple-50"
                style={{ borderColor: PRIMARY, color: PRIMARY }}>
                <div className="w-4 h-4 flex items-center justify-center"><i className="ri-edit-line text-base"></i></div>
                Edit
              </button>
              <button onClick={() => onDelete(caseData.id)}
                className="flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold cursor-pointer whitespace-nowrap border-2 transition-colors hover:bg-red-50"
                style={{ borderColor: '#C62828', color: '#C62828' }}>
                <div className="w-4 h-4 flex items-center justify-center"><i className="ri-delete-bin-line text-base"></i></div>
                Delete
              </button>
            </>
          )}
        </div>
      </div>
    </div>
  );
}