// ════════════════════════════════════════════════════════════════
// AccountPage — /account — профиль пользователя
// Любой залогиненный (включая viewer)
// ════════════════════════════════════════════════════════════════

function AccountPage({ user, onLogout, onChangeRoute }) {
  const [tab, setTab] = React.useState('profile'); // profile | sessions | security
  const [newName, setNewName] = React.useState(user.name);
  const [showRegen, setShowRegen] = React.useState(false);
  const [newToken, setNewToken] = React.useState(null);

  const ttl = window.SDH_ADMIN.TTL[user.role];
  const daysLeft = user.days_left;
  const sub = window.SDH_BILLING.getSub(user.id);
  const tier = sub ? window.SDH_BILLING.getTier(sub.tierCode) : null;
  const usage = sub ? window.SDH_BILLING.buildUsage(user.id, sub.tierCode) : null;

  async function regen() {
    // API mode
    if (window.SDH_USE_API && window.SDH_API) {
      try {
        const resp = await window.SDH_API.post('/api/auth/regenerate-token');
        if (resp && resp.token) {
          setNewToken(resp.token);
          window.SDH_API.setBearer(resp.token);
        }
      } catch (e) {
        alert('Ошибка регенерации: ' + (e.message || e));
      }
      setShowRegen(false);
      return;
    }
    // Mock
    const t = 'mcp_' + Math.random().toString(36).slice(2, 8) + Math.random().toString(36).slice(2, 8) + '_' + Date.now().toString(36);
    setNewToken(t);
    setShowRegen(false);
  }

  return (
    <div className="sdh-fade">
      <PageHeader
        section="личный кабинет"
        title="Ваш профиль"
        accent="профиль"
        subtitle="Управление учётной записью, токеном и подпиской. Изменения логируются в журнал событий."
      />

      {/* Tab strip */}
      <CommandBar sticky={false}
        left={
          <>
            <button className={`sdh-chip ${tab === 'profile' ? 'is-active' : ''}`} onClick={() => setTab('profile')}>профиль</button>
            <button className={`sdh-chip ${tab === 'sessions' ? 'is-active' : ''}`} onClick={() => setTab('sessions')}>сессии</button>
            <button className={`sdh-chip ${tab === 'security' ? 'is-active' : ''}`} onClick={() => setTab('security')}>безопасность</button>
            {sub && !sub.isInternal && (
              <button className="sdh-chip" onClick={() => onChangeRoute && onChangeRoute('account.billing')}>
                подписка
                <span style={{ marginLeft: 4, fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--brand-bronze-deep)' }}>
                  {tier.name}
                </span>
              </button>
            )}
          </>
        }
        right={
          <button className="sdh-btn sdh-btn--ghost" onClick={onLogout} style={{ fontSize: 12 }}>
            Выйти
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M5 2H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2m3-3l3-3-3-3m-3 3h6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        }
      />

      <section className="sdh-container" style={{ paddingTop: 'var(--space-6)', paddingBottom: 'var(--space-16)' }}>
        {tab === 'profile' && (
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-8)' }}>
            {/* Left */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
              <Panel title="личные данные">
                <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)', marginBottom: 'var(--space-4)' }}>
                  <UserAvatar name={user.name} role={user.role} size={56} />
                  <div>
                    <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 4 }}>
                      {user.name}
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <RoleBadge role={user.role} size="sm" />
                      <StatusDot status={user.status} />
                    </div>
                  </div>
                </div>

                <AuthField label="Email">
                  <input type="email" value={user.email} readOnly
                    style={{ ...authFieldStyle, background: 'var(--surface-sunken)', color: 'var(--text-secondary)' }} />
                </AuthField>

                <div style={{ height: 'var(--space-3)' }} />

                <AuthField label="Имя">
                  <input type="text" value={newName} onChange={e => setNewName(e.target.value)} style={authFieldStyle} />
                </AuthField>

                <div style={{ marginTop: 'var(--space-4)', display: 'flex', justifyContent: 'flex-end' }}>
                  <button className="sdh-btn sdh-btn--bronze" disabled={newName === user.name}>
                    Сохранить
                  </button>
                </div>
              </Panel>

              <Panel title="API токен"
                help={{
                  title: 'Bearer API токен',
                  what: 'Долгоживущий ключ для programmatic-доступа: MCP клиенты, скрипты, агенты. Передаётся в HTTP-заголовке Authorization: Bearer <токен>.',
                  why: 'Регенерация нужна если токен утёк или вы меняете команду. Старый перестанет работать сразу, во всех клиентах надо подменить вручную. Делайте это перед запуском новых интеграций, не во время рабочего дня.',
                }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
                  <Fact label="статус" value={<StatusDot status={user.status} />} />
                  <Fact label="срок токена" value={ttl.days === null ? 'бессрочный' : (
                    user.token_warning
                      ? <span style={{ color: 'var(--warning)', fontWeight: 600 }}>{daysLeft} дн — продлите</span>
                      : `${daysLeft} дн осталось`
                  )} />
                </div>

                {newToken && (
                  <div style={{ marginTop: 'var(--space-4)' }}>
                    <TokenDisplay value={newToken} label="новый токен · сохраните сейчас" />
                  </div>
                )}

                {!newToken && (
                  <div style={{ marginTop: 'var(--space-4)', display: 'flex', gap: 8 }}>
                    {showRegen ? (
                      <React.Fragment>
                        <div style={{
                          flex: 1, padding: '8px 12px',
                          background: 'var(--hue-amber-subtle)',
                          border: '1px solid var(--hue-amber)',
                          borderRadius: 'var(--radius-md)',
                          fontSize: 12, color: 'var(--hue-amber)',
                          lineHeight: 1.4,
                        }}>
                          Точно? Старый токен перестанет работать. Все интеграции, использующие его, начнут возвращать 401.
                        </div>
                        <button className="sdh-btn sdh-btn--ghost" onClick={() => setShowRegen(false)}>Отмена</button>
                        <button className="sdh-btn sdh-btn--bronze" onClick={regen}>Подтверждаю</button>
                      </React.Fragment>
                    ) : (
                      <button className="sdh-btn" onClick={() => setShowRegen(true)}>
                        Регенерировать токен
                      </button>
                    )}
                  </div>
                )}
              </Panel>
            </div>

            {/* Right */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
              <Panel title="доступ">
                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
                  <Fact label="роль" value={<RoleBadge role={user.role} size="sm" />} />
                  <Fact label="зарегистрирован" mono value={user.created_at.slice(0, 10)} />
                  <Fact label="последний вход" mono value={fmtAgo(user.last_seen_at)} />
                  {user.note && <Fact label="заметка" value={user.note} />}
                </div>
              </Panel>

              {sub && (
                <Panel title="подписка">
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 'var(--space-3)' }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, fontWeight: 600, color: 'var(--brand-bronze-deep)' }}>
                      {tier.name}
                    </span>
                    {sub.isInternal && <CategoryPill hue="emerald" small>internal</CategoryPill>}
                    {!sub.isInternal && <span className="sdh-mono-label" style={{ marginBottom: 0 }}>{tier.priceRub.toLocaleString('ru-RU')} ₽/мес</span>}
                  </div>
                  {usage && tier.tokens > 0 && (
                    <React.Fragment>
                      <div className="sdh-mono-label" style={{ marginBottom: 4 }}>токенов в этом месяце</div>
                      <UsageBar used={usage.tokensUsed} total={usage.tokensIncluded} />
                    </React.Fragment>
                  )}
                  {sub.isInternal && (
                    <p className="sdh-quote" style={{ margin: 0, fontSize: 12.5 }}>
                      Внутренний tier команды Symbiosis. Бессрочный, без лимита.
                    </p>
                  )}
                  {!sub.isInternal && (
                    <button className="sdh-btn sdh-btn--ghost" style={{ marginTop: 'var(--space-3)', fontSize: 12 }}
                      onClick={() => onChangeRoute && onChangeRoute('account.billing')}>
                      Подробнее о подписке
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
                        <path d="M3 6h6m-3-3 3 3-3 3" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                    </button>
                  )}
                </Panel>
              )}
            </div>
          </div>
        )}

        {tab === 'sessions' && <SessionsTab user={user} />}
        {tab === 'security' && <SecurityTab user={user} />}
      </section>
    </div>
  );
}

function Panel({ title, help, children }) {
  return (
    <div style={{
      background: 'var(--surface-elevated)',
      border: '1px solid var(--border-subtle)',
      borderRadius: 'var(--radius-xl)',
      padding: 'var(--space-6)',
    }}>
      <h3 className="sdh-section-label" style={{ display: 'block', marginBottom: 'var(--space-4)' }}>
        {help ? <InfoLabel {...help}>{title}</InfoLabel> : title}
      </h3>
      {children}
    </div>
  );
}

function Fact({ label, value, mono }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
      gap: 12, paddingBottom: 6, borderBottom: '1px dashed var(--border-subtle)' }}>
      <span style={{ fontSize: 12.5, color: 'var(--text-tertiary)' }}>{label}</span>
      <span style={{
        fontSize: 13, color: 'var(--text-primary)',
        fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)',
      }}>{value}</span>
    </div>
  );
}

function fmtAgo(iso) {
  const d = new Date(iso);
  const mins = Math.round((new Date('2026-05-23T10:00:00Z') - d) / 60000);
  if (mins < 60) return `${mins} мин назад`;
  if (mins < 24 * 60) return `${Math.round(mins / 60)} ч назад`;
  return `${Math.round(mins / 60 / 24)} д назад`;
}

function SessionsTab({ user }) {
  // mock 6 sessions
  const sessions = [
    { id: 's1', device: 'macOS · Firefox 124',  ip: '188.187.143.221', startedAt: 'сегодня 09:42', current: true },
    { id: 's2', device: 'iOS · Safari',         ip: '188.187.143.221', startedAt: 'вчера 18:14' },
    { id: 's3', device: 'macOS · Firefox 124',  ip: '188.187.143.221', startedAt: '21.05 11:08' },
    { id: 's4', device: 'macOS · Firefox 124',  ip: '95.84.10.4',       startedAt: '18.05 22:30', note: 'другая сеть' },
    { id: 's5', device: 'MCP client',           ip: 'agent',            startedAt: 'программатически', api: true },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
      <Panel title="активные сессии" help={{
        title: 'Сессии',
        what: 'Браузерные и API подключения к вашей учётной записи за последние 30 дней.',
        why: 'Если видите подозрительную сессию — нажмите «Завершить» немедленно и регенерируйте токен. Это закрывает доступ во всех клиентах.',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {sessions.map(s => (
            <div key={s.id} style={{
              display: 'grid',
              gridTemplateColumns: '1fr 140px 140px auto',
              gap: 'var(--space-4)',
              alignItems: 'center',
              padding: '12px 0',
              borderBottom: '1px solid var(--border-subtle)',
            }}>
              <div>
                <div style={{ fontSize: 13.5, color: 'var(--text-primary)', fontWeight: 500, display: 'flex', alignItems: 'center', gap: 8 }}>
                  {s.device}
                  {s.current && <CategoryPill hue="emerald" small>текущая</CategoryPill>}
                  {s.api && <CategoryPill hue="amber" small>api</CategoryPill>}
                </div>
                {s.note && <div style={{ fontSize: 12, color: 'var(--warning)', marginTop: 2 }}>{s.note}</div>}
              </div>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-tertiary)' }}>{s.ip}</span>
              <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{s.startedAt}</span>
              {!s.current && (
                <button className="sdh-btn sdh-btn--ghost" style={{ fontSize: 11, padding: '4px 8px' }}>Завершить</button>
              )}
            </div>
          ))}
        </div>
        <div style={{ marginTop: 'var(--space-4)' }}>
          <button className="sdh-btn">Завершить все, кроме текущей</button>
        </div>
      </Panel>
    </div>
  );
}

function SecurityTab({ user }) {
  const [oldPw, setOldPw] = React.useState('');
  const [newPw, setNewPw] = React.useState('');
  const [confirmPw, setConfirmPw] = React.useState('');
  const [pwBusy, setPwBusy] = React.useState(false);
  const [pwMsg, setPwMsg] = React.useState(null);

  async function changePassword() {
    setPwMsg(null);
    if (newPw !== confirmPw) { setPwMsg({ type: 'error', text: 'Пароли не совпадают' }); return; }
    if (newPw.length < 12) { setPwMsg({ type: 'error', text: 'Минимум 12 символов' }); return; }
    setPwBusy(true);
    if (window.SDH_USE_API && window.SDH_API) {
      try {
        await window.SDH_API.post('/api/auth/change-password', { old: oldPw, new: newPw });
        setPwMsg({ type: 'ok', text: 'Пароль изменён. Другие сессии завершены.' });
        setOldPw(''); setNewPw(''); setConfirmPw('');
      } catch (e) {
        const msg = e && e.status === 401 ? 'Неверный старый пароль' : (e.message || 'Ошибка');
        setPwMsg({ type: 'error', text: msg });
      }
      setPwBusy(false);
      return;
    }
    // Mock
    setTimeout(() => {
      setPwMsg({ type: 'ok', text: 'Пароль изменён (mock).' });
      setOldPw(''); setNewPw(''); setConfirmPw('');
      setPwBusy(false);
    }, 400);
  }

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
      <Panel title="смена пароля">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
          <AuthField label="Текущий пароль">
            <input type="password" value={oldPw} onChange={e => setOldPw(e.target.value)} style={authFieldStyle} />
          </AuthField>
          <AuthField label="Новый пароль (минимум 12 символов)">
            <input type="password" value={newPw} onChange={e => setNewPw(e.target.value)} style={authFieldStyle} />
          </AuthField>
          <AuthField label="Подтвердите новый">
            <input type="password" value={confirmPw} onChange={e => setConfirmPw(e.target.value)} style={authFieldStyle} />
          </AuthField>
          {pwMsg && (
            <div style={{
              padding: '8px 10px', borderRadius: 'var(--radius-md)', fontSize: 12,
              background: pwMsg.type === 'ok' ? 'var(--hue-emerald-subtle)' : 'var(--hue-rose-subtle)',
              border: `1px solid ${pwMsg.type === 'ok' ? 'var(--hue-emerald)' : 'var(--hue-rose)'}`,
              color: pwMsg.type === 'ok' ? 'var(--hue-emerald)' : 'var(--hue-rose)',
            }}>{pwMsg.text}</div>
          )}
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
            <button className="sdh-btn sdh-btn--bronze" onClick={changePassword}
                    disabled={pwBusy || !oldPw || !newPw}>
              {pwBusy ? 'меняем...' : 'Изменить пароль'}
            </button>
          </div>
        </div>
      </Panel>
      <Panel title="опасная зона" help={{
        title: 'Опасные действия',
        what: 'Действия, которые невозможно отменить.',
        why: 'Прежде чем нажимать — экспортируйте важные данные. После удаления учётной записи восстановить будет нельзя, super-admin сможет только создать новое приглашение с тем же email.',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
          <button className="sdh-btn">Экспорт моих данных (JSON)</button>
          <button className="sdh-btn" style={{
            border: '1px solid var(--hue-rose)', color: 'var(--hue-rose)',
          }}>Удалить мою учётную запись</button>
        </div>
      </Panel>
    </div>
  );
}

window.AccountPage = AccountPage;