// Screens 14-25 + Modals M1-M6 — Redeem, Referral, Billing, Settings, modals.
// Compact style — все экраны в одном файле, чтобы экономить структуру.

// ── 14-18: Redeem ─────────────────────────────────────────────────────
function Screen_Redeem() {
  const st = useAppState();
  const code = st.draft.redeemCode;
  const phase = st.redeem.state; // 'idle' | 'success' | 'error_not_found' | 'error_used' | 'error_expired'

  // Pre-fill from ?code= on first mount.
  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const fromUrl = params.get("code");
    if (fromUrl && !code) window.actions.setRedeemCode(fromUrl);
  }, []);

  const onChange = (e) => {
    window.actions.setRedeemCode(e.target.value.toUpperCase());
    if (phase !== "idle" && phase !== "success") window.setState((s) => { s.redeem.state = "idle"; });
  };
  const onSubmit = (e) => { e.preventDefault(); window.actions.submitRedeem(); };
  const pasteFromClipboard = async () => {
    try {
      const t = await navigator.clipboard.readText();
      window.actions.setRedeemCode((t || "").toUpperCase());
    } catch (_) {}
  };

  const errorMsg = {
    error_not_found: "Код не найден. Проверьте, что ввели правильно.",
    error_used: "Этот код уже использован. Если это не вы — напишите в поддержку.",
    error_expired: "Срок действия кода истёк. Напишите в поддержку — поможем.",
  }[phase];

  return (
    <Shell active="redeem" screenLabel="14 Redeem">
      <SectionHeader eyebrow="Ваучер" title="Активируйте код-ваучер" />
      <div style={{ maxWidth: 640 }}>
        <div className="ps" style={{ padding: 28 }}>
          {phase === "success" ? (
            <RedeemSuccess />
          ) : (
            <form onSubmit={onSubmit}>
              <div style={{ fontSize: 14, color: "var(--muted)", marginBottom: 18 }}>
                Ваучер выдают организаторы акций и подарочных промо. Оформить подписку можно <a href="#" onClick={(e) => { e.preventDefault(); window.navigate("keys-checkout"); }} style={{ color: "var(--accent-soft)", textDecoration: "none" }}>здесь</a> — для этого ваучер не нужен.
              </div>
              <input
                type="text"
                value={code}
                onChange={onChange}
                placeholder="XXXX-XXXX-XXXX-XXXX"
                autoFocus
                spellCheck={false}
                style={{
                  width: "100%", height: 64, padding: "0 18px",
                  borderRadius: 12,
                  border: errorMsg ? "1.5px solid var(--danger)" : code ? "1.5px solid var(--accent-soft)" : "1.5px solid var(--border-strong)",
                  background: "var(--bg-2)", color: "#FFF",
                  fontFamily: "ui-monospace, monospace", fontSize: 20, letterSpacing: 2,
                  outline: "none",
                }}
              />
              {errorMsg && (
                <div style={{ marginTop: 14, color: "var(--danger)", fontSize: 13.5, display: "flex", alignItems: "center", gap: 8 }}>
                  <Icons.alert /> {errorMsg}
                </div>
              )}
              <div style={{ marginTop: 22, display: "flex", gap: 10, flexWrap: "wrap" }}>
                <button type="submit" className="btn btn-primary btn-lg" disabled={!code}>Активировать</button>
                <button type="button" className="btn btn-ghost btn-lg" onClick={pasteFromClipboard}>Вставить из буфера</button>
              </div>
            </form>
          )}
        </div>
        <div style={{ marginTop: 18, fontSize: 13, color: "var(--muted)" }}>
          Нет ваучера? <a href="#" onClick={(e) => { e.preventDefault(); window.navigate("keys-checkout"); }} style={{ color: "var(--accent-soft)", textDecoration: "none" }}>Оформить подписку</a>
        </div>
      </div>
    </Shell>
  );
}

function RedeemSuccess() {
  const expires = window.fmtDate(window.appState.entitlement.expires_at);
  return (
    <div style={{ textAlign: "center", padding: "12px 6px" }}>
      <div style={{
        width: 80, height: 80, borderRadius: 999, margin: "0 auto 18px",
        background: "rgba(106,229,142,.15)", border: "1px solid rgba(106,229,142,.35)",
        color: "var(--green)", display: "grid", placeItems: "center",
      }}>
        <Icons.check />
      </div>
      <h2 style={{ margin: "0 0 8px", fontSize: 26, fontWeight: 800, letterSpacing: "-0.025em", color: "#FFF" }}>
        Подписка активирована
      </h2>
      <div style={{ fontSize: 15, color: "var(--muted)", marginBottom: 20 }}>
        Действует до {expires}. Откройте раздел «Подписка», чтобы создать ссылку для подключения.
      </div>
      <div style={{ display: "inline-flex", gap: 10 }}>
        <button className="btn btn-primary btn-lg" onClick={() => { window.actions.resetRedeem(); window.navigate("keys"); }}>Открыть подписку</button>
        <button className="btn btn-ghost btn-lg" onClick={() => { window.actions.resetRedeem(); window.navigate("home"); }}>На главную</button>
      </div>
    </div>
  );
}

// ── 19-20: Referral (по требованиям §2.1) ────────────────────────────
// Три статуса: pending / approved / rejected. Награда — дни доступа (не деньги).
// Anti-fraud правила явно в копирайте.
function Screen_Referral() {
  const st = useAppState();
  const referral = st.referral || {};
  const refStats = referral.stats || {};
  const invites = Array.isArray(referral.invites) ? referral.invites : [];
  const referralURL = referral.url || "";

  React.useEffect(() => {
    if (!referral.loaded && !referral.loading && window.actions?.loadReferral) {
      window.actions.loadReferral();
    }
  }, []);

  const stats = [
    { v: String(refStats.invited || 0), l: "Приглашено" },
    { v: String(refStats.paid || 0), l: "Оплатили", note: "после первой реальной оплаты" },
    { v: String(refStats.reward_days_approved || 0), l: "Дней начислено", note: "по +10 дней вам и другу", grad: true },
  ];

  const shareReferral = async () => {
    if (!referralURL) return;
    if (navigator.share) {
      try {
        await navigator.share({
          title: "Fortune VPN",
          text: "Попробуй Fortune VPN: один аккаунт, подписка для V2Ray и Incy.",
          url: referralURL,
        });
        return;
      } catch (_) {}
    }
    window.actions.copyToClipboard(referralURL, "Реферальная ссылка скопирована");
  };

  return (
    <Shell active="referral" screenLabel="19 Referral">
      <SectionHeader eyebrow="Программа друзей" title="Реферальная программа" />

      {/* Hero block: ref-link + stats */}
      <div className="ps" style={{ padding: 28, marginBottom: 16 }}>
        <div data-grid="cards" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24, marginBottom: 22 }}>
          {stats.map((s, i) => (
            <div key={i}>
              <div className={s.grad ? "grad-text" : ""} style={{ fontSize: 32, fontWeight: 800, letterSpacing: "-0.04em", color: s.grad ? undefined : "#FFF" }}>{s.v}</div>
              <div style={{ fontSize: 12, color: "var(--muted)", textTransform: "uppercase", letterSpacing: 1, marginTop: 4 }}>{s.l}</div>
              {s.note && <div style={{ fontSize: 12, color: "var(--dim)", marginTop: 2 }}>{s.note}</div>}
            </div>
          ))}
        </div>
        <div style={{ fontSize: 13, color: "var(--muted)", marginBottom: 8 }}>Ваша реферальная ссылка</div>
        <div style={{
          display: "flex", alignItems: "center", gap: 10, padding: "12px 14px",
          background: "var(--bg-2)", border: "1px solid var(--border)", borderRadius: 12,
          flexWrap: "wrap",
        }}>
          <span style={{ flex: "1 1 240px", minWidth: 0, fontSize: 13.5, color: "var(--muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
            {referral.loading ? "Загружаем ссылку..." : referralURL || "Не удалось получить ссылку. Обновите страницу или напишите в поддержку."}
          </span>
          <button
            className="btn btn-ghost"
            style={{ padding: "6px 12px", opacity: referralURL ? 1 : 0.55, cursor: referralURL ? "pointer" : "not-allowed" }}
            disabled={!referralURL}
            onClick={() => window.actions.copyToClipboard(referralURL, "Реферальная ссылка скопирована")}
          >
            <Icons.copy /> Скопировать
          </button>
          <button
            className="btn btn-primary"
            style={{ padding: "8px 14px", opacity: referralURL ? 1 : 0.55, cursor: referralURL ? "pointer" : "not-allowed" }}
            disabled={!referralURL}
            onClick={shareReferral}
          >
            <Icons.send /> Поделиться
          </button>
        </div>
        {referral.error && (
          <div style={{ marginTop: 10, color: "var(--danger)", fontSize: 13 }}>
            {referral.error}
          </div>
        )}
      </div>

      {/* How it works — три шага */}
      <div className="ps" style={{ padding: 24, marginBottom: 16 }}>
        <h3 style={{ margin: "0 0 14px", fontSize: 16, fontWeight: 700 }}>Как это работает</h3>
        <div data-grid="cards" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
          <RefStep n="1" title="Поделитесь ссылкой">С другом, в чате, в соцсети.</RefStep>
          <RefStep n="2" title="Друг оплачивает подписку">Засчитываем только настоящую оплату — не тестовый тариф, не ваучер.</RefStep>
          <RefStep n="3" title="Получаете дни">+10 дней вам и +10 дней другу после подтверждения оплаты.</RefStep>
        </div>
      </div>

      {/* Anti-fraud rules — by req §2.1 */}
      <div style={{
        padding: "16px 18px", marginBottom: 16,
        background: "rgba(245,166,35,.08)", border: "1px solid rgba(245,166,35,.25)",
        borderRadius: 12,
        display: "flex", gap: 12, alignItems: "flex-start",
      }}>
        <span style={{ color: "var(--warning)", flexShrink: 0, marginTop: 2 }}><Icons.info /></span>
        <div style={{ fontSize: 13.5, color: "var(--ink)", lineHeight: 1.6 }}>
          <b style={{ display: "block", marginBottom: 6 }}>Когда бонус не начисляется</b>
          • Друг просто зарегистрировался, но ничего не оплатил<br />
          • Друг использовал тестовый тариф или ваучер<br />
          • Бонус начисляется после подтверждения первой реальной оплаты<br />
          • Нельзя пригласить самого себя или несколько аккаунтов с одного устройства / IP
        </div>
      </div>

      {/* Invitations table — pending/approved/rejected */}
      <div className="ps" style={{ padding: 0, overflow: "hidden" }}>
        <div style={{ padding: "16px 22px", borderBottom: "1px solid var(--border)", fontSize: 14, fontWeight: 600 }}>
          История приглашений
        </div>
        <div style={{ overflowX: "auto" }}>
          {invites.map((r, i) => (
            <RefRow key={i} {...r} />
          ))}
          {invites.length === 0 && (
            <div style={{ padding: "32px 22px", textAlign: "center", color: "var(--muted)", fontSize: 13.5 }}>
              Пока нет приглашений. Поделитесь ссылкой выше: регистрация друга появится здесь после входа в ЛК, а бонус — после первой реальной оплаты.
            </div>
          )}
        </div>
      </div>
    </Shell>
  );
}

const RefStep = ({ n, title, children }) => (
  <div>
    <div style={{
      width: 28, height: 28, borderRadius: 8, display: "grid", placeItems: "center",
      background: "rgba(46,168,255,.12)", border: "1px solid rgba(46,168,255,.22)",
      color: "var(--accent-soft)", fontSize: 13, fontWeight: 700, marginBottom: 10,
    }}>{n}</div>
    <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>{title}</div>
    <div style={{ fontSize: 13, color: "var(--muted)", lineHeight: 1.55 }}>{children}</div>
  </div>
);

const RefRow = ({ email, email_masked, registered_at, date, reward_days, days, status, note, reason }) => {
  const STATUS_META = {
    pending:          { label: "Ожидает",       kind: "pending", color: "var(--warning)" },
    pending_payment:  { label: "Ждём оплату",   kind: "pending", color: "var(--warning)" },
    pending_review:   { label: "На проверке",   kind: "pending", color: "var(--warning)" },
    pending_apply:    { label: "Начисляем",     kind: "pending", color: "var(--warning)" },
    applied:          { label: "Начислен",      kind: "active",  color: "var(--green)" },
    approved:         { label: "Подтверждён",   kind: "active",  color: "var(--green)" },
    rejected:         { label: "Отклонён",      kind: "danger",  color: "var(--danger)" },
  }[status] || { label: "Ожидает", kind: "pending", color: "var(--warning)" };
  const displayDate = date || (registered_at ? window.fmtDate(registered_at) : "-");
  const displayDays = Number(reward_days ?? days ?? 0);
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "minmax(180px, 1.4fr) 100px 100px 100px 1fr",
      gap: 14, padding: "14px 22px",
      borderBottom: "1px dashed var(--border)", fontSize: 13.5, alignItems: "center",
      minWidth: 640,
    }}>
      <span style={{ fontFamily: "ui-monospace, monospace" }}>{email_masked || email || "-"}</span>
      <span style={{ color: "var(--muted)" }}>{displayDate}</span>
      <Badge kind={STATUS_META.kind}>{STATUS_META.label}</Badge>
      <span style={{
        textAlign: "right", fontFamily: "ui-monospace, monospace", fontWeight: 600,
        color: status === "rejected" ? "var(--muted)" : String(status || "").startsWith("pending") ? "var(--warning)" : "var(--green)",
      }}>{displayDays} дней</span>
      <span style={{ color: "var(--dim)", fontSize: 12.5 }}>{note || reason || ""}</span>
    </div>
  );
};

// ── 21-22: Billing ────────────────────────────────────────────────────
function Screen_Billing() {
  // Mock-данные: только подписка (Android-приложение "скоро", в истории его быть не может).
  // Бренд платёжного провайдера в customer UI не показываем (см. FRONTEND_AGENT_HANDOFF.md).
  const rows = [
    { d: "11.05.2026", t: "Подписка · 1 мес",  s: "СБП",            a: "99 ₽", k: "ok" },
    { d: "11.04.2026", t: "Подписка · 1 мес",  s: "Карта •• 4242", a: "99 ₽", k: "ok" },
    { d: "11.03.2026", t: "Подписка · 1 мес",  s: "Карта •• 4242", a: "99 ₽", k: "ok" },
  ];
  return (
    <Shell active="billing" screenLabel="21 Billing">
      <SectionHeader eyebrow="ФИНАНСЫ" title="Платежи и чеки" />
      <div data-grid="cards" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14, marginBottom: 20 }}>
        {[
          { v: "297 ₽",      l: "Оплачено за 3 платежа" },
          { v: "3",          l: "Успешных платежа" },
          { v: "15.07.2026", l: "Действует до" },
        ].map((s, i) => (
          <div key={i} className="ps" style={{ padding: 18 }}>
            <div style={{ fontSize: 11, color: "var(--muted)", letterSpacing: 1, textTransform: "uppercase" }}>{s.l}</div>
            <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: "-0.03em", marginTop: 6, color: "#FFF" }}>{s.v}</div>
          </div>
        ))}
      </div>
      <div className="ps" style={{ padding: 0, overflow: "hidden" }}>
        <div style={{ padding: "16px 22px", borderBottom: "1px solid var(--border)", fontSize: 14, fontWeight: 600, display: "flex", justifyContent: "space-between" }}>
          <span>История</span>
          <button className="btn btn-ghost" style={{ padding: "6px 10px" }}><Icons.download /> Все чеки</button>
        </div>
        {/* На узких экранах таблица скроллится горизонтально, не ломая layout */}
        <div style={{ overflowX: "auto" }}>
          {rows.map((r, i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "110px minmax(180px, 1fr) minmax(160px, 1fr) 90px 40px",
              gap: 14, padding: "14px 22px",
              borderBottom: "1px dashed var(--border)", fontSize: 13.5, alignItems: "center",
              minWidth: 560,
            }}>
              <span style={{ color: "var(--muted)" }}>{r.d}</span>
              <span>{r.t}</span>
              <span style={{ color: "var(--muted)", fontSize: 12.5 }}>{r.s}</span>
              <span style={{ textAlign: "right", fontVariantNumeric: "tabular-nums", color: r.k === "ok" ? "#FFF" : "var(--muted)", fontWeight: 600 }}>{r.a}</span>
              <button className="btn btn-ghost" style={{ padding: "6px 8px" }}><Icons.download /></button>
            </div>
          ))}
        </div>
      </div>
      <Assumption>Чеки — PDF, соответствуют 54-ФЗ. Ссылка на чек хранится 3 года.</Assumption>
    </Shell>
  );
}

// ── 23-25: Settings ───────────────────────────────────────────────────
function Screen_Settings() {
  const s = useAppState();
  const email = s.user.email || "name@example.com";
  const locale = s.locale === "en" ? "en" : "ru";
  const copy = locale === "en" ? {
    eyebrow: "Account",
    title: "Settings",
    profile: "Profile",
    email: "Email",
    verified: "verified",
    change: "Change",
    changeEmailToast: "Email changes are not available yet. Contact support.",
    language: "Interface language",
    languageValue: "English",
    switchLabel: "RU",
  } : {
    eyebrow: "Аккаунт",
    title: "Настройки",
    profile: "Профиль",
    email: "Email",
    verified: "подтверждён",
    change: "Сменить",
    changeEmailToast: "Смена email пока недоступна — напишите в поддержку",
    language: "Язык интерфейса",
    languageValue: "Русский",
    switchLabel: "EN",
  };
  const Row = ({ label, value, action }) => (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "16px 22px", borderBottom: "1px dashed var(--border)", gap: 16 }}>
      <div>
        <div style={{ fontSize: 14, fontWeight: 500 }}>{label}</div>
        <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 2 }}>{value}</div>
      </div>
      {action}
    </div>
  );
  return (
    <Shell active="settings" screenLabel="23 Settings">
      <SectionHeader eyebrow={copy.eyebrow} title={copy.title} />
      <div className="ps" style={{ padding: 0, marginBottom: 16 }}>
        <div style={{ padding: "16px 22px", borderBottom: "1px solid var(--border)", fontSize: 13, color: "var(--muted)", textTransform: "uppercase", letterSpacing: 1 }}>{copy.profile}</div>
        <Row label={copy.email} value={`${email} · ${copy.verified}`} action={<button className="btn btn-ghost" style={{ padding: "6px 12px" }} onClick={() => window.actions.toast(copy.changeEmailToast)}>{copy.change}</button>} />
        <Row label={copy.language} value={copy.languageValue} action={<button className="btn btn-ghost" style={{ padding: "6px 12px" }} onClick={() => window.actions.toggleLocale()}>{copy.switchLabel}</button>} />
      </div>

      {/* Web ↔ App link note — по требованию §2.2 */}
      <div style={{
        padding: "12px 18px", marginBottom: 16,
        background: "rgba(46,168,255,.06)", border: "1px solid rgba(46,168,255,.22)",
        borderRadius: 12,
        display: "flex", gap: 12, alignItems: "flex-start",
      }}>
        <span style={{ color: "var(--accent-soft)", flexShrink: 0, marginTop: 1 }}><Icons.info size={16} /></span>
        <div style={{ fontSize: 13.5, color: "var(--ink)", lineHeight: 1.55 }}>
          Используйте <span className="mono">{email}</span> при входе в Android-приложение —
          подписка и устройства будут привязаны к одному аккаунту.
        </div>
      </div>

      {/* Поддержка — два канала: Telegram и email (email работает без VPN) */}
      <div className="ps" style={{ padding: 0, marginBottom: 16 }}>
        <div style={{ padding: "16px 22px", borderBottom: "1px solid var(--border)", fontSize: 13, color: "var(--muted)", textTransform: "uppercase", letterSpacing: 1 }}>Поддержка</div>
        <Row
          label="Telegram"
          value="Основной канал · отвечаем в течение дня"
          action={<a href="https://t.me/FortuneVPNsupportbot" target="_blank" rel="noopener" className="btn btn-ghost" style={{ padding: "6px 12px", textDecoration: "none" }}>Открыть</a>}
        />
        <Row
          label="Telegram-канал"
          value="Новости сервиса, статусы и объявления"
          action={<a href="https://t.me/fortune_tavern_vpn" target="_blank" rel="noopener" className="btn btn-ghost" style={{ padding: "6px 12px", textDecoration: "none" }}>Открыть</a>}
        />
        <Row
          label="Email"
          value="Если Telegram недоступен без VPN"
          action={<a href="mailto:support@fortunetavern.com" className="btn btn-ghost" style={{ padding: "6px 12px", textDecoration: "none" }}>Написать</a>}
        />
      </div>

      {/* Danger zone — отдельный контейнер с красным border (GitHub-pattern). */}
      <div className="ps" style={{
        padding: 0,
        border: "1px solid rgba(229,72,77,.30)",
        background: "linear-gradient(180deg, rgba(229,72,77,.04), rgba(255,255,255,0.01))",
      }}>
        <div style={{ padding: "16px 22px", borderBottom: "1px solid rgba(229,72,77,.20)", fontSize: 13, color: "var(--danger)", textTransform: "uppercase", letterSpacing: 1, fontWeight: 700 }}>Опасная зона</div>
        <Row label="Выйти" value="Закончит сессию в этом браузере" action={<button className="btn btn-ghost" onClick={() => window.actions.logout()}>Выйти</button>} />
        <Row label="Удалить аккаунт" value="Восстановить аккаунт не получится" action={<button className="btn btn-danger" onClick={() => window.actions.openModal("delete")}>Удалить</button>} />
      </div>
    </Shell>
  );
}

// Note: модалки M1-M5 живут в screens-modals.jsx и монтируются через ModalOverlay в app.jsx.
// Старый Screen_Modal с устаревшими терминами удалён (P1-1 из UX-аудита 2026-05-11).

Object.assign(window, {
  Screen_Redeem, Screen_Referral, Screen_Billing, Screen_Settings,
});