/* global React, ReactDOM, Header, BgDeco, TripTab, GuideTab, WeatherTab */

const TWEAKS = /*EDITMODE-BEGIN*/{
  "accent": "fuji",
  "density": "comfortable",
  "bgStyle": "paper"
}/*EDITMODE-END*/;

const ACCENTS = {
  fuji:     { v: '#2E5B8A', m: '#4A7FB5', l: '#A8C5E2' },
  tangerine:{ v: '#C66A28', m: '#F08B3C', l: '#F5C592' },
  hallasan: { v: '#3E5D3F', m: '#5B7A5C', l: '#A8BEA9' },
  stone:    { v: '#5B554D', m: '#8C8276', l: '#C8C0B3' },
};

function App() {
  const [tab, setTab] = React.useState(() => localStorage.getItem('jeju.tab') || 'trip');
  const [dayIdx, setDayIdx] = React.useState(() => +localStorage.getItem('jeju.day') || 0);
  const [tweaks, setTweaks] = React.useState(TWEAKS);
  const [twOpen, setTwOpen] = React.useState(false);
  const [tweakMode, setTweakMode] = React.useState(false);

  React.useEffect(() => { localStorage.setItem('jeju.tab', tab); }, [tab]);
  React.useEffect(() => { localStorage.setItem('jeju.day', dayIdx); }, [dayIdx]);

  // 套用 accent
  React.useEffect(() => {
    const a = ACCENTS[tweaks.accent] || ACCENTS.fuji;
    document.documentElement.style.setProperty('--fuji', a.v);
    document.documentElement.style.setProperty('--fuji-2', a.m);
    document.documentElement.style.setProperty('--fuji-3', a.l);
  }, [tweaks.accent]);

  // Tweak 協定
  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setTweakMode(true);
      if (e.data.type === '__deactivate_edit_mode') { setTweakMode(false); setTwOpen(false); }
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const setTweak = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  return (
    <div className="phone-shell">
      <div className="phone">
        <div className="notch"/>
        <div className="app">
          <BgDeco/>
          <Header tab={tab} onTab={setTab}/>
          <div className="content" key={tab}>
            {tab === 'trip' && <TripTab dayIdx={dayIdx} setDayIdx={setDayIdx}/>}
            {tab === 'guide' && <GuideTab/>}
            {tab === 'weather' && <WeatherTab/>}
          </div>
          <nav className="nav">
            <button className={`nav-btn ${tab==='trip'?'active':''}`} onClick={() => setTab('trip')}>
              {Icon.route(tab==='trip'?'#2E5B8A':'#B8B0A3', 22)}
              행정 · 行程
            </button>
            <button className={`nav-btn ${tab==='guide'?'active':''}`} onClick={() => setTab('guide')}>
              {Icon.guide(tab==='guide'?'#2E5B8A':'#B8B0A3', 22)}
              가이드 · 指南
            </button>
            <button className={`nav-btn ${tab==='weather'?'active':''}`} onClick={() => setTab('weather')}>
              {Icon.cloud(tab==='weather'?'#2E5B8A':'#B8B0A3', 22)}
              날씨 · 天氣
            </button>
          </nav>
        </div>
      </div>

      {tweakMode && (
        <button className="tw-toggle" style={{ display: 'block' }} onClick={() => setTwOpen(o => !o)}>
          ⚙ Tweaks
        </button>
      )}
      <div className={`tw-panel ${twOpen ? 'open' : ''}`}>
        <h4>🎨 Tweaks</h4>
        <div className="tw-row">
          <span>主色</span>
          <div className="opts">
            {Object.entries(ACCENTS).map(([k, a]) => (
              <div key={k} className={`tw-swatch ${tweaks.accent === k ? 'active' : ''}`}
                   style={{ background: a.m }} onClick={() => setTweak('accent', k)}/>
            ))}
          </div>
        </div>
        <div className="tw-row">
          <span>密度</span>
          <div className="opts">
            {['compact','comfortable'].map(v => (
              <button key={v} className={`tw-opt ${tweaks.density===v?'active':''}`}
                      onClick={() => setTweak('density', v)}>
                {v === 'compact' ? '緊湊' : '舒適'}
              </button>
            ))}
          </div>
        </div>
        <div className="tw-row">
          <span>背景</span>
          <div className="opts">
            {['paper','plain','dots'].map(v => (
              <button key={v} className={`tw-opt ${tweaks.bgStyle===v?'active':''}`}
                      onClick={() => setTweak('bgStyle', v)}>
                {v === 'paper' ? '柔紙' : v === 'plain' ? '純色' : '點陣'}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

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