/* ============================================================
   App shell — theme + Tweaks + bento composition
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#5865f2",
  "defaultTheme": "system",
  "motion": true,
  "sidebar": "left",
  "density": "regular",
  "grain": true
}/*EDITMODE-END*/;

const ACCENTS = {
  "#5865f2": "88, 101, 242",   // blurple
  "#1db954": "29, 185, 84",    // spotify green
  "#ff5e5b": "255, 94, 91",    // ko-fi coral
  "#f0b232": "240, 178, 50",   // amber
  "#8b5cf6": "139, 92, 246",   // violet
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // theme: resolve "system" once, then user can toggle
  const prefersDark = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
  const initial = t.defaultTheme === 'system' ? (prefersDark ? 'dark' : 'light') : t.defaultTheme;
  const [theme, setTheme] = React.useState(() => localStorage.getItem('msm-theme') || initial);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    document.body.setAttribute('data-theme', theme);
    localStorage.setItem('msm-theme', theme);
  }, [theme]);

  // follow tweak changes to defaultTheme (when user hasn't manually toggled this session is fine to override)
  React.useEffect(() => {
    if (t.defaultTheme === 'system') return;
    setTheme(t.defaultTheme);
  }, [t.defaultTheme]);

  // accent → repaint tokens
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--accent-rgb', ACCENTS[t.accent] || '88, 101, 242');
    const rgb = ACCENTS[t.accent] || '88, 101, 242';
    root.style.setProperty('--accent-soft', `rgba(${rgb}, ${theme === 'dark' ? 0.16 : 0.1})`);
    // hover: slightly darker/lighter
    root.style.setProperty('--accent-hover', t.accent);
  }, [t.accent, theme]);

  // grain toggle
  React.useEffect(() => {
    document.body.classList.toggle('no-grain', !t.grain);
  }, [t.grain]);

  const motion = t.motion;
  const data = DATA;
  const [navActive, setNavActive] = React.useState('Home');

  // pull latest posted photos from the Photos page (server if configured, else localStorage cache)
  const [posts, setPosts] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem('msm-photos') || '[]'); } catch (e) { return []; }
  });
  React.useEffect(() => {
    // ⬇️ ถ้าตั้ง backend แล้ว ใส่ URL เดียวกับใน Photos.html ตรงนี้ (ลงท้ายด้วย /api/photos)
    const PHOTOS_ENDPOINT = '';
    const fromCache = () => {
      try { setPosts(JSON.parse(localStorage.getItem('msm-photos') || '[]')); } catch (e) { setPosts([]); }
    };
    const refresh = () => {
      if (PHOTOS_ENDPOINT) {
        fetch(PHOTOS_ENDPOINT + '?t=' + Date.now())
          .then((r) => r.json())
          .then((j) => { if (Array.isArray(j)) { setPosts(j); try { localStorage.setItem('msm-photos', JSON.stringify(j)); } catch (e) {} } })
          .catch(fromCache);
      } else {
        fromCache();
      }
    };
    refresh();
    window.addEventListener('storage', fromCache);
    window.addEventListener('focus', refresh);
    return () => { window.removeEventListener('storage', fromCache); window.removeEventListener('focus', refresh); };
  }, []);
  const navItems = [
    { label: 'Home' },
    { label: 'Blog' },
    { label: 'Photos', href: 'Photos.html' },
    { label: 'Projects' },
  ];

  // staggered entrance delays
  let n = 0;
  const stag = () => (motion ? { animationDelay: (n++ * 55) + 'ms' } : {});

  return (
    <div className={`app ${t.sidebar === 'right' ? 'side-right' : ''} ${t.density === 'compact' ? 'dense' : t.density === 'comfy' ? 'airy' : ''} ${motion ? 'motion-on' : 'motion-off'}`}>
      <div className="brand">
        <span className="brand-mark">M</span>
        <span className="wordmark">Ma<em>Show</em>Magic</span>
      </div>

      <nav className="topnav">
        <div className="nav-links">
          {navItems.map((item) => (
            item.href
              ? <a key={item.label} className="nav-link" href={item.href}>{item.label}</a>
              : <button key={item.label} className={`nav-link ${navActive === item.label ? 'active' : ''}`}
                  onClick={() => setNavActive(item.label)}>{item.label}</button>
          ))}
        </div>
        <div className="nav-right">
          <ThemeToggle theme={theme} onToggle={() => setTheme((th) => (th === 'dark' ? 'light' : 'dark'))} />
        </div>
      </nav>

      <Sidebar data={data} theme={theme} onToggleTheme={() => setTheme((th) => (th === 'dark' ? 'light' : 'dark'))} />

      <main className="bento">
        <Wrap d={stag()}><NowPlaying data={data} motion={motion} /></Wrap>
        <Wrap d={stag()}><GitHub data={data} motion={motion} /></Wrap>
        <Wrap d={stag()}><Discord data={data} motion={motion} /></Wrap>
        <Wrap d={stag()}><Building data={data} motion={motion} /></Wrap>
        <Wrap d={stag()}><Blog data={data} motion={motion} /></Wrap>
        <Wrap d={stag()}><Weather data={data} motion={motion} /></Wrap>
        <Wrap d={stag()}><StatusCard data={data} motion={motion} /></Wrap>
        <Wrap d={stag()}><Kofi motion={motion} /></Wrap>
        <Wrap d={stag()}><Photo photo={data.photos[0]} post={posts[0]} motion={motion} area="photo1" /></Wrap>
        <Wrap d={stag()}><Photo photo={data.photos[1]} post={posts[1]} motion={motion} area="photo2" /></Wrap>
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakColor label="Accent" value={t.accent}
          options={Object.keys(ACCENTS)}
          onChange={(v) => setTweak('accent', v)} />
        <TweakRadio label="Default theme" value={t.defaultTheme}
          options={[{ value: 'light', label: 'Light' }, { value: 'dark', label: 'Dark' }, { value: 'system', label: 'Auto' }]}
          onChange={(v) => setTweak('defaultTheme', v)} />
        <TweakToggle label="Grain texture" value={t.grain} onChange={(v) => setTweak('grain', v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Sidebar side" value={t.sidebar}
          options={[{ value: 'left', label: 'Left' }, { value: 'right', label: 'Right' }]}
          onChange={(v) => setTweak('sidebar', v)} />
        <TweakRadio label="Density" value={t.density}
          options={[{ value: 'compact', label: 'Cozy' }, { value: 'regular', label: 'Regular' }, { value: 'comfy', label: 'Airy' }]}
          onChange={(v) => setTweak('density', v)} />

        <TweakSection label="Motion" />
        <TweakToggle label="Living motion" value={t.motion} onChange={(v) => setTweak('motion', v)} />
      </TweaksPanel>
    </div>
  );
}

/* tiny wrapper to apply stagger delay to the card's first child */
function Wrap({ d, children }) {
  return React.cloneElement(children, {
    style: { ...(children.props.style || {}), ...d },
  });
}

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