import { useState } from 'react';

interface DaySchedule {
  date: string;
  appointments: number;
  revenue: string;
}

export default function ScheduleOverview() {
  const [currentWeek, setCurrentWeek] = useState('2024-W03');

  const weekSchedule: DaySchedule[] = [
    { date: 'Mon, Jan 15', appointments: 8, revenue: '$650' },
    { date: 'Tue, Jan 16', appointments: 12, revenue: '$980' },
    { date: 'Wed, Jan 17', appointments: 6, revenue: '$450' },
    { date: 'Thu, Jan 18', appointments: 10, revenue: '$825' },
    { date: 'Fri, Jan 19', appointments: 7, revenue: '$575' },
    { date: 'Sat, Jan 20', appointments: 4, revenue: '$320' },
    { date: 'Sun, Jan 21', appointments: 0, revenue: '$0' },
  ];

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-3xl font-bold text-blue-400">Schedule Overview</h1>
          <input
            type="week"
            value={currentWeek}
            onChange={(e) => setCurrentWeek(e.target.value)}
            className="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-gray-100"
          />
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <div className="bg-gray-800 rounded-lg p-6">
            <p className="text-sm text-gray-400 mb-2">Total Appointments</p>
            <p className="text-3xl font-bold text-blue-400">47</p>
          </div>
          <div className="bg-gray-800 rounded-lg p-6">
            <p className="text-sm text-gray-400 mb-2">Weekly Revenue</p>
            <p className="text-3xl font-bold text-green-400">$3,800</p>
          </div>
          <div className="bg-gray-800 rounded-lg p-6">
            <p className="text-sm text-gray-400 mb-2">Busiest Day</p>
            <p className="text-3xl font-bold text-purple-400">Tuesday</p>
          </div>
          <div className="bg-gray-800 rounded-lg p-6">
            <p className="text-sm text-gray-400 mb-2">Open Slots</p>
            <p className="text-3xl font-bold text-yellow-400">23</p>
          </div>
        </div>

        <div className="bg-gray-800 rounded-lg overflow-hidden">
          <table className="w-full">
            <thead className="bg-gray-700">
              <tr>
                <th className="px-6 py-4 text-left text-sm font-medium text-gray-300">Day</th>
                <th className="px-6 py-4 text-left text-sm font-medium text-gray-300">Appointments</th>
                <th className="px-6 py-4 text-left text-sm font-medium text-gray-300">Revenue</th>
                <th className="px-6 py-4 text-left text-sm font-medium text-gray-300">Status</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-700">
              {weekSchedule.map((day) => (
                <tr key={day.date} className="hover:bg-gray-750">
                  <td className="px-6 py-4 font-medium">{day.date}</td>
                  <td className="px-6 py-4">{day.appointments}</td>
                  <td className="px-6 py-4 text-green-400">{day.revenue}</td>
                  <td className="px-6 py-4">
                    <span className={`px-3 py-1 rounded-full text-xs ${
                      day.appointments > 10 ? 'bg-red-900 text-red-200' :
                      day.appointments > 5 ? 'bg-yellow-900 text-yellow-200' :
                      day.appointments > 0 ? 'bg-green-900 text-green-200' :
                      'bg-gray-700 text-gray-400'
                    }`}>
                      {day.appointments > 10 ? 'Fully Booked' :
                       day.appointments > 5 ? 'Busy' :
                       day.appointments > 0 ? 'Available' :
                       'Closed'}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}
