import { useState } from 'react';
import { usePlanning } from '@/context/PlanningContext';
import { Plus, Edit2, Eye, EyeOff, Check, X } from 'lucide-react';

export default function ScheduleNavigation() {
  const { schedules, selectedSchedule, setSelectedSchedule, hiddenSchedules, toggleScheduleVisibility, addSchedule, updateSchedule } = usePlanning();
  const [editingId, setEditingId] = useState(null);
  const [editedName, setEditedName] = useState('');
  const [editedColor, setEditedColor] = useState('');
  const [isAddingNew, setIsAddingNew] = useState(false);
  const [newSchedule, setNewSchedule] = useState({ name: '', color: '#10b981' });

  const handleEdit = (schedule) => {
    setEditingId(schedule.id);
    setEditedName(schedule.name);
    setEditedColor(schedule.color);
  };

  const handleSave = () => {
    if (editingId) {
      updateSchedule(editingId, {
        ...schedules.find(s => s.id === editingId),
        name: editedName,
        color: editedColor
      });
      setEditingId(null);
    }
  };

  const handleAddNew = () => {
    if (newSchedule.name) {
      addSchedule({
        id: `schedule-${Date.now()}`,
        ...newSchedule
      });
      setIsAddingNew(false);
      setNewSchedule({ name: '', color: '#10b981' });
    }
  };

  return (
    <nav className="w-64 border-r p-4">
      <div className="flex items-center justify-between mb-4">
        <h2 className="font-semibold">Plannings</h2>
        <button
          onClick={() => setIsAddingNew(true)}
          className="p-1 hover:bg-gray-100 rounded"
        >
          <Plus className="w-4 h-4" />
        </button>
      </div>

      {isAddingNew && (
        <div className="mb-4 p-2 border rounded">
          <input
            type="text"
            value={newSchedule.name}
            onChange={(e) => setNewSchedule(prev => ({ ...prev, name: e.target.value }))}
            className="w-full p-1 mb-2 border rounded"
            placeholder="Nom du planning"
          />
          <div className="flex gap-2 items-center mb-2">
            <label className="text-sm">Couleur:</label>
            <input
              type="color"
              value={newSchedule.color}
              onChange={(e) => setNewSchedule(prev => ({ ...prev, color: e.target.value }))}
              className="w-8 h-8"
            />
          </div>
          <div className="flex justify-end gap-2">
            <button
              onClick={() => setIsAddingNew(false)}
              className="p-1 hover:bg-gray-100 rounded"
            >
              <X className="w-4 h-4" />
            </button>
            <button
              onClick={handleAddNew}
              className="p-1 hover:bg-gray-100 rounded"
            >
              <Check className="w-4 h-4" />
            </button>
          </div>
        </div>
      )}

      <ul className="space-y-2">
        {schedules.map(schedule => (
          <li
            key={schedule.id}
            className={`p-2 rounded ${
              selectedSchedule === schedule.id ? 'bg-gray-100' : 'hover:bg-gray-50'
            }`}
          >
            {editingId === schedule.id ? (
              <div className="space-y-2">
                <input
                  type="text"
                  value={editedName}
                  onChange={(e) => setEditedName(e.target.value)}
                  className="w-full p-1 border rounded"
                />
                <div className="flex gap-2 items-center">
                  <label className="text-sm">Couleur:</label>
                  <input
                    type="color"
                    value={editedColor}
                    onChange={(e) => setEditedColor(e.target.value)}
                    className="w-8 h-8"
                  />
                </div>
                <div className="flex justify-end gap-2">
                  <button
                    onClick={() => setEditingId(null)}
                    className="p-1 hover:bg-gray-100 rounded"
                  >
                    <X className="w-4 h-4" />
                  </button>
                  <button
                    onClick={handleSave}
                    className="p-1 hover:bg-gray-100 rounded"
                  >
                    <Check className="w-4 h-4" />
                  </button>
                </div>
              </div>
            ) : (
              <div className="flex items-center justify-between">
                <div
                  className="flex items-center gap-2 flex-1 cursor-pointer"
                  onClick={() => setSelectedSchedule(schedule.id)}
                >
                  <div
                    className="w-3 h-3 rounded-full"
                    style={{ backgroundColor: schedule.color }}
                  />
                  <span className={hiddenSchedules.includes(schedule.id) ? 'text-gray-400' : ''}>
                    {schedule.name}
                  </span>
                </div>
                <div className="flex gap-1">
                  <button
                    onClick={(e) => {
                      e.stopPropagation(); // Empêcher la propagation du clic
                      toggleScheduleVisibility(schedule.id);
                    }}
                    className="p-1 hover:bg-gray-100 rounded"
                  >
                    {hiddenSchedules.includes(schedule.id) ? (
                      <EyeOff className="w-4 h-4" />
                    ) : (
                      <Eye className="w-4 h-4" />
                    )}
                  </button>
                  <button
                    onClick={() => handleEdit(schedule)}
                    className="p-1 hover:bg-gray-100 rounded"
                  >
                    <Edit2 className="w-4 h-4" />
                  </button>
                </div>
              </div>
            )}
          </li>
        ))}
      </ul>
    </nav>
  );
}