'use client';

import { useRef } from 'react';
import { useRouter } from 'next/navigation';
import {
  ArrowLeft,
  FileDown,
  Printer,
  Target,
  Users,
  CheckCircle2,
  XCircle,
  AlertTriangle,
  Shield,
  Monitor,
  TrendingUp,
  DollarSign,
  Briefcase,
  Clock,
  Layers,
  Database,
  Code,
  Zap,
} from 'lucide-react';
import { cn } from '@/lib/cn';

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

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

interface RoleComparison {
  feature: string;
  trainer: boolean | 'partial';
  coordinator: boolean | 'partial';
  manager: boolean | 'partial';
  salesManager: boolean | 'partial';
  receptionist: boolean | 'partial';
  clubAdmin: boolean | 'partial';
}

const roleMatrix: RoleComparison[] = [
  { feature: 'Дашборд (свои данные)', trainer: true, coordinator: true, manager: true, salesManager: true, receptionist: false, clubAdmin: false },
  { feature: 'Статистика (своя)', trainer: true, coordinator: false, manager: false, salesManager: false, receptionist: false, clubAdmin: false },
  { feature: 'Статистика (департамента)', trainer: false, coordinator: true, manager: true, salesManager: true, receptionist: true, clubAdmin: false },
  { feature: 'Статистика продаж (все тренеры)', trainer: false, coordinator: false, manager: 'partial', salesManager: true, receptionist: false, clubAdmin: false },
  { feature: 'KPI тренеров по продажам', trainer: false, coordinator: false, manager: false, salesManager: true, receptionist: false, clubAdmin: false },
  { feature: 'План/факт продаж', trainer: false, coordinator: false, manager: false, salesManager: true, receptionist: false, clubAdmin: false },
  { feature: 'Расписание (своё)', trainer: true, coordinator: true, manager: false, salesManager: false, receptionist: false, clubAdmin: false },
  { feature: 'Расписание (тренеров)', trainer: false, coordinator: true, manager: true, salesManager: true, receptionist: true, clubAdmin: false },
  { feature: 'Клиенты (свои)', trainer: true, coordinator: false, manager: false, salesManager: false, receptionist: false, clubAdmin: false },
  { feature: 'Клиенты (все)', trainer: false, coordinator: true, manager: true, salesManager: true, receptionist: true, clubAdmin: false },
  { feature: 'Воронка (своя)', trainer: true, coordinator: false, manager: false, salesManager: false, receptionist: false, clubAdmin: false },
  { feature: 'Воронка (общая)', trainer: false, coordinator: true, manager: true, salesManager: true, receptionist: true, clubAdmin: false },
  { feature: 'Распределение клиентов', trainer: false, coordinator: true, manager: true, salesManager: true, receptionist: true, clubAdmin: false },
  { feature: 'Выставить продажу', trainer: true, coordinator: false, manager: true, salesManager: true, receptionist: true, clubAdmin: false },
  { feature: 'Управление продажами (все)', trainer: false, coordinator: false, manager: 'partial', salesManager: true, receptionist: false, clubAdmin: false },
  { feature: 'Скидки и спецпредложения', trainer: false, coordinator: false, manager: false, salesManager: true, receptionist: false, clubAdmin: true },
  { feature: 'Долги клиентов (все)', trainer: false, coordinator: false, manager: true, salesManager: true, receptionist: false, clubAdmin: false },
  { feature: 'Возврат продажи', trainer: false, coordinator: false, manager: true, salesManager: true, receptionist: false, clubAdmin: true },
  { feature: 'Рейтинг', trainer: true, coordinator: true, manager: true, salesManager: true, receptionist: false, clubAdmin: false },
  { feature: 'SIP: звонки + журнал', trainer: true, coordinator: true, manager: true, salesManager: true, receptionist: false, clubAdmin: false },
  { feature: 'Спящие клиенты', trainer: true, coordinator: false, manager: false, salesManager: true, receptionist: false, clubAdmin: false },
  { feature: 'Отчёты по продажам', trainer: false, coordinator: false, manager: true, salesManager: true, receptionist: false, clubAdmin: false },
  { feature: 'Email-рассылки (промо)', trainer: false, coordinator: false, manager: false, salesManager: true, receptionist: false, clubAdmin: true },
  { feature: 'Push-уведомления', trainer: true, coordinator: true, manager: true, salesManager: true, receptionist: false, clubAdmin: false },
];

interface ApiEndpoint {
  method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
  path: string;
  description: string;
  isNew: boolean;
}

const apiEndpoints: ApiEndpoint[] = [
  { method: 'GET', path: '/v1/sales', description: 'Все продажи (фильтр по тренеру, дате, статусу)', isNew: false },
  { method: 'POST', path: '/v1/sales', description: 'Создать продажу', isNew: false },
  { method: 'PATCH', path: '/v1/sales/:id', description: 'Обновить продажу', isNew: false },
  { method: 'POST', path: '/v1/sales/:id/pay', description: 'Отметить оплату', isNew: false },
  { method: 'POST', path: '/v1/sales/:id/refund', description: 'Возврат продажи', isNew: false },
  { method: 'POST', path: '/v1/sales/:id/cancel', description: 'Отмена продажи', isNew: false },
  { method: 'GET', path: '/v1/sales/debts', description: 'Все долги клиентов', isNew: false },
  { method: 'GET', path: '/v1/sales/targets', description: 'План продаж (по тренерам, по периоду)', isNew: true },
  { method: 'POST', path: '/v1/sales/targets', description: 'Установить план продаж тренеру', isNew: true },
  { method: 'PUT', path: '/v1/sales/targets/:id', description: 'Обновить план продаж', isNew: true },
  { method: 'GET', path: '/v1/sales/targets/report', description: 'Отчёт план/факт по всем тренерам', isNew: true },
  { method: 'GET', path: '/v1/stats/sales/summary', description: 'Сводная статистика продаж (выручка, конверсия)', isNew: true },
  { method: 'GET', path: '/v1/stats/sales/by-trainer', description: 'Продажи по тренерам (ranking, KPI)', isNew: true },
  { method: 'GET', path: '/v1/stats/sales/by-service', description: 'Продажи по типам услуг', isNew: true },
  { method: 'GET', path: '/v1/stats/sales/trends', description: 'Динамика продаж (день/неделя/месяц)', isNew: true },
  { method: 'GET', path: '/v1/stats/sales/conversion', description: 'Конверсия воронки в продажу', isNew: true },
  { method: 'POST', path: '/v1/sales/discounts', description: 'Создать скидку/спецпредложение', isNew: true },
  { method: 'GET', path: '/v1/sales/discounts', description: 'Список скидок и спецпредложений', isNew: true },
  { method: 'GET', path: '/v1/clients/sleeping', description: 'Спящие клиенты (> 30 дней без активности)', isNew: false },
  { method: 'GET', path: '/v1/funnel', description: 'Воронка продаж — все этапы', isNew: false },
  { method: 'POST', path: '/v1/funnel/:id/assign', description: 'Назначить тренера клиенту', isNew: false },
  { method: 'POST', path: '/v1/funnel/:id/move', description: 'Переместить по воронке', isNew: false },
];

interface Screen {
  name: string;
  platform: 'mobile' | 'web' | 'both';
  description: string;
  priority: 'high' | 'medium' | 'low';
}

const screens: Screen[] = [
  { name: 'Дашборд менеджера по продажам', platform: 'both', description: 'Сводная панель: выручка сегодня/неделя/месяц, план/факт, топ-тренеры, активные скидки, долги', priority: 'high' },
  { name: 'План продаж', platform: 'both', description: 'Установка планов продаж для каждого тренера, период (месяц/квартал), целевые суммы, прогресс', priority: 'high' },
  { name: 'Аналитика продаж', platform: 'both', description: 'Графики: динамика выручки, конверсия воронки → продажа, продажи по услугам, средний чек', priority: 'high' },
  { name: 'KPI тренеров', platform: 'both', description: 'Рейтинг тренеров по продажам: выручка, кол-во продаж, конверсия, выполнение плана', priority: 'high' },
  { name: 'Скидки и спецпредложения', platform: 'web', description: 'CRUD скидок: процент/фиксированная, период действия, применимые услуги, лимит использований', priority: 'medium' },
  { name: 'Воронка (расширенная)', platform: 'both', description: 'Воронка продаж с фильтрами по тренеру, суммами на каждом этапе, прогнозом конверсии', priority: 'high' },
  { name: 'Отчёт по долгам', platform: 'both', description: 'Все долги клиентов с суммами, сроками, тренером, возможностью отправки напоминания', priority: 'medium' },
  { name: 'Спящие клиенты (продажи)', platform: 'both', description: 'Спящие клиенты с фокусом на последние покупки, потенциал upsell, SIP-звонок прямо из списка', priority: 'medium' },
  { name: 'Промо-рассылки', platform: 'web', description: 'Создание email-рассылок с акциями, выбор сегмента, предпросмотр, отправка/расписание', priority: 'low' },
  { name: 'Журнал звонков (продажи)', platform: 'both', description: 'Фильтрованный журнал SIP-звонков с привязкой к продажам и воронке', priority: 'medium' },
];

interface SprintTask {
  title: string;
  estimate: string;
  layer: 'backend' | 'frontend' | 'mobile' | 'tests' | 'docs';
}

interface SprintPlan {
  id: string;
  name: string;
  duration: string;
  tasks: SprintTask[];
}

const sprintPlan: SprintPlan[] = [
  {
    id: '9a',
    name: 'Sprint 9A: Backend + RBAC',
    duration: '1 неделя',
    tasks: [
      { title: 'Enum SALES_MANAGER в Prisma schema + миграция', estimate: '2ч', layer: 'backend' },
      { title: 'Enum SALES_MANAGER в roles.decorator.ts', estimate: '1ч', layer: 'backend' },
      { title: 'Обновить @Roles() на существующих эндпоинтах (sales, funnel, stats, clients)', estimate: '4ч', layer: 'backend' },
      { title: 'CRUD sales/targets (план продаж): контроллер, сервис, DTO', estimate: '8ч', layer: 'backend' },
      { title: 'CRUD sales/discounts (скидки): контроллер, сервис, DTO', estimate: '6ч', layer: 'backend' },
      { title: 'Stats endpoints: sales/summary, by-trainer, by-service, trends, conversion', estimate: '10ч', layer: 'backend' },
      { title: 'Prisma-модели: SalesTarget, Discount', estimate: '3ч', layer: 'backend' },
      { title: 'Unit-тесты: RBAC guard для SALES_MANAGER', estimate: '3ч', layer: 'tests' },
      { title: 'Unit-тесты: SalesTargetService, DiscountService', estimate: '4ч', layer: 'tests' },
    ],
  },
  {
    id: '9b',
    name: 'Sprint 9B: Web + Mobile экраны',
    duration: '1.5 недели',
    tasks: [
      { title: 'Web-Admin: дашборд менеджера по продажам', estimate: '8ч', layer: 'frontend' },
      { title: 'Web-Admin: страница «План продаж» (CRUD + прогресс-бары)', estimate: '8ч', layer: 'frontend' },
      { title: 'Web-Admin: страница «Аналитика продаж» (Recharts: графики, воронка)', estimate: '10ч', layer: 'frontend' },
      { title: 'Web-Admin: страница «KPI тренеров» (таблица + ранжирование)', estimate: '6ч', layer: 'frontend' },
      { title: 'Web-Admin: страница «Скидки и спецпредложения»', estimate: '6ч', layer: 'frontend' },
      { title: 'Mobile: экран дашборда менеджера по продажам', estimate: '6ч', layer: 'mobile' },
      { title: 'Mobile: экран плана продаж', estimate: '5ч', layer: 'mobile' },
      { title: 'Mobile: экран аналитики продаж (графики)', estimate: '8ч', layer: 'mobile' },
      { title: 'Mobile: экран KPI тренеров', estimate: '5ч', layer: 'mobile' },
      { title: 'Роутинг и навигация для роли SALES_MANAGER (web + mobile)', estimate: '4ч', layer: 'frontend' },
    ],
  },
  {
    id: '9c',
    name: 'Sprint 9C: Интеграция + Тесты + Документация',
    duration: '1 неделя',
    tasks: [
      { title: 'E2E тесты: авторизация SALES_MANAGER, RBAC проверки', estimate: '4ч', layer: 'tests' },
      { title: 'E2E тесты: CRUD sales/targets, sales/discounts', estimate: '4ч', layer: 'tests' },
      { title: 'E2E тесты: дашборд, аналитика, KPI экраны', estimate: '4ч', layer: 'tests' },
      { title: 'Обновить seed data: пользователь с ролью SALES_MANAGER', estimate: '1ч', layer: 'backend' },
      { title: 'Обновить Swagger/OpenAPI: новые эндпоинты, роль', estimate: '2ч', layer: 'backend' },
      { title: 'Обновить CLAUDE.md: матрица прав, роль #7', estimate: '2ч', layer: 'docs' },
      { title: 'Обновить docs/dev/README.md, docs/user/README.md', estimate: '3ч', layer: 'docs' },
      { title: 'Обновить документ «Анализ конкурентов» — 7 ролей', estimate: '1ч', layer: 'docs' },
    ],
  },
];

interface PrismaModel {
  name: string;
  fields: { name: string; type: string; description: string }[];
}

const prismaModels: PrismaModel[] = [
  {
    name: 'SalesTarget',
    fields: [
      { name: 'id', type: 'String @id @default(uuid())', description: 'Уникальный идентификатор' },
      { name: 'clubId', type: 'String @map("club_id")', description: 'Идентификатор клуба (RLS)' },
      { name: 'trainerId', type: 'String @map("trainer_id")', description: 'Тренер, которому назначен план' },
      { name: 'createdById', type: 'String @map("created_by_id")', description: 'Менеджер по продажам, создавший план' },
      { name: 'period', type: 'SalesTargetPeriod', description: 'Период: month | quarter' },
      { name: 'startDate', type: 'DateTime @map("start_date")', description: 'Начало периода' },
      { name: 'endDate', type: 'DateTime @map("end_date")', description: 'Конец периода' },
      { name: 'targetAmount', type: 'Decimal @map("target_amount")', description: 'Целевая сумма продаж (руб.)' },
      { name: 'targetCount', type: 'Int? @map("target_count")', description: 'Целевое кол-во продаж (опц.)' },
      { name: 'actualAmount', type: 'Decimal @default(0) @map("actual_amount")', description: 'Фактическая сумма (агрегация)' },
      { name: 'actualCount', type: 'Int @default(0) @map("actual_count")', description: 'Фактическое кол-во' },
      { name: 'createdAt', type: 'DateTime @default(now())', description: 'Дата создания' },
      { name: 'updatedAt', type: 'DateTime @updatedAt', description: 'Дата обновления' },
    ],
  },
  {
    name: 'Discount',
    fields: [
      { name: 'id', type: 'String @id @default(uuid())', description: 'Уникальный идентификатор' },
      { name: 'clubId', type: 'String @map("club_id")', description: 'Идентификатор клуба (RLS)' },
      { name: 'name', type: 'String', description: 'Название скидки / акции' },
      { name: 'type', type: 'DiscountType', description: 'Тип: percent | fixed' },
      { name: 'value', type: 'Decimal', description: 'Величина скидки (% или руб.)' },
      { name: 'startDate', type: 'DateTime @map("start_date")', description: 'Начало действия' },
      { name: 'endDate', type: 'DateTime? @map("end_date")', description: 'Конец действия (null = бессрочно)' },
      { name: 'maxUses', type: 'Int? @map("max_uses")', description: 'Макс. кол-во использований' },
      { name: 'usedCount', type: 'Int @default(0) @map("used_count")', description: 'Использовано раз' },
      { name: 'serviceIds', type: 'String[] @map("service_ids")', description: 'К каким услугам применяется' },
      { name: 'isActive', type: 'Boolean @default(true)', description: 'Активна ли скидка' },
      { name: 'createdById', type: 'String @map("created_by_id")', description: 'Кто создал' },
      { name: 'createdAt', type: 'DateTime @default(now())', description: 'Дата создания' },
    ],
  },
];

const layerColors = {
  backend: { bg: 'bg-blue-50', text: 'text-blue-700', border: 'border-blue-200', label: 'Backend' },
  frontend: { bg: 'bg-purple-50', text: 'text-purple-700', border: 'border-purple-200', label: 'Frontend' },
  mobile: { bg: 'bg-green-50', text: 'text-green-700', border: 'border-green-200', label: 'Mobile' },
  tests: { bg: 'bg-orange-50', text: 'text-orange-700', border: 'border-orange-200', label: 'Tests' },
  docs: { bg: 'bg-gray-50', text: 'text-gray-700', border: 'border-gray-200', label: 'Docs' },
};

const platformColors = {
  mobile: { bg: 'bg-green-50', text: 'text-green-700', label: 'Mobile' },
  web: { bg: 'bg-purple-50', text: 'text-purple-700', label: 'Web' },
  both: { bg: 'bg-blue-50', text: 'text-blue-700', label: 'Mobile + Web' },
};

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: 'Низкий' },
};

const methodColors: Record<string, string> = {
  GET: 'bg-green-100 text-green-800',
  POST: 'bg-blue-100 text-blue-800',
  PUT: 'bg-yellow-100 text-yellow-800',
  PATCH: 'bg-orange-100 text-orange-800',
  DELETE: 'bg-red-100 text-red-800',
};

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

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

  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('myfitcrm-role-sales-manager.pdf');
  };

  const totalHours = sprintPlan.reduce((sum, sp) => {
    return sum + sp.tasks.reduce((ts, t) => ts + parseInt(t.estimate), 0);
  }, 0);

  const newEndpoints = apiEndpoints.filter((e) => e.isNew).length;
  const existingEndpoints = apiEndpoints.filter((e) => !e.isNew).length;

  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-emerald-50 p-2.5 rounded-lg">
                <Briefcase className="h-6 w-6 text-emerald-600" />
              </div>
              <div>
                <h1 className="text-xl font-bold text-gray-900">
                  План разработки: Менеджер по продажам (SALES_MANAGER)
                </h1>
                <p className="text-sm text-muted mt-1">
                  Дата: {LAST_UPDATE} | 7-я роль системы | {screens.length} экранов | {apiEndpoints.length} эндпоинтов
                </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={() => 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-10">

          {/* ── Summary Metrics ── */}
          <div className="grid grid-cols-5 gap-4">
            <div className="bg-gradient-to-br from-emerald-50 to-green-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-emerald-700">7</p>
              <p className="text-xs text-muted mt-1">Роль в системе</p>
            </div>
            <div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-blue-700">{apiEndpoints.length}</p>
              <p className="text-xs text-muted mt-1">API эндпоинтов</p>
            </div>
            <div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-purple-700">{screens.length}</p>
              <p className="text-xs text-muted mt-1">Экранов UI</p>
            </div>
            <div className="bg-gradient-to-br from-orange-50 to-amber-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-orange-700">{totalHours}ч</p>
              <p className="text-xs text-muted mt-1">Оценка трудозатрат</p>
            </div>
            <div className="bg-gradient-to-br from-red-50 to-rose-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-red-600">3.5</p>
              <p className="text-xs text-muted mt-1">Недели разработки</p>
            </div>
          </div>

          {/* ── Role Description ── */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <Briefcase className="h-5 w-5 text-emerald-600" />
              Описание роли
            </h2>

            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-5 mb-4">
              <h3 className="text-sm font-bold text-emerald-900 mb-2">Менеджер по продажам (Sales Manager)</h3>
              <p className="text-sm text-emerald-800 leading-relaxed mb-3">
                Менеджер по продажам — ключевая роль в фитнес-клубе, отвечающая за коммерческие результаты.
                Управляет планами продаж тренеров, отслеживает KPI, анализирует конверсию воронки в выручку,
                создаёт скидки и спецпредложения, контролирует долги клиентов и проводит активные продажи
                через SIP-звонки спящим клиентам.
              </p>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <h4 className="text-xs font-semibold text-emerald-700 uppercase mb-1">Платформа</h4>
                  <p className="text-sm text-emerald-800">Мобильное приложение + Веб-панель (web-admin)</p>
                </div>
                <div>
                  <h4 className="text-xs font-semibold text-emerald-700 uppercase mb-1">Подчинение</h4>
                  <p className="text-sm text-emerald-800">Фитнес-менеджер / Директор клуба</p>
                </div>
                <div>
                  <h4 className="text-xs font-semibold text-emerald-700 uppercase mb-1">Фокус</h4>
                  <p className="text-sm text-emerald-800">Выручка, конверсия, план/факт, upsell, retention</p>
                </div>
                <div>
                  <h4 className="text-xs font-semibold text-emerald-700 uppercase mb-1">Отличие от Фитнес-менеджера</h4>
                  <p className="text-sm text-emerald-800">ФМ = аналитика + отчёты. МП = операционные продажи + KPI</p>
                </div>
              </div>
            </div>

            <div className="bg-blue-50 border border-blue-200 rounded-xl p-5">
              <h3 className="text-sm font-bold text-blue-900 mb-2">Зачем нужна отдельная роль?</h3>
              <div className="grid grid-cols-2 gap-3">
                {[
                  { icon: Target, text: 'Целевые KPI продаж: план/факт для каждого тренера — Фитнес-менеджер этого не делает' },
                  { icon: DollarSign, text: 'Управление скидками и акциями — сейчас доступно только Админу клуба' },
                  { icon: TrendingUp, text: 'Аналитика выручки в реальном времени — dashboard с фокусом на деньги, а не на клиентов' },
                  { icon: Users, text: 'Конкурент 1С:Фитнес уже имеет роль «Менеджер по продажам (Планировщик)»' },
                ].map((item, i) => (
                  <div key={i} className="flex items-start gap-2 text-sm text-blue-800">
                    <item.icon className="h-4 w-4 text-blue-600 shrink-0 mt-0.5" />
                    {item.text}
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* ── Role Comparison Matrix ── */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <Shield className="h-5 w-5 text-indigo-600" />
              Матрица прав доступа (RBAC)
            </h2>
            <div className="overflow-x-auto">
              <table className="w-full text-sm border-collapse">
                <thead>
                  <tr className="bg-gray-50">
                    <th className="text-left px-3 py-2.5 font-medium text-muted border border-border">Функция</th>
                    <th className="text-center px-3 py-2.5 font-medium text-muted border border-border w-16">Тренер</th>
                    <th className="text-center px-3 py-2.5 font-medium text-muted border border-border w-16">Коорд.</th>
                    <th className="text-center px-3 py-2.5 font-medium text-muted border border-border w-16">ФМ</th>
                    <th className="text-center px-3 py-2.5 font-bold text-emerald-700 border border-border bg-emerald-50/50 w-16">МП</th>
                    <th className="text-center px-3 py-2.5 font-medium text-muted border border-border w-16">Рецепц.</th>
                    <th className="text-center px-3 py-2.5 font-medium text-muted border border-border w-16">Адм.кл.</th>
                  </tr>
                </thead>
                <tbody>
                  {roleMatrix.map((row, i) => (
                    <tr key={i} className="hover:bg-gray-50/50">
                      <td className="px-3 py-2 border border-border text-gray-900">{row.feature}</td>
                      {(['trainer', 'coordinator', 'manager', 'salesManager', 'receptionist', 'clubAdmin'] as const).map((role) => (
                        <td
                          key={role}
                          className={cn(
                            'px-3 py-2 border border-border text-center',
                            role === 'salesManager' && 'bg-emerald-50/30',
                          )}
                        >
                          {row[role] === true ? (
                            <CheckCircle2 className="h-4 w-4 text-green-600 mx-auto" />
                          ) : row[role] === 'partial' ? (
                            <div className="h-4 w-4 rounded-full border-2 border-yellow-500 bg-yellow-100 mx-auto" />
                          ) : (
                            <XCircle className="h-4 w-4 text-red-300 mx-auto" />
                          )}
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <div className="flex items-center gap-4 mt-3 text-xs text-muted">
              <span className="flex items-center gap-1"><CheckCircle2 className="h-3.5 w-3.5 text-green-600" /> Полный доступ</span>
              <span className="flex items-center gap-1"><div className="h-3.5 w-3.5 rounded-full border-2 border-yellow-500 bg-yellow-100" /> Частичный</span>
              <span className="flex items-center gap-1"><XCircle className="h-3.5 w-3.5 text-red-300" /> Нет доступа</span>
              <span className="ml-auto text-emerald-700 font-semibold">МП = Менеджер по продажам (новая роль)</span>
            </div>
          </div>

          {/* ── API Endpoints ── */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-2 flex items-center gap-2">
              <Code className="h-5 w-5 text-blue-600" />
              API-эндпоинты ({apiEndpoints.length})
            </h2>
            <p className="text-sm text-muted mb-4">
              {existingEndpoints} существующих (добавить роль SALES_MANAGER в @Roles) + {newEndpoints} новых эндпоинтов
            </p>
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-gray-50">
                  <th className="text-left px-3 py-2.5 font-medium text-muted border border-border w-20">Метод</th>
                  <th className="text-left px-3 py-2.5 font-medium text-muted border border-border">Путь</th>
                  <th className="text-left px-3 py-2.5 font-medium text-muted border border-border">Описание</th>
                  <th className="text-center px-3 py-2.5 font-medium text-muted border border-border w-20">Статус</th>
                </tr>
              </thead>
              <tbody>
                {apiEndpoints.map((ep, i) => (
                  <tr key={i} className={cn('hover:bg-gray-50/50', ep.isNew && 'bg-emerald-50/30')}>
                    <td className="px-3 py-2 border border-border">
                      <span className={cn('text-[10px] font-bold px-2 py-0.5 rounded', methodColors[ep.method])}>
                        {ep.method}
                      </span>
                    </td>
                    <td className="px-3 py-2 border border-border font-mono text-xs text-gray-700">{ep.path}</td>
                    <td className="px-3 py-2 border border-border text-gray-600">{ep.description}</td>
                    <td className="px-3 py-2 border border-border text-center">
                      {ep.isNew ? (
                        <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700 border border-emerald-200">NEW</span>
                      ) : (
                        <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-gray-100 text-gray-600 border border-gray-200">+ROLE</span>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* ── Prisma Models ── */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <Database className="h-5 w-5 text-indigo-600" />
              Новые Prisma-модели
            </h2>
            <div className="space-y-4">
              {prismaModels.map((model) => (
                <div key={model.name} className="border border-border rounded-xl overflow-hidden">
                  <div className="bg-indigo-50 px-5 py-3 flex items-center gap-2">
                    <Layers className="h-4 w-4 text-indigo-600" />
                    <h3 className="text-sm font-bold text-indigo-900">model {model.name}</h3>
                  </div>
                  <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-b border-border">Поле</th>
                        <th className="text-left px-4 py-2 font-medium text-muted border-b border-border">Тип</th>
                        <th className="text-left px-4 py-2 font-medium text-muted border-b border-border">Описание</th>
                      </tr>
                    </thead>
                    <tbody>
                      {model.fields.map((f, i) => (
                        <tr key={i} className="hover:bg-gray-50/50">
                          <td className="px-4 py-1.5 border-b border-border font-mono text-xs text-indigo-700">{f.name}</td>
                          <td className="px-4 py-1.5 border-b border-border font-mono text-xs text-gray-600">{f.type}</td>
                          <td className="px-4 py-1.5 border-b border-border text-gray-600 text-xs">{f.description}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              ))}

              <div className="bg-gray-50 border border-border rounded-xl p-4">
                <h4 className="text-xs font-semibold text-gray-700 uppercase mb-2">Новые enum-типы</h4>
                <div className="grid grid-cols-3 gap-4 font-mono text-xs">
                  <div>
                    <p className="text-indigo-700 font-semibold mb-1">enum SalesTargetPeriod {'{'}</p>
                    <p className="text-gray-600 ml-3">month</p>
                    <p className="text-gray-600 ml-3">quarter</p>
                    <p className="text-indigo-700">{'}'}</p>
                  </div>
                  <div>
                    <p className="text-indigo-700 font-semibold mb-1">enum DiscountType {'{'}</p>
                    <p className="text-gray-600 ml-3">percent</p>
                    <p className="text-gray-600 ml-3">fixed</p>
                    <p className="text-indigo-700">{'}'}</p>
                  </div>
                  <div>
                    <p className="text-indigo-700 font-semibold mb-1">enum UserRole {'{'}</p>
                    <p className="text-gray-600 ml-3">...</p>
                    <p className="text-emerald-700 font-bold ml-3">SALES_MANAGER  // NEW</p>
                    <p className="text-indigo-700">{'}'}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ── Screens ── */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <Monitor className="h-5 w-5 text-purple-600" />
              Экраны и интерфейсы ({screens.length})
            </h2>
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-gray-50">
                  <th className="text-left px-3 py-2.5 font-medium text-muted border border-border">Экран</th>
                  <th className="text-center px-3 py-2.5 font-medium text-muted border border-border w-28">Платформа</th>
                  <th className="text-left px-3 py-2.5 font-medium text-muted border border-border">Описание</th>
                  <th className="text-center px-3 py-2.5 font-medium text-muted border border-border w-24">Приоритет</th>
                </tr>
              </thead>
              <tbody>
                {screens.map((s, i) => {
                  const pl = platformColors[s.platform];
                  const pr = priorityColors[s.priority];
                  return (
                    <tr key={i} className="hover:bg-gray-50/50">
                      <td className="px-3 py-2 border border-border text-gray-900 font-medium">{s.name}</td>
                      <td className="px-3 py-2 border border-border text-center">
                        <span className={cn('text-[10px] font-semibold px-2 py-0.5 rounded-full', pl.bg, pl.text)}>
                          {pl.label}
                        </span>
                      </td>
                      <td className="px-3 py-2 border border-border text-gray-600 text-xs">{s.description}</td>
                      <td className="px-3 py-2 border border-border text-center">
                        <span className={cn('text-[10px] font-semibold px-2 py-0.5 rounded-full border', pr.bg, pr.text, pr.border)}>
                          {pr.label}
                        </span>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          {/* ── Sprint Plan ── */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <Clock className="h-5 w-5 text-orange-600" />
              План реализации (Sprint 9)
            </h2>
            <div className="space-y-6">
              {sprintPlan.map((sp) => {
                const sprintHours = sp.tasks.reduce((s, t) => s + parseInt(t.estimate), 0);
                return (
                  <div key={sp.id} className="border border-border rounded-xl overflow-hidden">
                    <div className="bg-gray-50 px-5 py-3 flex items-center justify-between">
                      <div>
                        <h3 className="text-sm font-bold text-gray-900">{sp.name}</h3>
                        <p className="text-xs text-muted">Длительность: {sp.duration} | {sp.tasks.length} задач | {sprintHours}ч</p>
                      </div>
                      <div className="bg-white border border-border rounded-lg px-3 py-1.5">
                        <p className="text-sm font-bold text-orange-600">{sprintHours}ч</p>
                      </div>
                    </div>
                    <table className="w-full text-sm border-collapse">
                      <thead>
                        <tr className="bg-white">
                          <th className="text-left px-4 py-2 font-medium text-muted border-b border-border">Задача</th>
                          <th className="text-center px-4 py-2 font-medium text-muted border-b border-border w-24">Слой</th>
                          <th className="text-center px-4 py-2 font-medium text-muted border-b border-border w-20">Оценка</th>
                        </tr>
                      </thead>
                      <tbody>
                        {sp.tasks.map((t, i) => {
                          const lc = layerColors[t.layer];
                          return (
                            <tr key={i} className="hover:bg-gray-50/50">
                              <td className="px-4 py-2 border-b border-border text-gray-700">{t.title}</td>
                              <td className="px-4 py-2 border-b border-border text-center">
                                <span className={cn('text-[10px] font-semibold px-2 py-0.5 rounded-full border', lc.bg, lc.text, lc.border)}>
                                  {lc.label}
                                </span>
                              </td>
                              <td className="px-4 py-2 border-b border-border text-center text-gray-600 font-medium">{t.estimate}</td>
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                  </div>
                );
              })}
            </div>
          </div>

          {/* ── Implementation Notes ── */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <Zap className="h-5 w-5 text-yellow-500" />
              Технические заметки
            </h2>
            <div className="space-y-4">
              <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-5">
                <h3 className="text-sm font-bold text-yellow-900 mb-2">Важно: обратная совместимость</h3>
                <ul className="space-y-2">
                  {[
                    'Добавление нового значения в enum UserRole — обратно-совместимо (добавление, не изменение)',
                    'Существующие @Roles() декораторы НЕ ломаются — новая роль просто не имеет доступа, пока явно не добавлена',
                    'Prisma migration: ALTER TYPE "UserRole" ADD VALUE \'SALES_MANAGER\' — безопасная операция',
                    'Frontend: навигация по роли — добавить case для SALES_MANAGER в роутинг',
                    'JWT: поле role уже поддерживает произвольные строки — без изменений в auth',
                  ].map((item, i) => (
                    <li key={i} className="flex items-start gap-2 text-sm text-yellow-800">
                      <CheckCircle2 className="h-4 w-4 text-yellow-600 shrink-0 mt-0.5" />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>

              <div className="bg-red-50 border border-red-200 rounded-xl p-5">
                <h3 className="text-sm font-bold text-red-900 mb-2">Риски и зависимости</h3>
                <ul className="space-y-2">
                  {[
                    'Миграция Prisma enum — требует осторожности на production (ALTER TYPE в транзакции)',
                    'Web-Admin: нужно решить — отдельное приложение или раздел в web-admin (рекомендуется: раздел в web-admin)',
                    'Mobile: bottom tabs — нужен 6-й tab или sub-menu (рекомендуется: sub-menu в профиле)',
                    'Seed data: нужен тестовый пользователь с ролью SALES_MANAGER для E2E',
                    'Скидки: нужна интеграция с модулем Sales — связь Discount ↔ Sale',
                  ].map((item, i) => (
                    <li key={i} 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" />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>

              <div className="bg-gradient-to-r from-gray-900 to-gray-800 rounded-xl p-5 text-white">
                <h3 className="text-sm font-bold mb-3">Итого: что даёт эта роль</h3>
                <div className="grid grid-cols-3 gap-4">
                  <div>
                    <h4 className="text-xs text-gray-400 uppercase mb-1">Бизнес-ценность</h4>
                    <p className="text-sm text-gray-200">
                      Закрывает потребность фитнес-клубов в управлении коммерческими показателями.
                      Конкурент 1С:Фитнес уже имеет аналог (КОРП тариф). Мы — на стандартном тарифе.
                    </p>
                  </div>
                  <div>
                    <h4 className="text-xs text-gray-400 uppercase mb-1">Техническая сложность</h4>
                    <p className="text-sm text-gray-200">
                      Средняя. Основная работа — новые экраны и 10 новых эндпоинтов. RBAC-инфраструктура
                      уже готова, нужно только добавить enum + @Roles.
                    </p>
                  </div>
                  <div>
                    <h4 className="text-xs text-gray-400 uppercase mb-1">Срок реализации</h4>
                    <p className="text-sm text-gray-200">
                      3.5 недели ({totalHours} часов) для одного разработчика. При параллельной разработке
                      (backend + frontend) — 2 недели.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}
