import { useState } from 'react';

interface TimeSlot {
  time: string;
  available: boolean;
}

export default function AvailabilityManager() {
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
  const [selectedCalendar, setSelectedCalendar] = useState('main');

  const timeSlots: TimeSlot[] = [
    { time: '09:00', available: true },
    { time: '10:00', available: false },
    { time: '11:00', available: true },
    { time: '13:00', available: true },
    { time: '14:00', available: true },
    { time: '15:00', available: false },
    { time: '16:00', available: true },
  ];

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 p-6">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-3xl font-bold mb-8 text-blue-400">Availability Manager</h1>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">Select Date</label>
            <input
              type="date"
              value={selectedDate}
              onChange={(e) => setSelectedDate(e.target.value)}
              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">Select Calendar</label>
            <select
              value={selectedCalendar}
              onChange={(e) => setSelectedCalendar(e.target.value)}
              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="main">Main Calendar</option>
              <option value="secondary">Secondary Calendar</option>
            </select>
          </div>
        </div>

        <div className="bg-gray-800 rounded-lg p-6">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-xl font-semibold">Time Slots</h2>
            <button className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg text-sm font-medium">
              + Block Time
            </button>
          </div>
          
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
            {timeSlots.map((slot) => (
              <button
                key={slot.time}
                className={`p-4 rounded-lg font-medium transition ${
                  slot.available
                    ? 'bg-green-900 hover:bg-green-800 text-green-200'
                    : 'bg-red-900 hover:bg-red-800 text-red-200'
                }`}
              >
                {slot.time}
              </button>
            ))}
          </div>
        </div>

        <div className="mt-6 bg-gray-800 rounded-lg p-6">
          <h2 className="text-xl font-semibold mb-4">Blocked Times</h2>
          <div className="space-y-3">
            <div className="bg-gray-700 rounded-lg p-4 flex justify-between items-center">
              <div>
                <p className="font-medium">Lunch Break</p>
                <p className="text-sm text-gray-400">12:00 PM - 1:00 PM</p>
              </div>
              <button className="text-red-400 hover:text-red-300">Remove</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
