'use client';
import { useState } from 'react';
import { DisciplinaryCase, complaintTypes } from './disciplinaryData';

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

interface Props {
  caseData: DisciplinaryCase;
  onClose: () => void;
  onSave: (c: DisciplinaryCase) => void;
}

export default function EditCaseModal({ caseData, onClose, onSave }: Props) {
  const [form, setForm] = useState({
    complaintType: caseData.complaintType,
    severity: caseData.severity,
    incidentDate: caseData.incidentDate,
    description: caseData.description,
    witnesses: caseData.witnesses || '',
    isConfidential: caseData.isConfidential,
  });

  const f = (field: string, val: any) => setForm(p => ({ ...p, [field]: val }));

  const handleSave = () => {
    onSave({
      ...caseData,
      ...form,
      witnesses: form.witnesses || undefined,
      updatedBy: 'HR Admin',
      updatedAt: new Date().toISOString(),
    });
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-xl max-h-[90vh] overflow-y-auto">
        <div className="flex items-center justify-between p-5 border-b sticky top-0 bg-white z-10 rounded-t-2xl"
          style={{ borderColor: '#E9D5F5' }}>
          <div>
            <h2 className="text-lg font-bold" style={{ color: DARK }}>Edit Case</h2>
            <p className="text-xs text-gray-500 mt-0.5 font-mono font-semibold" style={{ color: PRIMARY }}>{caseData.caseNumber}</p>
          </div>
          <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 cursor-pointer">
            <i className="ri-close-line text-gray-500 text-lg"></i>
          </button>
        </div>

        <div className="p-5 space-y-4">
          <div>
            <label className="text-xs font-semibold text-gray-600 mb-1.5 block">Complaint Type</label>
            <div className="relative">
              <select value={form.complaintType} onChange={e => f('complaintType', e.target.value)}
                className="w-full border rounded-xl px-4 py-2.5 text-sm outline-none appearance-none cursor-pointer pr-10"
                style={{ borderColor: PRIMARY }}>
                {complaintTypes.map(ct => <option key={ct} value={ct}>{ct}</option>)}
              </select>
              <div className="w-5 h-5 flex items-center justify-center absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
                <i className="ri-arrow-down-s-line text-gray-400 text-base"></i>
              </div>
            </div>
          </div>

          <div>
            <label className="text-xs font-semibold text-gray-600 mb-2 block">Severity</label>
            <div className="flex gap-3">
              {([
                { val: 'High', color: '#C62828', light: '#FFEBEE' },
                { val: 'Medium', color: '#E65100', light: '#FFF3E0' },
                { val: 'Low', color: '#2E7D32', light: '#E8F5E9' },
              ] as const).map(s => (
                <button key={s.val} onClick={() => f('severity', s.val)}
                  className="flex-1 py-2.5 rounded-xl text-sm font-semibold border-2 cursor-pointer transition-all whitespace-nowrap"
                  style={{
                    background: form.severity === s.val ? s.color : s.light,
                    borderColor: form.severity === s.val ? s.color : 'transparent',
                    color: form.severity === s.val ? '#fff' : s.color,
                  }}>
                  {s.val}
                </button>
              ))}
            </div>
          </div>

          <div>
            <label className="text-xs font-semibold text-gray-600 mb-1.5 block">Date of Incident</label>
            <input type="date" value={form.incidentDate} onChange={e => f('incidentDate', e.target.value)}
              className="w-full border rounded-xl px-4 py-2.5 text-sm outline-none"
              style={{ borderColor: PRIMARY }} />
          </div>

          <div>
            <label className="text-xs font-semibold text-gray-600 mb-1.5 block">Description</label>
            <textarea value={form.description} onChange={e => f('description', e.target.value)}
              rows={4} maxLength={500}
              className="w-full border rounded-xl px-4 py-2.5 text-sm outline-none resize-none"
              style={{ borderColor: PRIMARY }} />
            <p className="text-xs text-gray-400 text-right mt-1">{form.description.length}/500</p>
          </div>

          <div>
            <label className="text-xs font-semibold text-gray-600 mb-1.5 block">Witnesses</label>
            <input value={form.witnesses} onChange={e => f('witnesses', e.target.value)}
              placeholder="e.g. John Doe, Jane Smith"
              className="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm outline-none" />
          </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"
            style={{ borderColor: '#e5e7eb', color: '#555' }}>
            Cancel
          </button>
          <button onClick={handleSave}
            className="flex-1 py-2.5 rounded-xl text-sm font-semibold text-white cursor-pointer whitespace-nowrap"
            style={{ background: PRIMARY }}>
            Save Changes
          </button>
        </div>
      </div>
    </div>
  );
}