'use client';

import { useRef } from 'react';
import { useRouter } from 'next/navigation';
import {
  ArrowLeft,
  FileDown,
  Printer,
  CheckCircle2,
  XCircle,
  AlertTriangle,
  Lightbulb,
  Zap,
  Shield,
  TrendingUp,
  BarChart3,
  Heart,
  RefreshCcw,
  MessageSquare,
  ClipboardList,
  Target,
  Wallet,
} from 'lucide-react';
import { cn } from '@/lib/cn';

const LAST_UPDATE = '20 февраля 2026';
const SOURCE = 'Презентация СКК фитнес-парка Gagar1n';

/* ─────────────── TYPES ─────────────── */

interface MissingFeature {
  id: string;
  name: string;
  description: string;
  source: string;
  currentStatus: 'absent' | 'partial' | 'planned';
  priority: 'critical' | 'high' | 'medium' | 'low';
  businessImpact: string;
  estimatedEffort: string;
  category: string;
  details: string[];
}

interface FeatureCategory {
  name: string;
  icon: React.ReactNode;
  color: string;
  bgColor: string;
  borderColor: string;
}

/* ─────────────── DATA ─────────────── */

const categories: Record<string, FeatureCategory> = {
  retention: {
    name: 'Удержание и LTV',
    icon: <Heart className="h-5 w-5" />,
    color: 'text-rose-700',
    bgColor: 'bg-rose-50',
    borderColor: 'border-rose-200',
  },
  quality: {
    name: 'Контроль качества',
    icon: <Shield className="h-5 w-5" />,
    color: 'text-blue-700',
    bgColor: 'bg-blue-50',
    borderColor: 'border-blue-200',
  },
  finance: {
    name: 'Финансы и возвраты',
    icon: <Wallet className="h-5 w-5" />,
    color: 'text-emerald-700',
    bgColor: 'bg-emerald-50',
    borderColor: 'border-emerald-200',
  },
  funnel: {
    name: 'Воронки и конверсия',
    icon: <Target className="h-5 w-5" />,
    color: 'text-orange-700',
    bgColor: 'bg-orange-50',
    borderColor: 'border-orange-200',
  },
  communication: {
    name: 'Коммуникации',
    icon: <MessageSquare className="h-5 w-5" />,
    color: 'text-violet-700',
    bgColor: 'bg-violet-50',
    borderColor: 'border-violet-200',
  },
};

const missingFeatures: MissingFeature[] = [
  // ─── Удержание и LTV ───
  {
    id: 'service-calls',
    name: 'Сервисные звонки сопровождения (3+, 6+, 9+, 12+ мес.)',
    description:
      'Автоматические задачи на сервисные звонки клиентам по контрольным точкам срока членства. Цель — поддержание связи, выявление проблем, предложение продления.',
    source: 'Слайд 3: «Сервисные звонки сопровождение 3+, 6+, 9+»',
    currentStatus: 'absent',
    priority: 'critical',
    businessImpact:
      'Увеличение retention на 20-30%. Снижение оттока за счёт раннего выявления неудовлетворённости. Продление абонементов до истечения.',
    estimatedEffort: 'Sprint (2 недели)',
    category: 'retention',
    details: [
      'Автозадача при достижении 3/6/9/12 месяцев членства',
      'Шаблон разговора для каждого этапа (NPS, удовлетворённость, цели)',
      'Интеграция с SIP — звонок прямо из задачи',
      'Логирование результата: продлил / не продлил / проблема',
      'Дашборд конверсии по этапам сопровождения',
      'Воронка LTV с метриками по каждой контрольной точке',
    ],
  },
  {
    id: 'ltv-churn-funnel',
    name: 'Воронка отвалов LTV (Churn Management)',
    description:
      'Система отслеживания клиентов, не продливших членство (30 дней). Разделение по зонам (ТЗ, ГП, Аква). Задачи координатору, выявление причин, варианты возврата.',
    source: 'Слайд 16: «Отвалы LTV (непродление 30 дней)»',
    currentStatus: 'absent',
    priority: 'critical',
    businessImpact:
      'Возврат 15-25% ушедших клиентов. Понимание реальных причин оттока. Снижение churn rate на 10-15%.',
    estimatedEffort: 'Sprint (2 недели)',
    category: 'retention',
    details: [
      'Автовыгрузка из 1С: клиенты с непродлением > 30 дней',
      'Разделение по зонам: ТЗ, ГП, Аква',
      'Автозадача на координатора с дедлайном 1 день',
      'Эскалация: если координатор не отработал → задача на руководителя',
      'Варианты отработки: смена тренера, мини-группы, перевод в другую воронку',
      'Статусы: Успех (продажа) → Отказ → Паркинг (вернуться через 3 мес.)',
      'Аналитика причин отвала по категориям',
    ],
  },
  {
    id: 'client-parking',
    name: 'Паркинг клиентов (отложенное возвращение)',
    description:
      'Статус «Паркинг» для отказавшихся клиентов с автоматическим повторным контактом через 1-3 месяца. Позволяет не терять клиента навсегда.',
    source: 'Слайд 12, 16: «Отказ (паркинг) → вернуться через 3 мес.»',
    currentStatus: 'absent',
    priority: 'high',
    businessImpact:
      'Дополнительные 5-10% конверсии из отказников. Системный подход к работе с «холодными» клиентами.',
    estimatedEffort: '1 неделя',
    category: 'retention',
    details: [
      'Новый статус в воронке: «Паркинг»',
      'Настраиваемый период: 1 / 2 / 3 месяца до повторного контакта',
      'Автозадача при наступлении даты повторного контакта',
      'История взаимодействий сохраняется',
      'Ограничение: максимум 2-3 попытки, затем → архив',
    ],
  },
  {
    id: 'freeze-management',
    name: 'Система заморозок абонементов',
    description:
      'Управление заморозками: платные и бесплатные (форс-мажор), продажа заморозок как услуги, оформление задолженности, погашение при возвращении.',
    source: 'Слайд 10: «Заморозка исключение плат/бесп. (форс-мажор)»',
    currentStatus: 'absent',
    priority: 'critical',
    businessImpact:
      'Удержание клиентов, которые уходят из-за временных обстоятельств. Дополнительный доход от платных заморозок. Снижение возвратов на 30-40%.',
    estimatedEffort: 'Sprint (2 недели)',
    category: 'retention',
    details: [
      'Типы заморозок: платная / бесплатная (форс-мажор)',
      'Продажа заморозки с оформлением задолженности в 1С',
      'Погашение задолженности при возвращении: на рецепции или через приложение (Л/С)',
      'Аналитика: конверсия звонков → заморозки → возврат в клуб',
      'Таблица отчётности: кол-во, суммы задолженности, оплата',
      'Автозадача при окончании заморозки — напоминание о возвращении',
    ],
  },
  {
    id: 'sleeping-extended',
    name: 'Расширенная работа с прогульщиками (автоворонка)',
    description:
      'Текущий модуль «Спящие клиенты» покрывает только выявление. Нужна полная автоматизированная воронка: автозадача → звонок → заморозка/продажа → погашение.',
    source: 'Слайд 10-11: «Прогульщики (от 1 месяца) — база для продажи заморозок»',
    currentStatus: 'partial',
    priority: 'high',
    businessImpact:
      'Реактивация 20-30% прогульщиков. Продление абонементов. Увеличение выручки за счёт продажи заморозок.',
    estimatedEffort: '1 неделя (расширение существующего модуля)',
    category: 'retention',
    details: [
      'Автозадача при непосещении 30 дней (сейчас только список)',
      'Воронка: Задача → Звонок → Заморозка/Продажа → Оплата',
      'Распределение по зонам ответственности: СКК → Рецепция',
      'Конверсионная таблица: звонки → задолженности → оплата',
      'Интеграция с 1С для оформления задолженности',
    ],
  },

  // ─── Контроль качества ───
  {
    id: 'quality-control-module',
    name: 'Модуль «Служба контроля качества» (СКК)',
    description:
      'Отдельный модуль для управления качеством сервиса: обходы, проверки, фотофиксация, контроль дежурств, температуры, клининга.',
    source: 'Слайды 2-3: «Основные задачи СКК»',
    currentStatus: 'absent',
    priority: 'medium',
    businessImpact:
      'Системный контроль качества сервиса. Доказательная база (фото). Предотвращение жалоб. Повышение лояльности.',
    estimatedEffort: '2 Sprint-а (4 недели)',
    category: 'quality',
    details: [
      'Чек-листы обходов по зонам комплекса',
      'Фотофиксация нарушений с привязкой к зоне',
      'Контроль дежурств сотрудников',
      'Мониторинг параметров (температура воды и т.д.)',
      'Контроль клининга',
      'Дашборд инцидентов и их статусов',
      'Отчёты по зонам и периодам',
    ],
  },
  {
    id: 'satisfaction-index',
    name: 'Индекс удовлетворённости клиентов (NPS/CSAT)',
    description:
      'Опросники для клиентов после тренировок, визитов, по email/push. Индекс удовлетворённости, анализ трендов, выявление проблемных зон.',
    source: 'Слайд 3: «Анализ опросника клиентов (индекс удовлетворённости)»',
    currentStatus: 'absent',
    priority: 'high',
    businessImpact:
      'Раннее выявление проблем до оттока. Метрика для KPI менеджеров. Benchmark между клубами на платформе.',
    estimatedEffort: 'Sprint (2 недели)',
    category: 'quality',
    details: [
      'NPS-опрос (0-10): «Рекомендуете ли?» + открытый комментарий',
      'CSAT-опрос после ВПТ, тренировки, визита',
      'Каналы: push-уведомление, email, in-app',
      'Дашборд: NPS score, тренды, promoters/detractors/passives',
      'Автозадача на менеджера при низкой оценке (< 7)',
      'Сегментация: по тренеру, зоне, типу услуги',
    ],
  },
  {
    id: 'negative-reviews',
    name: 'Отработка негативных отзывов',
    description:
      'Система управления жалобами и негативными отзывами: приём, эскалация, отработка, контроль сроков, аналитика.',
    source: 'Слайд 3: «Отработка негативных отзывов»',
    currentStatus: 'absent',
    priority: 'medium',
    businessImpact:
      'Снижение публичного негатива. Повышение лояльности через решение проблем. Управление репутацией.',
    estimatedEffort: '1 неделя',
    category: 'quality',
    details: [
      'Регистрация жалобы: источник (живой, звонок, соцсети, email)',
      'Автоприсвоение ответственного по зоне/категории',
      'SLA на отработку (24 часа — первый ответ, 72 часа — решение)',
      'Статусы: Новая → В работе → Решена → Закрыта',
      'Эскалация при просрочке SLA',
      'Аналитика: причины жалоб, частота, время решения',
    ],
  },
  {
    id: 'vpt-quality',
    name: 'Контроль качества ВПТ (вводных персональных тренировок)',
    description:
      'Оценка качества ВПТ клиентом. При некачественном ВПТ — автозадача на руководителя: сбор информации, подбор другого тренера, повторное ВПТ.',
    source: 'Слайд 15: «Некачественный ВПТ → задача на рук-ля СКК»',
    currentStatus: 'absent',
    priority: 'high',
    businessImpact:
      'Повышение конверсии ВПТ → постоянный клиент. Быстрое реагирование на плохой опыт. Контроль качества тренеров.',
    estimatedEffort: '1 неделя',
    category: 'quality',
    details: [
      'Оценка ВПТ клиентом (1-5 или NPS)',
      'При низкой оценке → автозадача на руководителя',
      'Действия: замена тренера, повторное ВПТ бесплатно',
      'Разделение по зонам: ВПТ ТЗ, ВПТ Аква, ВПТ ГП',
      'Статистика качества ВПТ по тренерам',
    ],
  },

  // ─── Финансы и возвраты ───
  {
    id: 'refund-management',
    name: 'Система управления возвратами',
    description:
      'Полный цикл возврата: приём заявления, блокировка карты, расчёт суммы, согласование с клиентом, операция возврата (нал/безнал/ЛС). Журнал и аналитика.',
    source: 'Слайды 7-8: «Анализ возвратов» и «Пути решения»',
    currentStatus: 'absent',
    priority: 'critical',
    businessImpact:
      'Максимизация удержания средств (предложение альтернатив вместо возврата). Прозрачный процесс. Аналитика причин возвратов для превентивных мер.',
    estimatedEffort: 'Sprint (2 недели)',
    category: 'finance',
    details: [
      'Типы возвратов: 100% возврат, 30% возврат, перевод на Л/С',
      'Приоритет: предложить перевод на Л/С перед возвратом денег',
      'Перечень услуг, оплачиваемых с Л/С (удержание средств)',
      'Блокировка карты в 1С при заявлении на возврат',
      'Расчёт суммы возврата с учётом использованных услуг',
      'Звонок клиенту для согласования суммы',
      'Журнал возвратов: по типу, сумма, дата, статус',
      'Аналитика: количество, суммы по типам, тренд',
      'Отчётность для бухгалтерии',
    ],
  },
  {
    id: 'personal-account',
    name: 'Личный счёт клиента (Л/С)',
    description:
      'Внутренний баланс клиента в системе. Пополнение, оплата услуг с Л/С, возврат средств на Л/С вместо вывода. Оплата задолженностей через мобильное приложение.',
    source: 'Слайды 7-8, 10: «Оплата с Л/С», «Оплата через приложение с Л/С»',
    currentStatus: 'absent',
    priority: 'high',
    businessImpact:
      'Удержание 30-50% средств при запросах на возврат. Удобство оплаты для клиента. Дополнительный инструмент лояльности.',
    estimatedEffort: 'Sprint (2 недели)',
    category: 'finance',
    details: [
      'Баланс Л/С в карточке клиента',
      'Пополнение: оплата на рецепции, перевод вместо возврата',
      'Списание: оплата услуг, заморозок, доп. тренировок',
      'История операций по Л/С',
      'Оплата задолженности через мобильное приложение',
      'Ограничения: Л/С ≠ реальные деньги, невыводимый при определённых условиях',
    ],
  },

  // ─── Воронки и конверсия ───
  {
    id: 'fitness-testing-funnel',
    name: 'Воронка фитнес-тестирования (ФТ)',
    description:
      'Полная воронка фитнес-тестирования: запись, проведение, результат (прибыл/не прибыл), подбор тренера, продажа ПТ, повторный звонок через 1 мес. при отказе.',
    source: 'Слайды 12-14: «ФТ — фитнес-тестирование: ключ к безопасным тренировкам»',
    currentStatus: 'absent',
    priority: 'high',
    businessImpact:
      'Конверсия ФТ → ПТ = основной источник дохода от персональных тренировок. Системный подход к первичной работе с клиентом.',
    estimatedEffort: 'Sprint (2 недели)',
    category: 'funnel',
    details: [
      'Автозадача на сервис-менеджера после активации карты',
      'Запись на ФТ: выбор времени (утро/обед/вечер/весь день)',
      'Направление: Плавание / Сайкл / Похудение и т.д.',
      'Статусы ФТ: записан → прибыл / не прибыл',
      'После ФТ → задача на фитнес-менеджера: подбор тренера',
      'Результат: Успех (сделка) → Отказ (повторный звонок через 1 мес.) → Паркинг',
      'Зоны ответственности: СКК → Фитнес-врач → Фитнес-менеджер → Рецепция',
      'Конверсия ФТ → ПТ по тренерам и зонам',
    ],
  },
  {
    id: 'vpt-funnel',
    name: 'Воронка вводных тренировок (ВПТ)',
    description:
      'Управление вводными тренировками: заявка → распределение по зонам (ТЗ/Аква/ГП) → проведение → оценка качества → продажа ПТ.',
    source: 'Слайды 5, 15: «ВПТ ТЗ, ВПТ Аква, ВПТ ГП»',
    currentStatus: 'partial',
    priority: 'high',
    businessImpact:
      'ВПТ — первый контакт клиента с тренером. Высокое качество ВПТ = высокая конверсия в ПТ. Разделение по зонам = специализация.',
    estimatedEffort: '1 неделя (расширение модуля расписания)',
    category: 'funnel',
    details: [
      'Типы ВПТ: ТЗ (тренажёрный зал), Аква, ГП (групповые программы)',
      'Источник заявки: рецепция, отдел продаж, фитнес-врач, автозадача после активации',
      'Сбор информации: время (утро/обед/вечер), направление, цели',
      'Создание «сделки» в CRM при записи на ВПТ',
      'Контроль проведения: проведён / не пришёл',
      'Оценка качества ВПТ клиентом',
      'При некачественном ВПТ → повторный ВПТ с другим тренером',
    ],
  },
  {
    id: 'auto-tasks',
    name: 'Система автозадач по бизнес-событиям',
    description:
      'Автоматическое создание задач при наступлении бизнес-событий: активация карты, 30 дней без визита, непродление, низкая оценка, окончание заморозки.',
    source: 'Слайды 10, 12, 16: «автозадача через 1 мес», «автозадача»',
    currentStatus: 'partial',
    priority: 'high',
    businessImpact:
      'Ни один клиент не «проваливается» между процессами. Автоматизация рутины менеджеров. Гарантия отработки каждого триггера.',
    estimatedEffort: 'Sprint (2 недели)',
    category: 'funnel',
    details: [
      'Триггеры: активация карты → ФТ, 30 дней без визита → прогульщик',
      'Непродление 30 дней → отвал LTV',
      'Низкая оценка ВПТ → повторный ВПТ',
      'Окончание заморозки → звонок возвращения',
      'Отказ от ПТ → повторный звонок через 1 мес.',
      'Настраиваемые шаблоны задач для каждого триггера',
      'Назначение ответственного по правилам (координатор, менеджер, тренер)',
      'Эскалация при неотработке в срок',
    ],
  },

  // ─── Коммуникации ───
  {
    id: 'conflict-management',
    name: 'Конфликт-менеджмент (живой и удалённый)',
    description:
      'Регистрация и отработка конфликтных ситуаций: живые конфликты в клубе и удалённые (звонок, мессенджер, email). Эскалация, SLA, аналитика.',
    source: 'Слайд 3: «Разбор живого конфликта / удалённого конфликта»',
    currentStatus: 'absent',
    priority: 'medium',
    businessImpact:
      'Быстрое урегулирование = сохранение клиента. Снижение публичного негатива. Обучение персонала на основе типичных конфликтов.',
    estimatedEffort: '1 неделя',
    category: 'communication',
    details: [
      'Типы: живой конфликт (в клубе) / удалённый (звонок, мессенджер)',
      'Быстрая регистрация: зона, участники, описание',
      'Статусы: Зарегистрирован → Отработка → Решён → Закрыт',
      'SLA: первый ответ за 1 час (живой) / 4 часа (удалённый)',
      'Эскалация при просрочке',
      'Категоризация: сервис, персонал, оборудование, финансы',
    ],
  },
  {
    id: 'client-chat',
    name: 'Клиентский чат (in-app)',
    description:
      'Встроенный чат для коммуникации с клиентами внутри мобильного приложения. Альтернатива WhatsApp/Telegram для сервисных вопросов.',
    source: 'Слайд 3: «Клиентский чат»',
    currentStatus: 'absent',
    priority: 'low',
    businessImpact:
      'Снижение нагрузки на телефон. Сохранение истории коммуникаций в CRM. Удобство для клиента.',
    estimatedEffort: '2 Sprint-а (4 недели)',
    category: 'communication',
    details: [
      'Чат в мобильном приложении клиента',
      'Панель менеджера в веб-админке',
      'Шаблоны быстрых ответов',
      'Вложения: фото, документы',
      'Push-уведомления о новых сообщениях',
      'История переписки в карточке клиента',
    ],
  },
  {
    id: 'ndfl-certificates',
    name: 'Справки НДФЛ и чеки',
    description:
      'Формирование и выдача справок НДФЛ (социальный налоговый вычет за фитнес) и кассовых чеков по запросу клиента.',
    source: 'Слайд 3: «Справки НДФЛ, Чек»',
    currentStatus: 'absent',
    priority: 'medium',
    businessImpact:
      'Юридическое соответствие (закон о налоговом вычете за фитнес с 2022). Повышение лояльности. Снижение нагрузки на бухгалтерию.',
    estimatedEffort: '1 неделя',
    category: 'finance',
    details: [
      'Генерация справки НДФЛ по данным клиента и оплатам',
      'Формат: PDF, печатная форма',
      'Выдача: email, скачивание в приложении, печать на рецепции',
      'Хранение в карточке клиента',
      'Массовая генерация за налоговый период',
    ],
  },
  {
    id: 'mini-groups',
    name: 'Мини-группы (малые групповые тренировки)',
    description:
      'Тренировки в мини-группах (2-5 человек) как промежуточный формат между ПТ и групповыми занятиями. Используется как инструмент удержания клиентов при отказе от ПТ.',
    source: 'Слайд 16: «Мини группы» как вариант удержания при отвале',
    currentStatus: 'absent',
    priority: 'medium',
    businessImpact:
      'Удержание клиентов, которым ПТ дорого. Увеличение загрузки тренера. Средний чек между ГП и ПТ.',
    estimatedEffort: '1 неделя (расширение модуля расписания)',
    category: 'funnel',
    details: [
      'Тип тренировки: мини-группа (2-5 чел.)',
      'Запись нескольких клиентов на одно занятие',
      'Ценообразование: дешевле ПТ, дороже ГП',
      'Минимальный порог участников для проведения',
      'Предложение мини-групп при отказе от ПТ (автоматически)',
    ],
  },
];

/* ─────────────── COMPARISON TABLE ─────────────── */

interface ComparisonRow {
  feature: string;
  skk: boolean;
  myfitcrm: boolean | 'partial';
  gap: 'critical' | 'significant' | 'minor' | 'none';
}

const comparisonTable: ComparisonRow[] = [
  { feature: 'Сервисные звонки сопровождения (3+/6+/9+/12+)', skk: true, myfitcrm: false, gap: 'critical' },
  { feature: 'Воронка отвалов LTV (churn management)', skk: true, myfitcrm: false, gap: 'critical' },
  { feature: 'Система заморозок абонементов', skk: true, myfitcrm: false, gap: 'critical' },
  { feature: 'Управление возвратами (3 типа + журнал)', skk: true, myfitcrm: false, gap: 'critical' },
  { feature: 'Личный счёт клиента (Л/С)', skk: true, myfitcrm: false, gap: 'significant' },
  { feature: 'Воронка фитнес-тестирования (ФТ)', skk: true, myfitcrm: false, gap: 'significant' },
  { feature: 'Воронка ВПТ (ТЗ / Аква / ГП)', skk: true, myfitcrm: 'partial', gap: 'significant' },
  { feature: 'Автозадачи по бизнес-событиям', skk: true, myfitcrm: 'partial', gap: 'significant' },
  { feature: 'Индекс удовлетворённости (NPS/CSAT)', skk: true, myfitcrm: false, gap: 'significant' },
  { feature: 'Контроль качества ВПТ', skk: true, myfitcrm: false, gap: 'significant' },
  { feature: 'Паркинг клиентов (отложенный контакт)', skk: true, myfitcrm: false, gap: 'significant' },
  { feature: 'Обходы комплекса с фотофиксацией', skk: true, myfitcrm: false, gap: 'minor' },
  { feature: 'Конфликт-менеджмент', skk: true, myfitcrm: false, gap: 'minor' },
  { feature: 'Отработка негативных отзывов', skk: true, myfitcrm: false, gap: 'minor' },
  { feature: 'Справки НДФЛ и чеки', skk: true, myfitcrm: false, gap: 'minor' },
  { feature: 'Клиентский чат (in-app)', skk: true, myfitcrm: false, gap: 'minor' },
  { feature: 'Мини-группы', skk: true, myfitcrm: false, gap: 'minor' },
  { feature: 'Контроль дежурств, температуры, клининга', skk: true, myfitcrm: false, gap: 'minor' },
  // MyFitCRM advantages
  { feature: 'Встроенная SIP-телефония', skk: false, myfitcrm: true, gap: 'none' },
  { feature: 'Multi-tenancy (RLS) для SaaS', skk: false, myfitcrm: true, gap: 'none' },
  { feature: 'Модульная лицензия', skk: false, myfitcrm: true, gap: 'none' },
  { feature: 'Webhooks + Open API', skk: false, myfitcrm: true, gap: 'none' },
  { feature: 'Email-рассылки (шаблоны, кампании)', skk: false, myfitcrm: true, gap: 'none' },
  { feature: '6-ролевая RBAC + координатор', skk: false, myfitcrm: true, gap: 'none' },
  { feature: '10 тем оформления (live preview)', skk: false, myfitcrm: true, gap: 'none' },
  { feature: '2FA (TOTP) для суперадмина', skk: false, myfitcrm: true, gap: 'none' },
];

/* ─────────────── COMPONENT ─────────────── */

export default function CompetitorAnalysisSkk() {
  const router = useRouter();
  const contentRef = useRef<HTMLDivElement>(null);

  const handleDownloadPdf = async () => {
    if (!contentRef.current) return;
    const html2canvas = (await import('html2canvas-pro')).default;
    const { jsPDF } = await import('jspdf');

    const canvas = await html2canvas(contentRef.current, {
      scale: 2,
      useCORS: true,
      logging: false,
    });

    const imgData = canvas.toDataURL('image/jpeg', 0.95);
    const pdf = new jsPDF('p', 'mm', 'a4');
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = pdf.internal.pageSize.getHeight();
    const imgWidth = pdfWidth - 20;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    let heightLeft = imgHeight;
    let position = 10;

    pdf.addImage(imgData, 'JPEG', 10, position, imgWidth, imgHeight);
    heightLeft -= pdfHeight;

    while (heightLeft > 0) {
      position = heightLeft - imgHeight + 10;
      pdf.addPage();
      pdf.addImage(imgData, 'JPEG', 10, position, imgWidth, imgHeight);
      heightLeft -= pdfHeight;
    }

    pdf.save('analysis-skk-missing-features.pdf');
  };

  const handleDownloadExcel = async () => {
    const XLSX = await import('xlsx');
    const wb = XLSX.utils.book_new();

    // Sheet 1: Missing features
    const featuresData = missingFeatures.map((f) => ({
      'ID': f.id,
      'Функционал': f.name,
      'Описание': f.description,
      'Категория': categories[f.category]?.name || f.category,
      'Статус в MyFitCRM': f.currentStatus === 'absent' ? 'Отсутствует' : f.currentStatus === 'partial' ? 'Частично' : 'Запланировано',
      'Приоритет': f.priority === 'critical' ? 'Критический' : f.priority === 'high' ? 'Высокий' : f.priority === 'medium' ? 'Средний' : 'Низкий',
      'Бизнес-эффект': f.businessImpact,
      'Оценка трудозатрат': f.estimatedEffort,
      'Источник в презентации': f.source,
    }));
    const ws1 = XLSX.utils.json_to_sheet(featuresData);
    ws1['!cols'] = [
      { wch: 20 }, { wch: 45 }, { wch: 60 }, { wch: 22 },
      { wch: 16 }, { wch: 14 }, { wch: 50 }, { wch: 22 }, { wch: 50 },
    ];
    XLSX.utils.book_append_sheet(wb, ws1, 'Недостающий функционал');

    // Sheet 2: Comparison
    const compData = comparisonTable.map((r) => ({
      'Функция': r.feature,
      'СКК Gagar1n': r.skk ? 'Да' : 'Нет',
      'MyFitCRM': r.myfitcrm === true ? 'Да' : r.myfitcrm === 'partial' ? 'Частично' : 'Нет',
      'Разрыв': r.gap === 'critical' ? 'Критический' : r.gap === 'significant' ? 'Значительный' : r.gap === 'minor' ? 'Минимальный' : 'Наше преимущество',
    }));
    const ws2 = XLSX.utils.json_to_sheet(compData);
    ws2['!cols'] = [{ wch: 45 }, { wch: 14 }, { wch: 14 }, { wch: 20 }];
    XLSX.utils.book_append_sheet(wb, ws2, 'Сравнительная таблица');

    XLSX.writeFile(wb, 'analysis-skk-missing-features.xlsx');
  };

  const criticalCount = missingFeatures.filter((f) => f.priority === 'critical').length;
  const highCount = missingFeatures.filter((f) => f.priority === 'high').length;
  const absentCount = missingFeatures.filter((f) => f.currentStatus === 'absent').length;
  const partialCount = missingFeatures.filter((f) => f.currentStatus === 'partial').length;

  const gapStatusColor = (status: 'absent' | 'partial' | 'planned') => {
    if (status === 'absent') return 'bg-red-100 text-red-700 border-red-200';
    if (status === 'partial') return 'bg-yellow-100 text-yellow-700 border-yellow-200';
    return 'bg-blue-100 text-blue-700 border-blue-200';
  };

  const priorityColor = (priority: 'critical' | 'high' | 'medium' | 'low') => {
    if (priority === 'critical') return 'bg-red-600 text-white';
    if (priority === 'high') return 'bg-orange-500 text-white';
    if (priority === 'medium') return 'bg-blue-500 text-white';
    return 'bg-gray-400 text-white';
  };

  const gapColor = (gap: string) => {
    if (gap === 'critical') return 'text-red-600 bg-red-50';
    if (gap === 'significant') return 'text-orange-600 bg-orange-50';
    if (gap === 'minor') return 'text-blue-600 bg-blue-50';
    return 'text-green-600 bg-green-50';
  };

  return (
    <div className="max-w-6xl mx-auto">
      {/* Header with actions */}
      <div className="flex items-center justify-between mb-6 print:hidden">
        <button
          onClick={() => router.push('/documents')}
          className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-900 transition-colors"
        >
          <ArrowLeft className="h-4 w-4" />
          Все документы
        </button>
        <div className="flex items-center gap-2">
          <button
            onClick={() => void handleDownloadExcel()}
            className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
          >
            <FileDown className="h-4 w-4" />
            Excel
          </button>
          <button
            onClick={() => void handleDownloadPdf()}
            className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
          >
            <FileDown className="h-4 w-4" />
            PDF
          </button>
          <button
            onClick={() => window.print()}
            className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg hover:bg-gray-800 transition-colors"
          >
            <Printer className="h-4 w-4" />
            Печать
          </button>
        </div>
      </div>

      {/* Content */}
      <div ref={contentRef} className="space-y-6">
        {/* Title card */}
        <div className="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 rounded-2xl p-8 text-white">
          <div className="flex items-start gap-4">
            <div className="bg-white/10 p-3 rounded-xl">
              <ClipboardList className="h-8 w-8 text-orange-400" />
            </div>
            <div className="flex-1">
              <h1 className="text-2xl font-bold mb-2">
                Анализ СКК — недостающий функционал MyFitCRM
              </h1>
              <p className="text-gray-300 text-sm leading-relaxed max-w-3xl">
                На основе презентации Службы контроля качества фитнес-парка Gagar1n
                выявлено <strong className="text-orange-400">{missingFeatures.length} функциональных блоков</strong>,
                отсутствующих или частично реализованных в MyFitCRM.
                Внедрение этих функций повысит retention, конверсию и удовлетворённость клиентов.
              </p>
              <div className="flex items-center gap-4 mt-4 text-xs text-gray-400">
                <span>Источник: {SOURCE}</span>
                <span>Обновлено: {LAST_UPDATE}</span>
              </div>
            </div>
          </div>
        </div>

        {/* Summary metrics */}
        <div className="grid grid-cols-4 gap-4">
          <div className="bg-red-50 border border-red-200 rounded-xl p-5">
            <div className="flex items-center gap-2 mb-1">
              <AlertTriangle className="h-5 w-5 text-red-500" />
              <span className="text-2xl font-bold text-red-700">{criticalCount}</span>
            </div>
            <span className="text-xs text-red-600 font-medium">Критический приоритет</span>
            <p className="text-xs text-red-500 mt-1">Без них нельзя конкурировать</p>
          </div>
          <div className="bg-orange-50 border border-orange-200 rounded-xl p-5">
            <div className="flex items-center gap-2 mb-1">
              <Zap className="h-5 w-5 text-orange-500" />
              <span className="text-2xl font-bold text-orange-700">{highCount}</span>
            </div>
            <span className="text-xs text-orange-600 font-medium">Высокий приоритет</span>
            <p className="text-xs text-orange-500 mt-1">Значительное конкурентное преимущество</p>
          </div>
          <div className="bg-gray-50 border border-gray-200 rounded-xl p-5">
            <div className="flex items-center gap-2 mb-1">
              <XCircle className="h-5 w-5 text-gray-500" />
              <span className="text-2xl font-bold text-gray-700">{absentCount}</span>
            </div>
            <span className="text-xs text-gray-600 font-medium">Полностью отсутствует</span>
            <p className="text-xs text-gray-500 mt-1">Нет реализации в MyFitCRM</p>
          </div>
          <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-5">
            <div className="flex items-center gap-2 mb-1">
              <RefreshCcw className="h-5 w-5 text-yellow-600" />
              <span className="text-2xl font-bold text-yellow-700">{partialCount}</span>
            </div>
            <span className="text-xs text-yellow-600 font-medium">Частично реализовано</span>
            <p className="text-xs text-yellow-500 mt-1">Требует расширения</p>
          </div>
        </div>

        {/* Feature cards by category */}
        {Object.entries(categories).map(([categoryKey, cat]) => {
          const categoryFeatures = missingFeatures.filter((f) => f.category === categoryKey);
          if (categoryFeatures.length === 0) return null;

          return (
            <div key={categoryKey} className={cn('rounded-xl border p-6', cat.borderColor, cat.bgColor)}>
              <div className="flex items-center gap-3 mb-5">
                <div className={cn('p-2 rounded-lg', cat.bgColor, cat.color)}>
                  {cat.icon}
                </div>
                <h2 className={cn('text-lg font-bold', cat.color)}>{cat.name}</h2>
                <span className={cn('text-xs px-2 py-0.5 rounded-full', cat.bgColor, cat.color, 'border', cat.borderColor)}>
                  {categoryFeatures.length} функций
                </span>
              </div>

              <div className="space-y-4">
                {categoryFeatures.map((feature) => (
                  <div key={feature.id} className="bg-white rounded-lg border border-gray-200 p-5">
                    {/* Feature header */}
                    <div className="flex items-start justify-between gap-4 mb-3">
                      <h3 className="text-sm font-bold text-gray-900 flex-1">
                        {feature.name}
                      </h3>
                      <div className="flex items-center gap-2 shrink-0">
                        <span className={cn('text-xs px-2 py-0.5 rounded-full border', gapStatusColor(feature.currentStatus))}>
                          {feature.currentStatus === 'absent' ? 'Отсутствует' : feature.currentStatus === 'partial' ? 'Частично' : 'Запланировано'}
                        </span>
                        <span className={cn('text-xs px-2 py-0.5 rounded-full font-medium', priorityColor(feature.priority))}>
                          {feature.priority === 'critical' ? 'Критический' : feature.priority === 'high' ? 'Высокий' : feature.priority === 'medium' ? 'Средний' : 'Низкий'}
                        </span>
                      </div>
                    </div>

                    {/* Description */}
                    <p className="text-sm text-gray-600 mb-3 leading-relaxed">
                      {feature.description}
                    </p>

                    {/* Source */}
                    <div className="text-xs text-gray-400 mb-3 italic">
                      {feature.source}
                    </div>

                    {/* Details */}
                    <div className="grid grid-cols-2 gap-4 mb-3">
                      <div>
                        <h4 className="text-xs font-semibold text-gray-500 uppercase mb-2">Что нужно реализовать</h4>
                        <ul className="space-y-1">
                          {feature.details.map((d, i) => (
                            <li key={i} className="text-xs text-gray-600 flex items-start gap-1.5">
                              <CheckCircle2 className="h-3 w-3 text-gray-400 shrink-0 mt-0.5" />
                              {d}
                            </li>
                          ))}
                        </ul>
                      </div>
                      <div className="space-y-3">
                        <div>
                          <h4 className="text-xs font-semibold text-gray-500 uppercase mb-1">Бизнес-эффект</h4>
                          <p className="text-xs text-gray-600 leading-relaxed">{feature.businessImpact}</p>
                        </div>
                        <div>
                          <h4 className="text-xs font-semibold text-gray-500 uppercase mb-1">Оценка трудозатрат</h4>
                          <p className="text-xs font-medium text-gray-700">{feature.estimatedEffort}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          );
        })}

        {/* Comparison table */}
        <div className="bg-white rounded-xl border border-gray-200 p-6">
          <div className="flex items-center gap-3 mb-5">
            <div className="bg-gray-100 p-2 rounded-lg">
              <BarChart3 className="h-5 w-5 text-gray-700" />
            </div>
            <h2 className="text-lg font-bold text-gray-900">Сравнительная таблица: СКК Gagar1n vs MyFitCRM</h2>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="bg-gray-50">
                  <th className="text-left p-3 font-semibold text-gray-700 rounded-tl-lg">Функция</th>
                  <th className="text-center p-3 font-semibold text-gray-700 w-28">СКК Gagar1n</th>
                  <th className="text-center p-3 font-semibold text-gray-700 w-28">MyFitCRM</th>
                  <th className="text-center p-3 font-semibold text-gray-700 w-36 rounded-tr-lg">Разрыв</th>
                </tr>
              </thead>
              <tbody>
                {comparisonTable.map((row, i) => (
                  <tr
                    key={i}
                    className={cn(
                      'border-t border-gray-100',
                      row.gap === 'none' ? 'bg-green-50/50' : '',
                    )}
                  >
                    <td className="p-3 text-gray-700">{row.feature}</td>
                    <td className="p-3 text-center">
                      {row.skk ? (
                        <CheckCircle2 className="h-5 w-5 text-green-500 mx-auto" />
                      ) : (
                        <XCircle className="h-5 w-5 text-gray-300 mx-auto" />
                      )}
                    </td>
                    <td className="p-3 text-center">
                      {row.myfitcrm === true ? (
                        <CheckCircle2 className="h-5 w-5 text-green-500 mx-auto" />
                      ) : row.myfitcrm === 'partial' ? (
                        <RefreshCcw className="h-5 w-5 text-yellow-500 mx-auto" />
                      ) : (
                        <XCircle className="h-5 w-5 text-red-400 mx-auto" />
                      )}
                    </td>
                    <td className="p-3 text-center">
                      <span className={cn('text-xs px-2 py-1 rounded-full font-medium', gapColor(row.gap))}>
                        {row.gap === 'critical'
                          ? 'Критический'
                          : row.gap === 'significant'
                            ? 'Значительный'
                            : row.gap === 'minor'
                              ? 'Минимальный'
                              : 'Наше преимущество'}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Implementation roadmap */}
        <div className="bg-white rounded-xl border border-gray-200 p-6">
          <div className="flex items-center gap-3 mb-5">
            <div className="bg-orange-100 p-2 rounded-lg">
              <TrendingUp className="h-5 w-5 text-orange-700" />
            </div>
            <h2 className="text-lg font-bold text-gray-900">Рекомендуемый план внедрения</h2>
          </div>

          <div className="space-y-4">
            {/* Phase 1 */}
            <div className="bg-red-50 border border-red-200 rounded-xl p-5">
              <h3 className="text-sm font-bold text-red-900 mb-1">
                Фаза 1 — Критичные (Sprint 9-10)
              </h3>
              <p className="text-xs text-red-600 mb-3">
                Без этих функций фитнес-клубы не смогут полноценно управлять retention и финансами
              </p>
              <div className="grid grid-cols-2 gap-2">
                {missingFeatures
                  .filter((f) => f.priority === 'critical')
                  .map((f) => (
                    <div key={f.id} className="flex items-start gap-2 text-sm text-red-800">
                      <AlertTriangle className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
                      <div>
                        <span className="font-medium">{f.name}</span>
                        <span className="text-red-500 text-xs ml-2">({f.estimatedEffort})</span>
                      </div>
                    </div>
                  ))}
              </div>
            </div>

            {/* Phase 2 */}
            <div className="bg-orange-50 border border-orange-200 rounded-xl p-5">
              <h3 className="text-sm font-bold text-orange-900 mb-1">
                Фаза 2 — Высокий приоритет (Sprint 11-12)
              </h3>
              <p className="text-xs text-orange-600 mb-3">
                Расширение воронок, системы автозадач и обратной связи от клиентов
              </p>
              <div className="grid grid-cols-2 gap-2">
                {missingFeatures
                  .filter((f) => f.priority === 'high')
                  .map((f) => (
                    <div key={f.id} className="flex items-start gap-2 text-sm text-orange-800">
                      <Zap className="h-4 w-4 text-orange-500 shrink-0 mt-0.5" />
                      <div>
                        <span className="font-medium">{f.name}</span>
                        <span className="text-orange-500 text-xs ml-2">({f.estimatedEffort})</span>
                      </div>
                    </div>
                  ))}
              </div>
            </div>

            {/* Phase 3 */}
            <div className="bg-blue-50 border border-blue-200 rounded-xl p-5">
              <h3 className="text-sm font-bold text-blue-900 mb-1">
                Фаза 3 — Средний приоритет (Sprint 13+)
              </h3>
              <p className="text-xs text-blue-600 mb-3">
                Контроль качества, коммуникации, дополнительные сервисы
              </p>
              <div className="grid grid-cols-2 gap-2">
                {missingFeatures
                  .filter((f) => f.priority === 'medium' || f.priority === 'low')
                  .map((f) => (
                    <div key={f.id} className="flex items-start gap-2 text-sm text-blue-800">
                      <Lightbulb className="h-4 w-4 text-blue-500 shrink-0 mt-0.5" />
                      <div>
                        <span className="font-medium">{f.name}</span>
                        <span className="text-blue-500 text-xs ml-2">({f.estimatedEffort})</span>
                      </div>
                    </div>
                  ))}
              </div>
            </div>
          </div>
        </div>

        {/* Conclusions */}
        <div className="space-y-4">
          {/* Our existing advantages */}
          <div className="bg-green-50 border border-green-200 rounded-xl p-5">
            <h3 className="text-sm font-bold text-green-900 mb-2">
              Преимущества MyFitCRM, которых нет у СКК Gagar1n
            </h3>
            <p className="text-xs text-green-600 mb-3">
              MyFitCRM уже превосходит процессы СКК в следующих областях:
            </p>
            <div className="grid grid-cols-2 gap-2">
              {[
                'Встроенная SIP-телефония (CallerID клуба) — у СКК только обычные звонки',
                'Multi-tenancy SaaS — масштабирование на любое кол-во клубов',
                'Модульная лицензия — клуб платит только за нужное',
                'Webhooks + Open API — интеграция с любыми внешними системами',
                'Email-рассылки (5 автоматических + ручные кампании)',
                '6-ролевая RBAC — гибкая система прав (у СКК — ручное разграничение)',
                '10 тем оформления с live preview',
                '2FA (TOTP) — безопасность уровня enterprise',
              ].map((item, i) => (
                <div key={i} className="flex items-start gap-2 text-sm text-green-800">
                  <CheckCircle2 className="h-4 w-4 text-green-600 shrink-0 mt-0.5" />
                  {item}
                </div>
              ))}
            </div>
          </div>

          {/* Final verdict */}
          <div className="bg-gradient-to-r from-gray-900 to-gray-800 rounded-xl p-6 text-white">
            <h3 className="text-sm font-bold mb-3">Итоговые выводы</h3>
            <div className="space-y-3 text-sm text-gray-200 leading-relaxed">
              <p>
                Анализ процессов СКК фитнес-парка Gagar1n выявил <strong className="text-white">{missingFeatures.length} функциональных блоков</strong>,
                которые активно используются в реальной работе фитнес-клуба, но отсутствуют в MyFitCRM.
              </p>
              <p>
                <strong className="text-orange-400">Ключевой вывод:</strong> основной разрыв — в области <strong className="text-white">удержания клиентов (retention)</strong>.
                СКК работает с 5 воронками удержания (сервисные звонки, прогульщики, отвалы LTV, заморозки, паркинг),
                тогда как MyFitCRM покрывает только одну (спящие клиенты) и то частично.
              </p>
              <p>
                <strong className="text-orange-400">Бизнес-эффект от внедрения:</strong> retention +20-30%,
                возврат 15-25% ушедших клиентов, снижение возвратов на 30-40% за счёт заморозок и Л/С,
                повышение конверсии ВПТ → ПТ через систему фитнес-тестирования.
              </p>
              <p>
                <strong className="text-orange-400">Оценка трудозатрат:</strong> внедрение всех {criticalCount} критичных функций
                потребует ~{criticalCount * 2} недель (Sprint 9-10). Всех {missingFeatures.length} функций — ~16-20 недель (Sprint 9-13).
              </p>
              <p className="text-xs text-gray-400 mt-3">
                При этом MyFitCRM сохраняет свои архитектурные преимущества (SaaS, multi-tenancy, SIP, API, модульность),
                которые невозможно воспроизвести в ручных процессах СКК. Комбинация retention-функционала СКК с технологической
                платформой MyFitCRM создаст продукт, не имеющий аналогов на российском рынке.
              </p>
            </div>
          </div>
        </div>

      </div>
    </div>
  );
}
