/**
 * Блок «Список занятий на выбранный день» / «Форма создания/редактирования» с анимацией cube.
 * Используется в Dashboard и других страницах.
 */

'use client';

import React, { useState } from 'react';
import { format, startOfDay, addDays, subDays } from 'date-fns';
import { ru } from 'date-fns/locale';
import { LessonCard } from '@/components/dashboard/LessonCard';
import { StudentSelect } from '@/components/dashboard/StudentSelect';
import { SubjectSelect } from '@/components/dashboard/SubjectSelect';
import { LoadingSpinner } from '@/components/common/LoadingSpinner';
import { Switch } from '@/components/common/Switch';
import { DatePicker } from '@/components/common/DatePicker';
import { TimePicker } from '@/components/common/TimePicker';
import type { LessonPreview } from '@/api/dashboard';
import type { Student } from '@/api/students';
import type { Subject, MentorSubject } from '@/api/subjects';

export interface CheckLessonFormData {
  client: string;
  title: string;
  description: string;
  start_date: string;
  start_time: string;
  duration: number;
  price: number | undefined;
  is_recurring: boolean;
  /** Статус (для завершённых занятий — можно менять) */
  status?: 'scheduled' | 'in_progress' | 'completed' | 'cancelled';
}

export interface CheckLessonProps {
  /** Выбранная дата */
  selectedDate: Date;
  /** Дата для отображения в заголовке (например, displayDate) */
  displayDate: Date;
  /** Идёт загрузка занятий */
  lessonsLoading: boolean;
  /** Занятия на выбранный день */
  lessonsForSelectedDate: LessonPreview[];
  /** Открыта ли форма (создание/редактирование) — переворот cube */
  isFormVisible: boolean;
  /** Предыдущий день */
  onPrevDay: () => void;
  /** Следующий день */
  onNextDay: () => void;
  /** Добавить занятие (открыть форму создания) */
  onAddLesson: () => void;
  /** Клик по карточке занятия (открыть форму редактирования или просмотра) */
  onLessonClick: (lesson: { id: string }) => void;
  /** Ментор — может добавлять и редактировать; для остальных только просмотр */
  isMentor?: boolean;
  /** Кнопка «Добавить» и компоненты загружены */
  buttonComponentsLoaded?: boolean;

  // Форма
  formComponentsLoaded: boolean;
  lessonEditLoading: boolean;
  isEditingMode: boolean;
  formLoading: boolean;
  formError: string | null;
  formData: CheckLessonFormData;
  setFormData: React.Dispatch<React.SetStateAction<CheckLessonFormData>>;
  selectedSubjectId: number | null;
  selectedMentorSubjectId: number | null;
  onSubjectChange: (subjectId: number | null, mentorSubjectId: number | null) => void;
  students: Student[];
  subjects: Subject[];
  mentorSubjects: MentorSubject[];
  onSubmit: (e: React.FormEvent) => void;
  onCancel: () => void;
  /** Удалить занятие (только в режиме редактирования). deleteAllFuture — удалить всю цепочку постоянных. */
  onDelete?: (deleteAllFuture: boolean) => void;
  /** Редактируется завершённое занятие — можно менять только цену и статус */
  isCompletedLesson?: boolean;
}

export const CheckLesson: React.FC<CheckLessonProps> = ({
  selectedDate,
  displayDate,
  lessonsLoading,
  lessonsForSelectedDate,
  isFormVisible,
  onPrevDay,
  onNextDay,
  onAddLesson,
  onLessonClick,
  isMentor = false,
  buttonComponentsLoaded = false,
  formComponentsLoaded,
  lessonEditLoading,
  isEditingMode,
  formLoading,
  formError,
  formData,
  setFormData,
  selectedSubjectId,
  selectedMentorSubjectId,
  onSubjectChange,
  students,
  subjects,
  mentorSubjects,
  onSubmit,
  onCancel,
  onDelete,
  isCompletedLesson = false,
}) => {
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const navDisabled = lessonsLoading || isFormVisible;
  const formDisabled = formLoading || lessonEditLoading;

  const headerDateLabel = React.useMemo(() => {
    const now = new Date();
    const sameYear = displayDate?.getFullYear?.() === now.getFullYear();
    const fmt = sameYear ? 'd MMMM' : 'd MMMM yyyy';
    try {
      return format(displayDate, fmt, { locale: ru });
    } catch {
      return '';
    }
  }, [displayDate]);

  const handleDeleteClick = () => {
    if (!onDelete) return;
    if (formData.is_recurring) {
      setShowDeleteConfirm(true);
    } else {
      if (typeof window !== 'undefined' && window.confirm('Удалить занятие?')) {
        onDelete(false);
      }
    }
  };

  const handleDeleteConfirm = (deleteAllFuture: boolean) => {
    onDelete?.(deleteAllFuture);
    setShowDeleteConfirm(false);
  };

  return (
    <div
      className="checklesson-root"
      style={{
        position: 'relative',
        width: '100%',
        height: '100%',
        minHeight: '548px',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <div style={{ position: 'relative', width: '100%', height: '100%' }}>
        {/* Лицевая сторона: Список занятий */}
        <div
          className="ios-glass-panel"
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            opacity: isFormVisible ? 0 : 1,
            visibility: isFormVisible ? 'hidden' : 'visible',
            transition: 'opacity 0.2s ease',
            borderRadius: '20px',
            padding: '24px',
            overflowY: 'hidden',
            display: 'flex',
            flexDirection: 'column',
          }}
        >
          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginBottom: '20px' }}>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: '40px 1fr 40px',
                alignItems: 'center',
                columnGap: 12,
              }}
            >
              <button
                type="button"
                onClick={onPrevDay}
                disabled={navDisabled}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: 40,
                  height: 40,
                  padding: 0,
                  background: 'var(--md-sys-color-surface-variant)',
                  color: 'var(--md-sys-color-on-surface-variant)',
                  border: 'none',
                  borderRadius: 20,
                  cursor: navDisabled ? 'not-allowed' : 'pointer',
                  opacity: navDisabled ? 0.6 : 1,
                  transition: 'all 0.2s ease',
                }}
                onMouseEnter={(e) => {
                  if (!navDisabled) {
                    e.currentTarget.style.opacity = '0.8';
                    e.currentTarget.style.transform = 'scale(0.95)';
                  }
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.opacity = navDisabled ? '0.6' : '1';
                  e.currentTarget.style.transform = 'scale(1)';
                }}
                title="Предыдущий день"
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <polyline points="15 18 9 12 15 6" />
                </svg>
              </button>

              <h3
                style={{
                  fontSize: '20px',
                  fontWeight: 500,
                  color: 'var(--md-sys-color-on-surface)',
                  margin: 0,
                  textAlign: 'center',
                }}
              >
                {headerDateLabel}
              </h3>

              <button
                type="button"
                onClick={onNextDay}
                disabled={navDisabled}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: 40,
                  height: 40,
                  padding: 0,
                  background: 'var(--md-sys-color-surface-variant)',
                  color: 'var(--md-sys-color-on-surface-variant)',
                  border: 'none',
                  borderRadius: 20,
                  cursor: navDisabled ? 'not-allowed' : 'pointer',
                  opacity: navDisabled ? 0.6 : 1,
                  transition: 'all 0.2s ease',
                }}
                onMouseEnter={(e) => {
                  if (!navDisabled) {
                    e.currentTarget.style.opacity = '0.8';
                    e.currentTarget.style.transform = 'scale(0.95)';
                  }
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.opacity = navDisabled ? '0.6' : '1';
                  e.currentTarget.style.transform = 'scale(1)';
                }}
                title="Следующий день"
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <polyline points="9 18 15 12 9 6" />
                </svg>
              </button>
            </div>
          </div>
          {/* Контент (скроллится) */}
          <div style={{ flex: 1, overflowY: 'auto', paddingRight: 2 }}>
            {lessonsLoading ? (
              <LoadingSpinner size="medium" />
            ) : lessonsForSelectedDate.length === 0 ? (
              <div
                style={{
                  textAlign: 'center',
                  padding: '40px 20px',
                  color: 'var(--md-sys-color-on-surface-variant)',
                }}
              >
                <svg
                  width="48"
                  height="48"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  style={{ margin: '0 auto 16px', opacity: 0.5 }}
                >
                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                  <line x1="16" y1="2" x2="16" y2="6" />
                  <line x1="8" y1="2" x2="8" y2="6" />
                  <line x1="3" y1="10" x2="21" y2="10" />
                </svg>
                <p style={{ margin: 0, fontSize: '14px' }}>Нет занятий на этот день</p>
              </div>
            ) : (
              <div>
                {lessonsForSelectedDate.map((lesson) => (
                  <LessonCard
                    key={lesson.id}
                    lesson={lesson}
                    showClient
                    onClick={isMentor ? () => onLessonClick(lesson) : undefined}
                  />
                ))}
              </div>
            )}
          </div>

          {/* Footer — кнопка «Добавить занятие» только для ментора */}
          {buttonComponentsLoaded && isMentor && (
            <div
              style={{
                paddingTop: 16,
                marginTop: 12,
                borderTop: '1px solid var(--md-sys-color-outline-variant)',
                display: 'flex',
                justifyContent: 'center',
              }}
            >
              <button
                type="button"
                onClick={onAddLesson}
                disabled={navDisabled}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                  padding: '10px 24px',
                  background: 'var(--md-sys-color-primary)',
                  color: 'var(--md-sys-color-on-primary)',
                  border: 'none',
                  borderRadius: 20,
                  fontSize: 14,
                  fontWeight: 600,
                  cursor: navDisabled ? 'not-allowed' : 'pointer',
                  opacity: navDisabled ? 0.6 : 1,
                  transition: 'all 0.2s ease',
                }}
                onMouseEnter={(e) => {
                  if (!navDisabled) e.currentTarget.style.opacity = '0.9';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.opacity = navDisabled ? '0.6' : '1';
                }}
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <line x1="12" y1="5" x2="12" y2="19" />
                  <line x1="5" y1="12" x2="19" y2="12" />
                </svg>
                Добавить занятие
              </button>
            </div>
          )}
        </div>

        {/* Обратная сторона: Форма создания/редактирования */}
        <div
          className="ios-glass-panel"
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            opacity: isFormVisible ? 1 : 0,
            visibility: isFormVisible ? 'visible' : 'hidden',
            transition: 'opacity 0.2s ease',
            borderRadius: '20px',
            padding: '24px',
            overflowY: 'auto',
            display: 'flex',
            flexDirection: 'column',
          }}
        >
          {!formComponentsLoaded || (isEditingMode && lessonEditLoading) ? (
            <LoadingSpinner size="medium" />
          ) : (
            <>
            <form
              onSubmit={onSubmit}
              className="checklesson-form"
              style={{
                display: 'grid',
                gridTemplateColumns: '1fr 1fr',
                gap: 16,
                position: 'relative',
                zIndex: 10,
                pointerEvents: 'auto',
              }}
            >
              <div
                style={{
                  gridColumn: '1 / -1',
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  marginBottom: 8,
                }}
              >
                <h3
                  style={{
                    fontSize: '20px',
                    fontWeight: 500,
                    color: 'var(--md-sys-color-on-surface)',
                    margin: 0,
                  }}
                >
                  {isCompletedLesson
                    ? 'Изменить завершённое занятие'
                    : isEditingMode
                      ? 'Редактировать занятие'
                      : 'Создать занятие'}
                </h3>
                <button
                  type="button"
                  onClick={onCancel}
                  disabled={formDisabled}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: 40,
                    height: 40,
                    padding: 0,
                    background: 'var(--md-sys-color-surface-variant)',
                    color: 'var(--md-sys-color-on-surface-variant)',
                    border: 'none',
                    borderRadius: 20,
                    cursor: formDisabled ? 'not-allowed' : 'pointer',
                    opacity: formDisabled ? 0.6 : 1,
                    transition: 'all 0.2s ease',
                  }}
                  title="Отмена"
                >
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <line x1="18" y1="6" x2="6" y2="18" />
                    <line x1="6" y1="6" x2="18" y2="18" />
                  </svg>
                </button>
              </div>

              {formError && (
                <div
                  style={{
                    gridColumn: '1 / -1',
                    padding: 12,
                    borderRadius: 8,
                    background: 'var(--md-sys-color-error-container)',
                    color: 'var(--md-sys-color-on-error-container)',
                    fontSize: 14,
                    whiteSpace: 'pre-wrap' as const,
                  }}
                >
                  {formError}
                </div>
              )}

              {!isCompletedLesson && (
              <div style={{ gridColumn: 1 }}>
                <label
                  style={{
                    display: 'block',
                    fontSize: 12,
                    fontWeight: 500,
                    color: 'var(--md-sys-color-on-surface-variant)',
                    marginBottom: 4,
                  }}
                >
                  Ученик *
                </label>
                <StudentSelect
                  students={students}
                  value={formData.client}
                  onChange={(value) => setFormData((prev) => ({ ...prev, client: value }))}
                  disabled={formLoading || isEditingMode}
                  required
                />
              </div>
              )}

              {!isCompletedLesson && (
              <div style={{ gridColumn: 2 }}>
                <label
                  style={{
                    display: 'block',
                    fontSize: 12,
                    fontWeight: 500,
                    color: 'var(--md-sys-color-on-surface-variant)',
                    marginBottom: 4,
                  }}
                >
                  Предмет *
                </label>
                <SubjectSelect
                  subjects={subjects}
                  mentorSubjects={mentorSubjects}
                  value={selectedSubjectId ?? selectedMentorSubjectId ?? null}
                  onChange={(value) => {
                    if (value != null) {
                      const s = subjects.find((x) => x.id === value);
                      if (s) onSubjectChange(value, null);
                      else onSubjectChange(null, value);
                    } else {
                      onSubjectChange(null, null);
                    }
                  }}
                  disabled={formLoading}
                  required
                />
              </div>
              )}

              {!isCompletedLesson && (
              <div style={{ gridColumn: '1 / -1' }}>
                <label
                  style={{
                    display: 'block',
                    fontSize: 12,
                    fontWeight: 500,
                    color: 'var(--md-sys-color-on-surface-variant)',
                    marginBottom: 4,
                  }}
                >
                  Описание
                </label>
                <textarea
                  value={formData.description}
                  onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
                  placeholder="Дополнительная информация о занятии"
                  disabled={formLoading}
                  rows={2}
                  style={{
                    width: '100%',
                    padding: '12px 16px',
                    fontSize: 16,
                    color: 'var(--md-sys-color-on-surface)',
                    background: 'var(--md-sys-color-surface)',
                    border: '1px solid var(--md-sys-color-outline)',
                    borderRadius: 4,
                    fontFamily: 'inherit',
                    resize: 'vertical',
                    outline: 'none',
                    transition: 'border-color 0.2s ease',
                  }}
                  onFocus={(e) => {
                    e.currentTarget.style.borderColor = 'var(--md-sys-color-primary)';
                    e.currentTarget.style.borderWidth = '2px';
                  }}
                  onBlur={(e) => {
                    e.currentTarget.style.borderColor = 'var(--md-sys-color-outline)';
                    e.currentTarget.style.borderWidth = '1px';
                  }}
                />
              </div>
              )}

              {!isCompletedLesson && (
              <>
              <div style={{ gridColumn: 1 }}>
                <label
                  style={{
                    display: 'block',
                    fontSize: 12,
                    fontWeight: 500,
                    color: 'var(--md-sys-color-on-surface-variant)',
                    marginBottom: 4,
                  }}
                >
                  Дата начала *
                </label>
                <DatePicker
                  value={formData.start_date}
                  onChange={(value) => setFormData((prev) => ({ ...prev, start_date: value }))}
                  disabled={formLoading}
                  required
                />
              </div>

              <div style={{ gridColumn: 2 }}>
                <label
                  style={{
                    display: 'block',
                    fontSize: 12,
                    fontWeight: 500,
                    color: 'var(--md-sys-color-on-surface-variant)',
                    marginBottom: 4,
                  }}
                >
                  Время начала *
                </label>
                <TimePicker
                  value={formData.start_time}
                  onChange={(value) => setFormData((prev) => ({ ...prev, start_time: value }))}
                  disabled={formLoading}
                  required
                />
              </div>

              <div style={{ gridColumn: 1 }}>
                <label
                  style={{
                    display: 'block',
                    fontSize: 12,
                    fontWeight: 500,
                    color: 'var(--md-sys-color-on-surface-variant)',
                    marginBottom: 4,
                  }}
                >
                  Длительность (минуты) *
                </label>
                <select
                  value={formData.duration}
                  onChange={(e) => setFormData((prev) => ({ ...prev, duration: Number(e.target.value) }))}
                  required
                  disabled={formLoading}
                  style={{
                    width: '100%',
                    padding: '12px 16px',
                    fontSize: 16,
                    color: 'var(--md-sys-color-on-surface)',
                    background: 'var(--md-sys-color-surface)',
                    border: '1px solid var(--md-sys-color-outline)',
                    borderRadius: 4,
                    fontFamily: 'inherit',
                    cursor: formLoading ? 'not-allowed' : 'pointer',
                    outline: 'none',
                    transition: 'border-color 0.2s ease',
                  }}
                  onFocus={(e) => {
                    e.currentTarget.style.borderColor = 'var(--md-sys-color-primary)';
                    e.currentTarget.style.borderWidth = '2px';
                  }}
                  onBlur={(e) => {
                    e.currentTarget.style.borderColor = 'var(--md-sys-color-outline)';
                    e.currentTarget.style.borderWidth = '1px';
                  }}
                >
                  <option value={30}>30 минут</option>
                  <option value={45}>45 минут</option>
                  <option value={60}>1 час</option>
                  <option value={90}>1.5 часа</option>
                  <option value={120}>2 часа</option>
                </select>
              </div>

              <div style={{ gridColumn: 2 }}>
                <label
                  style={{
                    display: 'block',
                    fontSize: 12,
                    fontWeight: 500,
                    color: 'var(--md-sys-color-on-surface-variant)',
                    marginBottom: 4,
                  }}
                >
                  Стоимость (₽) *
                </label>
                <input
                  type="number"
                  value={formData.price ?? ''}
                  onChange={(e) => setFormData((prev) => ({ ...prev, price: Number(e.target.value) }))}
                  required
                  min={0}
                  step={100}
                  placeholder="1000"
                  disabled={formLoading}
                  style={{
                    width: '100%',
                    padding: '12px 16px',
                    fontSize: 16,
                    color: 'var(--md-sys-color-on-surface)',
                    background: 'var(--md-sys-color-surface)',
                    border: '1px solid var(--md-sys-color-outline)',
                    borderRadius: 4,
                    fontFamily: 'inherit',
                    outline: 'none',
                    transition: 'border-color 0.2s ease',
                  }}
                  onFocus={(e) => {
                    e.currentTarget.style.borderColor = 'var(--md-sys-color-primary)';
                    e.currentTarget.style.borderWidth = '2px';
                  }}
                  onBlur={(e) => {
                    e.currentTarget.style.borderColor = 'var(--md-sys-color-outline)';
                    e.currentTarget.style.borderWidth = '1px';
                  }}
                />
              </div>

              <div style={{ gridColumn: '1 / -1', padding: '8px 0' }}>
                <Switch
                  checked={formData.is_recurring}
                  onChange={(checked) => setFormData((prev) => ({ ...prev, is_recurring: checked }))}
                  disabled={formLoading || isCompletedLesson}
                  label="Постоянное занятие (повторяется еженедельно)"
                />
              </div>
              </>
              )}

              {isCompletedLesson && (
              <div style={{ gridColumn: '1 / -1' }}>
                <label
                  style={{
                    display: 'block',
                    fontSize: 12,
                    fontWeight: 500,
                    color: 'var(--md-sys-color-on-surface-variant)',
                    marginBottom: 4,
                  }}
                >
                  Статус
                </label>
                <select
                  value={formData.status ?? 'completed'}
                  onChange={(e) => setFormData((prev) => ({ ...prev, status: e.target.value as 'completed' | 'cancelled' }))}
                  disabled={formLoading}
                  style={{
                    width: '100%',
                    padding: '12px 16px',
                    fontSize: 16,
                    color: 'var(--md-sys-color-on-surface)',
                    background: 'var(--md-sys-color-surface)',
                    border: '1px solid var(--md-sys-color-outline)',
                    borderRadius: 4,
                    fontFamily: 'inherit',
                    cursor: formLoading ? 'not-allowed' : 'pointer',
                    outline: 'none',
                  }}
                >
                  <option value="completed">Завершено</option>
                  <option value="cancelled">Отменено</option>
                </select>
                <p style={{ fontSize: 12, color: 'var(--md-sys-color-on-surface-variant)', marginTop: 4, marginBottom: 0 }}>
                  Изменение статуса задним числом не отправляет уведомления ученику и родителям
                </p>
              </div>
              )}

              <div
                style={{
                  gridColumn: '1 / -1',
                  display: 'flex',
                  gap: 12,
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  marginTop: 8,
                }}
              >
                <div style={{ display: 'flex', gap: 12 }}>
                  {isEditingMode && !isCompletedLesson && onDelete && (
                    <button
                      type="button"
                      onClick={handleDeleteClick}
                      disabled={formDisabled}
                      style={{
                        padding: '10px 24px',
                        background: 'transparent',
                        color: 'var(--md-sys-color-error)',
                        border: '1px solid var(--md-sys-color-error)',
                        borderRadius: 20,
                        fontSize: 14,
                        fontWeight: 500,
                        cursor: formDisabled ? 'not-allowed' : 'pointer',
                        opacity: formDisabled ? 0.6 : 1,
                      }}
                    >
                      Удалить
                    </button>
                  )}
                </div>
                <div style={{ display: 'flex', gap: 12 }}>
                  <button
                    type="button"
                    onClick={onCancel}
                    disabled={formDisabled}
                    style={{
                      padding: '10px 24px',
                      background: 'transparent',
                      color: 'var(--md-sys-color-primary)',
                      border: '1px solid var(--md-sys-color-outline-variant)',
                      borderRadius: 20,
                      fontSize: 14,
                      fontWeight: 500,
                      cursor: formDisabled ? 'not-allowed' : 'pointer',
                      opacity: formDisabled ? 0.6 : 1,
                    }}
                  >
                    Отмена
                  </button>
                  <button
                    type="submit"
                    disabled={formLoading}
                    style={{
                      padding: '10px 24px',
                      background: 'var(--md-sys-color-primary)',
                      color: 'var(--md-sys-color-on-primary)',
                      border: 'none',
                      borderRadius: 20,
                      fontSize: 14,
                      fontWeight: 500,
                      cursor: formLoading ? 'not-allowed' : 'pointer',
                      opacity: formLoading ? 0.6 : 1,
                    }}
                  >
                    {formLoading
                      ? isEditingMode
                        ? 'Сохранение...'
                        : 'Создание...'
                      : isEditingMode
                        ? 'Сохранить'
                        : 'Создать'}
                  </button>
                </div>
              </div>
            </form>

            {showDeleteConfirm && formData.is_recurring && (
              <div
                role="dialog"
                aria-modal="true"
                aria-labelledby="delete-dialog-title"
                style={{
                  position: 'fixed',
                  inset: 0,
                  zIndex: 1000,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  background: 'rgba(0,0,0,0.4)',
                }}
                onClick={() => setShowDeleteConfirm(false)}
              >
                <div
                  style={{
                    background: 'var(--md-sys-color-surface)',
                    borderRadius: 16,
                    padding: 24,
                    maxWidth: 400,
                    width: '90%',
                    boxShadow: '0 8px 32px rgba(0,0,0,0.2)',
                  }}
                  onClick={(e) => e.stopPropagation()}
                >
                  <h4
                    id="delete-dialog-title"
                    style={{
                      margin: '0 0 12px',
                      fontSize: 18,
                      fontWeight: 500,
                      color: 'var(--md-sys-color-on-surface)',
                    }}
                  >
                    Удалить занятие
                  </h4>
                  <p
                    style={{
                      margin: '0 0 20px',
                      fontSize: 14,
                      color: 'var(--md-sys-color-on-surface-variant)',
                      lineHeight: 1.4,
                    }}
                  >
                    Это постоянное занятие. Удалить только это занятие или всю цепочку будущих?
                  </p>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                    <button
                      type="button"
                      onClick={() => handleDeleteConfirm(false)}
                      disabled={formLoading}
                      style={{
                        padding: '10px 16px',
                        background: 'var(--md-sys-color-surface-variant)',
                        color: 'var(--md-sys-color-on-surface-variant)',
                        border: 'none',
                        borderRadius: 12,
                        fontSize: 14,
                        fontWeight: 500,
                        cursor: formLoading ? 'not-allowed' : 'pointer',
                      }}
                    >
                      Только это занятие
                    </button>
                    <button
                      type="button"
                      onClick={() => handleDeleteConfirm(true)}
                      disabled={formLoading}
                      style={{
                        padding: '10px 16px',
                        background: 'var(--md-sys-color-error)',
                        color: 'var(--md-sys-color-on-error)',
                        border: 'none',
                        borderRadius: 12,
                        fontSize: 14,
                        fontWeight: 500,
                        cursor: formLoading ? 'not-allowed' : 'pointer',
                      }}
                    >
                      Всю цепочку занятий
                    </button>
                    <button
                      type="button"
                      onClick={() => setShowDeleteConfirm(false)}
                      disabled={formLoading}
                      style={{
                        padding: '10px 16px',
                        background: 'transparent',
                        color: 'var(--md-sys-color-primary)',
                        border: '1px solid var(--md-sys-color-outline-variant)',
                        borderRadius: 12,
                        fontSize: 14,
                        fontWeight: 500,
                        cursor: formLoading ? 'not-allowed' : 'pointer',
                      }}
                    >
                      Отмена
                    </button>
                  </div>
                </div>
              </div>
            )}
            </>
          )}
        </div>
      </div>
    </div>
  );
};
