const { useState, useEffect, useMemo, useRef } = React;

// ============= Theme presets =============
const THEMES = {
  noir:   { '--bg-0': '#050505', '--bg-1': '#0b0b0c', '--fg-0': '#ededed', '--fg-1': '#9a9a9c', '--fg-2': '#555558', '--line': 'rgba(255,255,255,0.08)', '--line-strong': 'rgba(255,255,255,0.18)' },
  ink:    { '--bg-0': '#070a0e', '--bg-1': '#0b1015', '--fg-0': '#e6ecf2', '--fg-1': '#8b97a3', '--fg-2': '#4a525c', '--line': 'rgba(180,210,255,0.08)', '--line-strong': 'rgba(180,210,255,0.20)' },
  bone:   { '--bg-0': '#0e0c0a', '--bg-1': '#15110d', '--fg-0': '#f1ebe1', '--fg-1': '#a89e90', '--fg-2': '#5c544a', '--line': 'rgba(255,230,200,0.08)', '--line-strong': 'rgba(255,230,200,0.20)' },
};

function applyTheme(name, glow) {
  const t = THEMES[name] || THEMES.noir;
  const r = document.documentElement;
  Object.entries(t).forEach(([k,v]) => r.style.setProperty(k, v));
  r.style.setProperty('--glow', String(glow));
}

// ============= Cryptic scrambler =============
// Reveals fragments of a string with mostly █/▓/◇/glyph noise, occasionally
// flashing a real char before re-obscuring. Never resolves fully.
const NOISE = '█▓▒░◇◈◆⌖⌑⎔⏣⏥◯◌◍◐◑◒◓';
function useCipher(seed = 'PRXVT.AI.TRANSMISSION.001', revealRate = 0.18) {
  const [out, setOut] = useState('');
  useEffect(() => {
    let raf;
    const tick = () => {
      let s = '';
      for (let i = 0; i < seed.length; i++) {
        const ch = seed[i];
        if (ch === '.' || ch === ' ' || ch === '·') { s += ch; continue; }
        s += Math.random() < revealRate
          ? ch
          : NOISE[(Math.floor(Math.random() * NOISE.length))];
      }
      setOut(s);
      raf = setTimeout(tick, 90);
    };
    tick();
    return () => clearTimeout(raf);
  }, [seed, revealRate]);
  return out;
}

// ============= Wordmark =============
function Wordmark({ text = 'PRXVT AI' }) {
  return (
    <h1 className="wordmark" aria-label={text}>
      {text.split('').map((ch, i) => (
        ch === ' '
          ? <span key={i} className="gap" />
          : <span key={i} className="char" style={{ animationDelay: `${0.45 + i * 0.07}s` }}>{ch}</span>
      ))}
    </h1>
  );
}

// ============= Signup (minimal) =============
function Signup() {
  const [val, setVal] = useState('');
  const [state, setState] = useState('idle');

  const submit = (e) => {
    e.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)) {
      setState('error');
      setTimeout(() => setState('idle'), 1400);
      return;
    }
    setState('success');
  };

  if (state === 'success') {
    return (
      <div className="signup-min done">
        <span className="lead">◇</span>
        <span className="ok-text">Received. Stand by.</span>
      </div>
    );
  }

  return (
    <form className={`signup-min ${state}`} onSubmit={submit}>
      <span className="lead">◇</span>
      <input
        type="email"
        placeholder="leave a signal"
        value={val}
        onChange={(e) => setVal(e.target.value)}
        autoComplete="email"
        spellCheck={false}
        aria-label="Email"
      />
      <button type="submit" aria-label="Submit">→</button>
    </form>
  );
}

// ============= Cipher line =============
function CipherLine({ seed, rate, className = 'cipher' }) {
  const out = useCipher(seed, rate);
  // Lock every char to 1ch so non-monospace fallback glyphs don't shift layout.
  return (
    <span className={className}>
      {out.split('').map((c, i) => (
        <span key={i} className="cell">{c}</span>
      ))}
    </span>
  );
}

// ============= App =============
function App() {
  const [t, setTweak] = useTweaks(window.__TWEAK_DEFAULTS);
  useEffect(() => { applyTheme(t.theme, t.glow); }, [t.theme, t.glow]);

  return (
    <div className="stage">
      <div className="watermark" aria-hidden="true">PRXVT</div>
      <div className="scanline" />
      <div className="grain" />

      <header className="rail">
        <div className="rail-left">
          <span className="dot" />
          <CipherLine seed="TRANSMISSION.001" rate={0.22} />
        </div>
        <div className="rail-right">
          <CipherLine seed="◇···◇···◇···◇···◇" rate={0.5} className="cipher dim" />
        </div>
      </header>

      <main>
        <div className="center">
          <div className="logo-wrap">
            <span className="line l" />
            <span className="line r" />
            <div className="medallion">
              <span className="tick n" /><span className="tick s" />
              <span className="tick e" /><span className="tick w" />
              <img src="assets/prxvt-logo.jpg" alt="" />
            </div>
          </div>

          <Wordmark text="PRXVT AI" />

          <p className="tagline">
            <span className="dash" />{t.tagline}<span className="dash" />
          </p>

          <div className="cipher-row" aria-hidden="true">
            <CipherLine seed={t.cipherSeed || "—— ⌖ ——— ◇ ——— ⌖ ——"} rate={0.34} />
          </div>
        </div>

        <footer className="footer">
          <div className="foot-l">
            <CipherLine seed="MMXXVI" rate={0.3} className="cipher tight" />
          </div>
          <div className="foot-r">
            <span>privacy preserving ai</span>
          </div>
        </footer>
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio
          label="Palette"
          value={t.theme}
          onChange={(v) => setTweak('theme', v)}
          options={[
            { value: 'noir', label: 'Noir' },
            { value: 'ink', label: 'Ink' },
            { value: 'bone', label: 'Bone' },
          ]}
        />
        <TweakSlider label="Glow" value={t.glow} min={0} max={2} step={0.05}
          onChange={(v) => setTweak('glow', v)} />
        <TweakSection label="Cryptic" />
        <TweakText label="Tagline" value={t.tagline}
          onChange={(v) => setTweak('tagline', v)} />
        <TweakText label="Cipher seed" value={t.cipherSeed}
          onChange={(v) => setTweak('cipherSeed', v)} />
      </TweaksPanel>
    </div>
  );
}

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