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

interface Props {
  program: TrainingProgram;
  onClose: () => void;
  onEnroll: (staffList: { staffId: string; name: string; dept: string }[]) => void;
}

export default function EnrollStaffModal({ program, onClose, onEnroll }: Props) {
  const [search, setSearch] = useState('');
  const [selected, setSelected] = useState<string[]>([]);
  const [error, setError] = useState('');

  const enrolledIds = program.enrolledStaff.map(s => s.staffId);
  const slotsLeft = program.capacity - program.enrolled;
  const isFull = slotsLeft <= 0;

  const available = ALL_STAFF.filter(s =>
    !enrolledIds.includes(s.staffId) &&
    (s.name.toLowerCase().includes(search.toLowerCase()) ||
      s.dept.toLowerCase().includes(search.toLowerCase()) ||
      s.role.toLowerCase().includes(search.toLowerCase()))
  );

  const toggle = (staffId: string) => {
    setError('');
    setSelected(prev => {
      if (prev.includes(staffId)) return prev.filter(id => id !== staffId);
      if (prev.length >= slotsLeft) {
        setError(`Only ${slotsLeft} slot${slotsLeft === 1 ? '' : 's'} remaining.`);
        return prev;
      }
      return [...prev, staffId];
    });
  };

  const selectAll = () => {
    const ids = available.slice(0, slotsLeft).map(s => s.staffId);
    setSelected(ids);
    if (available.length > slotsLeft) {
      setError(`Only ${slotsLeft} slot${slotsLeft === 1 ? '' : 's'} available — selected first ${slotsLeft}.`);
    }
  };

  const clearAll = () => { setSelected([]); setError(''); };

  const handleConfirm = () => {
    if (selected.length === 0) {
      setError('Please select at least one staff member to enroll.');
      return;
    }
    const staffList = selected.map(id => {
      const s = ALL_STAFF.find(x => x.staffId === id)!;
      return { staffId: s.staffId, name: s.name, dept: s.dept };
    });
    onEnroll(staffList);
  };

  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-[560px] max-h-[88vh] 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">Enroll Staff</h2>
            <p className="text-xs text-gray-500 mt-0.5 truncate max-w-[380px]">{program.title}</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="px-6 pt-4 pb-2 flex-1 overflow-hidden flex flex-col">
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-3">
              <span className="text-xs text-gray-500">
                Capacity: <span className="font-semibold text-gray-700">{program.enrolled}/{program.capacity}</span>
              </span>
              {isFull
                ? <span className="text-xs bg-red-100 text-red-600 px-2 py-1 rounded-full font-medium">Training Full</span>
                : <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full font-medium">{slotsLeft} slot{slotsLeft === 1 ? '' : 's'} available</span>
              }
            </div>
            {selected.length > 0 && (
              <span className="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded-full font-semibold">
                {selected.length} selected
              </span>
            )}
          </div>

          {isFull ? (
            <div className="bg-red-50 border border-red-200 rounded-xl p-6 text-center">
              <div className="w-10 h-10 flex items-center justify-center mx-auto mb-2">
                <i className="ri-error-warning-line text-red-500 text-2xl"></i>
              </div>
              <p className="text-sm font-semibold text-red-700">Training is at full capacity</p>
              <p className="text-xs text-red-500 mt-1">No more slots available for enrollment.</p>
            </div>
          ) : (
            <>
              <div className="relative mb-2">
                <input
                  type="text"
                  placeholder="Search staff by name, department or role..."
                  value={search}
                  onChange={e => { setSearch(e.target.value); }}
                  className="w-full border border-gray-200 rounded-lg px-4 py-2 text-sm outline-none focus:ring-2 focus:ring-purple-300 pr-8"
                />
                <div className="w-4 h-4 flex items-center justify-center absolute right-3 top-1/2 -translate-y-1/2">
                  <i className="ri-search-line text-gray-400 text-sm"></i>
                </div>
              </div>

              <div className="flex items-center justify-between mb-2">
                <p className="text-xs text-gray-400">{available.length} staff available</p>
                <div className="flex gap-2">
                  {available.length > 0 && selected.length < available.length && (
                    <button onClick={selectAll} className="text-xs text-purple-600 hover:underline cursor-pointer whitespace-nowrap">Select All</button>
                  )}
                  {selected.length > 0 && (
                    <button onClick={clearAll} className="text-xs text-gray-400 hover:underline cursor-pointer whitespace-nowrap">Clear</button>
                  )}
                </div>
              </div>

              {error && (
                <p className="text-xs text-red-500 mb-2 bg-red-50 px-3 py-1.5 rounded-lg">{error}</p>
              )}

              <div className="overflow-y-auto flex-1 space-y-1.5 pr-1">
                {available.length === 0 ? (
                  <p className="text-sm text-gray-400 text-center py-8">
                    {search ? 'No staff found matching your search' : 'All staff are already enrolled'}
                  </p>
                ) : (
                  available.map(s => {
                    const isSelected = selected.includes(s.staffId);
                    return (
                      <div
                        key={s.staffId}
                        onClick={() => toggle(s.staffId)}
                        className={`flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer transition-all border ${isSelected ? 'border-purple-400 bg-purple-50' : 'border-gray-100 hover:border-purple-200 hover:bg-gray-50'}`}
                      >
                        <div className={`w-5 h-5 rounded flex items-center justify-center flex-shrink-0 border-2 transition-all ${isSelected ? 'bg-purple-700 border-purple-700' : 'border-gray-300'}`}>
                          {isSelected && <i className="ri-check-line text-white text-xs"></i>}
                        </div>
                        <div className={`w-9 h-9 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${isSelected ? 'bg-purple-700 text-white' : 'bg-purple-100 text-purple-700'}`}>
                          {s.name.split(' ').map(n => n[0]).join('').slice(0, 2)}
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-sm font-medium text-gray-800">{s.name}</p>
                          <p className="text-xs text-gray-500">{s.dept} · {s.role}</p>
                        </div>
                        <span className="text-xs text-gray-400 flex-shrink-0">{s.staffId}</span>
                      </div>
                    );
                  })
                )}
              </div>
            </>
          )}
        </div>

        <div className="px-6 py-4 border-t border-gray-100 flex gap-3">
          <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>
          {!isFull && (
            <button
              onClick={handleConfirm}
              disabled={selected.length === 0}
              className={`flex-1 py-2.5 rounded-lg text-sm font-medium whitespace-nowrap transition-all ${selected.length > 0 ? 'text-white hover:opacity-90 cursor-pointer' : 'bg-gray-200 text-gray-400 cursor-not-allowed'}`}
              style={selected.length > 0 ? { background: '#b22698' } : {}}
            >
              {selected.length > 1 ? `Enroll ${selected.length} Staff` : 'Confirm Enrollment'}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}