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

interface Shift {
  staffId: string;
  staffName: string;
  day: string;
  startTime: string;
  endTime: string;
  role: string;
}

export default function StaffSchedule() {
  const [shifts, setShifts] = useState<Shift[]>([]);
  const [weekStart, setWeekStart] = useState(new Date().toISOString().split('T')[0]);

  useEffect(() => {
    // Mock data
    setShifts([
      { staffId: '1', staffName: 'Mike Chen', day: 'Monday', startTime: '09:00', endTime: '17:00', role: 'Server' },
      { staffId: '1', staffName: 'Mike Chen', day: 'Tuesday', startTime: '09:00', endTime: '17:00', role: 'Server' },
      { staffId: '1', staffName: 'Mike Chen', day: 'Thursday', startTime: '09:00', endTime: '17:00', role: 'Server' },
      { staffId: '2', staffName: 'Lisa Park', day: 'Monday', startTime: '17:00', endTime: '23:00', role: 'Server' },
      { staffId: '2', staffName: 'Lisa Park', day: 'Wednesday', startTime: '17:00', endTime: '23:00', role: 'Server' },
      { staffId: '2', staffName: 'Lisa Park', day: 'Friday', startTime: '17:00', endTime: '23:00', role: 'Server' },
      { staffId: '2', staffName: 'Lisa Park', day: 'Saturday', startTime: '17:00', endTime: '23:00', role: 'Server' },
      { staffId: '3', staffName: 'Tom Wilson', day: 'Tuesday', startTime: '18:00', endTime: '02:00', role: 'Bartender' },
      { staffId: '3', staffName: 'Tom Wilson', day: 'Friday', startTime: '18:00', endTime: '02:00', role: 'Bartender' },
      { staffId: '3', staffName: 'Tom Wilson', day: 'Saturday', startTime: '18:00', endTime: '02:00', role: 'Bartender' },
      { staffId: '4', staffName: 'Emma Davis', day: 'Monday', startTime: '06:00', endTime: '14:00', role: 'Chef' },
      { staffId: '4', staffName: 'Emma Davis', day: 'Tuesday', startTime: '06:00', endTime: '14:00', role: 'Chef' },
      { staffId: '4', staffName: 'Emma Davis', day: 'Wednesday', startTime: '06:00', endTime: '14:00', role: 'Chef' },
      { staffId: '4', staffName: 'Emma Davis', day: 'Thursday', startTime: '06:00', endTime: '14:00', role: 'Chef' },
      { staffId: '4', staffName: 'Emma Davis', day: 'Friday', startTime: '06:00', endTime: '14:00', role: 'Chef' },
      { staffId: '5', staffName: 'David Kim', day: 'Wednesday', startTime: '11:00', endTime: '19:00', role: 'Host' },
      { staffId: '5', staffName: 'David Kim', day: 'Thursday', startTime: '11:00', endTime: '19:00', role: 'Host' },
      { staffId: '5', staffName: 'David Kim', day: 'Friday', startTime: '11:00', endTime: '19:00', role: 'Host' },
      { staffId: '5', staffName: 'David Kim', day: 'Saturday', startTime: '11:00', endTime: '19:00', role: 'Host' },
      { staffId: '5', staffName: 'David Kim', day: 'Sunday', startTime: '11:00', endTime: '19:00', role: 'Host' },
    ]);
  }, []);

  const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
  const staff = Array.from(new Set(shifts.map(s => s.staffName))).sort();

  const getRoleBadgeColor = (role: string) => {
    const colors: Record<string, string> = {
      Server: '#3b82f6',
      Bartender: '#8b5cf6',
      Chef: '#ef4444',
      Host: '#10b981',
      Busser: '#fbbf24',
    };
    return colors[role] || '#6b7280';
  };

  return (
    <div className="app">
      <header className="app-header">
        <h1>📋 Staff Schedule</h1>
        <p>Weekly schedule grid</p>
      </header>

      <div className="toolbar">
        <input
          type="date"
          className="date-input"
          value={weekStart}
          onChange={(e) => setWeekStart(e.target.value)}
        />
        <button className="btn-primary">+ Add Shift</button>
      </div>

      <div className="schedule-container">
        <table className="schedule-table">
          <thead>
            <tr>
              <th className="staff-column">Staff Member</th>
              {days.map((day) => (
                <th key={day}>{day}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {staff.map((staffName) => {
              const staffShifts = shifts.filter(s => s.staffName === staffName);
              const role = staffShifts[0]?.role || '';
              
              return (
                <tr key={staffName}>
                  <td className="staff-column">
                    <div className="staff-info">
                      <span className="staff-name">{staffName}</span>
                      <span
                        className="role-badge"
                        style={{ backgroundColor: getRoleBadgeColor(role) }}
                      >
                        {role}
                      </span>
                    </div>
                  </td>
                  {days.map((day) => {
                    const shift = staffShifts.find(s => s.day === day);
                    return (
                      <td key={day} className="shift-cell">
                        {shift ? (
                          <div className="shift-block">
                            <div className="shift-time">
                              {shift.startTime} - {shift.endTime}
                            </div>
                          </div>
                        ) : (
                          <div className="no-shift">—</div>
                        )}
                      </td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div className="summary">
        <h3>Weekly Summary</h3>
        <div className="summary-stats">
          <div className="summary-stat">
            <span className="stat-label">Total Shifts</span>
            <span className="stat-value">{shifts.length}</span>
          </div>
          <div className="summary-stat">
            <span className="stat-label">Staff Members</span>
            <span className="stat-value">{staff.length}</span>
          </div>
          <div className="summary-stat">
            <span className="stat-label">Avg Shifts/Person</span>
            <span className="stat-value">{(shifts.length / staff.length).toFixed(1)}</span>
          </div>
        </div>
      </div>
    </div>
  );
}
