/* global React, ReactDOM, PARTNERS, FILTERS, OrbitScene, PartnerCard, CommandPalette, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakSlider */
const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#ff6a3d",
  "density": "comfortable",
  "showLiveConsole": true,
  "orbitSpeed": 36,
  "showDust": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [filter, setFilter] = useState('all');
  const [cpOpen, setCpOpen] = useState(false);
  const [orbitPaused, setOrbitPaused] = useState(false);
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const id = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  // ⌘K / Ctrl+K to open command palette
  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault(); setCpOpen(o => !o);
      }
      if (e.key === '/' && document.activeElement?.tagName !== 'INPUT') {
        e.preventDefault(); setCpOpen(true);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  // Apply tweaks to CSS vars
  useEffect(() => {
    document.documentElement.style.setProperty('--ember', t.accent);
    // derive an alpha glow color
    const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t.accent);
    if (m) {
      const r = parseInt(m[1],16), g = parseInt(m[2],16), b = parseInt(m[3],16);
      document.documentElement.style.setProperty('--ember-glow', `rgba(${r},${g},${b},0.55)`);
    }
  }, [t.accent]);

  // counts per category
  const counts = useMemo(() => {
    const c = { all: PARTNERS.length };
    PARTNERS.forEach(p => { c[p.cat] = (c[p.cat] || 0) + 1; });
    return c;
  }, []);

  const visible = useMemo(() => {
    if (filter === 'all') return PARTNERS;
    return PARTNERS.filter(p => p.cat === filter);
  }, [filter]);

  const timeStr = time.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });

  return (
    <>
      {/* atmosphere */}
      <div className="grain" />
      <div className="scanlines" />
      {t.showDust && (
        <div className="dust">
          {Array.from({length: 24}).map((_,i) => (
            <span key={i} style={{
              left: `${(i * 37) % 100}%`,
              bottom: `-${10 + (i*7) % 40}px`,
              animationDuration: `${12 + (i % 8) * 3}s`,
              animationDelay: `${(i * 0.7) % 8}s`,
              background: i % 3 === 0 ? 'var(--blue)' : i % 5 === 0 ? 'var(--green)' : 'var(--ember)',
            }} />
          ))}
        </div>
      )}

      {/* nav */}
      <header className="nav">
        <div className="brand">
          <span className="brand-dot" />
          <span className="brand-mark">Y<em>Stan</em></span>
          <span className="brand-meta">// Hub v3 · est. on-chain</span>
        </div>
        <nav className="nav-links">
          <a className="nav-link" href="#orbit">Orbit</a>
          <a className="nav-link" href="#partners">Partners</a>
          <a className="nav-link" href="https://discord.com/invite/dxnnJm8pha">Academy</a>
          <a className="nav-link" href="#partners">Channels</a>
          <button className="nav-cmd" onClick={() => setCpOpen(true)}>
            <span>Search the hub</span>
            <span className="kbd">⌘K</span>
          </button>
          <a className="nav-cta" href="https://discord.com/invite/dxnnJm8pha">Join Academy ↗</a>
        </nav>
      </header>

      {/* hero */}
      <section className="hero" id="orbit" data-screen-label="01 Hero · YStan Hub">
        <div className="hero-left">
          <div className="hero-eyebrow">
            <span className="live" />
            Index online · {timeStr} · KEY/INDEX
          </div>
          <h1 className="hero-title">
            Y<em>Stan</em><br />
            World.
            <span className="small">A self-custody universe in <em style={{color:'var(--ember)', fontStyle:'italic'}}>one place</em>.</span>
          </h1>
          <p className="hero-bio">
            Paid creator on X. <strong>CMC affiliate</strong>. <strong>Tangem Ambassador</strong>. <strong>OneKey Affiliate</strong>. Founder of <strong>Key Academy Society</strong> — a free community I created for people who want to learn self-custody and crypto security.
          </p>
          <div className="hero-badges">
            <span className="badge green"><span className="dot" />Tangem Ambassador</span>
            <span className="badge blue"><span className="dot" />OneKey Affiliate</span>
            <span className="badge gold"><span className="dot" />CMC Affiliate</span>
            <span className="badge"><span className="dot" />Founder · Key Academy</span>
          </div>
          <div className="hero-stats">
            <div className="hero-stat"><div className="v">{PARTNERS.length}<em>·</em>doors</div><div className="l">Partnerships + creations</div></div>
            <div className="hero-stat"><div className="v">2<em>·</em>wallets</div><div className="l">Tangem + OneKey</div></div>
            <div className="hero-stat"><div className="v">{counts.Content || 0}<em>·</em>channels</div><div className="l">Creator outlets</div></div>
          </div>
        </div>
        <div className="hero-right">
          <OrbitScene paused={orbitPaused} showConsole={t.showLiveConsole} />
        </div>
      </section>

      {/* command bar */}
      <div className="commandbar" id="partners">
        <span className="cb-label">// Filter</span>
        <div className="filters">
          {FILTERS.map(f => (
            <button key={f.id}
                    className={"filter" + (filter === f.id ? " active" : "")}
                    onClick={() => setFilter(f.id)}>
              {f.label}
              <span className="count">{counts[f.id === 'all' ? 'all' : f.id] || 0}</span>
            </button>
          ))}
        </div>
        <span className="cb-spacer" />
        <div className="cb-meta">
          <span><span className="dim">{visible.length}</span> / {PARTNERS.length} visible</span>
          <span>sorted by · <span className="dim">priority</span></span>
        </div>
      </div>

      {/* grid */}
      <section className="grid-wrap" data-screen-label="02 Partners">
        <div className="section-head">
          <h2>Partnerships, <em>in orbit</em>.</h2>
          <span className="sub">// {PARTNERS.length} YStan partnerships and creations · no investment portfolio</span>
        </div>
        <div className="grid">
          {visible.map(p => <PartnerCard key={p.id} p={p} />)}
        </div>
      </section>

      {/* stat strip */}
      <section className="strip" data-screen-label="03 Index">
        <div className="strip-cell">
          <div className="v">{PARTNERS.length}<em> doors</em></div>
          <div className="l">// Partnerships + creations</div>
          <div className="marquee">Human-reviewed links</div>
        </div>
        <div className="strip-cell">
          <div className="v">2<em> wallets</em></div>
          <div className="l">// Self-custody tools</div>
          <div className="marquee">Tangem + OneKey</div>
        </div>
        <div className="strip-cell">
          <div className="v">{counts.Content || 0}<em> channels</em></div>
          <div className="l">// Creator outlets</div>
          <div className="marquee">X · YouTube · Telegram</div>
        </div>
        <div className="strip-cell">
          <div className="v">Direct<em> links</em></div>
          <div className="l">// Official destinations</div>
          <div className="marquee">Education first</div>
        </div>
      </section>

      {/* footer */}
      <footer className="footer" data-screen-label="04 Footer">
        <div>
          <h5>// Manifesto</h5>
          <div className="big">Hold your <em>own</em> keys.</div>
          <p>This hub is not financial advice and it is not an investment portfolio. It is a directory of official partnerships, creator channels, and projects I created. Tap any card to open its official destination.</p>
          <div className="hero-stats" style={{borderTop:'none', paddingTop:0}}>
            <div className="hero-stat"><div className="v">Free</div><div className="l">Key Academy</div></div>
            <div className="hero-stat"><div className="v"><em>∞</em></div><div className="l">Questions welcome</div></div>
          </div>
        </div>
        <div>
          <h5>// Channels</h5>
          <ul>
            <li><a href="https://x.com/YStan__">X · @YStan__</a></li>
            <li><a href="https://www.youtube.com/@Studio.Y1">YouTube · Studio.Y1</a></li>
            <li><a href="https://youtube.com/@y.stangaming?si=-9YB2qdSmas2wAUT">YouTube · YStan Gaming</a></li>
            <li><a href="https://t.me/+jf86fbiXD4JhZDM0">Telegram · YStan Channel</a></li>
            <li><a href="https://kick.com/ystan1">Kick · /ystan1</a></li>
            <li><a href="https://discord.com/invite/dxnnJm8pha">Discord · Key Academy</a></li>
          </ul>
        </div>
        <div>
          <h5>// Wallets</h5>
          <ul>
            <li><a href="https://tangem.com/en/pricing/?promocode=YSTAN1&utm_source=tangem-rp&utm_medium=affiliate&utm_campaign=YSTAN1">Tangem · ambassador</a></li>
            <li><a href="https://onekey.so/?ref=ystan">OneKey · affiliate</a></li>
            <li><a href="https://radustan6.gumroad.com/l/crypto-simplified">Crypto Security Guide</a></li>
          </ul>
        </div>
        <div>
          <h5>// More Doors</h5>
          <ul>
            <li><a href="https://coinmarketcap.com/community/profile/YStan_">CoinMarketCap</a></li>
            <li><a href="https://www.bitget.com/referral/register?clacCode=YSTAN">Bitget · referral</a></li>
            <li><a href="https://neuralkeyofficial.netlify.app/">Neural Key</a></li>
          </ul>
        </div>
      </footer>
      <div className="footer-bottom">
        <span>// © 2026 YStan World · all rights, no advice</span>
        <span>Built ember-side · est. on-chain</span>
      </div>

      {/* floating dock */}
      <div className="dock">
        <span className="chip">⌘K · <strong>search</strong></span>
        <span className="chip" onClick={() => setOrbitPaused(p => !p)} style={{cursor:'pointer'}}>
          orbit · <strong>{orbitPaused ? 'paused' : 'live'}</strong>
        </span>
      </div>

      <CommandPalette
        open={cpOpen}
        onClose={() => setCpOpen(false)}
        onSelect={(item) => { window.location.href = item.url; }}
        items={PARTNERS}
      />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakColor label="Ember" value={t.accent} onChange={(v) => setTweak('accent', v)}
                      options={['#ff6a3d', '#5cc8ff', '#5eebb0', '#f0c674', '#ff4e63']} />
        </TweakSection>
        <TweakSection title="Atmosphere">
          <TweakToggle label="Floating dust" value={t.showDust} onChange={(v) => setTweak('showDust', v)} />
          <TweakToggle label="Live console" value={t.showLiveConsole} onChange={(v) => setTweak('showLiveConsole', v)} />
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio label="Grid" value={t.density} options={['compact','comfortable']} onChange={(v) => setTweak('density', v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);