'use client';

import { useCallback, useEffect, useState, useMemo, useRef, type FormEvent } from 'react';
import { loadComponent } from '@/lib/material-components';
import { LoadingSpinner } from '@/components/common/LoadingSpinner';
import { ErrorDisplay } from '@/components/common/ErrorDisplay';
import { createMaterial, updateMaterial, shareMaterial, getMaterialById, getMaterials, type Material } from '@/api/materials';
import { getStudents, type Student } from '@/api/students';
import { useAuth } from '@/contexts/AuthContext';

// Иконки по типу материала
const MATERIAL_ICONS: Record<string, string> = {
  image: 'image',
  video: 'videocam',
  audio: 'audiotrack',
  document: 'description',
  presentation: 'slideshow',
  archive: 'folder_zip',
  other: 'insert_drive_file',
};

// Определить тип для иконки по material_type, MIME и расширению файла
function getMaterialTypeForIcon(material: any): string {
  const type = material?.material_type;
  if (type && type !== 'other' && MATERIAL_ICONS[type]) return type;
  const mime = (material?.file_type || '').toLowerCase();
  const name = material?.file_name || material?.file || '';
  if (mime.startsWith('image/') || /\.(jpe?g|png|gif|webp|bmp|svg)(\?|$)/i.test(name)) return 'image';
  if (mime.startsWith('video/') || /\.(mp4|webm|ogg|mov|avi)(\?|$)/i.test(name)) return 'video';
  if (mime.startsWith('audio/') || /\.(mp3|wav|ogg|m4a)(\?|$)/i.test(name)) return 'audio';
  if (mime.includes('pdf') || /\.pdf(\?|$)/i.test(name) || mime.includes('document') || /\.(docx?|odt)(\?|$)/i.test(name)) return 'document';
  if (mime.includes('presentation') || mime.includes('powerpoint') || /\.(pptx?|odp)(\?|$)/i.test(name)) return 'presentation';
  if (mime.includes('zip') || mime.includes('rar') || mime.includes('archive') || /\.(zip|rar|7z|tar|gz)(\?|$)/i.test(name)) return 'archive';
  return 'other';
}

function getMaterialIcon(material: any): string {
  const type = getMaterialTypeForIcon(material);
  return MATERIAL_ICONS[type] || MATERIAL_ICONS.other;
}

// Базовый URL медиа (тот же хост, что и API)
function getMediaBaseUrl(): string {
  if (typeof window === 'undefined') return '';
  const protocol = window.location.protocol;
  const hostname = window.location.hostname;
  return `${protocol}//${hostname}:8123`;
}

// Получить URL медиа для превью: собираем на фронте, чтобы хост совпадал с API
function getMediaUrl(material: any): string | null {
  if (!material) return null;
  const base = getMediaBaseUrl();
  if (material.file) {
    const f = String(material.file).trim();
    if (f.startsWith('http')) return f;
    // Бэкенд отдаёт путь вида /media/materials/... или materials/...
    const path = f.startsWith('/') ? f : `/${f}`;
    return `${base}${path}`;
  }
  if (material.file_url) return material.file_url;
  return material.url || null;
}

const IMAGE_MIME_PREFIX = 'image/';
const IMAGE_EXT = /\.(jpe?g|png|gif|webp|bmp|svg)(\?|$)/i;
const VIDEO_MIME_PREFIX = 'video/';
const VIDEO_EXT = /\.(mp4|webm|ogg|mov|avi)(\?|$)/i;

// Сократить строку до 8 символов (с многоточием при обрезке)
function truncateTo8(s: string): string {
  const t = (s || '').trim();
  if (t.length <= 8) return t;
  return t.slice(0, 8) + '…';
}

// Ключ категории типа файла (для фильтра)
type FileTypeCategory = 'image' | 'video' | 'audio' | 'document' | 'presentation' | 'archive' | 'other';

function getFileTypeCategory(material: any): FileTypeCategory {
  const name = (material?.file_name || material?.file || '').toLowerCase();
  const mime = (material?.file_type || '').toLowerCase();
  const ext = name.match(/\.([a-z0-9]+)(\?|$)/i)?.[1]?.toLowerCase() || '';
  if (mime.startsWith('image/') || ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'].includes(ext)) return 'image';
  if (mime.startsWith('video/') || ['mp4', 'webm', 'ogg', 'mov', 'avi', 'mkv'].includes(ext)) return 'video';
  if (mime.startsWith('audio/') || ['mp3', 'wav', 'ogg', 'm4a', 'flac'].includes(ext)) return 'audio';
  if (mime.includes('pdf') || mime.includes('document') || ['pdf', 'doc', 'docx', 'odt', 'txt', 'rtf'].includes(ext)) return 'document';
  if (mime.includes('presentation') || mime.includes('powerpoint') || ['ppt', 'pptx', 'odp'].includes(ext)) return 'presentation';
  if (mime.includes('zip') || mime.includes('rar') || ['zip', 'rar', '7z', 'tar', 'gz'].includes(ext)) return 'archive';
  return 'other';
}

// Подпись типа файла для отображения: Картинка, Документ, Аудио, Видео и т.д.
const FILE_TYPE_LABELS: Record<FileTypeCategory, string> = {
  image: 'Картинка',
  video: 'Видео',
  audio: 'Аудио',
  document: 'Документ',
  presentation: 'Презентация',
  archive: 'Архив',
  other: 'Файл',
};

function getFileTypeLabel(material: any): string {
  return FILE_TYPE_LABELS[getFileTypeCategory(material)];
}

// Расширение файла для сообщения «Не удалось открыть файл .xxx»
function getFileExtension(material: any): string {
  const name = (material?.file_name || material?.file || '').toLowerCase();
  const m = name.match(/\.([a-z0-9]+)(\?|$)/i);
  return m ? `.${m[1]}` : '';
}

// Типы, которые браузер не может отобразить — вместо iframe показываем модальное сообщение
const BROWSER_CANNOT_DISPLAY = [
  'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'odt', 'ods', 'odp',
  'zip', 'rar', '7z', 'tar', 'gz', 'exe', 'dmg', 'msi',
];
function cannotDisplayInBrowser(material: any): boolean {
  const ext = getFileExtension(material).replace(/^\./, '').toLowerCase();
  return BROWSER_CANNOT_DISPLAY.includes(ext);
}

function isImageMaterial(material: any): boolean {
  if (material.material_type === 'image') return true;
  const mime = (material.file_type || '').toLowerCase();
  if (mime.startsWith(IMAGE_MIME_PREFIX)) return true;
  const name = material.file_name || material.file || '';
  return IMAGE_EXT.test(name);
}

function isVideoMaterial(material: any): boolean {
  if (material.material_type === 'video') return true;
  const mime = (material.file_type || '').toLowerCase();
  if (mime.startsWith(VIDEO_MIME_PREFIX)) return true;
  const name = material.file_name || material.file || '';
  return VIDEO_EXT.test(name);
}

const PDF_EXT = /\.pdf(\?|$)/i;
const TEXT_EXT = /\.(txt|md|py|php|js|ts|jsx|tsx|vue|json|html|htm|css|scss|less|xml|csv|rtf|log|yml|yaml|env|sql|sh|bat|cmd|ini|cfg|conf)(\?|$)/i;

function isPdfMaterial(material: any): boolean {
  const mime = (material?.file_type || '').toLowerCase();
  if (mime.includes('pdf')) return true;
  const name = (material?.file_name || material?.file || '').toLowerCase();
  return PDF_EXT.test(name);
}

function isTextPreviewMaterial(material: any): boolean {
  const mime = (material?.file_type || '').toLowerCase();
  if (mime.startsWith('text/') || mime.includes('json') || mime.includes('javascript') || mime.includes('xml')) return true;
  const name = (material?.file_name || material?.file || '').toLowerCase();
  return TEXT_EXT.test(name);
}

const FILE_TYPE_CHIPS: { value: FileTypeCategory | null; label: string }[] = [
  { value: 'image', label: 'Картинка' },
  { value: 'document', label: 'Документ' },
  { value: 'audio', label: 'Аудио' },
  { value: 'video', label: 'Видео' },
  { value: 'presentation', label: 'Презентация' },
  { value: 'archive', label: 'Архив' },
  { value: 'other', label: 'Файл' },
];

const SEARCH_DEBOUNCE_MS = 400;

const TEXT_PREVIEW_MAX_CHARS = 1200;
const TEXT_PREVIEW_LINES = 18;

function MaterialTextPreview({ url }: { url: string }) {
  const [text, setText] = useState<string | null>(null);
  const [failed, setFailed] = useState(false);
  useEffect(() => {
    let cancelled = false;
    setFailed(false);
    setText(null);
    fetch(url)
      .then((r) => {
        if (!r.ok) throw new Error('fetch failed');
        return r.text();
      })
      .then((t) => {
        if (!cancelled) setText(t.slice(0, TEXT_PREVIEW_MAX_CHARS));
      })
      .catch(() => {
        if (!cancelled) setFailed(true);
      });
    return () => { cancelled = true; };
  }, [url]);
  if (failed) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
        <span className="material-symbols-outlined" style={{ fontSize: 48, color: 'var(--md-sys-color-primary)' }}>description</span>
      </div>
    );
  }
  if (text === null) {
    return (
      <div style={{ padding: 16, fontSize: 13, color: 'var(--md-sys-color-on-surface-variant)' }}>Загрузка…</div>
    );
  }
  const lines = text.split(/\r?\n/).slice(0, TEXT_PREVIEW_LINES);
  const display = lines.join('\n') + (text.length >= TEXT_PREVIEW_MAX_CHARS ? '\n…' : '');
  return (
    <pre
      style={{
        margin: 0,
        padding: '12px 14px',
        fontSize: 11,
        lineHeight: 1.45,
        fontFamily: 'ui-monospace, monospace',
        color: 'var(--md-sys-color-on-surface)',
        whiteSpace: 'pre-wrap',
        wordBreak: 'break-word',
        overflow: 'hidden',
        display: '-webkit-box',
        WebkitLineClamp: TEXT_PREVIEW_LINES,
        WebkitBoxOrient: 'vertical',
        textAlign: 'left',
        height: '100%',
        boxSizing: 'border-box',
      }}
    >
      {display || ' (пусто)'}
    </pre>
  );
}

const TEXT_FULL_MAX_CHARS = 500000;

function MaterialTextPreviewFull({ url }: { url: string }) {
  const [text, setText] = useState<string | null>(null);
  const [failed, setFailed] = useState(false);
  useEffect(() => {
    let cancelled = false;
    setFailed(false);
    setText(null);
    fetch(url)
      .then((r) => {
        if (!r.ok) throw new Error('fetch failed');
        return r.text();
      })
      .then((t) => {
        if (!cancelled) setText(t.length > TEXT_FULL_MAX_CHARS ? t.slice(0, TEXT_FULL_MAX_CHARS) + '\n\n… (файл обрезан)' : t);
      })
      .catch(() => {
        if (!cancelled) setFailed(true);
      });
    return () => { cancelled = true; };
  }, [url]);
  if (failed) {
    return (
      <div style={{ padding: 24, textAlign: 'center', color: 'var(--md-sys-color-on-surface-variant)' }}>
        Не удалось загрузить содержимое
      </div>
    );
  }
  if (text === null) {
    return (
      <div style={{ padding: 24, fontSize: 14, color: 'var(--md-sys-color-on-surface-variant)' }}>Загрузка…</div>
    );
  }
  return (
    <pre
      style={{
        margin: 0,
        padding: 16,
        fontSize: 13,
        lineHeight: 1.5,
        fontFamily: 'ui-monospace, monospace',
        color: 'var(--md-sys-color-on-surface)',
        whiteSpace: 'pre-wrap',
        wordBreak: 'break-word',
        textAlign: 'left',
        minWidth: 0,
      }}
    >
      {text || ' (пусто)'}
    </pre>
  );
}

export default function MaterialsPage() {
  const { user } = useAuth();
  const isClient = user?.role === 'client';

  const [componentsLoaded, setComponentsLoaded] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [searchQueryDebounced, setSearchQueryDebounced] = useState('');
  const [fileTypeFilter, setFileTypeFilter] = useState<FileTypeCategory | null>(null);
  const [mentorFilter, setMentorFilter] = useState<number | null>(null);
  const [openMenuId, setOpenMenuId] = useState<number | null>(null);
  
  // Состояние для редактирования материала
  const [editingMaterial, setEditingMaterial] = useState<Material | null>(null);
  const [editFormData, setEditFormData] = useState({ title: '', description: '' });
  const [editFile, setEditFile] = useState<File | null>(null);
  const [editLoading, setEditLoading] = useState(false);
  const [editError, setEditError] = useState<string | null>(null);
  
  // Состояние для выбора учеников
  const [students, setStudents] = useState<Student[]>([]);
  const [studentsLoading, setStudentsLoading] = useState(false);
  const [selectedStudentIds, setSelectedStudentIds] = useState<string[]>([]);
  const [studentSearch, setStudentSearch] = useState('');
  
  // Состояние для просмотра материала
  const [previewMaterial, setPreviewMaterial] = useState<any | null>(null);

  // Панель «Добавить материал» (выдвижная справа)
  const [addPanelOpen, setAddPanelOpen] = useState(false);
  const [addTitle, setAddTitle] = useState('');
  const [addDescription, setAddDescription] = useState('');
  const [addFile, setAddFile] = useState<File | null>(null);
  const [addFilePreviewUrl, setAddFilePreviewUrl] = useState<string | null>(null);
  const [addShareStudentIds, setAddShareStudentIds] = useState<string[]>([]);
  const [addStudentSearch, setAddStudentSearch] = useState('');
  const [addLoading, setAddLoading] = useState(false);
  const [addError, setAddError] = useState<string | null>(null);
  const [addStudentsLoaded, setAddStudentsLoaded] = useState(false);
  const [addStudentsList, setAddStudentsList] = useState<Student[]>([]);
  const [addStudentSelectOpen, setAddStudentSelectOpen] = useState(false);
  const addStudentSelectRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    Promise.all([
      loadComponent('elevated-card'),
      loadComponent('filled-text-field'),
      loadComponent('filled-button'),
      loadComponent('icon'),
    ]).then(() => {
      setComponentsLoaded(true);
    });
  }, []);

  // Debounce поиска — уменьшаем количество запросов при вводе
  useEffect(() => {
    const timer = setTimeout(() => {
      setSearchQueryDebounced(searchQuery);
    }, SEARCH_DEBOUNCE_MS);
    return () => clearTimeout(timer);
  }, [searchQuery]);

  // Список материалов с подгрузкой по скроллу: первые 10, затем страницами
  const PAGE_SIZE = 10;
  const [materialsList, setMaterialsList] = useState<any[]>([]);
  const [materialsPage, setMaterialsPage] = useState(1);
  const [materialsHasMore, setMaterialsHasMore] = useState(true);
  const [materialsLoading, setMaterialsLoading] = useState(true);
  const [materialsLoadingMore, setMaterialsLoadingMore] = useState(false);
  const [materialsError, setMaterialsError] = useState<Error | null>(null);
  const loadMoreSentinelRef = useRef<HTMLDivElement>(null);

  const searchForRef = useRef<string>('');
  const loadMaterialsPage = useCallback(async (page: number, append: boolean) => {
    const search = searchQueryDebounced.trim() || undefined;
    searchForRef.current = search ?? '';
    const isFirst = page === 1;
    if (isFirst) {
      setMaterialsLoading(true);
    } else {
      setMaterialsLoadingMore(true);
    }
    setMaterialsError(null);
    try {
      const data = await getMaterials({
        page,
        page_size: PAGE_SIZE,
        search,
      });
      if (searchForRef.current !== (search ?? '')) return;
      const list = data.results || [];
      setMaterialsList((prev) => {
        if (!append) return list;
        const prevIds = new Set(prev.map((m: any) => m.id));
        const newItems = list.filter((m: any) => !prevIds.has(m.id));
        return newItems.length === 0 ? prev : [...prev, ...newItems];
      });
      setMaterialsHasMore(!!data.next);
      setMaterialsPage(page);
    } catch (err: any) {
      if (searchForRef.current !== (search ?? '')) return;
      setMaterialsError(err instanceof Error ? err : new Error(err?.message || 'Ошибка загрузки'));
    } finally {
      if (searchForRef.current === (search ?? '')) {
        setMaterialsLoading(false);
        setMaterialsLoadingMore(false);
      }
    }
  }, [searchQueryDebounced]);

  // Первая загрузка и сброс при смене поиска
  useEffect(() => {
    setMaterialsList([]);
    setMaterialsPage(1);
    setMaterialsHasMore(true);
    loadMaterialsPage(1, false);
  }, [searchQueryDebounced]);

  // Подгрузка по скроллу (IntersectionObserver)
  useEffect(() => {
    if (!materialsHasMore || materialsLoadingMore || materialsLoading) return;
    const el = loadMoreSentinelRef.current;
    if (!el) return;
    const observer = new IntersectionObserver(
      (entries) => {
        if (!entries[0]?.isIntersecting) return;
        loadMaterialsPage(materialsPage + 1, true);
      },
      { rootMargin: '200px', threshold: 0.1 }
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, [materialsHasMore, materialsLoadingMore, materialsLoading, materialsPage, loadMaterialsPage]);

  const refetch = useCallback(() => {
    setMaterialsList([]);
    setMaterialsPage(1);
    setMaterialsHasMore(true);
    loadMaterialsPage(1, false);
  }, [loadMaterialsPage]);

  const mutate = useCallback((updater: (prev: any[]) => any[]) => {
    setMaterialsList(updater);
  }, []);

  const materials = materialsList;
  
  // Определяем какие категории имеют файлы
  const availableCategories = useMemo(() => {
    const categories = new Set<FileTypeCategory>();
    materials.forEach((m: any) => {
      categories.add(getFileTypeCategory(m));
    });
    return categories;
  }, [materials]);

  // Фильтруем чипы - показываем только те, для которых есть файлы
  const visibleChips = useMemo(() => {
    return FILE_TYPE_CHIPS.filter(({ value }) => value && availableCategories.has(value));
  }, [availableCategories]);

  // Уникальные менторы (владельцы материалов) — для чипов у студента
  const mentorChips = useMemo(() => {
    const seen = new Set<number>();
    const list: { id: number; name: string }[] = [];
    materials.forEach((m: any) => {
      const owner = m.owner;
      if (!owner?.id) return;
      if (seen.has(owner.id)) return;
      seen.add(owner.id);
      const name = [owner.first_name, owner.last_name].filter(Boolean).join(' ') || owner.email || `Ментор ${owner.id}`;
      list.push({ id: owner.id, name: name.trim() || 'Без имени' });
    });
    return list.sort((a, b) => a.name.localeCompare(b.name));
  }, [materials]);

  const filteredMaterials = useMemo(
    () =>
      materials.filter((m: any) => {
        const matchesType = !fileTypeFilter || getFileTypeCategory(m) === fileTypeFilter;
        const matchesMentor = !mentorFilter || (m.owner?.id === mentorFilter);
        return matchesType && matchesMentor;
      }),
    [materials, fileTypeFilter, mentorFilter]
  );

  // Закрытие выпадающего списка учеников по клику снаружи
  useEffect(() => {
    if (!addStudentSelectOpen) return;
    const handle = (e: MouseEvent) => {
      if (addStudentSelectRef.current && !addStudentSelectRef.current.contains(e.target as Node)) {
        setAddStudentSelectOpen(false);
      }
    };
    document.addEventListener('mousedown', handle);
    return () => document.removeEventListener('mousedown', handle);
  }, [addStudentSelectOpen]);

  // Загрузка списка учеников при открытии панели добавления
  useEffect(() => {
    if (!addPanelOpen) return;
    setAddStudentsLoaded(false);
    getStudents({ page_size: 1000 })
      .then((res) => {
        setAddStudentsList(res.results || []);
      })
      .catch(() => setAddStudentsList([]))
      .finally(() => setAddStudentsLoaded(true));
  }, [addPanelOpen]);

  const closeAddPanel = () => {
    if (addLoading) return;
    setAddPanelOpen(false);
    setAddTitle('');
    setAddDescription('');
    setAddFile(null);
    if (addFilePreviewUrl) {
      URL.revokeObjectURL(addFilePreviewUrl);
      setAddFilePreviewUrl(null);
    }
    setAddShareStudentIds([]);
    setAddStudentSearch('');
    setAddError(null);
  };

  // Превью выбранного файла: object URL для изображений
  useEffect(() => {
    if (!addFile) {
      if (addFilePreviewUrl) {
        URL.revokeObjectURL(addFilePreviewUrl);
        setAddFilePreviewUrl(null);
      }
      return;
    }
    if (addFile.type.startsWith('image/')) {
      const url = URL.createObjectURL(addFile);
      setAddFilePreviewUrl(url);
      return () => {
        URL.revokeObjectURL(url);
        setAddFilePreviewUrl(null);
      };
    }
    if (addFilePreviewUrl) {
      URL.revokeObjectURL(addFilePreviewUrl);
      setAddFilePreviewUrl(null);
    }
  }, [addFile]);

  const handleAddSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setAddError(null);
    if (!addTitle.trim()) {
      setAddError('Укажите название материала');
      return;
    }
    if (!addFile) {
      setAddError('Выберите файл для загрузки');
      return;
    }
    setAddLoading(true);
    try {
      const created = await createMaterial({
        title: addTitle.trim(),
        description: addDescription.trim() || undefined,
        file: addFile,
      });
      if (addShareStudentIds.length > 0) {
        try {
          await shareMaterial(created.id, addShareStudentIds);
        } catch {
          // материал уже создан
        }
      }
      refetch();
      closeAddPanel();
    } catch (err: any) {
      setAddError(err?.message || 'Ошибка при создании материала');
    } finally {
      setAddLoading(false);
    }
  };

  if (!componentsLoaded) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
        <div>Загрузка...</div>
      </div>
    );
  }

  return (
    <div style={{ padding: '24px' }} data-tour="materials-root">
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          marginBottom: '16px',
          gap: 16,
        }}
      >
        <div style={{ flex: 1, minWidth: 0 }} />
        {!isClient && (
          <button
            type="button"
            data-tour="materials-add"
            onClick={() => setAddPanelOpen(true)}
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 8,
              padding: '10px 16px',
              fontSize: 14,
              fontWeight: 500,
              color: 'var(--md-sys-color-on-primary)',
              background: 'var(--md-sys-color-primary)',
              border: 'none',
              borderRadius: 8,
              cursor: 'pointer',
              whiteSpace: 'nowrap',
            }}
          >
            <span className="material-symbols-outlined" style={{ fontSize: 20 }}>add</span>
            Добавить материал
          </button>
        )}
      </div>
      <div
        style={{
          marginBottom: '24px',
          position: 'relative',
          width: '100%',
          cursor: 'text',
        }}
        onClick={(e) => {
          const input = (e.currentTarget as HTMLElement).querySelector('input');
          input?.focus();
        }}
      >
        <input
          type="text"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          placeholder="Поиск по названию, описанию или имени файла..."
          style={{
            width: '100%',
            padding: '12px 16px 12px 44px',
            fontSize: 16,
            border: '1px solid var(--md-sys-color-outline)',
            borderRadius: 12,
            background: 'var(--md-sys-color-surface)',
            color: 'var(--md-sys-color-on-surface)',
            outline: 'none',
            boxSizing: 'border-box',
          }}
        />
        <md-icon
          style={{
            position: 'absolute',
            left: 14,
            top: '50%',
            transform: 'translateY(-50%)',
            fontSize: 20,
            color: 'var(--md-sys-color-on-surface-variant)',
            pointerEvents: 'none',
          }}
        >
          search
        </md-icon>
      </div>

      {/* Чипы «Ментор» — только для студента: фильтр по тому, кто дал материал */}
      {isClient && mentorChips.length > 0 && (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginBottom: '16px' }}>
          <button
            type="button"
            onClick={() => setMentorFilter(null)}
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              justifyContent: 'center',
              height: '32px',
              padding: '0 16px',
              borderRadius: '8px',
              fontSize: '14px',
              fontWeight: 500,
              cursor: 'pointer',
              transition: 'all 0.2s ease',
              border: !mentorFilter ? 'none' : '1px solid var(--md-sys-color-outline)',
              background: !mentorFilter ? 'var(--md-sys-color-primary)' : 'transparent',
              color: !mentorFilter ? 'var(--md-sys-color-on-primary)' : 'var(--md-sys-color-on-surface)',
            }}
          >
            Все менторы
          </button>
          {mentorChips.map(({ id, name }) => {
            const isSelected = mentorFilter === id;
            return (
              <button
                key={id}
                type="button"
                onClick={() => {
                  if (mentorFilter === id) {
                    setMentorFilter(null);
                  } else {
                    setMentorFilter(id);
                  }
                }}
                style={{
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: '32px',
                  padding: '0 16px',
                  borderRadius: '8px',
                  fontSize: '14px',
                  fontWeight: 500,
                  cursor: 'pointer',
                  transition: 'all 0.2s ease',
                  border: isSelected ? 'none' : '1px solid var(--md-sys-color-outline)',
                  background: isSelected ? 'var(--md-sys-color-primary)' : 'transparent',
                  color: isSelected ? 'var(--md-sys-color-on-primary)' : 'var(--md-sys-color-on-surface)',
                }}
              >
                {name}
              </button>
            );
          })}
        </div>
      )}

      {/* Кастомные чипы типов файлов - показываем только если есть файлы */}
      {visibleChips.length > 0 && (
        <div style={{ 
          display: 'flex', 
          flexWrap: 'wrap', 
          gap: '8px', 
          marginBottom: '24px' 
        }}>
          {visibleChips.map(({ value, label }) => {
            const isSelected = fileTypeFilter === value;
            return (
              <button
                key={value ?? 'all'}
                type="button"
                onClick={() => {
                  if (fileTypeFilter === value) {
                    setFileTypeFilter(null);
                  } else {
                    setFileTypeFilter(value);
                  }
                }}
                style={{
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: '32px',
                  padding: '0 16px',
                  borderRadius: '8px',
                  fontSize: '14px',
                  fontWeight: 500,
                  cursor: 'pointer',
                  transition: 'all 0.2s ease',
                  border: isSelected ? 'none' : '1px solid var(--md-sys-color-outline)',
                  background: isSelected ? 'var(--md-sys-color-primary)' : 'transparent',
                  color: isSelected ? 'var(--md-sys-color-on-primary)' : 'var(--md-sys-color-on-surface)',
                }}
              >
                {label}
              </button>
            );
          })}
        </div>
      )}

      {materialsError && materialsError.message !== 'canceled' && (
        <ErrorDisplay error={materialsError} onRetry={refetch} />
      )}

      {/* Прогресс поиска — тонкая полоска под полем поиска */}
      {materialsLoading && (
        <div
          style={{
            height: 3,
            background: 'var(--md-sys-color-outline-variant)',
            borderRadius: 2,
            marginBottom: 24,
            overflow: 'hidden',
          }}
        >
          <div
            style={{
              height: '100%',
              width: '40%',
              background: 'var(--md-sys-color-primary)',
              borderRadius: 2,
              animation: 'searchProgress 1.2s ease-in-out infinite',
            }}
          />
        </div>
      )}

      {materialsLoading && materialsList.length === 0 ? (
        <LoadingSpinner size="large" />
      ) : filteredMaterials.length === 0 ? (
        <md-elevated-card style={{ padding: '40px', borderRadius: '20px', textAlign: 'center' }}>
          <md-icon style={{ fontSize: '64px', color: 'var(--md-sys-color-on-surface-variant)', marginBottom: '16px' }}>
            folder
          </md-icon>
          <p style={{ fontSize: '16px', color: 'var(--md-sys-color-on-surface-variant)' }}>
            {searchQuery ? 'Материалы не найдены' : 'Нет материалов'}
          </p>
        </md-elevated-card>
      ) : (
        <div
          className="materials-cards-grid"
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(min(340px, 100%), 1fr))',
            gap: '24px',
            opacity: materialsLoading ? 0.7 : 1,
            transition: 'opacity 0.2s ease',
          }}
        >
          {filteredMaterials.map((material: any) => {
            const mediaUrl = getMediaUrl(material);
            const isImage = isImageMaterial(material) && mediaUrl;
            const isVideo = isVideoMaterial(material) && mediaUrl;
            const isPdf = isPdfMaterial(material) && mediaUrl;
            const isText = isTextPreviewMaterial(material) && mediaUrl;
            const iconName = getMaterialIcon(material);
            const ownerName = material.owner
              ? [material.owner.first_name, material.owner.last_name].filter(Boolean).join(' ') || material.owner.email
              : '';

            return (
              <md-elevated-card
                key={material.id}
                className="ios26-panel"
                style={{
                  borderRadius: 'var(--ios26-radius-md)',
                  overflow: 'hidden',
                  display: 'flex',
                  flexDirection: 'column',
                  transition: 'transform 0.2s, box-shadow 0.25s ease',
                  background: 'var(--ios26-glass)',
                  backdropFilter: 'var(--ios26-blur)',
                  WebkitBackdropFilter: 'var(--ios26-blur)',
                  border: '1px solid var(--ios26-glass-border)',
                  boxShadow: 'var(--ios26-shadow)',
                }}
                onMouseEnter={(e: any) => {
                  e.currentTarget.style.transform = 'translateY(-4px)';
                  e.currentTarget.style.boxShadow = 'var(--ios26-shadow-hover)';
                }}
                onMouseLeave={(e: any) => {
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = 'var(--ios26-shadow)';
                }}
              >
                {/* Шапка карточки: заголовок; меню Редактировать/Удалить только для ментора */}
                <div
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: '8px',
                    padding: '16px 16px 0',
                    position: 'relative',
                  }}
                >
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--md-sys-color-on-surface)' }}>
                      {truncateTo8(material.title || material.file_name || 'Без названия')}
                    </div>
                  </div>
                  {!isClient && (
                  <div style={{ position: 'relative' }}>
                    <button
                      type="button"
                      onClick={(e) => {
                        e.stopPropagation();
                        setOpenMenuId((prev) => (prev === material.id ? null : material.id));
                      }}
                      style={{
                        background: 'none',
                        border: 'none',
                        padding: 8,
                        cursor: 'pointer',
                        color: 'var(--md-sys-color-on-surface-variant)',
                      }}
                      aria-label="Меню"
                    >
                      <md-icon>more_vert</md-icon>
                    </button>
                    {openMenuId === material.id && (
                      <>
                        <div
                          role="button"
                          tabIndex={0}
                          style={{ position: 'fixed', inset: 0, zIndex: 10 }}
                          onClick={() => setOpenMenuId(null)}
                          onKeyDown={(e) => e.key === 'Escape' && setOpenMenuId(null)}
                          aria-label="Закрыть меню"
                        />
                        <div
                          style={{
                            position: 'absolute',
                            right: 0,
                            top: '100%',
                            marginTop: 4,
                            zIndex: 11,
                            minWidth: 160,
                            padding: '8px 0',
                            background: 'var(--md-sys-color-surface-container-high)',
                            borderRadius: 12,
                            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
                          }}
                        >
                          <button
                            type="button"
                            onClick={async () => {
                              setOpenMenuId(null);
                              // Открываем sidebar редактирования
                              setEditingMaterial(material);
                              setEditFormData({
                                title: material.title || '',
                                description: material.description || '',
                              });
                              setEditFile(null);
                              setEditError(null);
                              setStudentSearch('');
                              
                              // Загружаем список студентов
                              setStudentsLoading(true);
                              try {
                                const studentsData = await getStudents({ page_size: 1000 });
                                setStudents(studentsData.results || []);
                                
                                // Загружаем полные данные материала для получения shared_with
                                const fullMaterial = await getMaterialById(material.id);
                                const sharedIds = fullMaterial.shared_with?.map((u) => String(u.id)) || [];
                                setSelectedStudentIds(sharedIds);
                              } catch (err) {
                                console.error('Ошибка загрузки данных:', err);
                              } finally {
                                setStudentsLoading(false);
                              }
                            }}
                            style={{
                              display: 'block',
                              width: '100%',
                              padding: '10px 16px',
                              border: 'none',
                              background: 'none',
                              textAlign: 'left',
                              fontSize: 14,
                              color: 'var(--md-sys-color-on-surface)',
                              cursor: 'pointer',
                            }}
                          >
                            Редактировать
                          </button>
                          <button
                            type="button"
                            onClick={() => {
                              setOpenMenuId(null);
                              // TODO: удалить материал (подтверждение + API)
                            }}
                            style={{
                              display: 'block',
                              width: '100%',
                              padding: '10px 16px',
                              border: 'none',
                              background: 'none',
                              textAlign: 'left',
                              fontSize: 14,
                              color: 'var(--md-sys-color-error)',
                              cursor: 'pointer',
                            }}
                          >
                            Удалить
                          </button>
                        </div>
                      </>
                    )}
                  </div>
                  )}
                </div>

                {/* Превью: фото, видео, PDF, текст или иконка — максимальная область */}
                <div
                  style={{
                    width: '100%',
                    aspectRatio: '4/3',
                    minHeight: 200,
                    background: 'var(--md-sys-color-surface-container-low)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    marginTop: 12,
                    position: 'relative',
                    overflow: 'hidden',
                  }}
                >
                  {isImage && (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                      src={mediaUrl}
                      alt={material.title}
                      style={{
                        width: '100%',
                        height: '100%',
                        objectFit: 'cover',
                        display: 'block',
                      }}
                    />
                  )}
                  {isVideo && (
                    <>
                      <video
                        src={mediaUrl}
                        preload="metadata"
                        muted
                        playsInline
                        style={{
                          width: '100%',
                          height: '100%',
                          objectFit: 'cover',
                          display: 'block',
                        }}
                      />
                      <div
                        style={{
                          position: 'absolute',
                          inset: 0,
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          background: 'rgba(0,0,0,0.25)',
                        }}
                      >
                        <md-icon style={{ fontSize: 64, color: 'rgba(255,255,255,0.95)' }}>play_circle_filled</md-icon>
                      </div>
                    </>
                  )}
                  {isPdf && !isImage && !isVideo && (
                    <div
                      style={{
                        position: 'absolute',
                        inset: 0,
                        overflow: 'hidden',
                      }}
                    >
                      <iframe
                        src={`${mediaUrl}#toolbar=0&view=FitH`}
                        title={material.title || 'PDF'}
                        style={{
                          position: 'absolute',
                          top: 0,
                          left: 0,
                          width: 'calc(100% + 20px)',
                          height: '100%',
                          border: 'none',
                          background: 'var(--md-sys-color-surface-container-low)',
                          pointerEvents: 'none',
                        }}
                      />
                      {/* Невидимый слой поверх — блокирует скролл и клики по iframe */}
                      <div
                        style={{
                          position: 'absolute',
                          inset: 0,
                          zIndex: 1,
                          cursor: 'default',
                        }}
                        aria-hidden
                      />
                    </div>
                  )}
                  {isText && !isImage && !isVideo && !isPdf && (
                    <div style={{ width: '100%', height: '100%', overflow: 'hidden', background: 'var(--md-sys-color-surface)' }}>
                      <MaterialTextPreview url={mediaUrl} />
                    </div>
                  )}
                  {!isImage && !isVideo && !isPdf && !isText && (
                    <span
                      className="material-symbols-outlined"
                      style={{
                        fontSize: 64,
                        color: 'var(--md-sys-color-primary)',
                        fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48",
                      }}
                      aria-hidden
                    >
                      {iconName}
                    </span>
                  )}
                </div>

                {/* Контент: тип файла + дата, описание */}
                <div style={{ padding: '16px', flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <div style={{ fontSize: 13, color: 'var(--md-sys-color-on-surface-variant)' }}>
                    {getFileTypeLabel(material)}
                    {material.created_at && ` · ${new Date(material.created_at).toLocaleDateString('ru-RU')}`}
                  </div>
                  {material.description && (
                    <p
                      style={{
                        fontSize: 14,
                        color: 'var(--md-sys-color-on-surface-variant)',
                        margin: 0,
                        display: '-webkit-box',
                        WebkitLineClamp: 3,
                        WebkitBoxOrient: 'vertical',
                        overflow: 'hidden',
                        lineHeight: 1.4,
                      }}
                    >
                      {material.description}
                    </p>
                  )}

                  {/* Кнопки: вторичная и основная */}
                  <div style={{ display: 'flex', gap: 8, marginTop: 'auto', paddingTop: 8 }}>
                    <button
                      type="button"
                      onClick={() => setPreviewMaterial({ ...material, mediaUrl })}
                      style={{
                        flex: 1,
                        padding: '10px 16px',
                        borderRadius: 20,
                        border: '1px solid var(--md-sys-color-primary)',
                        background: 'transparent',
                        color: 'var(--md-sys-color-primary)',
                        fontSize: 14,
                        fontWeight: 500,
                        cursor: 'pointer',
                      }}
                    >
                      Открыть
                    </button>
                    <button
                      type="button"
                      onClick={() => {
                        if (mediaUrl) {
                          const a = document.createElement('a');
                          a.href = mediaUrl;
                          a.download = material.file_name || material.title || 'file';
                          a.click();
                        }
                      }}
                      style={{
                        flex: 1,
                        padding: '10px 16px',
                        borderRadius: 20,
                        border: 'none',
                        background: 'var(--md-sys-color-primary)',
                        color: 'var(--md-sys-color-on-primary)',
                        fontSize: 14,
                        fontWeight: 500,
                        cursor: 'pointer',
                      }}
                    >
                      Скачать
                    </button>
                  </div>
                </div>
              </md-elevated-card>
            );
          })}
          {/* Сентинель для подгрузки по скроллу */}
          {materialsHasMore && (
            <div
              ref={loadMoreSentinelRef}
              style={{
                gridColumn: '1 / -1',
                display: 'flex',
                justifyContent: 'center',
                padding: '24px 0',
                minHeight: 40,
              }}
            >
              {materialsLoadingMore && (
                <LoadingSpinner size="small" />
              )}
            </div>
          )}
        </div>
      )}

      {/* Модальное окно просмотра материала */}
      {previewMaterial && (
        <div
          style={{
            position: 'fixed',
            inset: 0,
            background: 'rgba(0, 0, 0, 0.8)',
            zIndex: 200,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            padding: 16,
          }}
          onClick={() => setPreviewMaterial(null)}
        >
          <div
            style={{
              background: 'var(--md-sys-color-surface)',
              borderRadius: 20,
              maxWidth: '90vw',
              maxHeight: '90vh',
              width: '100%',
              display: 'flex',
              flexDirection: 'column',
              overflow: 'hidden',
            }}
            onClick={(e) => e.stopPropagation()}
          >
            {/* Header */}
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                padding: '16px 20px',
                borderBottom: '1px solid var(--md-sys-color-outline-variant)',
              }}
            >
              <div style={{ flex: 1, minWidth: 0 }}>
                <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: 'var(--md-sys-color-on-surface)' }}>
                  {previewMaterial.title || 'Без названия'}
                </h2>
                {previewMaterial.description && (
                  <p style={{ margin: '4px 0 0', fontSize: 14, color: 'var(--md-sys-color-on-surface-variant)' }}>
                    {previewMaterial.description}
                  </p>
                )}
              </div>
              <button
                type="button"
                onClick={() => setPreviewMaterial(null)}
                style={{
                  background: 'none',
                  border: 'none',
                  padding: 8,
                  cursor: 'pointer',
                  color: 'var(--md-sys-color-on-surface-variant)',
                  marginLeft: 16,
                }}
              >
                <md-icon>close</md-icon>
              </button>
            </div>

            {/* Content — скролл и органы управления по умолчанию */}
            <div
              style={{
                flex: 1,
                display: 'flex',
                alignItems: 'stretch',
                justifyContent: 'stretch',
                padding: 20,
                overflow: 'auto',
                background: 'var(--md-sys-color-surface-container-low)',
                minHeight: 300,
              }}
            >
              {(() => {
                const url = previewMaterial.mediaUrl;
                const isImage = (previewMaterial.file_type || '').toLowerCase().startsWith('image/') ||
                  /\.(jpe?g|png|gif|webp|bmp|svg)(\?|$)/i.test((previewMaterial.file_name || previewMaterial.file || '').toLowerCase());
                const isVideo = (previewMaterial.file_type || '').toLowerCase().startsWith('video/') ||
                  /\.(mp4|webm|ogg|mov|avi|mkv)(\?|$)/i.test((previewMaterial.file_name || previewMaterial.file || '').toLowerCase());
                const isAudio = (previewMaterial.file_type || '').toLowerCase().startsWith('audio/') ||
                  /\.(mp3|wav|ogg|m4a|flac)(\?|$)/i.test((previewMaterial.file_name || previewMaterial.file || '').toLowerCase());
                const isPdf = isPdfMaterial(previewMaterial);
                const isText = isTextPreviewMaterial(previewMaterial);

                // Изображение
                if (url && isImage) {
                  return (
                    <img
                      src={url}
                      alt={previewMaterial.title}
                      style={{
                        maxWidth: '100%',
                        width: 'auto',
                        height: 'auto',
                        maxHeight: 'none',
                        objectFit: 'contain',
                        borderRadius: 12,
                        alignSelf: 'center',
                      }}
                    />
                  );
                }

                // Видео — с управлением по умолчанию
                if (url && isVideo) {
                  return (
                    <video
                      controls
                      autoPlay
                      src={url}
                      style={{
                        maxWidth: '100%',
                        maxHeight: '75vh',
                        width: 'auto',
                        borderRadius: 12,
                        alignSelf: 'center',
                      }}
                    >
                      Ваш браузер не поддерживает воспроизведение видео.
                    </video>
                  );
                }

                // Аудио
                if (url && isAudio) {
                  return (
                    <div style={{ width: '100%', maxWidth: 500, textAlign: 'center', alignSelf: 'center' }}>
                      <md-icon style={{ fontSize: 80, color: 'var(--md-sys-color-primary)', marginBottom: 20 }}>
                        audiotrack
                      </md-icon>
                      <audio
                        controls
                        autoPlay
                        src={url}
                        style={{ width: '100%' }}
                      >
                        Ваш браузер не поддерживает воспроизведение аудио.
                      </audio>
                    </div>
                  );
                }

                // PDF — iframe с содержимым, скролл и панель по умолчанию
                if (url && isPdf) {
                  return (
                    <iframe
                      src={url}
                      title={previewMaterial.title || 'PDF'}
                      style={{
                        width: '100%',
                        minHeight: '70vh',
                        border: 'none',
                        borderRadius: 12,
                        background: '#fff',
                        flex: 1,
                      }}
                    />
                  );
                }

                // Текстовые файлы — полное содержимое со скроллом
                if (url && isText) {
                  return (
                    <div style={{ width: '100%', overflow: 'auto', background: 'var(--md-sys-color-surface)', borderRadius: 12 }}>
                      <MaterialTextPreviewFull url={url} />
                    </div>
                  );
                }

                // Файлы, которые браузер не может отобразить (офис, архивы и т.д.) —
                // не открываем в iframe (это вызывает скачивание), а показываем сообщение
                if (url && cannotDisplayInBrowser(previewMaterial)) {
                  const fileName = (previewMaterial.file_name || previewMaterial.file || 'файл').split('/').pop() || 'файл';
                  return (
                    <div style={{
                      width: '100%',
                      flex: 1,
                      minHeight: 300,
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      justifyContent: 'center',
                      textAlign: 'center',
                      color: 'var(--md-sys-color-on-surface)',
                      padding: 32,
                      background: 'var(--md-sys-color-surface-container-high)',
                      borderRadius: 16,
                    }}>
                      <span className="material-symbols-outlined" style={{ fontSize: 64, color: 'var(--md-sys-color-error)', marginBottom: 16 }}>error_outline</span>
                      <p style={{ fontSize: 18, fontWeight: 600, margin: '0 0 8px' }}>
                        Не удалось открыть {fileName}
                      </p>
                      <p style={{ fontSize: 14, color: 'var(--md-sys-color-on-surface-variant)', margin: 0 }}>
                        Этот формат нельзя просмотреть в браузере. Используйте кнопку «Скачать» ниже.
                      </p>
                    </div>
                  );
                }

                // Остальное — иконка и сообщение
                const fileName = (previewMaterial.file_name || previewMaterial.file || 'файл').split('/').pop() || 'файл';
                return (
                  <div style={{
                    width: '100%',
                    flex: 1,
                    minHeight: 300,
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'center',
                    textAlign: 'center',
                    color: 'var(--md-sys-color-on-surface)',
                    padding: 32,
                    background: 'var(--md-sys-color-surface-container-high)',
                    borderRadius: 16,
                  }}>
                    <span className="material-symbols-outlined" style={{ fontSize: 64, color: 'var(--md-sys-color-error)', marginBottom: 16 }}>error_outline</span>
                    <p style={{ fontSize: 18, fontWeight: 600, margin: '0 0 8px' }}>
                      Не удалось открыть {fileName}
                    </p>
                    <p style={{ fontSize: 14, color: 'var(--md-sys-color-on-surface-variant)', margin: 0 }}>
                      Этот формат нельзя просмотреть в браузере. Используйте кнопку «Скачать» ниже.
                    </p>
                  </div>
                );
              })()}
            </div>

            {/* Footer */}
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                padding: '16px 20px',
                borderTop: '1px solid var(--md-sys-color-outline-variant)',
              }}
            >
              <div style={{ fontSize: 12, color: 'var(--md-sys-color-on-surface-variant)' }}>
                {previewMaterial.file_name && (
                  <span style={{ marginRight: 16 }}>{previewMaterial.file_name}</span>
                )}
                {previewMaterial.file_size && (
                  <span>{(previewMaterial.file_size / (1024 * 1024)).toFixed(2)} МБ</span>
                )}
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                {previewMaterial.mediaUrl && (
                  <button
                    type="button"
                    onClick={() => {
                      const a = document.createElement('a');
                      a.href = previewMaterial.mediaUrl;
                      a.download = previewMaterial.file_name || previewMaterial.title || 'file';
                      a.click();
                    }}
                    style={{
                      padding: '10px 20px',
                      borderRadius: 12,
                      border: 'none',
                      background: 'var(--md-sys-color-primary)',
                      color: 'var(--md-sys-color-on-primary)',
                      fontSize: 14,
                      fontWeight: 500,
                      cursor: 'pointer',
                    }}
                  >
                    Скачать
                  </button>
                )}
                <button
                  type="button"
                  onClick={() => setPreviewMaterial(null)}
                  style={{
                    padding: '10px 20px',
                    borderRadius: 12,
                    border: '1px solid var(--md-sys-color-outline)',
                    background: 'transparent',
                    color: 'var(--md-sys-color-on-surface)',
                    fontSize: 14,
                    fontWeight: 500,
                    cursor: 'pointer',
                  }}
                >
                  Закрыть
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Sidebar для редактирования материала */}
      {editingMaterial && (
        <>
          {/* Overlay */}
          <div
            style={{
              position: 'fixed',
              inset: 0,
              background: 'rgba(0, 0, 0, 0.5)',
              zIndex: 100,
            }}
            onClick={() => !editLoading && setEditingMaterial(null)}
          />
          
          {/* Sidebar */}
          <div
            className="students-side-panel"
            style={{
              position: 'fixed',
              top: 0,
              right: 0,
              bottom: 0,
              width: '100%',
              maxWidth: 'min(400px, 100vw)',
              background: 'var(--md-sys-color-surface)',
              boxShadow: '-4px 0 20px rgba(0, 0, 0, 0.15)',
              zIndex: 101,
              display: 'flex',
              flexDirection: 'column',
              animation: 'slideInRight 0.3s ease',
            }}
          >
            {/* Header */}
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                padding: '16px 20px',
                borderBottom: '1px solid var(--md-sys-color-outline-variant)',
              }}
            >
              <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600, color: 'var(--md-sys-color-on-surface)' }}>
                Редактировать
              </h2>
              <button
                type="button"
                onClick={() => !editLoading && setEditingMaterial(null)}
                style={{
                  background: 'none',
                  border: 'none',
                  padding: 8,
                  cursor: editLoading ? 'not-allowed' : 'pointer',
                  color: 'var(--md-sys-color-on-surface-variant)',
                  opacity: editLoading ? 0.5 : 1,
                }}
              >
                <md-icon>close</md-icon>
              </button>
            </div>

            {/* Form */}
            <form
              onSubmit={async (e) => {
                e.preventDefault();
                if (!editingMaterial) return;
                
                setEditLoading(true);
                setEditError(null);
                
                try {
                  const updatedMaterial = await updateMaterial(editingMaterial.id, {
                    title: editFormData.title,
                    description: editFormData.description,
                    file: editFile || undefined,
                  });
                  
                  // Синхронизируем список учеников с доступом
                  try {
                    await shareMaterial(editingMaterial.id, selectedStudentIds);
                  } catch (shareErr) {
                    console.error('Ошибка выдачи доступа:', shareErr);
                  }
                  
                  // Локально обновляем материал в списке без перезагрузки всей страницы
                  mutate((prev: any[]) =>
                    prev.map((m: any) =>
                      m.id === editingMaterial.id ? { ...m, ...updatedMaterial } : m
                    )
                  );
                  
                  setEditingMaterial(null);
                } catch (err: any) {
                  console.error('Ошибка обновления материала:', err);
                  setEditError(err.message || 'Не удалось обновить материал');
                } finally {
                  setEditLoading(false);
                }
              }}
              style={{
                flex: 1,
                display: 'flex',
                flexDirection: 'column',
                padding: '20px',
                gap: '16px',
                overflowY: 'auto',
              }}
            >
              {/* Название */}
              <div>
                <label
                  style={{
                    display: 'block',
                    marginBottom: 8,
                    fontSize: 14,
                    fontWeight: 500,
                    color: 'var(--md-sys-color-on-surface)',
                  }}
                >
                  Название *
                </label>
                <input
                  type="text"
                  required
                  value={editFormData.title}
                  onChange={(e) => setEditFormData({ ...editFormData, title: e.target.value })}
                  disabled={editLoading}
                  style={{
                    width: '100%',
                    padding: '12px 16px',
                    fontSize: 16,
                    border: '1px solid var(--md-sys-color-outline)',
                    borderRadius: 12,
                    background: 'var(--md-sys-color-surface)',
                    color: 'var(--md-sys-color-on-surface)',
                    outline: 'none',
                  }}
                  placeholder="Название материала"
                />
              </div>

              {/* Описание */}
              <div>
                <label
                  style={{
                    display: 'block',
                    marginBottom: 8,
                    fontSize: 14,
                    fontWeight: 500,
                    color: 'var(--md-sys-color-on-surface)',
                  }}
                >
                  Описание
                </label>
                <textarea
                  value={editFormData.description}
                  onChange={(e) => setEditFormData({ ...editFormData, description: e.target.value })}
                  disabled={editLoading}
                  rows={4}
                  style={{
                    width: '100%',
                    padding: '12px 16px',
                    fontSize: 16,
                    border: '1px solid var(--md-sys-color-outline)',
                    borderRadius: 12,
                    background: 'var(--md-sys-color-surface)',
                    color: 'var(--md-sys-color-on-surface)',
                    outline: 'none',
                    resize: 'vertical',
                  }}
                  placeholder="Описание материала..."
                />
              </div>

              {/* Новый файл */}
              <div>
                <label
                  style={{
                    display: 'block',
                    marginBottom: 8,
                    fontSize: 14,
                    fontWeight: 500,
                    color: 'var(--md-sys-color-on-surface)',
                  }}
                >
                  Новый файл (опционально)
                </label>
                <input
                  type="file"
                  id="edit-file-input"
                  onChange={(e) => {
                    const file = e.target.files?.[0];
                    if (file) {
                      const maxSize = 10 * 1024 * 1024; // 10 MB
                      if (file.size > maxSize) {
                        setEditError(`Файл слишком большой. Максимум 10 МБ.`);
                        return;
                      }
                      setEditFile(file);
                      setEditError(null);
                    }
                  }}
                  disabled={editLoading}
                  style={{ display: 'none' }}
                />
                <label
                  htmlFor="edit-file-input"
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    gap: 8,
                    padding: '12px 16px',
                    border: '1px dashed var(--md-sys-color-outline)',
                    borderRadius: 12,
                    cursor: editLoading ? 'not-allowed' : 'pointer',
                    color: 'var(--md-sys-color-on-surface-variant)',
                    fontSize: 14,
                    opacity: editLoading ? 0.5 : 1,
                  }}
                >
                  <md-icon>upload_file</md-icon>
                  {editFile ? editFile.name : 'Выбрать файл'}
                </label>
                {editingMaterial.file_name && !editFile && (
                  <p style={{ marginTop: 8, fontSize: 12, color: 'var(--md-sys-color-on-surface-variant)' }}>
                    Текущий файл: {editingMaterial.file_name}
                  </p>
                )}
                {editFile && (
                  <p style={{ marginTop: 8, fontSize: 12, color: 'var(--md-sys-color-on-surface-variant)' }}>
                    Размер: {(editFile.size / (1024 * 1024)).toFixed(2)} МБ
                  </p>
                )}
              </div>

              {/* Доступ для учеников */}
              <div>
                <label
                  style={{
                    display: 'block',
                    marginBottom: 8,
                    fontSize: 14,
                    fontWeight: 500,
                    color: 'var(--md-sys-color-on-surface)',
                  }}
                >
                  Ученики с доступом
                </label>
                {studentsLoading ? (
                  <div style={{ padding: '12px', color: 'var(--md-sys-color-on-surface-variant)', fontSize: 14 }}>
                    Загрузка списка учеников...
                  </div>
                ) : students.length === 0 ? (
                  <div style={{ padding: '12px', color: 'var(--md-sys-color-on-surface-variant)', fontSize: 14 }}>
                    У вас пока нет учеников
                  </div>
                ) : (
                  <div
                    style={{
                      border: '1px solid var(--md-sys-color-outline)',
                      borderRadius: 12,
                      overflow: 'hidden',
                    }}
                  >
                    {/* Поиск */}
                    <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--md-sys-color-outline-variant)' }}>
                      <input
                        type="text"
                        value={studentSearch}
                        onChange={(e) => setStudentSearch(e.target.value)}
                        placeholder="Найти ученика..."
                        style={{
                          width: '100%',
                          padding: '8px 12px',
                          fontSize: 14,
                          border: '1px solid var(--md-sys-color-outline-variant)',
                          borderRadius: 8,
                          background: 'var(--md-sys-color-surface)',
                          color: 'var(--md-sys-color-on-surface)',
                          outline: 'none',
                        }}
                      />
                    </div>
                    {/* Список учеников */}
                    <div style={{ maxHeight: 200, overflowY: 'auto', padding: '8px 0' }}>
                      {students
                        .filter((student) => {
                          if (!studentSearch.trim()) return true;
                          const query = studentSearch.toLowerCase();
                          const fullName = `${student.user.first_name} ${student.user.last_name}`.toLowerCase();
                          const email = student.user.email.toLowerCase();
                          return fullName.includes(query) || email.includes(query);
                        })
                        .map((student) => {
                          const fullName = `${student.user.first_name} ${student.user.last_name}`.trim();
                          const id = String(student.user.id);
                          const checked = selectedStudentIds.includes(id);
                          return (
                            <label
                              key={student.id}
                              style={{
                                display: 'flex',
                                alignItems: 'center',
                                gap: 12,
                                padding: '8px 12px',
                                cursor: editLoading ? 'not-allowed' : 'pointer',
                                opacity: editLoading ? 0.5 : 1,
                              }}
                            >
                              <input
                                type="checkbox"
                                checked={checked}
                                disabled={editLoading}
                                onChange={(e) => {
                                  setSelectedStudentIds((prev) =>
                                    e.target.checked
                                      ? [...prev, id]
                                      : prev.filter((x) => x !== id)
                                  );
                                }}
                                style={{
                                  width: 18,
                                  height: 18,
                                  accentColor: 'var(--md-sys-color-primary)',
                                }}
                              />
                              <div style={{ flex: 1, minWidth: 0 }}>
                                <div style={{ fontSize: 14, color: 'var(--md-sys-color-on-surface)' }}>
                                  {fullName || student.user.email}
                                </div>
                                {fullName && (
                                  <div style={{ fontSize: 12, color: 'var(--md-sys-color-on-surface-variant)' }}>
                                    {student.user.email}
                                  </div>
                                )}
                              </div>
                            </label>
                          );
                        })}
                    </div>
                  </div>
                )}
                {selectedStudentIds.length > 0 && (
                  <p style={{ marginTop: 8, fontSize: 12, color: 'var(--md-sys-color-on-surface-variant)' }}>
                    Выбрано: {selectedStudentIds.length} {selectedStudentIds.length === 1 ? 'ученик' : selectedStudentIds.length < 5 ? 'ученика' : 'учеников'}
                  </p>
                )}
              </div>

              {/* Ошибка */}
              {editError && (
                <div
                  style={{
                    padding: '12px 16px',
                    background: 'var(--md-sys-color-error-container)',
                    color: 'var(--md-sys-color-on-error-container)',
                    borderRadius: 12,
                    fontSize: 14,
                  }}
                >
                  {editError}
                </div>
              )}

              {/* Spacer */}
              <div style={{ flex: 1 }} />

              {/* Кнопки */}
              <div style={{ display: 'flex', gap: 12 }}>
                <button
                  type="button"
                  onClick={() => !editLoading && setEditingMaterial(null)}
                  disabled={editLoading}
                  style={{
                    flex: 1,
                    padding: '14px 20px',
                    borderRadius: 12,
                    border: '1px solid var(--md-sys-color-outline)',
                    background: 'transparent',
                    color: 'var(--md-sys-color-on-surface)',
                    fontSize: 14,
                    fontWeight: 500,
                    cursor: editLoading ? 'not-allowed' : 'pointer',
                    opacity: editLoading ? 0.5 : 1,
                  }}
                >
                  Отмена
                </button>
                <button
                  type="submit"
                  disabled={editLoading}
                  style={{
                    flex: 1,
                    padding: '14px 20px',
                    borderRadius: 12,
                    border: 'none',
                    background: 'var(--md-sys-color-primary)',
                    color: 'var(--md-sys-color-on-primary)',
                    fontSize: 14,
                    fontWeight: 500,
                    cursor: editLoading ? 'not-allowed' : 'pointer',
                    opacity: editLoading ? 0.7 : 1,
                  }}
                >
                  {editLoading ? 'Сохранение...' : 'Сохранить'}
                </button>
              </div>
            </form>
          </div>

          {/* CSS анимация */}
          <style>{`
            @keyframes slideInRight {
              from {
                transform: translateX(100%);
              }
              to {
                transform: translateX(0);
              }
            }
          `}</style>
        </>
      )}

      {/* Панель «Добавить материал» — выдвижная справа */}
      {addPanelOpen && (
        <>
          <div
            role="presentation"
            onClick={closeAddPanel}
            style={{
              position: 'fixed',
              inset: 0,
              background: 'rgba(0,0,0,0.4)',
              zIndex: 9998,
              animation: 'fadeIn 0.2s ease-out',
            }}
          />
          <div
            className="students-side-panel"
            style={{
              position: 'fixed',
              top: 0,
              right: 0,
              bottom: 0,
              width: 'min(400px, 100vw)',
              background: 'var(--md-sys-color-surface)',
              boxShadow: '-4px 0 24px rgba(0,0,0,0.15)',
              zIndex: 9999,
              display: 'flex',
              flexDirection: 'column',
              animation: 'slideInRight 0.3s ease-out',
            }}
          >
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                padding: '16px 20px',
                borderBottom: '1px solid var(--md-sys-color-outline-variant)',
              }}
            >
              <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: 'var(--md-sys-color-on-surface)' }}>
                Добавить материал
              </h2>
              <button
                type="button"
                onClick={closeAddPanel}
                disabled={addLoading}
                aria-label="Закрыть"
                style={{
                  padding: 8,
                  border: 'none',
                  background: 'transparent',
                  color: 'var(--md-sys-color-on-surface-variant)',
                  cursor: addLoading ? 'not-allowed' : 'pointer',
                  borderRadius: 8,
                }}
              >
                <span className="material-symbols-outlined" style={{ fontSize: 24 }}>close</span>
              </button>
            </div>
            <form onSubmit={handleAddSubmit} style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, overflow: 'hidden' }}>
              <div style={{ flex: 1, overflowY: 'auto', padding: '20px' }}>
                <div style={{ marginBottom: 16 }}>
                  <label htmlFor="add-title" style={{ display: 'block', fontSize: 14, fontWeight: 500, color: 'var(--md-sys-color-on-surface)', marginBottom: 6 }}>
                    Название *
                  </label>
                  <input
                    id="add-title"
                    type="text"
                    value={addTitle}
                    onChange={(e) => setAddTitle(e.target.value)}
                    placeholder="Название материала"
                    disabled={addLoading}
                    required
                    style={{
                      width: '100%',
                      padding: '12px 14px',
                      fontSize: 14,
                      border: '1px solid var(--md-sys-color-outline)',
                      borderRadius: 12,
                      background: 'var(--md-sys-color-surface)',
                      color: 'var(--md-sys-color-on-surface)',
                      outline: 'none',
                      boxSizing: 'border-box',
                    }}
                  />
                </div>
                <div style={{ marginBottom: 16 }}>
                  <label htmlFor="add-description" style={{ display: 'block', fontSize: 14, fontWeight: 500, color: 'var(--md-sys-color-on-surface)', marginBottom: 6 }}>
                    Описание
                  </label>
                  <textarea
                    id="add-description"
                    value={addDescription}
                    onChange={(e) => setAddDescription(e.target.value)}
                    placeholder="Описание материала..."
                    disabled={addLoading}
                    rows={3}
                    style={{
                      width: '100%',
                      padding: '12px 14px',
                      fontSize: 14,
                      border: '1px solid var(--md-sys-color-outline)',
                      borderRadius: 12,
                      background: 'var(--md-sys-color-surface)',
                      color: 'var(--md-sys-color-on-surface)',
                      outline: 'none',
                      boxSizing: 'border-box',
                      resize: 'vertical',
                    }}
                  />
                </div>
                <div style={{ marginBottom: 16 }}>
                  <label style={{ display: 'block', fontSize: 14, fontWeight: 500, color: 'var(--md-sys-color-on-surface)', marginBottom: 6 }}>
                    Файл (до 10 МБ) *
                  </label>
                  <input
                    id="add-file"
                    type="file"
                    onChange={(e) => setAddFile(e.target.files?.[0] ?? null)}
                    disabled={addLoading}
                    style={{ display: 'none' }}
                  />
                  <label
                    htmlFor="add-file"
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      gap: 8,
                      padding: '14px',
                      border: '1px dashed var(--md-sys-color-outline)',
                      borderRadius: 12,
                      background: 'var(--md-sys-color-surface-container-high)',
                      color: 'var(--md-sys-color-on-surface-variant)',
                      fontSize: 14,
                      cursor: addLoading ? 'not-allowed' : 'pointer',
                    }}
                  >
                    <span className="material-symbols-outlined" style={{ fontSize: 22 }}>upload_file</span>
                    {addFile ? addFile.name : 'Выберите файл'}
                  </label>
                  {addFile && (
                    <div
                      style={{
                        marginTop: 10,
                        borderRadius: 12,
                        overflow: 'hidden',
                        border: '1px solid var(--md-sys-color-outline-variant)',
                        background: 'var(--md-sys-color-surface-container-high)',
                      }}
                    >
                      {addFile.type.startsWith('image/') && addFilePreviewUrl ? (
                        <img
                          src={addFilePreviewUrl}
                          alt=""
                          style={{
                            display: 'block',
                            width: '100%',
                            maxHeight: 200,
                            objectFit: 'contain',
                            background: 'var(--md-sys-color-surface-container)',
                          }}
                        />
                      ) : (
                        <div
                          style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: 12,
                            padding: '14px 16px',
                          }}
                        >
                          <span
                            className="material-symbols-outlined"
                            style={{ fontSize: 40, color: 'var(--md-sys-color-primary)' }}
                          >
                            description
                          </span>
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--md-sys-color-on-surface)' }}>
                              {addFile.name}
                            </div>
                            <div style={{ fontSize: 12, color: 'var(--md-sys-color-on-surface-variant)', marginTop: 2 }}>
                              {addFile.size < 1024
                                ? `${addFile.size} Б`
                                : addFile.size < 1024 * 1024
                                  ? `${(addFile.size / 1024).toFixed(1)} КБ`
                                  : `${(addFile.size / (1024 * 1024)).toFixed(2)} МБ`}
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  )}
                </div>
                <div style={{ marginBottom: 16 }} ref={addStudentSelectRef}>
                  <label style={{ display: 'block', fontSize: 14, fontWeight: 500, color: 'var(--md-sys-color-on-surface)', marginBottom: 6 }}>
                    Ученики, которым доступен материал
                  </label>
                  {!addStudentsLoaded ? (
                    <div style={{ fontSize: 13, color: 'var(--md-sys-color-on-surface-variant)', padding: '12px 0' }}>Загрузка...</div>
                  ) : addStudentsList.length === 0 ? (
                    <div style={{ fontSize: 13, color: 'var(--md-sys-color-on-surface-variant)', padding: '12px 0' }}>Нет учеников</div>
                  ) : (
                    <>
                      <button
                        type="button"
                        onClick={() => setAddStudentSelectOpen((o) => !o)}
                        disabled={addLoading}
                        style={{
                          width: '100%',
                          display: 'flex',
                          alignItems: 'center',
                          gap: 10,
                          padding: '12px 14px',
                          fontSize: 14,
                          textAlign: 'left',
                          border: '1px solid var(--md-sys-color-outline)',
                          borderRadius: 12,
                          background: 'var(--md-sys-color-surface-container-high)',
                          color: 'var(--md-sys-color-on-surface)',
                          cursor: addLoading ? 'not-allowed' : 'pointer',
                          boxSizing: 'border-box',
                          minHeight: 48,
                        }}
                      >
                        {addShareStudentIds.length > 0 ? (
                          <>
                            <div style={{ display: 'flex', alignItems: 'center', marginRight: 4 }}>
                              {addStudentsList
                                .filter((s) => addShareStudentIds.includes(String(s.user?.id ?? s.id)))
                                .slice(0, 4)
                                .map((s, idx) => {
                                  const id = String(s.user?.id ?? s.id);
                                  const avatarUrl = s.user?.avatar_url || s.user?.avatar || null;
                                  const name = `${s.user?.first_name || ''} ${s.user?.last_name || ''}`.trim() || s.user?.email || '';
                                  const initial = name ? name[0].toUpperCase() : '?';
                                  return (
                                    <div
                                      key={id}
                                      style={{
                                        width: 28,
                                        height: 28,
                                        borderRadius: '50%',
                                        overflow: 'hidden',
                                        marginLeft: idx === 0 ? 0 : -8,
                                        border: '2px solid var(--md-sys-color-surface-container-high)',
                                        background: 'var(--md-sys-color-primary-container)',
                                        color: 'var(--md-sys-color-on-primary-container)',
                                        fontSize: 12,
                                        fontWeight: 600,
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        flexShrink: 0,
                                      }}
                                      title={name}
                                    >
                                      {avatarUrl ? (
                                        <img src={avatarUrl} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                                      ) : (
                                        initial
                                      )}
                                    </div>
                                  );
                                })}
                            </div>
                            <span style={{ color: 'var(--md-sys-color-on-surface-variant)', fontSize: 13 }}>
                              Выбрано: {addShareStudentIds.length}
                            </span>
                          </>
                        ) : (
                          <>
                            <span className="material-symbols-outlined" style={{ fontSize: 20, color: 'var(--md-sys-color-on-surface-variant)' }}>group</span>
                            <span style={{ color: 'var(--md-sys-color-on-surface-variant)' }}>Выбрать учеников</span>
                          </>
                        )}
                        <span
                          className="material-symbols-outlined"
                          style={{
                            marginLeft: 'auto',
                            fontSize: 20,
                            color: 'var(--md-sys-color-on-surface-variant)',
                            transform: addStudentSelectOpen ? 'rotate(180deg)' : 'none',
                            transition: 'transform 0.2s ease',
                          }}
                        >
                          expand_more
                        </span>
                      </button>
                      {addStudentSelectOpen && (
                        <div
                          style={{
                            marginTop: 6,
                            border: '1px solid var(--md-sys-color-outline-variant)',
                            borderRadius: 12,
                            overflow: 'hidden',
                            background: 'var(--md-sys-color-surface)',
                            boxShadow: '0 8px 24px rgba(0,0,0,0.12)',
                          }}
                        >
                          <div style={{ padding: 8, borderBottom: '1px solid var(--md-sys-color-outline-variant)', position: 'relative' }}>
                            <span
                              className="material-symbols-outlined"
                              style={{
                                position: 'absolute',
                                left: 20,
                                top: '50%',
                                transform: 'translateY(-50%)',
                                fontSize: 18,
                                color: 'var(--md-sys-color-on-surface-variant)',
                                pointerEvents: 'none',
                              }}
                            >
                              search
                            </span>
                            <input
                              type="text"
                              value={addStudentSearch}
                              onChange={(e) => setAddStudentSearch(e.target.value)}
                              placeholder="Поиск по имени или email..."
                              style={{
                                width: '100%',
                                padding: '10px 12px 10px 40px',
                                fontSize: 14,
                                border: '1px solid var(--md-sys-color-outline)',
                                borderRadius: 8,
                                background: 'var(--md-sys-color-surface-container-high)',
                                color: 'var(--md-sys-color-on-surface)',
                                outline: 'none',
                                boxSizing: 'border-box',
                              }}
                            />
                          </div>
                          <div style={{ maxHeight: 220, overflowY: 'auto', padding: 4 }}>
                            {addStudentsList
                              .filter((s) => {
                                if (!addStudentSearch.trim()) return true;
                                const q = addStudentSearch.toLowerCase();
                                const name = `${s.user?.first_name || ''} ${s.user?.last_name || ''}`.trim().toLowerCase();
                                const email = (s.user?.email || '').toLowerCase();
                                return name.includes(q) || email.includes(q);
                              })
                              .map((s) => {
                                const id = String(s.user?.id ?? s.id);
                                const name = `${s.user?.first_name || ''} ${s.user?.last_name || ''}`.trim() || s.user?.email || '';
                                const email = s.user?.email || '';
                                const avatarUrl = s.user?.avatar_url || s.user?.avatar || null;
                                const initial = name ? name[0].toUpperCase() : '?';
                                const checked = addShareStudentIds.includes(id);
                                return (
                                  <label
                                    key={id}
                                    style={{
                                      display: 'flex',
                                      alignItems: 'center',
                                      gap: 12,
                                      padding: '10px 12px',
                                      cursor: addLoading ? 'default' : 'pointer',
                                      borderRadius: 8,
                                      background: checked ? 'var(--md-sys-color-primary-container)' : 'transparent',
                                    }}
                                  >
                                    <div
                                      style={{
                                        width: 40,
                                        height: 40,
                                        borderRadius: '50%',
                                        overflow: 'hidden',
                                        flexShrink: 0,
                                        background: 'var(--md-sys-color-surface-container-high)',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        fontSize: 16,
                                        fontWeight: 600,
                                        color: 'var(--md-sys-color-on-surface-variant)',
                                      }}
                                    >
                                      {avatarUrl ? (
                                        <img src={avatarUrl} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                                      ) : (
                                        initial
                                      )}
                                    </div>
                                    <div style={{ flex: 1, minWidth: 0 }}>
                                      <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--md-sys-color-on-surface)' }}>{name}</div>
                                      {email && (
                                        <div style={{ fontSize: 12, color: 'var(--md-sys-color-on-surface-variant)', marginTop: 2 }}>{email}</div>
                                      )}
                                    </div>
                                    <input
                                      type="checkbox"
                                      checked={checked}
                                      disabled={addLoading}
                                      onChange={(e) => {
                                        setAddShareStudentIds((prev) =>
                                          e.target.checked ? [...prev, id] : prev.filter((x) => x !== id)
                                        );
                                      }}
                                      style={{ width: 20, height: 20, accentColor: 'var(--md-sys-color-primary)', flexShrink: 0 }}
                                    />
                                  </label>
                                );
                              })}
                          </div>
                        </div>
                      )}
                    </>
                  )}
                </div>
                {addError && (
                  <div
                    style={{
                      padding: '12px 14px',
                      background: 'var(--md-sys-color-error-container)',
                      color: 'var(--md-sys-color-on-error-container)',
                      borderRadius: 12,
                      fontSize: 14,
                      marginBottom: 16,
                    }}
                  >
                    {addError}
                  </div>
                )}
              </div>
              <div style={{ padding: '16px 20px', borderTop: '1px solid var(--md-sys-color-outline-variant)', display: 'flex', gap: 12 }}>
                <button
                  type="button"
                  onClick={closeAddPanel}
                  disabled={addLoading}
                  style={{
                    padding: '12px 20px',
                    borderRadius: 12,
                    border: '1px solid var(--md-sys-color-outline)',
                    background: 'transparent',
                    color: 'var(--md-sys-color-on-surface)',
                    fontSize: 14,
                    fontWeight: 500,
                    cursor: addLoading ? 'not-allowed' : 'pointer',
                  }}
                >
                  Отмена
                </button>
                <button
                  type="submit"
                  disabled={addLoading}
                  style={{
                    flex: 1,
                    padding: '12px 20px',
                    borderRadius: 12,
                    border: 'none',
                    background: 'var(--md-sys-color-primary)',
                    color: 'var(--md-sys-color-on-primary)',
                    fontSize: 14,
                    fontWeight: 500,
                    cursor: addLoading ? 'not-allowed' : 'pointer',
                  }}
                >
                  {addLoading ? 'Загрузка...' : 'Загрузить'}
                </button>
              </div>
            </form>
          </div>
          <style>{`
            @keyframes fadeIn {
              from { opacity: 0; }
              to { opacity: 1; }
            }
            @keyframes slideInRight {
              from { transform: translateX(100%); }
              to { transform: translateX(0); }
            }
          `}</style>
        </>
      )}
    </div>
  );
}