import React, { useState } from 'react';

const EventScheduleGenerator = () => {
  const supervisors = ['Белер Гаел', 'Георги Русков', 'Добромир Попов'];
  const participants = [
    'Белер Гаел', 'Георги Русков', 'Добромир Попов', 'Джуанна Рускова',
    'Краси Трендафилова', 'Анджелика Трендафилова', 'Роксана Мирзоева',
    'Абигейл Мустафова', 'Цветелина Нихтянова', 'Клеманс Белер',
    'Златка Рускова', 'Сара Ръслер', 'Таня Иванова', 'Естера Биела', 'Радина Ейер'
  ];

  const timeSlots = [
    '08:00-10:40', '10:40-12:15', '12:15-14:50', '14:50-16:30', '16:30-19:00'
  ];

  const days = ['Петък', 'Събота', 'Неделя'];

  // availabilities: 0 = not set, 1 = available (green), 2 = unavailable (red)
  const [availabilities, setAvailabilities] = useState(() => {
    const initial = {};
    participants.forEach(participant => {
      initial[participant] = {};
      days.forEach(day => {
        initial[participant][day] = {};
        timeSlots.forEach(slot => {
          initial[participant][day][slot] = 0;
        });
      });
    });
    return initial;
  });

  const [peoplePerShift, setPeoplePerShift] = useState(1);
  const [scheduleOptions, setScheduleOptions] = useState([]);

  const cycleAvailability = (participant, day, slot) => {
    setAvailabilities(prev => ({
      ...prev,
      [participant]: {
        ...prev[participant],
        [day]: {
          ...prev[participant][day],
          [slot]: (prev[participant][day][slot] + 1) % 3
        }
      }
    }));
  };

  const setAllAvailable = () => {
    const newAvailabilities = {};
    participants.forEach(participant => {
      newAvailabilities[participant] = {};
      days.forEach(day => {
        newAvailabilities[participant][day] = {};
        timeSlots.forEach(slot => {
          newAvailabilities[participant][day][slot] = 1;
        });
      });
    });
    setAvailabilities(newAvailabilities);
  };

  const setAllUnavailable = () => {
    const newAvailabilities = {};
    participants.forEach(participant => {
      newAvailabilities[participant] = {};
      days.forEach(day => {
        newAvailabilities[participant][day] = {};
        timeSlots.forEach(slot => {
          newAvailabilities[participant][day][slot] = 2;
        });
      });
    });
    setAvailabilities(newAvailabilities);
  };

  const clearAll = () => {
    const newAvailabilities = {};
    participants.forEach(participant => {
      newAvailabilities[participant] = {};
      days.forEach(day => {
        newAvailabilities[participant][day] = {};
        timeSlots.forEach(slot => {
          newAvailabilities[participant][day][slot] = 0;
        });
      });
    });
    setAvailabilities(newAvailabilities);
  };

  const setPersonAllAvailable = (participant) => {
    setAvailabilities(prev => ({
      ...prev,
      [participant]: {
        ...prev[participant],
        ...days.reduce((dayAcc, day) => ({
          ...dayAcc,
          [day]: {
            ...prev[participant][day],
            ...timeSlots.reduce((slotAcc, slot) => ({
              ...slotAcc,
              [slot]: 1
            }), {})
          }
        }), {})
      }
    }));
  };

  const setPersonAllUnavailable = (participant) => {
    setAvailabilities(prev => ({
      ...prev,
      [participant]: {
        ...prev[participant],
        ...days.reduce((dayAcc, day) => ({
          ...dayAcc,
          [day]: {
            ...prev[participant][day],
            ...timeSlots.reduce((slotAcc, slot) => ({
              ...slotAcc,
              [slot]: 2
            }), {})
          }
        }), {})
      }
    }));
  };

  const setDayAllAvailable = (day) => {
    setAvailabilities(prev => {
      const newAvailabilities = { ...prev };
      participants.forEach(participant => {
        timeSlots.forEach(slot => {
          newAvailabilities[participant][day][slot] = 1;
        });
      });
      return newAvailabilities;
    });
  };

  const getCellColor = (availability) => {
    switch(availability) {
      case 1: return 'bg-green-500 hover:bg-green-600';
      case 2: return 'bg-red-500 hover:bg-red-600';
      default: return 'bg-gray-200 hover:bg-gray-300';
    }
  };

  const getCellText = (availability) => {
    switch(availability) {
      case 1: return '✓';
      case 2: return '✗';
      default: return '';
    }
  };

  const generateSchedules = () => {
    const options = [];
    
    for (let optionNum = 0; optionNum < 3; optionNum++) {
      const schedule = {};
      days.forEach(day => {
        schedule[day] = {};
        timeSlots.forEach(slot => {
          schedule[day][slot] = [];
        });
      });

      const strategies = [
        'balanced',
        'supervisor_priority',
        'random'
      ];
      
      const strategy = strategies[optionNum];
      const assignmentCount = {};
      participants.forEach(p => assignmentCount[p] = 0);

      // Create all possible assignments
      const allSlots = [];
      days.forEach(day => {
        timeSlots.forEach(slot => {
          allSlots.push({ day, slot });
        });
      });

      if (strategy === 'supervisor_priority') {
        // First ensure each slot has at least one supervisor if possible
        allSlots.forEach(({ day, slot }) => {
          const availableSupervisors = supervisors.filter(sup => 
            availabilities[sup]?.[day]?.[slot] === 1
          );
          
          if (availableSupervisors.length > 0 && schedule[day][slot].length < peoplePerShift) {
            // Choose supervisor with least assignments
            const chosenSupervisor = availableSupervisors.reduce((min, sup) => 
              assignmentCount[sup] < assignmentCount[min] ? sup : min
            );
            schedule[day][slot].push(chosenSupervisor);
            assignmentCount[chosenSupervisor]++;
          }
        });
      }

      // Fill remaining slots
      if (strategy === 'balanced') {
        // Sort slots by current assignment count, fill least filled first
        allSlots.sort((a, b) => schedule[a.day][a.slot].length - schedule[b.day][b.slot].length);
        
        allSlots.forEach(({ day, slot }) => {
          while (schedule[day][slot].length < peoplePerShift) {
            const availableParticipants = participants.filter(p => 
              availabilities[p]?.[day]?.[slot] === 1 && 
              !schedule[day][slot].includes(p)
            );
            
            if (availableParticipants.length === 0) break;
            
            // Sort by assignment count (least assigned first)
            availableParticipants.sort((a, b) => assignmentCount[a] - assignmentCount[b]);
            
            const chosen = availableParticipants[0];
            schedule[day][slot].push(chosen);
            assignmentCount[chosen]++;
          }
        });
      } else if (strategy === 'supervisor_priority') {
        // Continue filling with other participants
        allSlots.forEach(({ day, slot }) => {
          while (schedule[day][slot].length < peoplePerShift) {
            const availableParticipants = participants.filter(p => 
              availabilities[p]?.[day]?.[slot] === 1 && 
              !schedule[day][slot].includes(p)
            );
            
            if (availableParticipants.length === 0) break;
            
            // Prioritize supervisors, then by assignment count
            availableParticipants.sort((a, b) => {
              const aIsSupervisor = supervisors.includes(a) ? 0 : 1;
              const bIsSupervisor = supervisors.includes(b) ? 0 : 1;
              if (aIsSupervisor !== bIsSupervisor) return aIsSupervisor - bIsSupervisor;
              return assignmentCount[a] - assignmentCount[b];
            });
            
            const chosen = availableParticipants[0];
            schedule[day][slot].push(chosen);
            assignmentCount[chosen]++;
          }
        });
      } else {
        // Random strategy
        allSlots.sort(() => Math.random() - 0.5);
        
        allSlots.forEach(({ day, slot }) => {
          while (schedule[day][slot].length < peoplePerShift) {
            const availableParticipants = participants.filter(p => 
              availabilities[p]?.[day]?.[slot] === 1 && 
              !schedule[day][slot].includes(p)
            );
            
            if (availableParticipants.length === 0) break;
            
            const chosen = availableParticipants[Math.floor(Math.random() * availableParticipants.length)];
            schedule[day][slot].push(chosen);
            assignmentCount[chosen]++;
          }
        });
      }

      options.push({
        id: optionNum + 1,
        strategy: strategy,
        schedule: schedule,
        stats: assignmentCount
      });
    }
    
    setScheduleOptions(options);
  };

  const getStrategyName = (strategy) => {
    switch(strategy) {
      case 'balanced': return 'Балансиран';
      case 'supervisor_priority': return 'Приоритет супервайзори';
      case 'random': return 'Случаен';
      default: return strategy;
    }
  };

  const ScheduleDisplay = ({ option }) => (
    <div className="border rounded-lg p-4 mb-4 bg-gray-50">
      <h3 className="font-bold text-lg mb-2 text-center">
        Вариант {option.id} ({getStrategyName(option.strategy)})
      </h3>
      
      <div className="overflow-x-auto mb-4">
        <table className="w-full border-collapse border border-gray-300 text-sm">
          <thead>
            <tr className="bg-gray-200">
              <th className="border border-gray-300 p-2">Време</th>
              {days.map(day => (
                <th key={day} className="border border-gray-300 p-2">{day}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {timeSlots.map(slot => (
              <tr key={slot}>
                <td className="border border-gray-300 p-2 font-medium bg-gray-100">{slot}</td>
                {days.map(day => (
                  <td key={`${day}-${slot}`} className="border border-gray-300 p-2 min-w-32">
                    {option.schedule[day][slot].map(person => (
                      <div 
                        key={person} 
                        className={`mb-1 p-1 rounded text-xs ${
                          supervisors.includes(person) 
                            ? 'bg-blue-200 font-bold border-2 border-blue-400' 
                            : 'bg-green-200 border border-green-400'
                        }`}
                      >
                        {person}
                      </div>
                    ))}
                    {option.schedule[day][slot].length === 0 && (
                      <div className="text-gray-400 text-xs italic">Няма назначени</div>
                    )}
                    <div className="text-xs text-gray-500 mt-1">
                      {option.schedule[day][slot].length}/{peoplePerShift}
                    </div>
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="text-xs text-gray-600">
        <strong>Статистика за назначения:</strong>
        <div className="grid grid-cols-3 gap-2 mt-2">
          {Object.entries(option.stats).map(([person, count]) => (
            <div key={person} className={`p-1 rounded ${supervisors.includes(person) ? 'bg-blue-100' : 'bg-gray-100'}`}>
              {person}: {count}
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  return (
    <div className="max-w-7xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-6 text-center">Генератор на График за Събитие</h1>
      
      {/* People per shift control */}
      <div className="mb-6 p-4 bg-purple-50 rounded-lg">
        <h3 className="font-semibold mb-3">Настройки на графика:</h3>
        <div className="flex items-center gap-4">
          <label className="font-medium">Брой хора на смяна:</label>
          <select 
            value={peoplePerShift} 
            onChange={(e) => setPeoplePerShift(parseInt(e.target.value))}
            className="border border-gray-300 rounded px-3 py-2 bg-white"
          >
            <option value={1}>1 човек</option>
            <option value={2}>2 души</option>
            <option value={3}>3 души</option>
          </select>
          <span className="text-sm text-gray-600">
            (По подразбиране: 1 човек на смяна)
          </span>
        </div>
      </div>

      <div className="mb-6">
        <h2 className="text-xl font-semibold mb-4">Наличности на участниците</h2>
        
        {/* Global Controls */}
        <div className="mb-4 p-4 bg-blue-50 rounded-lg">
          <h3 className="font-semibold mb-3">Бързи команди:</h3>
          <div className="flex flex-wrap gap-2 mb-3">
            <button
              onClick={setAllAvailable}
              className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded font-medium"
            >
              Всички наличи
            </button>
            <button
              onClick={setAllUnavailable}
              className="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded font-medium"
            >
              Всички неналични
            </button>
            <button
              onClick={clearAll}
              className="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded font-medium"
            >
              Изчисти всички
            </button>
          </div>
          
          <div className="mb-3">
            <h4 className="font-medium mb-2">Маркирай цял ден като наличен:</h4>
            <div className="flex gap-2">
              {days.map(day => (
                <button
                  key={day}
                  onClick={() => setDayAllAvailable(day)}
                  className="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm"
                >
                  {day}
                </button>
              ))}
            </div>
          </div>
        </div>

        <div className="mb-4 p-3 bg-yellow-50 rounded">
          <p className="text-sm text-gray-700 mb-2">
            <strong>Инструкции:</strong> Кликнете върху клетките, за да зададете наличност:
          </p>
          <div className="flex gap-4 text-sm">
            <span className="flex items-center gap-2">
              <div className="w-4 h-4 bg-gray-200 border"></div>
              Не е зададено
            </span>
            <span className="flex items-center gap-2">
              <div className="w-4 h-4 bg-green-500 border"></div>
              Наличен (зелено)
            </span>
            <span className="flex items-center gap-2">
              <div className="w-4 h-4 bg-red-500 border"></div>
              Неналичен (червено)
            </span>
          </div>
        </div>
        
        <div className="overflow-x-auto">
          <table className="w-full border-collapse border border-gray-300 text-xs">
            <thead>
              <tr className="bg-gray-200">
                <th className="border border-gray-300 p-2 min-w-32">Участник</th>
                {days.map(day => (
                  <th key={day} className="border border-gray-300 p-1" colSpan={timeSlots.length}>
                    {day}
                  </th>
                ))}
                <th className="border border-gray-300 p-2">Действия</th>
              </tr>
              <tr className="bg-gray-100">
                <th className="border border-gray-300 p-2"></th>
                {days.map(day => 
                  timeSlots.map(slot => (
                    <th key={`${day}-${slot}`} className="border border-gray-300 p-1 text-xs min-w-16">
                      {slot.split('-')[0]}
                    </th>
                  ))
                )}
                <th className="border border-gray-300 p-2"></th>
              </tr>
            </thead>
            <tbody>
              {participants.map(participant => (
                <tr key={participant}>
                  <td className={`border border-gray-300 p-2 ${supervisors.includes(participant) ? 'font-bold bg-blue-50' : ''}`}>
                    {participant}
                    {supervisors.includes(participant) && <div className="text-xs text-blue-600">(Супервайзор)</div>}
                  </td>
                  {days.map(day => 
                    timeSlots.map(slot => (
                      <td key={`${participant}-${day}-${slot}`} className="border border-gray-300 p-0">
                        <button
                          onClick={() => cycleAvailability(participant, day, slot)}
                          className={`w-full h-8 text-white font-bold ${getCellColor(availabilities[participant]?.[day]?.[slot])}`}
                          title={`${participant} - ${day} ${slot}`}
                        >
                          {getCellText(availabilities[participant]?.[day]?.[slot])}
                        </button>
                      </td>
                    ))
                  )}
                  <td className="border border-gray-300 p-1">
                    <div className="flex flex-col gap-1">
                      <button
                        onClick={() => setPersonAllAvailable(participant)}
                        className="bg-green-400 hover:bg-green-500 text-white text-xs px-2 py-1 rounded"
                        title={`Маркирай ${participant} като наличен за всички смени`}
                      >
                        ✓ Всички
                      </button>
                      <button
                        onClick={() => setPersonAllUnavailable(participant)}
                        className="bg-red-400 hover:bg-red-500 text-white text-xs px-2 py-1 rounded"
                        title={`Маркирай ${participant} като неналичен за всички смени`}
                      >
                        ✗ Всички
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="text-center mb-6">
        <button
          onClick={generateSchedules}
          className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-8 rounded-lg text-lg"
        >
          Генерирай 3 Варианта на График
        </button>
      </div>

      {scheduleOptions.length > 0 && (
        <div>
          <h2 className="text-xl font-semibold mb-4">Предложени Варианти</h2>
          <div className="mb-4 p-3 bg-yellow-50 rounded">
            <p className="text-sm text-gray-700">
              <strong>Легенда:</strong> Супервайзорите са маркирани в синьо с удебелен шрифт и рамка. 
              Останалите участници са в зелено. Показва се {peoplePerShift} {peoplePerShift === 1 ? 'човек' : 'души'} на смяна.
              Числото под всяка клетка показва колко души са назначени от максимума.
            </p>
          </div>
          {scheduleOptions.map(option => (
            <ScheduleDisplay key={option.id} option={option} />
          ))}
        </div>
      )}
    </div>
  );
};

export default EventScheduleGenerator;