'use client';
import { useState } from 'react';
import { TrainingProgram, TrainingMode } from './trainingData';

interface Props {
  onClose: () => void;
  onSave: (program: TrainingProgram) => void;
  existingCount: number;
}

const DEPARTMENTS = ['All Departments', 'Monitoring & Evaluation', 'Transport', 'Procurement', 'Corporate Communication', 'ICT'];
const MODES: TrainingMode[] = ['In-Person', 'Online', 'Hybrid'];

export default function ScheduleTrainingModal({ onClose, onSave, existingCount }: Props) {
  const [form, setForm] = useState({
    title: '',
    dept: 'All Departments',
    trainer: '',
    start: '',
    end: '',
    mode: 'In-Person' as TrainingMode,
    capacity: '',
    cost: '',
    venue: '',
    description: '',
    objectives: ['', '', ''],
  });
  const [errors, setErrors] = useState<Record<string, string>>({});

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

  const setObjective = (i: number, v: string) => {
    const objs = [...form.objectives];
    objs[i] = v;
    setForm(f => ({ ...f, objectives: objs }));
  };

  const validate = () => {
    const e: Record<string, string> = {};
    if (!form.title.trim()) e.title = 'Program title is required';
    if (!form.trainer.trim()) e.trainer = 'Trainer name is required';
    if (!form.start) e.start = 'Start date is required';
    if (!form.end) e.end = 'End date is required';
    if (form.start && form.end && form.end < form.start) e.end = 'End date must be after start date';
    if (!form.capacity || isNaN(Number(form.capacity)) || Number(form.capacity) < 1) e.capacity = 'Valid capacity is required';
    if (!form.cost || isNaN(Number(form.cost)) || Number(form.cost) < 0) e.cost = 'Valid cost is required';
    if (!form.venue.trim()) e.venue = 'Venue is required';
    if (!form.description.trim()) e.description = 'Description is required';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const handleSave = () => {
    if (!validate()) return;
    const nextNum = existingCount + 1;
    const id = `TR${String(nextNum).padStart(3, '0')}`;
    const today = new Date().toISOString().split('T')[0];
    let status: 'Upcoming' | 'Ongoing' | 'Completed' = 'Upcoming';
    if (form.start <= today && form.end >= today) status = 'Ongoing';
    else if (form.end < today) status = 'Completed';

    const program: TrainingProgram = {
      id,
      title: form.title,
      dept: form.dept,
      trainer: form.trainer,
      enrolled: 0,
      capacity: Number(form.capacity),
      start: form.start,
      end: form.end,
      status,
      mode: form.mode,
      cost: Number(form.cost),
      venue: form.venue,
      description: form.description,
      objectives: form.objectives.filter(o => o.trim() !== ''),
      enrolledStaff: [],
    };
    onSave(program);
  };

  const Field = ({ label, k, type = 'text', placeholder = '', required = false }: { label: string; k: string; type?: string; placeholder?: string; required?: boolean }) => (
    <div>
      <label className="block text-xs font-semibold text-gray-600 mb-1">{label}{required && ' *'}</label>
      <input
        type={type}
        placeholder={placeholder}
        value={(form as any)[k]}
        onChange={e => set(k, e.target.value)}
        className={`w-full border rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-purple-300 ${errors[k] ? 'border-red-400' : 'border-gray-200'}`}
      />
      {errors[k] && <p className="text-xs text-red-500 mt-0.5">{errors[k]}</p>}
    </div>
  );

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl w-[600px] max-h-[90vh] overflow-y-auto shadow-2xl">
        <div className="sticky top-0 bg-white px-6 py-4 border-b border-gray-100 flex items-center justify-between rounded-t-2xl z-10">
          <h2 className="text-lg font-bold text-gray-800">Schedule New Training</h2>
          <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-6 space-y-4">
          <Field label="Program Title" k="title" placeholder="e.g. Leadership Skills Workshop" required />
          <Field label="Trainer / Facilitator" k="trainer" placeholder="e.g. Dr. Jane Doe" required />

          <div className="grid grid-cols-2 gap-4">
            <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">
                {DEPARTMENTS.map(d => <option key={d}>{d}</option>)}
              </select>
            </div>
            <div>
              <label className="block text-xs font-semibold text-gray-600 mb-1">Mode *</label>
              <select value={form.mode} onChange={e => set('mode', e.target.value as TrainingMode)} 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">
                {MODES.map(m => <option key={m}>{m}</option>)}
              </select>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <Field label="Start Date" k="start" type="date" required />
            <Field label="End Date" k="end" type="date" required />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <Field label="Capacity (max participants)" k="capacity" type="number" placeholder="e.g. 30" required />
            <Field label="Cost (KES)" k="cost" type="number" placeholder="e.g. 25000" required />
          </div>

          <Field label="Venue / Location" k="venue" placeholder="e.g. Uwezo Fund Boardroom, Nairobi" required />

          <div>
            <label className="block text-xs font-semibold text-gray-600 mb-1">Description *</label>
            <textarea
              rows={3}
              placeholder="Describe the training program..."
              value={form.description}
              onChange={e => set('description', e.target.value)}
              className={`w-full border rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-purple-300 resize-none ${errors.description ? 'border-red-400' : 'border-gray-200'}`}
            />
            {errors.description && <p className="text-xs text-red-500 mt-0.5">{errors.description}</p>}
          </div>

          <div>
            <label className="block text-xs font-semibold text-gray-600 mb-2">Learning Objectives (optional)</label>
            <div className="space-y-2">
              {form.objectives.map((obj, i) => (
                <input
                  key={i}
                  type="text"
                  placeholder={`Objective ${i + 1}`}
                  value={obj}
                  onChange={e => setObjective(i, 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"
                />
              ))}
            </div>
          </div>
        </div>

        <div className="sticky bottom-0 bg-white px-6 py-4 border-t border-gray-100 flex gap-3 rounded-b-2xl">
          <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 bg-purple-700 text-white py-2.5 rounded-lg text-sm font-medium hover:bg-purple-800 cursor-pointer whitespace-nowrap">Save Program</button>
        </div>
      </div>
    </div>
  );
}