// ════════════════════════════════════════════════════════════════
// MegaMenu — расширяемое меню инструментов
// 3 основных пункта в шапке + кнопка "Инструменты ▾" с панелью
// ════════════════════════════════════════════════════════════════
const { useEffect: useEffectMM, useRef: useRefMM } = React;

function MegaMenu({ open, onClose, onRoute, route, currentUser }) {
  const ref = useRefMM(null);

  useEffectMM(() => {
    if (!open) return;
    function onDoc(e) {
      if (ref.current && !ref.current.contains(e.target)) onClose();
    }
    function onKey(e) { if (e.key === 'Escape') onClose(); }
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('keydown', onKey);
    };
  }, [open, onClose]);

  if (!open) return null;

  const isAdmin = currentUser && (currentUser.role === 'super_admin' || currentUser.role === 'admin');
  const isSuperAdmin = currentUser && currentUser.role === 'super_admin';

  const groups = [
    {
      label: 'Аналитика',
      tools: [
        { id: 'markets', icon: 'globe', title: 'Рынки',
          desc: 'Обзор шести наблюдаемых сегментов с темпом роста', count: '6 сегментов' },
        { id: 'trends',  icon: 'spark', title: 'Тренды',
          desc: 'Семантические кластеры и моментум на 30-дневном окне', count: '12 кластеров' },
        { id: 'methods', icon: 'grid',  title: 'Методологии',
          desc: 'Четырнадцать протоколов синтеза Орлова', count: '14 протоколов' },
      ],
    },
    {
      label: 'Платформа',
      tools: [
        { id: 'pricing',  icon: 'coin',   title: 'Тарифы',  desc: 'Подписка, дополнительные пакеты токенов, оформление', count: '4 публичных' },
        { id: 'account',  icon: 'people', title: 'Профиль', desc: 'Учётная запись, API токен, сессии', count: currentUser ? currentUser.name.split(' ')[0] : null },
        ...(currentUser && window.SDH_BILLING.getSub(currentUser.id)
          ? [{ id: 'account.billing', icon: 'coin', title: 'Моя подписка',
              desc: 'Использование токенов, паки, история платежей',
              count: window.SDH_BILLING.getSub(currentUser.id).tierCode }]
          : []),
      ],
    },
    isAdmin && {
      label: 'Управление',
      tools: [
        { id: 'admin',          icon: 'graph',  title: 'Админ-панель',  desc: 'Сводный обзор системы', count: 'overview' },
        { id: 'admin.users',    icon: 'people', title: 'Пользователи',  desc: 'Доступ, роли, инвайты, ревокация',
          count: `${window.SDH_ADMIN.users.filter(u => u.status === 'active').length} активных` },
        { id: 'admin.pipeline', icon: 'pulse',  title: 'Pipeline',      desc: 'Cron, источники, ошибки',
          count: window.SDH_ADMIN.pipeline.cron_enabled ? 'cron вкл' : 'cron выкл' },
        { id: 'admin.audit',    icon: 'bell',   title: 'Журнал событий', desc: 'Аудит всех действий', count: `${window.SDH_ADMIN.auditLog.length} событий` },
        ...(isSuperAdmin ? [
          { id: 'admin.cost',     icon: 'coin',  title: 'Расходы',  desc: 'LLM-затраты и бюджет', count: `$${window.SDH_BILLING.adminSummary().monthCostUsd.toFixed(2)}` },
          { id: 'admin.billing',  icon: 'graph', title: 'Биллинг',  desc: 'Выручка, заявки на оформление', count: `${window.SDH_BILLING.adminSummary().newReqsCount} новых` },
          { id: 'admin.settings', icon: 'grid',  title: 'Настройки',desc: 'Бюджет, cron, brand guards', count: 'global' },
        ] : []),
      ],
    },
    {
      label: 'Скоро',
      tools: [
        { id: 'export', icon: 'export', title: 'Экспорт',   soon: true, desc: 'Выгрузка корпуса в CSV или через API', count: 'скоро' },
        { id: 'alerts', icon: 'bell',   title: 'Триггеры',  soon: true, desc: 'Оповещения при достижении порога импульса кластера', count: 'скоро' },
        { id: 'graph',  icon: 'graph',  title: 'Граф идей', soon: true, desc: 'Сетевая визуализация пересечений между идеями', count: 'скоро' },
      ],
    },
  ].filter(Boolean);

  return (
    <>
      <div style={{
        position: 'fixed', inset: 0, top: 'var(--header-h)', zIndex: 39,
        background: 'rgba(31, 27, 22, 0.18)',
        backdropFilter: 'blur(2px)',
      }} />
      <div
        ref={ref}
        className="sdh-fade"
        style={{
          position: 'fixed', top: 'var(--header-h)', left: 0, right: 0, zIndex: 60,
          background: 'var(--surface-elevated)',
          borderBottom: '1px solid var(--border-subtle)',
          boxShadow: 'var(--shadow-lg)',
        }}>
        <div className="sdh-container" style={{ padding: 'var(--space-8) var(--space-8) var(--space-6)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'var(--space-6)' }}>
            <div>
              <span className="sdh-section-label">инструменты</span>
              <h3 style={{
                margin: 0, fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em',
                color: 'var(--text-primary)',
              }}>Что нужно для <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--brand-bronze-deep)' }}>исследования</em> сегодня</h3>
            </div>
            <button className="sdh-btn sdh-btn--ghost" onClick={onClose} style={{ padding: 6 }} title="Закрыть · Esc">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M3 3l8 8m0-8l-8 8" strokeLinecap="round" />
              </svg>
            </button>
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 'var(--space-6)',
          }}>
            {groups.map(g => (
              <div key={g.label}>
                <div className="sdh-section-label" style={{ marginBottom: 'var(--space-3)' }}>{g.label}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {g.tools.map(t => (
                    <ToolRow key={t.id} tool={t}
                      onClick={() => {
                        if (t.soon) return;
                        onRoute(t.id);
                        onClose();
                      }}
                      active={route === t.id}
                    />
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 'var(--space-6)', paddingTop: 'var(--space-4)',
            borderTop: '1px solid var(--border-subtle)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <span className="sdh-mono-label" style={{ marginBottom: 0 }}>
              горячая клавиша: <span className="sdh-kbd">g</span> · <span className="sdh-kbd">t</span> для перехода
            </span>
            <span className="sdh-quote" style={{ fontSize: 12.5 }}>
              расширяемая панель: новые инструменты появляются здесь без перегрузки шапки
            </span>
          </div>
        </div>
      </div>
    </>
  );
}

function ToolRow({ tool, onClick, active }) {
  const Icon = TOOL_ICONS[tool.icon] || TOOL_ICONS.grid;
  return (
    <button onClick={onClick}
      disabled={tool.soon}
      style={{
        display: 'grid',
        gridTemplateColumns: '36px 1fr auto',
        gap: 12, alignItems: 'flex-start',
        padding: '10px 12px',
        background: active ? 'var(--brand-bronze-subtle)' : 'transparent',
        border: '1px solid ' + (active ? 'var(--brand-bronze)' : 'transparent'),
        borderRadius: 'var(--radius-md)',
        textAlign: 'left',
        cursor: tool.soon ? 'not-allowed' : 'pointer',
        opacity: tool.soon ? 0.55 : 1,
        transition: 'background .15s, border-color .15s',
      }}
      onMouseEnter={e => { if (!tool.soon && !active) e.currentTarget.style.background = 'var(--surface-sunken)'; }}
      onMouseLeave={e => { if (!active) e.currentTarget.style.background = 'transparent'; }}>
      <div style={{
        width: 36, height: 36, borderRadius: 'var(--radius-md)',
        background: 'var(--surface-sunken)',
        border: '1px solid var(--border-subtle)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--brand-bronze)',
      }}>
        <Icon />
      </div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', display: 'flex', alignItems: 'center', gap: 6 }}>
          {tool.title}
          {tool.soon && <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 9.5, padding: '1px 5px',
            background: 'var(--surface-sunken)', borderRadius: 3,
            border: '1px solid var(--border-default)', color: 'var(--text-tertiary)',
            letterSpacing: '0.04em', textTransform: 'uppercase',
          }}>скоро</span>}
        </div>
        <div style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 2, lineHeight: 1.4 }}>
          {tool.desc}
        </div>
      </div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--text-tertiary)', whiteSpace: 'nowrap', paddingTop: 3 }}>
        {tool.count}
      </div>
    </button>
  );
}

const TOOL_ICONS = {
  globe: () => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3"><circle cx="8" cy="8" r="6"/><path d="M2 8h12M8 2c2 2 2 10 0 12M8 2c-2 2-2 10 0 12"/></svg>,
  spark: () => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M2 11l3-3 2 2 4-5 3 4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  grid:  () => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3"><rect x="2" y="2" width="5" height="5"/><rect x="9" y="2" width="5" height="5"/><rect x="2" y="9" width="5" height="5"/><rect x="9" y="9" width="5" height="5"/></svg>,
  coin:  () => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3"><circle cx="8" cy="8" r="6"/><path d="M8 4v8M6 6h3a1.5 1.5 0 0 1 0 3H6m0 0h3.5a1.5 1.5 0 0 1 0 3H6"/></svg>,
  export:() => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M8 2v8m0-8L5 5m3-3l3 3M3 11v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  bell:  () => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M3.5 12h9c-1-1-1.2-2-1.2-4 0-2-1.4-4-3.3-4S4.7 6 4.7 8c0 2-.2 3-1.2 4Zm3 1a1.5 1.5 0 0 0 3 0"/></svg>,
  graph: () => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3"><circle cx="4" cy="4" r="1.5"/><circle cx="12" cy="4" r="1.5"/><circle cx="8" cy="12" r="1.5"/><path d="M5 4.5l6 0M4.7 5.5l3 5M11.3 5.5l-3 5"/></svg>,
  people:() => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3"><circle cx="6" cy="6" r="2.2"/><circle cx="11.5" cy="6.5" r="1.8"/><path d="M2.5 13c.4-2 1.7-3.2 3.5-3.2s3.1 1.2 3.5 3.2M10 13c.4-1.5 1.4-2.5 2.8-2.5s2 .8 2.4 2"/></svg>,
  pulse: () => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M2 8h2.5l1.5-4 3 8 1.5-4H14" strokeLinecap="round" strokeLinejoin="round"/></svg>,
};

window.MegaMenu = MegaMenu;
window.TOOL_ICONS = TOOL_ICONS;