// Top-level app shell with navigation + Tweaks panel

const App = () => {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "theme": "classic",
    "gridStyle": "photo",
    "dashLayout": "grid",
    "density": "comfortable",
    "showPopular": true
  }/*EDITMODE-END*/;

  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route,  setRoute]  = React.useState('pos');
  const [ready,  setReady]  = React.useState(false);
  const [appError, setAppError] = React.useState(null);

  // apply theme to root
  React.useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
  }, [tweaks.theme]);

  // โหลดข้อมูลจาก API ครั้งแรก
  React.useEffect(() => {
    load();
  }, []);

  function load() {
    setAppError(null);
    window.initBFData()
      .then(() => setReady(true))
      .catch(e => setAppError(e.message || 'เชื่อมต่อ API ไม่ได้'));
  }

  // Loading screen
  if (!ready && !appError) {
    return (
      <div style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        justifyContent: 'center', height: '100vh', gap: 16,
        background: 'var(--bf-bg)',
      }}>
        <Logo size={52} color="var(--bf-brand-ink)" />
        <div style={{ fontFamily: 'IBM Plex Sans Thai, sans-serif', fontSize: 16, color: 'var(--bf-text-2)' }}>
          กำลังโหลดข้อมูล...
        </div>
      </div>
    );
  }

  // Error screen
  if (appError) {
    return (
      <div style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        justifyContent: 'center', height: '100vh', gap: 16,
        background: 'var(--bf-bg)',
      }}>
        <Logo size={52} color="var(--bf-brand-ink)" />
        <div style={{ fontFamily: 'IBM Plex Sans Thai, sans-serif', fontSize: 18, fontWeight: 600, color: 'var(--bf-text-1)' }}>
          เชื่อมต่อ API ไม่ได้
        </div>
        <div style={{ fontSize: 13, color: 'var(--bf-text-3)', maxWidth: 320, textAlign: 'center' }}>
          {appError}
        </div>
        <button className="bf-btn bf-btn-primary" onClick={load} style={{ marginTop: 8 }}>
          ลองใหม่
        </button>
      </div>
    );
  }

  return (
    <div className="bf-app">
      <NavBar route={route} setRoute={setRoute} />
      <main className="bf-main" data-screen-label={route === 'pos' ? '01 POS' : route === 'dash' ? '02 Dashboard' : route === 'records' ? '03 Records' : '04 Admin'}>
        {route === 'pos'     && <POS tweaks={tweaks} />}
        {route === 'dash'    && <Dashboard tweaks={tweaks} onNavigate={setRoute} />}
        {route === 'records' && <Records tweaks={tweaks} />}
        {route === 'admin'   && <Admin />}
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="ธีม">
          <TweakRadio
            label="Visual theme"
            value={tweaks.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
              { value: 'classic', label: 'Classic' },
              { value: 'cream',   label: 'Cream'   },
              { value: 'dark',    label: 'Night'   },
            ]}
          />
        </TweakSection>
        <TweakSection label="POS">
          <TweakRadio
            label="Menu grid"
            value={tweaks.gridStyle}
            onChange={(v) => setTweak('gridStyle', v)}
            options={[
              { value: 'photo',  label: 'Photo'  },
              { value: 'iconic', label: 'Iconic' },
              { value: 'hybrid', label: 'Hybrid' },
            ]}
          />
          <TweakToggle
            label="แสดงเมนูขายดี (Quick-add)"
            value={tweaks.showPopular}
            onChange={(v) => setTweak('showPopular', v)}
          />
          <TweakRadio
            label="Density"
            value={tweaks.density}
            onChange={(v) => setTweak('density', v)}
            options={[
              { value: 'comfortable', label: 'Comfort' },
              { value: 'compact',     label: 'Compact' },
            ]}
          />
        </TweakSection>
        <TweakSection label="Dashboard">
          <TweakRadio
            label="Layout"
            value={tweaks.dashLayout}
            onChange={(v) => setTweak('dashLayout', v)}
            options={[
              { value: 'grid',  label: 'Grid'  },
              { value: 'story', label: 'Story' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

const NavBar = ({ route, setRoute }) => {
  // วันที่ไทยแบบ dynamic
  const dateStr = new Date().toLocaleDateString('th-TH', {
    day: 'numeric', month: 'short', year: 'numeric',
    timeZone: 'Asia/Bangkok',
  });

  return (
    <header className="bf-nav">
      <div className="bf-brand">
        <Logo size={30} color="var(--bf-brand-ink)" />
        <div className="bf-brand-text">
          <div className="bf-brand-name">Butterfly Coffee</div>
          <div className="bf-brand-sub">
            {route === 'pos'     && 'Point of Sale'}
            {route === 'dash'    && 'Dashboard'}
            {route === 'records' && 'บันทึกรายการ'}
            {route === 'admin'   && 'จัดการระบบ'}
          </div>
        </div>
      </div>

      <nav className="bf-nav-links">
        <button data-active={route === 'pos'}     onClick={() => setRoute('pos')}>POS</button>
        <button data-active={route === 'dash'}    onClick={() => setRoute('dash')}>Dashboard</button>
        <button data-active={route === 'records'} onClick={() => setRoute('records')}>Records</button>
        <button data-active={route === 'admin'}   onClick={() => setRoute('admin')}>Admin</button>
      </nav>

      <div className="bf-nav-meta">
        <div className="bf-nav-date">{dateStr}</div>
        <div className="bf-nav-time" id="bf-clock">--:--</div>
      </div>
    </header>
  );
};

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

// live clock
(function tick() {
  const el = document.getElementById('bf-clock');
  if (el) {
    const d = new Date();
    el.textContent = `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
  }
  setTimeout(tick, 5000);
})();