import { Calendar, Badge } from 'antd';
import type { Dayjs } from 'dayjs';

export interface ScheduleItem {
  id: string;
  doctor_name?: string;
  start_time: string;
  end_time: string;
  current_appointments: number;
  max_appointments: number;
  status: string;
}

interface Props {
  schedules: Record<string, ScheduleItem[]>;
  onPanelChange?: (date: Dayjs) => void;
}

export function CalendarView({ schedules, onPanelChange }: Props) {
  const cellRender = (date: Dayjs) => {
    const key = date.format('YYYY-MM-DD');
    const items = schedules[key];
    if (!items || items.length === 0) return null;

    return (
      <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
        {items.slice(0, 3).map((s) => (
          <li key={s.id}>
            <Badge
              status={s.current_appointments >= s.max_appointments ? 'error' : 'processing'}
              text={`${s.start_time}-${s.end_time}`}
            />
          </li>
        ))}
        {items.length > 3 && (
          <li style={{ color: '#999', fontSize: 12 }}>+{items.length - 3} 更多</li>
        )}
      </ul>
    );
  };

  return (
    <Calendar
      cellRender={cellRender}
      onPanelChange={(date) => onPanelChange?.(date)}
    />
  );
}
