/**
 * Schedule Calendar App - Calendar view of events
 */

import React, { useState } from 'react';

export function ScheduleCalendar({ scheduleId }: { scheduleId?: number }) {
  const [currentMonth] = useState(new Date(2024, 0, 1)); // January 2024
  const [events] = useState([
    { id: 1, summary: 'Design Review', starts_at: '2024-01-15T14:00:00', ends_at: '2024-01-15T15:00:00' },
    { id: 2, summary: 'Sprint Planning', starts_at: '2024-01-22T10:00:00', ends_at: '2024-01-22T11:30:00' },
    { id: 3, summary: 'Client Presentation', starts_at: '2024-01-25T13:00:00', ends_at: '2024-01-25T14:00:00' },
  ]);

  const daysInMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0).getDate();
  const firstDayOfWeek = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1).getDay();
  
  const monthName = currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>{monthName}</h1>
      
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '8px', marginBottom: '20px' }}>
        {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
          <div key={day} style={{ textAlign: 'center', fontWeight: 'bold', padding: '8px', color: '#666' }}>
            {day}
          </div>
        ))}
        
        {Array.from({ length: firstDayOfWeek }).map((_, i) => (
          <div key={`empty-${i}`} style={{ padding: '8px' }} />
        ))}
        
        {Array.from({ length: daysInMonth }).map((_, i) => {
          const day = i + 1;
          const dateStr = `2024-01-${String(day).padStart(2, '0')}`;
          const dayEvents = events.filter(e => e.starts_at.startsWith(dateStr));
          
          return (
            <div key={day} style={{ 
              border: '1px solid #ddd', 
              borderRadius: '4px', 
              padding: '8px',
              minHeight: '80px',
              background: dayEvents.length > 0 ? '#f0f8ff' : 'white'
            }}>
              <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>{day}</div>
              {dayEvents.map(event => (
                <div key={event.id} style={{ 
                  fontSize: '11px', 
                  padding: '2px 4px', 
                  background: '#1d8cf8', 
                  color: 'white', 
                  borderRadius: '2px',
                  marginBottom: '2px',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                }}>
                  {event.summary}
                </div>
              ))}
            </div>
          );
        })}
      </div>

      <div style={{ marginTop: '30px' }}>
        <h2 style={{ fontSize: '18px', marginBottom: '15px' }}>Upcoming Events</h2>
        {events.map(event => (
          <div key={event.id} style={{ padding: '12px', marginBottom: '10px', border: '1px solid #ddd', borderRadius: '6px', background: 'white' }}>
            <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>{event.summary}</div>
            <div style={{ fontSize: '12px', color: '#666' }}>
              {new Date(event.starts_at).toLocaleString()}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
