/**
 * Блок «Календарь занятий» — обёртка над LessonsCalendar.
 * Используется в Dashboard и других страницах.
 */

'use client';

import React from 'react';
import { format, startOfDay } from 'date-fns';
import { LessonsCalendar } from '@/components/dashboard/LessonsCalendar';
import { LoadingSpinner } from '@/components/common/LoadingSpinner';

export interface CalendarLesson {
  id: number | string;
  title?: string;
  start_time: string;
  end_time: string;
  status?: string;
  client?: number;
  client_name?: string;
  subject?: string;
}

export interface CalendarProps {
  /** Занятия для отображения в календаре */
  lessons: CalendarLesson[];
  /** Идёт загрузка занятий */
  lessonsLoading?: boolean;
  /** Выбранная дата (подсветка в календаре) */
  selectedDate: Date;
  /** Клик по ячейке дня или по слоту */
  onSelectSlot?: (date: Date) => void;
  /** Клик по событию (занятию) */
  onSelectEvent?: (lesson: { id: string }) => void;
  /** Смена видимого месяца (start/end месяца) */
  onMonthChange?: (start: Date, end: Date) => void;
}

export const Calendar: React.FC<CalendarProps> = ({
  lessons,
  lessonsLoading = false,
  selectedDate,
  onSelectSlot,
  onSelectEvent,
  onMonthChange,
}) => {
  const mappedLessons = React.useMemo(
    () =>
      lessons.map((lesson) => ({
        id: String(lesson.id),
        title: lesson.title || 'Занятие',
        start_time: lesson.start_time,
        end_time: lesson.end_time,
        status: (lesson.status || 'scheduled') as 'scheduled' | 'in_progress' | 'completed' | 'cancelled',
        client: lesson.client_name
          ? {
              id: String(lesson.client ?? ''),
              name: lesson.client_name,
              first_name: lesson.client_name.split(' ')[0] || lesson.client_name,
              last_name: lesson.client_name.split(' ').slice(1).join(' ') || '',
            }
          : undefined,
      })),
    [lessons]
  );

  return (
    <div
      className="ios-glass-panel"
      style={{
        borderRadius: '20px',
        padding: '24px',
        height: '100%',
        minHeight: 0,
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      {lessonsLoading ? (
        <LoadingSpinner size="medium" />
      ) : (
        <LessonsCalendar
          lessons={mappedLessons}
          selectedDate={selectedDate}
          onSelectSlot={(date) => {
            try {
              const d = startOfDay(date);
              if (!Number.isNaN(d.getTime())) onSelectSlot?.(d);
            } catch {
              /* игнор невалидной даты */
            }
          }}
          onSelectEvent={onSelectEvent}
          onMonthChange={onMonthChange}
        />
      )}
    </div>
  );
};