'use client';
import { useState } from 'react';
import { Employee, DEPARTMENTS, STATUSES, EMPLOYMENT_TYPES } from './EmployeesContent';

interface Props {
  employee: Employee;
  onSave: (emp: Employee) => void;
  onClose: () => void;
}

interface FieldProps {
  label: string;
  value: string;
  onChange: (v: string) => void;
  type?: string;
  placeholder?: string;
  error?: string;
}

function Field({ label, value, onChange, type = 'text', placeholder = '', error }: FieldProps) {
  return (
    <div>
      <label className="block text-xs font-semibold text-gray-600 mb-1">{label}</label>
      <input
        type={type}
        placeholder={placeholder}
        value={value}
        onChange={e => onChange(e.target.value)}
        className={`w-full border rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-purple-300 ${error ? 'border-red-400' : 'border-gray-200'}`}
      />
      {error && <p className="text-xs text-red-500 mt-0.5">{error}</p>}
    </div>
  );
}

export default function EditEmployeeModal({ employee, onSave, onClose }: Props) {
  const [form, setForm] = useState({ ...employee });
  const [errors, setErrors] = useState<Record<string, string>>({});

  const set = (k: keyof Employee, v: string) => setForm(f => ({ ...f, [k]: v }));

  const validate = () => {
    const e: Record<string, string> = {};
    if (!form.name.trim()) e.name = 'Full name is required';
    if (!form.email.trim()) e.email = 'Email is required';
    if (!form.role.trim()) e.role = 'Role is required';
    if (!form.joined) e.joined = 'Date joined is required';
    if (!form.salary.trim()) e.salary = 'Salary is required';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const handleSave = () => {
    if (!validate()) return;
    const initials = form.name.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2);
    onSave({ ...form, avatar: initials });
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-white rounded-2xl p-6 w-[600px] max-h-[90vh] overflow-y-auto shadow-2xl">
        <div className="flex items-center justify-between mb-5">
          <div>
            <h2 className="text-lg font-bold text-gray-800">Edit Employee</h2>
            <p className="text-xs text-gray-400">{employee.id} — {employee.name}</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="grid grid-cols-2 gap-4">
          <Field label="Full Name *" value={form.name} onChange={v => set('name', v)} placeholder="e.g. Jane Mwangi" error={errors?.name} />
          <Field label="Email Address *" value={form.email} onChange={v => set('email', v)} type="email" placeholder="jane@uwezo.go.ke" error={errors?.email} />
          <Field label="Phone Number" value={form.phone} onChange={v => set('phone', v)} placeholder="+254 7XX XXX XXX" />
          <Field label="Date of Birth" value={form.dob} onChange={v => set('dob', v)} type="date" />
          <Field label="Date Joined *" value={form.joined} onChange={v => set('joined', v)} type="date" error={errors?.joined} />
          <Field label="National ID" value={form.nationalId} onChange={v => set('nationalId', v)} placeholder="e.g. 12345678" />
          <Field label="KRA PIN" value={form.kraPin} onChange={v => set('kraPin', v)} placeholder="e.g. A001234567B" />
          <Field label="Role / Job Title *" value={form.role} onChange={v => set('role', v)} placeholder="e.g. M&E Officer" error={errors?.role} />
          <Field label="Salary *" value={form.salary} onChange={v => set('salary', v)} placeholder="e.g. KES 145,000" error={errors?.salary} />

          <div>
            <label className="block text-xs font-semibold text-gray-600 mb-1">Department</label>
            <select value={form.dept} onChange={e => set('dept', e.target.value)} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-purple-300 pr-8 cursor-pointer">
              {DEPARTMENTS.map(d => <option key={d}>{d}</option>)}
            </select>
          </div>

          <div>
            <label className="block text-xs font-semibold text-gray-600 mb-1">Employment Type</label>
            <select value={form.employmentType} onChange={e => set('employmentType', e.target.value)} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-purple-300 pr-8 cursor-pointer">
              {EMPLOYMENT_TYPES.map(t => <option key={t}>{t}</option>)}
            </select>
          </div>

          <div>
            <label className="block text-xs font-semibold text-gray-600 mb-1">Status</label>
            <select value={form.status} onChange={e => set('status', e.target.value)} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-purple-300 pr-8 cursor-pointer">
              {STATUSES.map(s => <option key={s}>{s}</option>)}
            </select>
          </div>
        </div>

        <div className="flex gap-3 mt-6">
          <button onClick={onClose} className="flex-1 border border-gray-200 text-gray-600 py-2.5 rounded-lg text-sm font-medium hover:bg-gray-50 cursor-pointer whitespace-nowrap">Cancel</button>
          <button onClick={handleSave} className="flex-1 text-white py-2.5 rounded-lg text-sm font-medium cursor-pointer whitespace-nowrap" style={{ background: '#b22698' }}>Update Employee</button>
        </div>
      </div>
    </div>
  );
}