import { useState, useEffect } from 'react';
import './styles.css';

interface Reservation {
  id: string;
  time: string;
  name: string;
  partySize: number;
  status: 'confirmed' | 'pending' | 'seated' | 'completed';
  table?: string;
  phone: string;
}

export default function ReservationCalendar() {
  const [date, setDate] = useState(new Date().toISOString().split('T')[0]);
  const [view, setView] = useState<'day' | 'week'>('day');
  const [reservations, setReservations] = useState<Reservation[]>([]);

  useEffect(() => {
    // Mock data
    setReservations([
      { id: '1', time: '11:00', name: 'Sarah Johnson', partySize: 4, status: 'completed', table: 'Table 5', phone: '555-0101' },
      { id: '2', time: '11:30', name: 'Mike Chen', partySize: 2, status: 'completed', table: 'Table 2', phone: '555-0102' },
      { id: '3', time: '12:00', name: 'Emma Davis', partySize: 6, status: 'seated', table: 'Table 8', phone: '555-0103' },
      { id: '4', time: '12:30', name: 'John Smith', partySize: 3, status: 'seated', table: 'Table 4', phone: '555-0104' },
      { id: '5', time: '13:00', name: 'Lisa Park', partySize: 2, status: 'confirmed', phone: '555-0105' },
      { id: '6', time: '13:30', name: 'David Wilson', partySize: 5, status: 'confirmed', phone: '555-0106' },
      { id: '7', time: '14:00', name: 'Amy Chen', partySize: 4, status: 'pending', phone: '555-0107' },
      { id: '8', time: '18:00', name: 'Robert Taylor', partySize: 8, status: 'confirmed', phone: '555-0108' },
      { id: '9', time: '18:30', name: 'Jessica Lee', partySize: 2, status: 'confirmed', phone: '555-0109' },
      { id: '10', time: '19:00', name: 'Michael Brown', partySize: 6, status: 'confirmed', phone: '555-0110' },
      { id: '11', time: '19:30', name: 'Emily White', partySize: 4, status: 'confirmed', phone: '555-0111' },
      { id: '12', time: '20:00', name: 'Tom Anderson', partySize: 2, status: 'pending', phone: '555-0112' },
    ]);
  }, []);

  const timeSlots = [
    '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30',
    '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30',
    '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00'
  ];

  const getStatusColor = (status: string) => {
    const colors = {
      pending: '#fbbf24',
      confirmed: '#3b82f6',
      seated: '#10b981',
      completed: '#6b7280',
    };
    return colors[status as keyof typeof colors] || '#6b7280';
  };

  const stats = {
    total: reservations.length,
    pending: reservations.filter(r => r.status === 'pending').length,
    confirmed: reservations.filter(r => r.status === 'confirmed').length,
    seated: reservations.filter(r => r.status === 'seated').length,
  };

  return (
    <div className="app">
      <header className="app-header">
        <h1>📅 Reservation Calendar</h1>
        <p>Manage reservations by day or week</p>
      </header>

      <div className="controls">
        <input
          type="date"
          className="date-input"
          value={date}
          onChange={(e) => setDate(e.target.value)}
        />
        <div className="view-toggle">
          <button
            className={`toggle-btn ${view === 'day' ? 'active' : ''}`}
            onClick={() => setView('day')}
          >
            Day View
          </button>
          <button
            className={`toggle-btn ${view === 'week' ? 'active' : ''}`}
            onClick={() => setView('week')}
          >
            Week View
          </button>
        </div>
        <button className="btn-primary">+ New Reservation</button>
      </div>

      <div className="stats-bar">
        <div className="stat-card">
          <span className="stat-label">Total Today</span>
          <span className="stat-value">{stats.total}</span>
        </div>
        <div className="stat-card pending">
          <span className="stat-label">Pending</span>
          <span className="stat-value">{stats.pending}</span>
        </div>
        <div className="stat-card confirmed">
          <span className="stat-label">Confirmed</span>
          <span className="stat-value">{stats.confirmed}</span>
        </div>
        <div className="stat-card seated">
          <span className="stat-label">Seated</span>
          <span className="stat-value">{stats.seated}</span>
        </div>
      </div>

      <div className="calendar-container">
        <div className="time-column">
          {timeSlots.map((time) => (
            <div key={time} className="time-slot">
              {time}
            </div>
          ))}
        </div>
        <div className="reservations-column">
          {timeSlots.map((time) => {
            const slotReservations = reservations.filter(r => r.time === time);
            return (
              <div key={time} className="reservation-slot">
                {slotReservations.map((res) => (
                  <div
                    key={res.id}
                    className="reservation-card"
                    style={{ borderLeftColor: getStatusColor(res.status) }}
                  >
                    <div className="res-header">
                      <span className="res-name">{res.name}</span>
                      <span className="res-party">👥 {res.partySize}</span>
                    </div>
                    <div className="res-details">
                      <span
                        className="res-status"
                        style={{ backgroundColor: getStatusColor(res.status) }}
                      >
                        {res.status}
                      </span>
                      {res.table && <span className="res-table">🪑 {res.table}</span>}
                    </div>
                  </div>
                ))}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
