/* ops2-site.jsx — зона «Сайт» Ops Hub: CMS-блоки, публичный калькулятор, SEO, лиды с сайта.
   Прототип v1 shell (демо-данные). Канон: KSH-226 · публичный калькулятор → пул лидов. */
(function () {
  const { Card, Badge, IconTile, Button } = window.DesignSystem_9e0a09;
  const CardHead = window.CardHead;
  const { Ic, fmtCompact } = window;

  function SiteKpi({ icon, value, label, sub, bg, fg }) {
    return (
      <Card variant="glass" padding="md">
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 11 }}>
          <IconTile size="sm" bg={bg} color={fg}><Ic n={icon} s={17} /></IconTile>
          <div>
            <div className="t-num" style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em' }}>{value}</div>
            <div style={{ fontSize: 12.5, fontWeight: 600, marginTop: 2 }}>{label}</div>
            {sub && <div style={{ fontSize: 11.5, color: 'var(--text-tertiary)', marginTop: 3 }}>{sub}</div>}
          </div>
        </div>
      </Card>);
  }

  function SiteZone() {
    const S = window.OPS.SITE;
    const [tab, setTab] = React.useState('cms');
    const tabs = [['cms', 'CMS-блоки'], ['calc', 'Калькулятор'], ['seo', 'SEO'], ['leads', 'Лиды с сайта']];

    return (
      <React.Fragment>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 12, marginBottom: 18 }}>
          <SiteKpi icon="eye" value={S.metrics.visits7d} label="Визиты за 7 дней" sub={'+' + S.metrics.visitsDelta + '% к пр. неделе'} bg="var(--cat-plumb-bg)" fg="var(--cat-plumb-fg)" />
          <SiteKpi icon="calculator" value={S.metrics.calcRuns} label="Расчётов калькулятора" sub={S.metrics.calcConv + '% → лид'} bg="var(--cat-elec-bg)" fg="var(--cat-elec-fg)" />
          <SiteKpi icon="inbox" value={S.metrics.leadsWeek} label="Лидов с сайта" sub={S.metrics.leadsUnassigned + ' без менеджера'} bg={S.metrics.leadsUnassigned ? 'var(--warning-soft)' : 'var(--success-soft)'} fg={S.metrics.leadsUnassigned ? 'var(--warning-strong)' : 'var(--success-strong)'} />
          <SiteKpi icon="mouse-pointer-click" value={S.metrics.ctr + '%'} label="CTR главной CTA" sub="hero → калькулятор" bg="var(--secondary)" fg="var(--foreground)" />
        </div>

        <div className="ana-tabs" style={{ marginBottom: 16 }}>
          {tabs.map(([id, label]) =>
            <button key={id} type="button" className={'ana-tab' + (tab === id ? ' on' : '')} onClick={() => setTab(id)}>{label}</button>)}
        </div>

        {tab === 'cms' &&
          <Card variant="glass" padding="lg">
            <CardHead title="Блоки лендинга" sub="WYSIWYG · аудит правок Super" action={<Badge tone="info" dot>черновик 2</Badge>} />
            <div className="uni-list">
              {S.blocks.map((b) =>
                <div key={b.id} className="uni-row" style={{ cursor: 'default' }}>
                  <span className="meet-ic" style={{ background: b.live ? 'var(--success-soft)' : 'var(--secondary)', color: b.live ? 'var(--success-strong)' : 'var(--text-secondary)' }}><Ic n={b.icon} s={16} /></span>
                  <div className="uni-main">
                    <div className="uni-t">{b.title}</div>
                    <div className="uni-s">{b.route} · обновлено {b.updated}{b.draft ? ' · есть черновик' : ''}</div>
                  </div>
                  <Badge tone={b.live ? 'success' : 'neutral'} dot>{b.live ? 'опубликован' : 'скрыт'}</Badge>
                  <Button variant="ghost" size="sm">Редактировать</Button>
                </div>)}
            </div>
          </Card>}

        {tab === 'calc' &&
          <div className="cc-grid">
            <Card variant="glass" padding="lg">
              <CardHead title="Публичный калькулятор" sub="obitel.ru/calc · лиды → CRM / пул" />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 14px', borderRadius: 'var(--radius-md)', background: 'var(--secondary)' }}>
                  <div><div style={{ fontWeight: 700, fontSize: 13.5 }}>Статус</div><div style={{ fontSize: 12.5, color: 'var(--text-tertiary)', marginTop: 2 }}>Пресет «Капитальный ремонт 2026» · v3</div></div>
                  <Badge tone="success" dot>онлайн</Badge>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
                  <SiteKpi icon="play" value={S.calc.today} label="Сегодня" sub="запусков" bg="var(--secondary)" fg="var(--foreground)" />
                  <SiteKpi icon="user-plus" value={S.calc.leadsToday} label="Лидов" sub="из расчётов" bg="var(--cat-plumb-bg)" fg="var(--cat-plumb-fg)" />
                  <SiteKpi icon="percent" value={S.calc.completion + '%'} label="Дошли до контакта" sub="воронка формы" bg="var(--cat-elec-bg)" fg="var(--cat-elec-fg)" />
                </div>
                <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', lineHeight: 1.55 }}>
                  Handoff: завершённый расчёт с телефоном → пул менеджера или Twenty CRM.
                </div>
                <Button variant="secondary" size="sm" iconLeft={<Ic n="external-link" s={14} />}>Открыть публичный калькулятор</Button>
              </div>
            </Card>
            <Card variant="glass" padding="lg">
              <CardHead title="Версии пресета" sub="история публикаций" />
              {S.calc.versions.map((v) =>
                <div key={v.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: '1px solid var(--border-subtle)' }}>
                  <Badge tone={v.current ? 'success' : 'neutral'} dot>{v.label}</Badge>
                  <span style={{ flex: 1, fontSize: 12.5, color: 'var(--text-secondary)' }}>{v.by} · {v.when}</span>
                  {!v.current && <Button variant="ghost" size="sm">Откатить</Button>}
                </div>)}
            </Card>
          </div>}

        {tab === 'seo' &&
          <Card variant="glass" padding="lg">
            <CardHead title="SEO и метаданные" sub="org-wide · obitel.ru" />
            <div className="tbl-scroll">
              <table className="cl-tbl">
                <thead><tr><th>Страница</th><th>Title</th><th>Индексация</th><th>Core Web Vitals</th><th></th></tr></thead>
                <tbody>
                  {S.seo.map((r) =>
                    <tr key={r.path}>
                      <td className="cell-name">{r.path}</td>
                      <td style={{ fontSize: 12.5, color: 'var(--text-secondary)', maxWidth: 280 }}>{r.title}</td>
                      <td><Badge tone={r.index ? 'success' : 'warning'} dot>{r.index ? 'index' : 'noindex'}</Badge></td>
                      <td><Badge tone={r.cwv === 'good' ? 'success' : r.cwv === 'needs' ? 'warning' : 'neutral'} dot>{r.cwv === 'good' ? 'хорошо' : r.cwv === 'needs' ? 'нужно улучшить' : '—'}</Badge></td>
                      <td><Button variant="ghost" size="sm">Править</Button></td>
                    </tr>)}
                </tbody>
              </table>
            </div>
          </Card>}

        {tab === 'leads' &&
          <Card variant="glass" padding="lg">
            <CardHead title="Лиды с сайта" sub="калькулятор + формы · последние 7 дней" action={<Button variant="ghost" size="sm">В пул лидов</Button>} />
            <div className="uni-list">
              {S.leads.map((l) =>
                <div key={l.id} className="uni-row">
                  <span className="mini-ava" style={{ background: l.avaC }}>{l.ava}</span>
                  <div className="uni-main">
                    <div className="uni-t">{l.name} · {fmtCompact(l.budget)} ₽</div>
                    <div className="uni-s">{l.source} · {l.city} · {l.when}</div>
                  </div>
                  <Badge tone={l.manager ? 'neutral' : 'danger'} dot>{l.manager || 'не назначен'}</Badge>
                  <Button variant="ghost" size="sm">Карточка</Button>
                </div>)}
            </div>
          </Card>}
      </React.Fragment>);
  }

  window.SiteZone = SiteZone;
})();