/* global React, Ic, BigOrb, fluxActions, useFlux */
// Sign-in gate — private app, sign-in required to view (matches mockup vibe)
function SignIn() {
  const s = useFlux();
  const liveCount = s.discounts.length;
  const last = s.discounts[0];
  return (
    <div className="panel haze" style={{ height: "100vh", width: "100vw", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <div className="wavebg">
        <svg viewBox="0 0 1440 900" preserveAspectRatio="none" style={{ width: "100%", height: "100%" }}>
          {[0, 1, 2, 3, 4, 5, 6].map((i) => (
            <path key={i}
              d={`M0 ${120 + i * 110} C 240 ${80 + i * 110}, 480 ${160 + i * 110}, 720 ${110 + i * 110} S 1200 ${60 + i * 110}, 1440 ${130 + i * 110} L 1440 900 L 0 900 Z`}
              fill={`rgba(${20 + i * 4}, ${24 + i * 4}, ${70 + i * 8}, 0.18)`} />
          ))}
        </svg>
      </div>

      <div className="content" style={{ width: 460, textAlign: "center", padding: 24 }}>
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 28 }}>
          <BigOrb size={84} />
        </div>
        <h1 style={{ fontSize: 42, fontWeight: 700, letterSpacing: "-0.02em", margin: 0 }} className="glow">
          Flux <span style={{ color: "var(--indigo)" }}>Discounts</span>
        </h1>
        <div style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--text-3)", marginTop: 8, textTransform: "uppercase" }}>
          Discounts Database · Ingestion API · Webhooks
        </div>

        <div className="card" style={{ marginTop: 34, padding: 18, display: "grid", gridTemplateColumns: "1fr 1fr 1fr" }}>
          {[
            { v: liveCount.toLocaleString(), l: "Live discounts", s: "In the database" },
            { v: s.apiKeys.filter((k) => !k.revoked).length, l: "Active keys", s: "Scrapers posting" },
            { v: s.webhooks.filter((w) => w.active).length, l: "Webhooks", s: "Discord channels" },
          ].map((x, i) => (
            <div key={i} style={{ padding: "8px 14px", borderLeft: i === 0 ? "none" : "1px solid var(--border)" }}>
              <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em" }}>{x.v}</div>
              <div style={{ fontSize: 11.5, color: "var(--indigo)", marginTop: 4, fontWeight: 500 }}>{x.l}</div>
              <div style={{ fontSize: 10.5, color: "var(--text-3)", marginTop: 3 }}>{x.s}</div>
            </div>
          ))}
        </div>

        <button className="btn primary lg" style={{ marginTop: 26, width: "100%", justifyContent: "center", padding: "13px 18px", fontSize: 14 }}
          onClick={() => fluxActions.signIn()}>
          <Ic.discord style={{ width: 18, height: 18 }} />
          Sign in with Discord
        </button>
        <div style={{ fontSize: 11, color: "var(--text-3)", marginTop: 12 }}>
          Private dashboard · members only
        </div>

        <div style={{ marginTop: 22, display: "inline-flex", alignItems: "center", gap: 7, fontSize: 11, color: "var(--text-2)" }}>
          <span className="live-dot"></span>
          Database synced{last ? <> · <span style={{ color: "var(--text-3)" }}>last entry {window.timeAgo(last.created_at)}</span></> : null}
        </div>
      </div>
    </div>
  );
}
window.SignIn = SignIn;