// ════════════════════════════════════════════════════════════════
// InviteRedeemPage — публичный, без auth, принятие приглашения
// /invite/<token> → POST /api/invites/<token>/redeem → api_token (один раз)
// ════════════════════════════════════════════════════════════════

function InviteRedeemPage({ inviteToken, onAccepted, onLogin }) {
  // Find mock invite
  const invite = window.SDH_ADMIN.invites.find(i => i.token === inviteToken)
    || window.SDH_ADMIN.invites.find(i => i.status === 'pending'); // fallback first pending
  const inviter = invite && window.SDH_ADMIN.users.find(u => u.name === invite.inviter);

  const [name, setName] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [confirm, setConfirm] = React.useState('');
  const [agree, setAgree] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [accepted, setAccepted] = React.useState(false);
  const [apiToken, setApiToken] = React.useState(null);
  const [error, setError] = React.useState(null);

  if (!invite) {
    return (
      <div style={inviteShellStyle}>
        <div style={inviteCardStyle}>
          <span className="sdh-section-label">приглашение не найдено</span>
          <h1 style={inviteH1Style}>
            Эта <em style={inviteEmStyle}>ссылка</em> уже не работает
          </h1>
          <p className="sdh-quote">
            Возможно, приглашение было отозвано, истёк его срок (7 дней) или уже принято на другом устройстве. Свяжитесь с человеком, который вас приглашал, чтобы получить новую ссылку.
          </p>
          <button className="sdh-btn" style={{ marginTop: 'var(--space-4)' }} onClick={onLogin}>
            Перейти на вход
          </button>
        </div>
      </div>
    );
  }

  // Password strength (mock: length-based)
  const pwStrength = password.length === 0 ? 0
    : password.length < 8 ? 0.25
    : password.length < 12 ? 0.5
    : /[A-Z]/.test(password) && /[0-9]/.test(password) && /[^a-zA-Z0-9]/.test(password) ? 1
    : 0.75;

  async function submit(e) {
    e.preventDefault();
    if (password !== confirm) { setError('Пароли не совпадают'); return; }
    if (password.length < 12) { setError('Минимум 12 символов'); return; }
    if (!agree) { setError('Необходимо согласие'); return; }
    if (!name || name.trim().length < 2) { setError('Имя обязательно'); return; }
    setError(null);
    setSubmitting(true);

    // ── API mode: real backend ──
    if (window.SDH_USE_API && window.SDH_HYDRATE) {
      try {
        const resp = await window.SDH_HYDRATE.redeemInvite(inviteToken, name.trim(), password);
        setApiToken(resp.api_token);
        setAccepted(true);
        setSubmitting(false);
      } catch (err) {
        let msg = err && err.message;
        if (err && err.status === 410) msg = 'Срок приглашения истёк. Запросите новую ссылку.';
        else if (err && err.status === 404) msg = 'Приглашение не найдено или уже принято.';
        setError(msg || 'Ошибка принятия приглашения');
        setSubmitting(false);
      }
      return;
    }

    // ── Mock mode ──
    setTimeout(() => {
      // Generate mock API token
      const t = 'mcp_' + Math.random().toString(36).slice(2, 8) + Math.random().toString(36).slice(2, 8) + '_' + Date.now().toString(36);
      setApiToken(t);
      setAccepted(true);
      setSubmitting(false);
    }, 600);
  }

  const roleCfg = window.SDH_ADMIN.ROLES.find(r => r.id === invite.role);

  if (accepted) {
    return (
      <div style={inviteShellStyle}>
        <div style={{ ...inviteCardStyle, maxWidth: 560 }}>
          <span className="sdh-section-label">приглашение принято</span>
          <h1 style={inviteH1Style}>
            Добро пожаловать <em style={inviteEmStyle}>в систему</em>
          </h1>
          <p className="sdh-quote">
            Вам назначена роль <RoleBadge role={invite.role} size="sm" />. Ниже — ваш Bearer token для API доступа. Сохраните его в менеджер паролей сейчас, иначе придётся регенерировать.
          </p>

          <div style={{ marginTop: 'var(--space-6)' }}>
            <TokenDisplay value={apiToken} label="ваш Bearer токен · виден один раз" />
          </div>

          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 'var(--space-6)' }}>
            <button className="sdh-btn sdh-btn--bronze" onClick={() => onAccepted && onAccepted(invite)}>
              Я сохранил, продолжить
              <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>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div style={inviteShellStyle}>
      <div style={inviteCardStyle}>
        <span className="sdh-section-label">приглашение в symbiosis.datahub</span>
        <h1 style={inviteH1Style}>
          Добро <em style={inviteEmStyle}>пожаловать</em>
        </h1>
        <p className="sdh-quote" style={{ marginBottom: 'var(--space-6)' }}>
          Вас пригласил <strong style={{ color: 'var(--text-primary)' }}>{invite.inviter}</strong> как <RoleBadge role={invite.role} size="sm" />. Завершите регистрацию, чтобы получить доступ.
        </p>

        {/* Role explainer */}
        <div style={{
          padding: 'var(--space-4)',
          background: `var(--hue-${roleCfg.hue === 'bronze' ? 'amber' : roleCfg.hue}-subtle)`,
          borderLeft: `3px solid ${roleCfg.hue === 'bronze' ? 'var(--brand-bronze)' : `var(--hue-${roleCfg.hue})`}`,
          borderRadius: '0 var(--radius-md) var(--radius-md) 0',
          marginBottom: 'var(--space-6)',
        }}>
          <div className="sdh-mono-label" style={{ marginBottom: 4 }}>что значит роль</div>
          <p style={{ margin: 0, fontSize: 13.5, color: 'var(--text-primary)', lineHeight: 1.5 }}>
            {roleCfg.what}
          </p>
        </div>

        <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
          <AuthField label="Email">
            <input type="email" value={invite.email} readOnly
              style={{ ...authFieldStyle, background: 'var(--surface-sunken)', color: 'var(--text-secondary)' }} />
          </AuthField>

          <AuthField label="Имя (как обращаться)">
            <input type="text" required value={name} onChange={e => setName(e.target.value)}
              autoFocus style={authFieldStyle} placeholder="например: Иван Шевцов" />
          </AuthField>

          <AuthField label="Пароль (минимум 12 символов)">
            <input type="password" required value={password} onChange={e => setPassword(e.target.value)}
              style={authFieldStyle} placeholder="придумайте надёжный" />
            {password && (
              <div style={{ marginTop: 6, display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ flex: 1, height: 4, background: 'var(--surface-sunken)', borderRadius: 2, overflow: 'hidden' }}>
                  <div style={{
                    width: `${pwStrength * 100}%`, height: '100%',
                    background: pwStrength === 1 ? 'var(--success)' : pwStrength > 0.5 ? 'var(--warning)' : 'var(--danger)',
                    transition: 'width .15s',
                  }} />
                </div>
                <span className="sdh-mono-label" style={{ marginBottom: 0 }}>
                  {pwStrength === 1 ? 'надёжный' : pwStrength > 0.5 ? 'нормально' : 'слабый'}
                </span>
              </div>
            )}
          </AuthField>

          <AuthField label="Подтвердите пароль">
            <input type="password" required value={confirm} onChange={e => setConfirm(e.target.value)}
              style={authFieldStyle} />
          </AuthField>

          <label style={{
            display: 'flex', alignItems: 'flex-start', gap: 10,
            padding: 'var(--space-3)',
            background: 'var(--surface-sunken)',
            borderRadius: 'var(--radius-md)',
            fontSize: 12.5, color: 'var(--text-secondary)', lineHeight: 1.5,
            cursor: 'pointer',
          }}>
            <input type="checkbox" checked={agree} onChange={e => setAgree(e.target.checked)}
              style={{ accentColor: 'var(--brand-bronze)', marginTop: 2 }} />
            <span>
              Я принимаю, что доступ может быть отозван в любой момент по решению super-admin. Все действия логируются. Bearer token — только мой, не передавать третьим лицам.
            </span>
          </label>

          {error && (
            <div style={{
              padding: '10px 12px',
              background: 'var(--hue-rose-subtle)',
              border: '1px solid var(--hue-rose)',
              borderRadius: 'var(--radius-md)',
              fontSize: 13, color: 'var(--hue-rose)',
            }}>{error}</div>
          )}

          <button type="submit" className="sdh-btn sdh-btn--bronze" disabled={submitting}
            style={{ justifyContent: 'center', padding: '12px', fontSize: 14, fontWeight: 600, opacity: submitting ? 0.5 : 1 }}>
            {submitting ? 'создаём аккаунт...' : 'Принять приглашение'}
          </button>
        </form>
      </div>
    </div>
  );
}

const inviteShellStyle = {
  minHeight: '100vh',
  background: 'linear-gradient(180deg, var(--hue-emerald-subtle), var(--surface-canvas) 50%)',
  display: 'flex', flexDirection: 'column',
  alignItems: 'center', justifyContent: 'center',
  padding: 'var(--space-8) var(--space-4)',
};

const inviteCardStyle = {
  width: '100%', maxWidth: 500,
  background: 'var(--surface-elevated)',
  borderRadius: 'var(--radius-2xl)',
  border: '1px solid var(--border-subtle)',
  boxShadow: 'var(--shadow-lg)',
  padding: 'var(--space-8)',
};

const inviteH1Style = {
  margin: '0 0 var(--space-3)',
  fontSize: 32, fontWeight: 600, letterSpacing: '-0.025em',
  color: 'var(--text-primary)', lineHeight: 1.1,
};

const inviteEmStyle = {
  fontFamily: 'var(--font-display)', fontStyle: 'italic',
  color: 'var(--brand-bronze-deep)', fontWeight: 600,
};

window.InviteRedeemPage = InviteRedeemPage;