'use client';
import { useState } from 'react';
import { Appraisal, ALL_EMPLOYEES, APPRAISAL_OBJECTIVES, KPITarget, QuarterlyActivity } from './performanceData';

interface Props {
  onSave: (a: Appraisal) => void;
  onClose: () => void;
  existingIds: string[];
}

const PERIODS = ['Q1 2026', 'Q2 2026', 'Q3 2025', 'Q4 2025', 'Annual 2025'] as const;

export default function NewAppraisalModal({ onSave, onClose, existingIds }: Props) {
  const [step, setStep] = useState(1);
  const [employeeId, setEmployeeId] = useState('');
  const [period, setPeriod] = useState<typeof PERIODS[number]>('Q1 2026');
  const [targets, setTargets] = useState<KPITarget[]>([
    { id: 't1', objective: APPRAISAL_OBJECTIVES[0], kpi: '', target: '', weight: 25, evidence: '' },
  ]);
  const [activities, setActivities] = useState<QuarterlyActivity[]>([
    { id: 'qa1', activity: '', plannedOutput: '', actualOutput: '', quarter: 'Q1', status: 'Not Started', remarks: '' },
  ]);
  const [errors, setErrors] = useState<string[]>([]);

  const selectedEmp = ALL_EMPLOYEES.find(e => e.id === employeeId);
  const totalWeight = targets.reduce((s, t) => s + Number(t.weight), 0);

  const addTarget = () => {
    setTargets(prev => [...prev, { id: `t${Date.now()}`, objective: APPRAISAL_OBJECTIVES[0], kpi: '', target: '', weight: 0, evidence: '' }]);
  };

  const removeTarget = (id: string) => {
    if (targets.length > 1) setTargets(prev => prev.filter(t => t.id !== id));
  };

  const updateTarget = (id: string, field: keyof KPITarget, value: string | number) => {
    setTargets(prev => prev.map(t => t.id === id ? { ...t, [field]: value } : t));
  };

  const addActivity = () => {
    setActivities(prev => [...prev, { id: `qa${Date.now()}`, activity: '', plannedOutput: '', actualOutput: '', quarter: 'Q1', status: 'Not Started', remarks: '' }]);
  };

  const removeActivity = (id: string) => {
    if (activities.length > 1) setActivities(prev => prev.filter(a => a.id !== id));
  };

  const updateActivity = (id: string, field: keyof QuarterlyActivity, value: string) => {
    setActivities(prev => prev.map(a => a.id === id ? { ...a, [field]: value } : a));
  };

  const validateStep1 = () => {
    const errs: string[] = [];
    if (!employeeId) errs.push('Please select an employee');
    if (!period) errs.push('Please select appraisal period');
    setErrors(errs);
    return errs.length === 0;
  };

  const validateStep2 = () => {
    const errs: string[] = [];
    if (totalWeight !== 100) errs.push(`Total weight must equal 100% (currently ${totalWeight}%)`);
    targets.forEach((t, i) => {
      if (!t.kpi.trim()) errs.push(`KPI ${i + 1}: KPI description is required`);
      if (!t.target.trim()) errs.push(`KPI ${i + 1}: Target is required`);
    });
    setErrors(errs);
    return errs.length === 0;
  };

  const handleNext = () => {
    if (step === 1 && validateStep1()) { setErrors([]); setStep(2); }
    else if (step === 2 && validateStep2()) { setErrors([]); setStep(3); }
  };

  const handleSubmit = () => {
    if (!selectedEmp) return;
    const newId = `AP${String(existingIds.length + 1).padStart(3, '0')}`;
    const newAppraisal: Appraisal = {
      id: newId,
      employeeId: selectedEmp.id,
      name: selectedEmp.name,
      dept: selectedEmp.dept,
      role: selectedEmp.role,
      supervisor: selectedEmp.supervisor,
      supervisorTitle: selectedEmp.supervisorTitle,
      period,
      status: 'Pending',
      overallScore: 0,
      grade: '-',
      avatar: selectedEmp.avatar,
      createdDate: new Date().toISOString().split('T')[0],
      targets,
      quarterlyActivities: activities,
    };
    onSave(newAppraisal);
  };

  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-3xl max-h-[90vh] flex flex-col shadow-2xl">
        <div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
          <div>
            <h2 className="text-lg font-bold text-gray-800">New Performance Appraisal</h2>
            <p className="text-xs text-gray-500 mt-0.5">Step {step} of 3 — {step === 1 ? 'Employee & Period' : step === 2 ? 'Individual Targets (KPIs)' : 'Quarterly Activities'}</p>
          </div>
          <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 cursor-pointer"><i className="ri-close-line text-gray-500"></i></button>
        </div>

        <div className="px-6 py-2 flex gap-2">
          {[1, 2, 3].map(s => (
            <div key={s} className={`flex-1 h-1.5 rounded-full`} style={{ background: s <= step ? '#b828a0' : '#e5e7eb' }}></div>
          ))}
        </div>

        <div className="flex-1 overflow-y-auto px-6 py-4">
          {errors.length > 0 && (
            <div className="mb-4 bg-red-50 border border-red-200 rounded-lg p-3">
              {errors.map((e, i) => <p key={i} className="text-sm text-red-600">{e}</p>)}
            </div>
          )}

          {step === 1 && (
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Select Employee <span className="text-red-500">*</span></label>
                <select value={employeeId} onChange={e => setEmployeeId(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">
                  <option value="">-- Select Employee --</option>
                  {ALL_EMPLOYEES.map(e => <option key={e.id} value={e.id}>{e.name} — {e.role} ({e.dept})</option>)}
                </select>
              </div>
              {selectedEmp && (
                <div className="rounded-xl p-4 flex items-center gap-4" style={{ background: '#fdf2fb' }}>
                  <div className="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold" style={{ background: '#b828a0' }}>{selectedEmp.avatar}</div>
                  <div>
                    <p className="font-semibold text-gray-800">{selectedEmp.name}</p>
                    <p className="text-sm text-gray-500">{selectedEmp.role} · {selectedEmp.dept}</p>
                    <p className="text-xs text-gray-400 mt-0.5">Supervisor: {selectedEmp.supervisor} ({selectedEmp.supervisorTitle})</p>
                  </div>
                </div>
              )}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Appraisal Period <span className="text-red-500">*</span></label>
                <div className="grid grid-cols-3 gap-2">
                  {PERIODS.map(p => (
                    <button key={p} onClick={() => setPeriod(p)} className={`py-2 px-3 rounded-lg border text-sm font-medium cursor-pointer whitespace-nowrap transition-all`}
                      style={period === p ? { background: '#b828a0', color: 'white', borderColor: '#b828a0' } : { borderColor: '#e5e7eb', color: '#4b5563' }}>{p}</button>
                  ))}
                </div>
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <p className="text-sm text-gray-600">Define KPI targets. Total weight must equal <strong>100%</strong>.</p>
                <span className={`text-sm font-bold px-3 py-1 rounded-full ${totalWeight === 100 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-600'}`}>Total: {totalWeight}%</span>
              </div>
              {targets.map((t, i) => (
                <div key={t.id} className="border border-gray-200 rounded-xl p-4 space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-semibold" style={{ color: '#b828a0' }}>KPI #{i + 1}</span>
                    {targets.length > 1 && <button onClick={() => removeTarget(t.id)} className="w-6 h-6 flex items-center justify-center rounded hover:bg-red-100 text-red-500 cursor-pointer"><i className="ri-delete-bin-line text-sm"></i></button>}
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-gray-600 mb-1">Strategic Objective</label>
                    <select value={t.objective} onChange={e => updateTarget(t.id, 'objective', e.target.value)} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none pr-8">
                      {APPRAISAL_OBJECTIVES.map(o => <option key={o} value={o}>{o}</option>)}
                    </select>
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-xs font-medium text-gray-600 mb-1">KPI Description</label>
                      <input value={t.kpi} onChange={e => updateTarget(t.id, 'kpi', e.target.value)} placeholder="e.g. Reports submitted on time" className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
                    </div>
                    <div>
                      <label className="block text-xs font-medium text-gray-600 mb-1">Target</label>
                      <input value={t.target} onChange={e => updateTarget(t.id, 'target', e.target.value)} placeholder="e.g. 4 reports per quarter" className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-xs font-medium text-gray-600 mb-1">Weight (%)</label>
                      <input type="number" min={0} max={100} value={t.weight} onChange={e => updateTarget(t.id, 'weight', Number(e.target.value))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
                    </div>
                    <div>
                      <label className="block text-xs font-medium text-gray-600 mb-1">Evidence / Means of Verification</label>
                      <input value={t.evidence || ''} onChange={e => updateTarget(t.id, 'evidence', e.target.value)} placeholder="e.g. Submitted reports, logs" className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
                    </div>
                  </div>
                </div>
              ))}
              <button onClick={addTarget} className="w-full border-2 border-dashed rounded-xl py-3 text-sm font-medium hover:opacity-80 cursor-pointer flex items-center justify-center gap-2" style={{ borderColor: '#f0c0ec', color: '#b828a0' }}>
                <i className="ri-add-line"></i> Add Another KPI
              </button>
            </div>
          )}

          {step === 3 && (
            <div className="space-y-4">
              <p className="text-sm text-gray-600">Define planned quarterly activities and expected outputs.</p>
              {activities.map((a, i) => (
                <div key={a.id} className="border border-gray-200 rounded-xl p-4 space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-semibold" style={{ color: '#b828a0' }}>Activity #{i + 1}</span>
                    {activities.length > 1 && <button onClick={() => removeActivity(a.id)} className="w-6 h-6 flex items-center justify-center rounded hover:bg-red-100 text-red-500 cursor-pointer"><i className="ri-delete-bin-line text-sm"></i></button>}
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-xs font-medium text-gray-600 mb-1">Activity Description</label>
                      <input value={a.activity} onChange={e => updateActivity(a.id, 'activity', e.target.value)} placeholder="e.g. Prepare quarterly report" className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
                    </div>
                    <div>
                      <label className="block text-xs font-medium text-gray-600 mb-1">Planned Output</label>
                      <input value={a.plannedOutput} onChange={e => updateActivity(a.id, 'plannedOutput', e.target.value)} placeholder="e.g. Submitted report" className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-xs font-medium text-gray-600 mb-1">Quarter</label>
                      <select value={a.quarter} onChange={e => updateActivity(a.id, 'quarter', e.target.value)} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none pr-8">
                        {['Q1', 'Q2', 'Q3', 'Q4'].map(q => <option key={q} value={q}>{q}</option>)}
                      </select>
                    </div>
                    <div>
                      <label className="block text-xs font-medium text-gray-600 mb-1">Initial Status</label>
                      <select value={a.status} onChange={e => updateActivity(a.id, 'status', e.target.value)} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none pr-8">
                        {['Not Started', 'In Progress', 'Completed', 'Deferred'].map(s => <option key={s} value={s}>{s}</option>)}
                      </select>
                    </div>
                  </div>
                </div>
              ))}
              <button onClick={addActivity} className="w-full border-2 border-dashed rounded-xl py-3 text-sm font-medium hover:opacity-80 cursor-pointer flex items-center justify-center gap-2" style={{ borderColor: '#f0c0ec', color: '#b828a0' }}>
                <i className="ri-add-line"></i> Add Another Activity
              </button>
            </div>
          )}
        </div>

        <div className="px-6 py-4 border-t border-gray-100 flex items-center justify-between">
          <button onClick={step === 1 ? onClose : () => setStep(s => s - 1)} className="px-4 py-2 border border-gray-200 rounded-lg text-sm text-gray-600 hover:bg-gray-50 cursor-pointer whitespace-nowrap">
            {step === 1 ? 'Cancel' : 'Back'}
          </button>
          {step < 3 ? (
            <button onClick={handleNext} className="px-5 py-2 text-white rounded-lg text-sm font-medium cursor-pointer whitespace-nowrap" style={{ background: '#b828a0' }}>Next Step</button>
          ) : (
            <button onClick={handleSubmit} className="px-5 py-2 text-white rounded-lg text-sm font-medium cursor-pointer whitespace-nowrap" style={{ background: '#b828a0' }}>Create Appraisal</button>
          )}
        </div>
      </div>
    </div>
  );
}