<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>EwoooC · 商家後台</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="design-tokens.css?v=3">
<style>
  html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif; background: #f0eee9; }
  #root { width: 100vw; height: 100vh; }
  /* hover 微互動 */
  .momo-btn:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
  .momo-btn:active:not(:disabled) { transform: translateY(0); filter: brightness(0.97); }

  /* Topbar responsive — inline 確保即使 design-tokens.css 被快取也生效 */
  .momo-topbar { container-type: inline-size; }
  .momo-search-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0;
  }
  @container (max-width: 1024px) { .momo-schedule-pill { display: none !important; } }
  @container (max-width: 880px)  { .momo-user-meta { display: none !important; } }
  @container (max-width: 720px)  { .momo-search-text { display: none !important; } }
  @media (max-width: 1024px) { .momo-schedule-pill { display: none !important; } }
  @media (max-width: 880px)  { .momo-user-meta { display: none !important; } }
  @media (max-width: 720px)  { .momo-search-text { display: none !important; } }
</style>
</head>
<body>
<div id="root"></div>

<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>

<script type="text/babel" src="design-canvas.jsx"></script>
<script type="text/babel" src="tweaks-panel.jsx"></script>

<script type="text/babel" src="app/icons.jsx"></script>
<script type="text/babel" src="app/data.jsx"></script>
<script type="text/babel" src="app/ui.jsx"></script>
<script type="text/babel" src="app/shell.jsx"></script>
<script type="text/babel" src="app/page-dashboard.jsx"></script>
<script type="text/babel" src="app/page-campaigns.jsx"></script>
<script type="text/babel" src="app/page-orders.jsx"></script>
<script type="text/babel" src="app/page-products.jsx"></script>
<script type="text/babel" src="app/data-analytics.jsx"></script>
<script type="text/babel" src="app/page-analytics.jsx"></script>
<script type="text/babel" src="app/page-analytics-sales.jsx"></script>
<script type="text/babel" src="app/page-analytics-trends.jsx"></script>
<script type="text/babel" src="app/modals.jsx"></script>
<script type="text/babel" src="app/modal-price-history.jsx"></script>
<script type="text/babel" src="app/main.jsx"></script>

<script type="text/babel" data-presets="env,react">
const { useState, useEffect } = React;

function Root() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <div data-screen-label="EwoooC · 後台原型">
      <MomoApp tweaks={tweaks} setTweak={setTweak} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="頁面切換">
          <TweakSelect label="目前頁面" value={tweaks.page}
            onChange={v => setTweak('page', v)}
            options={[
              { value: 'dashboard', label: '儀表板' },
              { value: 'campaigns', label: '活動看板' },
              { value: 'analytics-sales',   label: '業績分析' },
              { value: 'analytics-daily',   label: '當日業績' },
              { value: 'analytics-growth',  label: '成長分析' },
              { value: 'analytics-monthly', label: '月份總表' },
              { value: 'orders',    label: '訂單管理' },
              { value: 'products',  label: '商品管理' },
              { value: 'inventory', label: '庫存管理' },
              { value: 'members',   label: '會員管理' },
              { value: 'marketing', label: '行銷活動' },
              { value: 'analytics', label: '數據分析' },
              { value: 'settings',  label: '系統設定' },
            ]}
          />
        </TweakSection>

        <TweakSection title="側邊欄">
          <TweakToggle label="收合側邊欄" value={tweaks.sidebarCollapsed}
            onChange={v => setTweak('sidebarCollapsed', v)} />
          <TweakRadio label="主題" value={tweaks.sidebarTheme}
            onChange={v => setTweak('sidebarTheme', v)}
            options={[
              { value: 'light', label: '淺色' },
              { value: 'dark',  label: '深色漸層' },
            ]}
          />
        </TweakSection>

        <TweakSection title="版面">
          <TweakRadio label="資訊密度" value={tweaks.density}
            onChange={v => setTweak('density', v)}
            options={[
              { value: 'comfortable', label: '舒適' },
              { value: 'compact',     label: '緊湊' },
            ]}
          />
          <TweakRadio label="卡片樣式" value={tweaks.cardStyle}
            onChange={v => setTweak('cardStyle', v)}
            options={[
              { value: 'shadow',   label: '陰影' },
              { value: 'flat',     label: '平面' },
              { value: 'bordered', label: '描邊' },
            ]}
          />
          <TweakRadio label="活動 Hero 樣式" value={tweaks.campaignHero}
            onChange={v => setTweak('campaignHero', v)}
            options={[
              { value: 'simple',  label: '簡約' },
              { value: 'dotted',  label: '點陣' },
              { value: 'inverse', label: '反差' },
            ]}
          />
          <TweakRadio label="主要按鈕" value={tweaks.buttonStyle}
            onChange={v => setTweak('buttonStyle', v)}
            options={[
              { value: 'gradient', label: '漸層' },
              { value: 'solid',    label: '純色' },
              { value: 'outline',  label: '外框' },
            ]}
          />
        </TweakSection>

        <TweakSection title="提示">
          <div style={{ fontSize: 11, color: '#6c757d', lineHeight: 1.6, padding: '4px 0' }}>
            按 <kbd style={{ padding: '1px 5px', background: '#f5f7fa', border: '1px solid #dee2e6', borderRadius: 3, fontFamily: 'monospace', fontSize: 10 }}>⌘K</kbd> 開啟命令面板，<br/>
            點商品列表的編輯圖示可開啟編輯彈窗。
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Root />);
</script>
</body>
</html>
