/* global React, ReactDOM, Hero, WorkSection, SkillsSection, EduSection, ProjectsSection, ContactSection, PageFire, PixelVillage,
   TweaksPanel, useTweaks, TweakSection, TweakColor, TweakSlider, TweakToggle, TweakSelect, Star, Smiley */
const { useState, useEffect } = React;

function LiveClock() {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const fmt = (n) => String(n).padStart(2, '0');
  // IST = UTC+5:30
  const ist = new Date(now.getTime() + (now.getTimezoneOffset() + 330) * 60000);
  return <span>IST {fmt(ist.getHours())}:{fmt(ist.getMinutes())}:{fmt(ist.getSeconds())}</span>;
}

const PALETTES = {
  Default: { kraft: '#f2ead8', paper: '#fbf6e9', ink: '#0c0c0c', lime: '#d8ff3a', tomato: '#ff5a3c', cyan: '#5ec6ff', blush: '#ff8fb0', sun: '#ffd34a' },
  Acid:    { kraft: '#0d0f08', paper: '#1a1d12', ink: '#d8ff3a', lime: '#d8ff3a', tomato: '#ff5a3c', cyan: '#5ec6ff', blush: '#ff8fb0', sun: '#ffd34a' },
  Dusty:   { kraft: '#ebe0c9', paper: '#f5ecd6', ink: '#1d1a14', lime: '#bfe06a', tomato: '#d6634b', cyan: '#7fb6c9', blush: '#e7a3a3', sun: '#e3c065' },
  XeroxNoir: { kraft: '#e9e3d4', paper: '#f0eadb', ink: '#0c0c0c', lime: '#0c0c0c', tomato: '#0c0c0c', cyan: '#9aa3b0', blush: '#0c0c0c', sun: '#0c0c0c' },
};

const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{
  "palette": "Default",
  "chaos": 1.0,
  "stickers": true,
  "grain": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULS);
  const pal = PALETTES[t.palette] || PALETTES.Default;

  // Apply palette via CSS vars
  useEffect(() => {
    const r = document.documentElement.style;
    Object.entries(pal).forEach(([k, v]) => r.setProperty('--' + k, v));
    document.body.style.background = pal.kraft;
    document.body.style.color = pal.ink;
  }, [t.palette]);

  // Apply chaos (rotation multiplier) via CSS variables
  useEffect(() => {
    document.documentElement.style.setProperty('--chaos', t.chaos);
  }, [t.chaos]);

  const showStickers = t.stickers !== false;

  return (
    <div className={`canvas ${showStickers ? '' : 'stickers-off'}`} style={{ '--chaos': t.chaos }}>
      <header className="tape-nav">
        <div className="tape-nav-row">
          <div className="brand">
            <span className="blob" />
            RT<span className="reg">®</span>
          </div>
          <nav>
            <a href="#top"><span className="nav-num">01</span> ⌂ home</a>
            <a href="#skills"><span className="nav-num">02</span> skills</a>
            <a href="#education"><span className="nav-num">03</span> edu</a>
            <a href="#projects"><span className="nav-num">04</span> projects</a>
            <a href="#contact"><span className="nav-num">05</span> contact</a>
          </nav>
          <div className="nav-tip" aria-hidden="true">
            <span className="nt-chip">
              <span className="nt-icon">▣</span>
              <span className="nt-text">best on desktop</span>
            </span>
          </div>
          <div className="ticker" aria-hidden="true">
            <span className="ticker-track">
              <span>★ open to work</span>
              <span>★ tabs &gt; spaces (fight me)</span>
              <span>★ uptime: 99.94%</span>
              <span>★ coffees today: 3</span>
              <span>★ open to work</span>
              <span>★ powered by ctrl+z &amp; vibes</span>
            </span>
          </div>
          <div className="clock"><LiveClock /></div>
        </div>
      </header>

      <Hero pal={pal} />

      {/* Skills */}
      <div className="section-head">
        <div className="num">// 02</div>
        <h2>What I<br />can do<span className="swirl">a partial inventory</span></h2>
        <div className="meta">tools / frameworks / habits</div>
      </div>
      <SkillsSection pal={pal} />

      {/* Education */}
      <div className="section-head">
        <div className="num">// 03</div>
        <h2>Education<span className="swirl">paper-shaped achievements</span></h2>
        <div className="meta">2021 – 2025</div>
      </div>
      <EduSection pal={pal} />

      <ProjectsSection pal={pal} />

      <TerminalSection />

      <ContactSection />

      <KonamiEgg />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakSelect
            label="Theme"
            value={t.palette}
            options={Object.keys(PALETTES)}
            onChange={(v) => setTweak('palette', v)}
          />
        </TweakSection>
        <TweakSection label="Energy">
          <TweakSlider
            label="Chaos"
            value={t.chaos}
            min={0} max={2} step={0.1}
            onChange={(v) => setTweak('chaos', v)}
            help="Multiplier on paper rotation"
          />
          <TweakToggle
            label="Stickers"
            value={t.stickers}
            onChange={(v) => setTweak('stickers', v)}
          />
          <TweakToggle
            label="Paper grain"
            value={t.grain}
            onChange={(v) => setTweak('grain', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

// Apply chaos rotation multiplier — re-write rotated transforms
const styleEl = document.createElement('style');
styleEl.id = '__chaos-style';
document.head.appendChild(styleEl);
function applyChaos(mult) {
  styleEl.textContent = `
    .paper.tilted-l { transform: rotate(${-2 * mult}deg); }
    .paper.tilted-r { transform: rotate(${2 * mult}deg); }
    .work-paper { transform: rotate(${-1 * mult}deg); }
    .id-card { transform: rotate(${3 * mult}deg); }
    .skills-card { transform: rotate(${2 * mult}deg); }
    .edu-ticket { transform: rotate(${2.5 * mult}deg); }
    .about-card { transform: rotate(${-2 * mult}deg); }
    .polaroid:nth-child(odd)  { transform: rotate(${-2 * mult}deg); }
    .polaroid:nth-child(even) { transform: rotate(${2 * mult}deg); }
    .polaroid:nth-child(3n)   { transform: rotate(${-1 * mult}deg); }
  `;
}
const obs = new MutationObserver(() => {
  const v = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--chaos')) || 1;
  applyChaos(v);
});
obs.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
applyChaos(1);

// Toggle grain on body
const grainObs = new MutationObserver(() => {
  // (placeholder — handled via class if needed)
});

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