'use client';

import { useRef } from 'react';
import { useRouter } from 'next/navigation';
import { ArrowLeft, FileDown, Printer, Table2, GitBranch, CheckCircle2, Clock, AlertCircle } from 'lucide-react';
import { cn } from '@/lib/cn';

const LAST_UPDATE = '21 февраля 2026';

interface Sprint {
  id: number;
  name: string;
  subtitle: string;
  percent: number;
  color: string;
  tasks: { title: string; done: boolean }[];
}

const sprints: Sprint[] = [
  {
    id: 1, name: 'Sprint 1', subtitle: 'Фундамент + Multi-tenancy', percent: 95, color: '#3B82F6',
    tasks: [
      { title: 'Monorepo (Turborepo + pnpm)', done: true },
      { title: 'Prisma-схема (25+ таблиц)', done: true },
      { title: 'Auth (JWT, 6 ролей, API-ключи, 2FA/TOTP)', done: true },
      { title: 'TenantStrategy + RLS-политики (30+ таблиц)', done: true },
      { title: 'Модульная система (club_modules + ModuleGuard)', done: true },
      { title: 'ProvisioningService (RLS)', done: true },
      { title: 'Docker Compose (PostgreSQL + Redis)', done: true },
      { title: 'CI pipeline (GitHub Actions)', done: false },
    ],
  },
  {
    id: 2, name: 'Sprint 2', subtitle: 'Клиенты + Главная', percent: 90, color: '#8B5CF6',
    tasks: [
      { title: 'CRUD клиентов (список, карточка, поиск, фильтры)', done: true },
      { title: 'Mobile: авторизация (login, JWT storage)', done: true },
      { title: 'Mobile: главная, клиенты с API', done: true },
      { title: 'Web: рецепция (запись на ВПТ, поиск)', done: true },
      { title: 'API-клиент (OpenAPI → TS)', done: false },
    ],
  },
  {
    id: 3, name: 'Sprint 3', subtitle: 'Расписание + Воронка', percent: 85, color: '#EC4899',
    tasks: [
      { title: 'Расписание (CRUD + отмена/перенос/повтор)', done: true },
      { title: 'Воронка (этапы NEW→ASSIGNED→CONDUCTED→REGULAR)', done: true },
      { title: 'Mobile: расписание (календарь, создание)', done: true },
      { title: 'Mobile: воронка (action screen)', done: true },
      { title: 'Push-уведомления (FCM + APNs)', done: false },
    ],
  },
  {
    id: 4, name: 'Sprint 4', subtitle: 'Статистика + Продажи = MVP', percent: 80, color: '#F59E0B',
    tasks: [
      { title: 'Статистика, конверсия воронки', done: true },
      { title: 'Рейтинг тренеров', done: true },
      { title: 'Продажи, реализация, долги', done: true },
      { title: 'Mobile: статистика, рейтинг, продажи', done: true },
      { title: 'Сквозное тестирование MVP', done: false },
    ],
  },
  {
    id: 5, name: 'Sprint 5', subtitle: 'Координатор + SIP + Спящие', percent: 75, color: '#10B981',
    tasks: [
      { title: 'Координатор: распределение, статистика', done: true },
      { title: 'SIP-клиент (UI экраны)', done: true },
      { title: 'SIP: WebRTC интеграция', done: false },
      { title: 'Спящие клиенты', done: true },
      { title: 'График работы (синхронизация 1С)', done: false },
    ],
  },
  {
    id: 6, name: 'Sprint 6', subtitle: 'Веб-отчёты + Панель клуба', percent: 70, color: '#06B6D4',
    tasks: [
      { title: 'Web: 3 отчёта (текущее состояние, статистика, аналитика)', done: true },
      { title: 'Панель админа клуба: сотрудники', done: true },
      { title: 'Панель админа клуба: департаменты, залы', done: true },
      { title: 'Панель админа клуба: каталог услуг', done: true },
      { title: 'Панель админа клуба: интеграции, настройки', done: false },
    ],
  },
  {
    id: 7, name: 'Sprint 7', subtitle: 'Суперадмин + Webhooks + Beta', percent: 65, color: '#EF4444',
    tasks: [
      { title: 'Панель суперадмина (дашборд, клубы, лицензии, мониторинг)', done: true },
      { title: 'Webhooks (12 типов событий, HMAC-SHA256, retry)', done: true },
      { title: 'Интеграция 1С (полная)', done: false },
      { title: 'Мониторинг + аудит лог', done: true },
      { title: 'Beta-тестирование', done: false },
    ],
  },
  {
    id: 8, name: 'Sprint 8', subtitle: 'Полировка + Release', percent: 50, color: '#6366F1',
    tasks: [
      { title: 'E2E тесты (Playwright) — 144 теста', done: true },
      { title: 'Фикс dashboard 400 + cursor-пагинация', done: true },
      { title: 'Фикс audit_logs 500 (SQL колонки)', done: true },
      { title: 'Документы: PDF/Excel/Печать, print CSS', done: true },
      { title: 'Telegram бот: /document команда', done: true },
      { title: 'Оптимизация производительности', done: false },
      { title: 'Аудит безопасности', done: false },
      { title: 'App Store + Google Play', done: false },
      { title: 'Пилотное внедрение', done: false },
    ],
  },
  {
    id: 9, name: 'Sprint 9', subtitle: 'Менеджер по продажам (7-я роль)', percent: 0, color: '#10B981',
    tasks: [
      { title: 'Enum SALES_MANAGER в Prisma + roles.decorator.ts', done: false },
      { title: 'Обновить @Roles() на существующих эндпоинтах', done: false },
      { title: 'CRUD sales/targets (план продаж)', done: false },
      { title: 'CRUD sales/discounts (скидки)', done: false },
      { title: 'Stats: sales/summary, by-trainer, by-service, trends', done: false },
      { title: 'Prisma-модели: SalesTarget, Discount + миграция', done: false },
      { title: 'Web: дашборд, план продаж, аналитика, KPI экраны', done: false },
      { title: 'Mobile: дашборд, план продаж, аналитика, KPI экраны', done: false },
      { title: 'E2E тесты: RBAC, CRUD, экраны', done: false },
      { title: 'Документация: CLAUDE.md, docs/dev, docs/user', done: false },
    ],
  },
];

interface TodoItem {
  title: string;
  priority: 'high' | 'medium' | 'low';
  sprint: string;
}

const todoItems: TodoItem[] = [
  { title: 'CI/CD pipeline (GitHub Actions)', priority: 'high', sprint: 'Sprint 1' },
  { title: 'Push-уведомления — FCM + APNs интеграция', priority: 'high', sprint: 'Sprint 3' },
  { title: 'SIP WebRTC — интеграция с SIP-сервером', priority: 'high', sprint: 'Sprint 5' },
  { title: 'Синхронизация графика с 1С', priority: 'medium', sprint: 'Sprint 5' },
  { title: 'Панель клуба: интеграции и настройки', priority: 'medium', sprint: 'Sprint 6' },
  { title: 'Полная интеграция 1С (REST/SOAP)', priority: 'high', sprint: 'Sprint 7' },
  { title: 'Beta-тестирование с пилотным клубом', priority: 'medium', sprint: 'Sprint 7' },
  { title: 'Оптимизация производительности', priority: 'medium', sprint: 'Sprint 8' },
  { title: 'Аудит безопасности', priority: 'high', sprint: 'Sprint 8' },
  { title: 'Публикация в App Store / Google Play', priority: 'low', sprint: 'Sprint 8' },
  { title: 'OpenAPI → TS клиент генерация', priority: 'low', sprint: 'Sprint 2' },
  { title: 'Сквозное тестирование MVP-потока', priority: 'medium', sprint: 'Sprint 4' },
  { title: 'Роль SALES_MANAGER: enum + RBAC + Prisma', priority: 'high', sprint: 'Sprint 9' },
  { title: 'CRUD: план продаж + скидки', priority: 'high', sprint: 'Sprint 9' },
  { title: 'Stats API: аналитика продаж (5 эндпоинтов)', priority: 'high', sprint: 'Sprint 9' },
  { title: 'Web + Mobile: 10 экранов менеджера по продажам', priority: 'high', sprint: 'Sprint 9' },
  { title: 'E2E тесты + документация роли', priority: 'medium', sprint: 'Sprint 9' },
];

const doneLog = [
  { date: '20 февраля 2026', items: [
    'Документы: скачать PDF (jspdf + html2canvas), Excel (xlsx), печать',
    'Print CSS: сайдбар скрыт при печати, полная ширина контента',
    'Telegram бот: команда /document для генерации документов',
    'Раздел «Документы» в суперадмин-панели + документ dev-status',
    'E2E тесты: 144 теста проходят (Playwright)',
    'Фикс dashboard 400: limit=500 → cursor-based пагинация (fetchAll)',
    'Фикс audit_logs 500: SQL-запрос использовал несуществующие колонки',
    'Фикс auth: ON CONFLICT для refresh_tokens',
    'GET /v1/auth/profile эндпоинт',
    'Лендинг перенесён на myfitcrm.ru',
    'web-admin перенесён на app.myfitcrm.ru',
    'SSL-сертификат расширен (app.myfitcrm.ru)',
    'Раздел «Разработка» в суперадмин-панели',
    'E2E тесты admin: pagination limits, RBAC, audit-logs, search',
    'API root redirect на /api/docs',
  ]},
  { date: '19 февраля 2026', items: [
    'Лендинг (Next.js): Hero, Features, Roles, Pricing, FAQ, CTA',
    'Nginx: маршрутизация myfitcrm.ru, api., app., platform.',
    'PM2 ecosystem: все 6 сервисов',
  ]},
  { date: '18 февраля 2026', items: [
    'Mobile: экран уведомлений, PDF отчёты',
    'Expo SDK 54, AuthGuard веб-панелей',
    'CRUD-диалоги веб-панелей (клубы, лицензии)',
  ]},
  { date: '17 февраля 2026', items: [
    'BullMQ очереди для уведомлений и webhooks',
    '2FA/TOTP для суперадмина',
    'Audit log (журнал действий)',
    'Rate limiting (1000 req/min)',
    '310 unit-тестов',
  ]},
  { date: '15 февраля 2026', items: [
    'Mobile Sprint 5: Expo SDK 54, Clients/Home экраны с API',
    'Barrel exports для компонентов',
    'Funnel action screen (воронка)',
  ]},
  { date: '13 февраля 2026', items: [
    'Backend: auth, funnel, schedule, stats, clients сервисы',
    'Mobile: auth, funnel экраны',
    'Prisma schema: 25 таблиц, seed data',
  ]},
];

const priorityColors = {
  high: { bg: 'bg-red-50', text: 'text-red-700', border: 'border-red-200', label: 'Высокий' },
  medium: { bg: 'bg-orange-50', text: 'text-orange-700', border: 'border-orange-200', label: 'Средний' },
  low: { bg: 'bg-blue-50', text: 'text-blue-700', border: 'border-blue-200', label: 'Низкий' },
};

export default function DevStatusDocument() {
  const router = useRouter();
  const contentRef = useRef<HTMLDivElement>(null);
  const totalPercent = Math.round(sprints.reduce((s, sp) => s + sp.percent, 0) / sprints.length);
  const totalTasks = sprints.reduce((s, sp) => s + sp.tasks.length, 0);
  const doneTasks = sprints.reduce((s, sp) => s + sp.tasks.filter((t) => t.done).length, 0);

  const handleDownloadPdf = async () => {
    const el = contentRef.current;
    if (!el) return;
    const html2canvas = (await import('html2canvas-pro')).default;
    const { jsPDF } = await import('jspdf');
    const canvas = await html2canvas(el, { scale: 2, useCORS: true });
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF('p', 'mm', 'a4');
    const pdfW = pdf.internal.pageSize.getWidth();
    const pdfH = pdf.internal.pageSize.getHeight();
    const imgW = pdfW - 16;
    const imgH = (canvas.height * imgW) / canvas.width;
    let y = 8;
    let page = 0;
    while (y < imgH + 8) {
      if (page > 0) pdf.addPage();
      pdf.addImage(imgData, 'PNG', 8, 8 - y + 8 * (page === 0 ? 0 : 1), imgW, imgH);
      y += pdfH - 16;
      page++;
    }
    pdf.save('fitcrm-dev-status.pdf');
  };

  const handleDownloadExcel = async () => {
    const XLSX = await import('xlsx');
    const wb = XLSX.utils.book_new();
    // Sprint summary sheet
    const summaryData = sprints.map((sp) => ({
      'Спринт': sp.name,
      'Содержание': sp.subtitle,
      'Прогресс (%)': sp.percent,
      'Выполнено': sp.tasks.filter((t) => t.done).length,
      'Всего задач': sp.tasks.length,
    }));
    const ws1 = XLSX.utils.json_to_sheet(summaryData);
    ws1['!cols'] = [{ wch: 12 }, { wch: 40 }, { wch: 14 }, { wch: 12 }, { wch: 12 }];
    XLSX.utils.book_append_sheet(wb, ws1, 'Спринты');
    // Tasks detail sheet
    const tasksData = sprints.flatMap((sp) =>
      sp.tasks.map((t) => ({
        'Спринт': sp.name,
        'Задача': t.title,
        'Статус': t.done ? 'Выполнено' : 'В процессе',
      })),
    );
    const ws2 = XLSX.utils.json_to_sheet(tasksData);
    ws2['!cols'] = [{ wch: 12 }, { wch: 50 }, { wch: 14 }];
    XLSX.utils.book_append_sheet(wb, ws2, 'Задачи');
    // TODO sheet
    const todoData = todoItems.map((item) => ({
      'Задача': item.title,
      'Приоритет': priorityColors[item.priority].label,
      'Спринт': item.sprint,
    }));
    const ws3 = XLSX.utils.json_to_sheet(todoData);
    ws3['!cols'] = [{ wch: 50 }, { wch: 14 }, { wch: 12 }];
    XLSX.utils.book_append_sheet(wb, ws3, 'TODO');
    XLSX.writeFile(wb, 'fitcrm-dev-status.xlsx');
  };

  return (
    <div>
      <button
        onClick={() => router.push('/documents')}
        className="flex items-center gap-2 text-sm text-muted hover:text-gray-900 mb-6 transition-colors"
      >
        <ArrowLeft className="h-4 w-4" />
        Все документы
      </button>

      <div ref={contentRef} className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
        {/* Header */}
        <div className="px-8 py-6 border-b border-border">
          <div className="flex items-start justify-between">
            <div className="flex items-center gap-3">
              <div className="bg-purple-50 p-2.5 rounded-lg">
                <GitBranch className="h-6 w-6 text-purple-600" />
              </div>
              <div>
                <h1 className="text-xl font-bold text-gray-900">
                  Отчёт о состоянии разработки MyFitCRM
                </h1>
                <p className="text-sm text-muted mt-1">
                  Дата: {LAST_UPDATE} | 8 спринтов | {totalTasks} задач
                </p>
              </div>
            </div>
            <div className="flex gap-2 print:hidden">
              <button
                onClick={() => void handleDownloadPdf()}
                className="flex items-center gap-2 border border-border bg-card text-gray-700 px-4 py-2 rounded-xl text-sm font-medium hover:bg-background transition-colors"
              >
                <FileDown className="h-4 w-4" />
                Скачать PDF
              </button>
              <button
                onClick={() => void handleDownloadExcel()}
                className="flex items-center gap-2 border border-border bg-card text-gray-700 px-4 py-2 rounded-xl text-sm font-medium hover:bg-background transition-colors"
              >
                <Table2 className="h-4 w-4" />
                Скачать Excel
              </button>
              <button
                onClick={() => window.print()}
                className="flex items-center gap-2 border border-border bg-card text-gray-700 px-4 py-2 rounded-xl text-sm font-medium hover:bg-background transition-colors"
              >
                <Printer className="h-4 w-4" />
                Печать
              </button>
            </div>
          </div>
        </div>

        <div className="px-8 py-6 space-y-8">
          {/* Summary */}
          <div className="grid grid-cols-4 gap-4">
            <div className="bg-gradient-to-br from-primary/10 to-orange-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-primary">{totalPercent}%</p>
              <p className="text-xs text-muted mt-1">Общий прогресс</p>
            </div>
            <div className="bg-green-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-green-700">{doneTasks}</p>
              <p className="text-xs text-muted mt-1">Задач выполнено</p>
            </div>
            <div className="bg-orange-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-orange-700">{totalTasks - doneTasks}</p>
              <p className="text-xs text-muted mt-1">Задач осталось</p>
            </div>
            <div className="bg-blue-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-blue-700">144</p>
              <p className="text-xs text-muted mt-1">E2E тестов</p>
            </div>
          </div>

          {/* Sprint table */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4">Прогресс по спринтам</h2>
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-gray-50">
                  <th className="text-left px-4 py-3 font-medium text-muted border border-border">Спринт</th>
                  <th className="text-left px-4 py-3 font-medium text-muted border border-border">Содержание</th>
                  <th className="text-center px-4 py-3 font-medium text-muted border border-border w-28">Прогресс</th>
                  <th className="text-center px-4 py-3 font-medium text-muted border border-border w-20">Задачи</th>
                </tr>
              </thead>
              <tbody>
                {sprints.map((sp) => {
                  const done = sp.tasks.filter((t) => t.done).length;
                  return (
                    <tr key={sp.id} className="hover:bg-gray-50/50">
                      <td className="px-4 py-3 border border-border font-medium text-gray-900">
                        <div className="flex items-center gap-2">
                          <div className="w-3 h-3 rounded-sm shrink-0" style={{ backgroundColor: sp.color }} />
                          {sp.name}
                        </div>
                      </td>
                      <td className="px-4 py-3 border border-border text-gray-600">{sp.subtitle}</td>
                      <td className="px-4 py-3 border border-border">
                        <div className="flex items-center gap-2">
                          <div className="flex-1 bg-gray-100 rounded-full h-2">
                            <div className="h-2 rounded-full" style={{ width: `${sp.percent}%`, backgroundColor: sp.color }} />
                          </div>
                          <span className="text-xs font-bold" style={{ color: sp.color }}>{sp.percent}%</span>
                        </div>
                      </td>
                      <td className="px-4 py-3 border border-border text-center text-gray-600">
                        {done}/{sp.tasks.length}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          {/* Detailed tasks */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4">Детализация задач</h2>
            <div className="space-y-4">
              {sprints.map((sp) => (
                <div key={sp.id}>
                  <h3 className="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
                    <div className="w-3 h-3 rounded-sm" style={{ backgroundColor: sp.color }} />
                    {sp.name}: {sp.subtitle}
                  </h3>
                  <div className="grid grid-cols-2 gap-x-6 gap-y-1 ml-5">
                    {sp.tasks.map((t, i) => (
                      <div key={i} className="flex items-center gap-2 text-sm py-0.5">
                        {t.done ? (
                          <CheckCircle2 className="h-4 w-4 text-green-600 shrink-0" />
                        ) : (
                          <Clock className="h-4 w-4 text-gray-400 shrink-0" />
                        )}
                        <span className={t.done ? 'text-gray-500' : 'text-gray-900'}>{t.title}</span>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* TODO */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4">TODO — оставшиеся задачи</h2>
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-gray-50">
                  <th className="text-left px-4 py-2 font-medium text-muted border border-border">Задача</th>
                  <th className="text-center px-4 py-2 font-medium text-muted border border-border w-28">Приоритет</th>
                  <th className="text-center px-4 py-2 font-medium text-muted border border-border w-24">Спринт</th>
                </tr>
              </thead>
              <tbody>
                {todoItems.map((item, i) => {
                  const p = priorityColors[item.priority];
                  return (
                    <tr key={i} className="hover:bg-gray-50/50">
                      <td className="px-4 py-2 border border-border text-gray-900 flex items-center gap-2">
                        <AlertCircle className="h-4 w-4 text-gray-400 shrink-0" />
                        {item.title}
                      </td>
                      <td className="px-4 py-2 border border-border text-center">
                        <span className={cn('text-[10px] font-semibold px-2 py-0.5 rounded-full border', p.bg, p.text, p.border)}>
                          {p.label}
                        </span>
                      </td>
                      <td className="px-4 py-2 border border-border text-center text-gray-600">{item.sprint}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          {/* Done log */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4">Журнал выполненных работ</h2>
            <div className="space-y-4">
              {doneLog.map((entry) => (
                <div key={entry.date}>
                  <h3 className="text-sm font-semibold text-gray-700 flex items-center gap-2 mb-2">
                    <div className="h-2 w-2 rounded-full bg-green-500" />
                    {entry.date}
                  </h3>
                  <ul className="ml-4 space-y-1">
                    {entry.items.map((item, i) => (
                      <li key={i} className="flex items-start gap-2 text-sm text-gray-600">
                        <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0 mt-0.5" />
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
