'use client';
import { useState, useEffect } from 'react';
import { createEmployeeWithUser, fetchDepartments } from '../../../lib/admin-api';
import { Employee } from './EmployeesContent';

interface Props {
  employees: Employee[];
  onSave: () => void;
  onClose: () => void;
}

const EMPLOYMENT_TYPES = ['Permanent', 'Contract', 'Intern', 'Casual'];
const STATUSES = ['Active', 'On Leave', 'Probation', 'Inactive'];
const GENDERS =['Male', 'Female'];

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>
  );
}

interface SuccessData {
  empNumber: string;
  username: string;
  tempPassword: string;
  emailSent?: boolean;
  emailError?: string;
}

interface DepartmentRow {
  id?: number;
  name: string;
  [key: string]: any;
}

export default function AddEmployeeModal({ employees, onSave, onClose }: Props) {
  const [departments, setDepartments] = useState<string[]>([]);
  const [form, setForm] = useState({
    name: '', email: '', phone: '', dob: '', joined: '',
    nationalId: '', kraPin: '', dept: '',
    role: '', gender: 'Male', salary: '', employmentType: 'Permanent',
  });
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [saving, setSaving] = useState(false);
  const [saveError, setSaveError] = useState('');
  const [success, setSuccess] = useState<SuccessData | null>(null);

  useEffect(() => {
    fetchDepartments()
      .then((rows: DepartmentRow[]) => {
        const names = rows.map((r: DepartmentRow) => r.name as string);
        setDepartments(names);
        if (names.length > 0) setForm(f => ({ ...f, dept: names[0] }));
      })
      .catch(() => setDepartments(['HR', 'ICT', 'Finance', 'Operations']));
  }, []);

  const set = (k: string, 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 / Job Title is required';
    if (!form.joined) e.joined = 'Date joined is required';
    
    if (form.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
      e.email = 'Please enter a valid email address';
    }
    
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const handleSave = async () => {
    if (!validate()) return;
    setSaving(true);
    setSaveError('');

    try {
      const result = await createEmployeeWithUser({
        fullName: form.name,
        email: form.email,
        phone: form.phone || undefined,
        dob: form.dob || undefined,
        gender: form.gender,
        dept: form.dept,
        position: form.role,
        joinDate: form.joined,
        salary: form.salary || undefined,
        nationalId: form.nationalId || undefined,
        kraPin: form.kraPin || undefined,
        employmentType: form.employmentType,
        createdByName: 'HR Admin',
      });

      onSave();
      setSuccess({
        empNumber: result.empNumber,
        username: result.username,
        tempPassword: result.tempPassword,
        emailSent: result.emailSent || false,
        emailError: result.emailError,
      });
    } catch (err: unknown) {
      console.error('Error creating employee:', err);
      
      const errorResponse = err as any;
      let errorMessage = 'Failed to save employee. Please try again.';
      
      // Simple error messages - no long details
      if (errorResponse?.response?.data?.conflict === 'user') {
        errorMessage = `❌ Email "${form.email}" is already registered as a system user. Please use a different email address.`;
      } else if (errorResponse?.response?.data?.conflict === 'employee') {
        errorMessage = `❌ Email "${form.email}" is already registered to another employee. Please use a different email address.`;
      } else if (errorResponse?.response?.data?.conflict === 'nationalId') {
        errorMessage = `❌ National ID "${form.nationalId}" is already registered. Please verify the ID number.`;
      } else if (errorResponse?.response?.data?.conflict === 'kraPin') {
        errorMessage = `❌ KRA PIN "${form.kraPin}" is already registered. Please verify the PIN.`;
      } else if (errorResponse?.message) {
        errorMessage = `❌ ${errorResponse.message}`;
      } else if (errorResponse?.response?.status === 409) {
        errorMessage = `❌ Email "${form.email}" is already in use. Please use a different email address.`;
      } else if (errorResponse?.response?.status === 400) {
        errorMessage = `❌ Invalid data. Please check all required fields.`;
      } else if (errorResponse?.response?.status === 500) {
        errorMessage = `❌ Server error. Please try again later.`;
      }
      
      setSaveError(errorMessage);
    } finally {
      setSaving(false);
    }
  };

  if (success) {
    return (
      <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
        <div className="bg-white rounded-2xl p-8 w-[520px] shadow-2xl text-center">
          <div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4" style={{ background: '#fdf4fc' }}>
            <i className="ri-checkbox-circle-fill text-4xl" style={{ color: '#b828a0' }}></i>
          </div>
          <h3 className="text-xl font-bold text-gray-800 mb-1">Employee Added Successfully!</h3>
          <p className="text-gray-500 text-sm mb-5">The employee has been registered in the system.</p>

          <div className="rounded-xl p-4 mb-4 border text-left" style={{ background: '#fdf4fc', borderColor: '#f0c0ec' }}>
            <p className="text-xs font-semibold uppercase tracking-wide mb-3" style={{ color: '#b828a0' }}>Login Credentials</p>
            <div className="space-y-2">
              <div className="flex justify-between items-center py-1.5 border-b border-pink-100">
                <span className="text-xs text-gray-500">Username</span>
                <span className="font-mono font-bold text-gray-800">{success.username}</span>
              </div>
              <div className="flex justify-between items-center py-1.5">
                <span className="text-xs text-gray-500">Temporary Password</span>
                <span className="font-mono font-bold text-gray-800">{success.tempPassword}</span>
              </div>
            </div>
          </div>

          <button onClick={onClose} className="w-full py-3 rounded-xl text-white font-semibold cursor-pointer" style={{ background: '#b828a0' }}>
            Done
          </button>
        </div>
      </div>
    );
  }

  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-[620px] 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">Add New Employee</h2>
            <p className="text-xs text-gray-400 mt-0.5">System will auto-generate credentials</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>

        {saveError && (
          <div className="mb-4 bg-red-50 border border-red-200 rounded-xl p-4">
            <div className="flex items-start gap-2">
              <i className="ri-error-warning-line text-red-500 mt-0.5"></i>
              <p className="text-sm text-red-700">{saveError}</p>
            </div>
          </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 (KES)" value={form.salary} onChange={v => set('salary', v)} placeholder="e.g. 145000" />

          <div>
            <label className="block text-xs font-semibold text-gray-600 mb-1">Gender</label>
            <div className="flex gap-2">
              {GENDERS.map(g => (
                <button key={g} onClick={() => set('gender', g)}
                  className="flex-1 py-2 rounded-lg text-xs font-semibold cursor-pointer border transition-all"
                  style={form.gender === g ? { background: '#b828a0', color: '#fff', borderColor: '#b828a0' } : { background: '#f9f9f9', color: '#4b5563', borderColor: '#e5e7eb' }}>
                  {g}
                </button>
              ))}
            </div>
          </div>

          <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>

        <div className="flex gap-3 mt-5">
          <button onClick={onClose} disabled={saving} 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 disabled:opacity-50">
            Cancel
          </button>
          <button onClick={handleSave} disabled={saving} className="flex-1 text-white py-2.5 rounded-lg text-sm font-medium cursor-pointer disabled:opacity-70 flex items-center justify-center gap-2" style={{ background: '#b828a0' }}>
            {saving ? (
              <>
                <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                Saving...
              </>
            ) : (
              'Save Employee'
            )}
          </button>
        </div>
      </div>
    </div>
  );
}