// Main app shell — wires sidebar + screens + F1 mobile/desktop with Tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "style": "warm-gov",
  "dark": false,
  "completion": "half",
  "device": "both",
  "role": "Auditor",
  "showCanvasGuides": true
}/*EDITMODE-END*/;

const STYLE_OPTS = [
  { value: 'warm-gov', label: '暖灰政府' },
  { value: 'modern', label: '現代 SaaS' },
  { value: 'dense', label: 'Notion 密集' },
];
const COMPLETION_OPTS = [
  { value: 'empty', label: '空白' },
  { value: 'half', label: '半填' },
  { value: 'full', label: '完成' },
];
const DEVICE_OPTS = [
  { value: 'desktop', label: '桌面' },
  { value: 'mobile', label: '手機' },
  { value: 'both', label: '並陳' },
];
const ROLE_OPTS = [
  { value: 'Auditor', label: '稽核員' },
  { value: 'Reviewer', label: '審查員' },
  { value: 'Admin', label: '管理員' },
];

const NAV_ITEMS = ['dashboard', 'cases', 'plot', 'templates', 'ai', 'drive', 'settings'];

function App() {
  const [t, setT] = useTweaks(TWEAK_DEFAULTS);
  const [nav, setNav] = React.useState('cases');
  const [openCase, setOpenCase] = React.useState(null);
  const [view, setView] = React.useState('detail'); // detail | f1 | checklist | nc

  // Apply theme to root
  React.useEffect(() => {
    document.documentElement.dataset.style = t.style;
    document.documentElement.dataset.dark = String(!!t.dark);
  }, [t.style, t.dark]);

  const D = window.NMYTL_DATA;
  const caseData = openCase ? D.cases.find((c) => c.id === openCase) || D.cases[0] : null;
  const sections = D.photoSections || [];

  // Build "screen" — what shows in the desktop frame
  const renderDesktopScreen = () => {
    if (openCase && caseData) {
      if (view === 'f1') {
        return <F1Desktop caseData={caseData} sections={sections}
                          completion={t.completion}
                          onBack={() => setView('detail')} />;
      }
      if (view === 'checklist') {
        return <ChecklistScreen caseData={caseData} completion={t.completion}
                                onBack={() => setView('detail')} />;
      }
      if (view === 'nc') {
        return <NonconformityScreen caseData={caseData} completion={t.completion}
                                     onBack={() => setView('detail')} />;
      }
      return <CaseDetailScreen caseData={caseData} sections={sections} completion={t.completion}
                                onBack={() => { setOpenCase(null); }}
                                onOpenF1={() => setView('f1')}
                                onOpenChecklist={() => setView('checklist')}
                                onOpenNc={() => setView('nc')} />;
    }
    if (nav === 'dashboard') return <DashboardScreen role={t.role} onOpenCase={(id) => { setOpenCase(id); setView('detail'); }} />;
    if (nav === 'cases') return <CasesScreen onOpenCase={(id) => { setOpenCase(id); setView('detail'); }} />;
    if (nav === 'plot') return <PlotRegistryScreen />;
    if (nav === 'templates') return <TemplateScreen />;
    if (nav === 'drive') return <DriveScreen />;
    if (nav === 'ai') return <AIPlaceholder />;
    if (nav === 'settings') return <SettingsScreen />;
    return null;
  };

  // What shows in the mobile frame
  const [mobileScreen, setMobileScreen] = React.useState('list'); // list | new | detail | preview

  const desktopFrame = (
    <DesktopFrame style={t.style}>
      <AppSidebar active={openCase ? 'cases' : nav} role={t.role}
                   onNavigate={(id) => { setNav(id); setOpenCase(null); }} />
      <div className="col" style={{ flex: 1, minHeight: 0, background: 'var(--bg)' }}>
        <TopBar role={t.role} />
        <div className="main">{renderDesktopScreen()}</div>
      </div>
    </DesktopFrame>
  );

  const renderMobile = () => {
    const props = { sections, completion: t.completion, caseData: D.cases[0],
                    onNav: setMobileScreen };
    if (mobileScreen === 'new') return <F1MobileAdd {...props} />;
    if (mobileScreen === 'detail') return <F1MobileSection {...props} section={sections[0]} />;
    if (mobileScreen === 'preview') return <F1MobilePdfPreview {...props} />;
    return <F1MobileList {...props} />;
  };
  const mobileFrame = <PhoneFrame>{renderMobile()}</PhoneFrame>;

  return (
    <div className="stage">
      <header className="stage-header">
        <div className="row gap-12">
          <div style={{ width: 28, height: 28, borderRadius: 6, background: 'var(--accent)',
                         color: 'var(--accent-fg)', display: 'flex', alignItems: 'center',
                         justifyContent: 'center', fontWeight: 700, fontSize: 13 }}>濃</div>
          <div>
            <div className="text-md font-semibold" style={{ lineHeight: 1.1 }}>濃務一條龍 · F1 互動原型</div>
            <div className="text-xs text-muted text-mono">NMYTL · 中華驗證有限公司 · ZH-TAP610</div>
          </div>
        </div>
        <div className="row gap-8">
          <div className="seg">
            {DEVICE_OPTS.map((opt) => (
              <button key={opt.value} data-on={t.device === opt.value}
                      onClick={() => setT('device', opt.value)}>{opt.label}</button>
            ))}
          </div>
          <div className="seg">
            {STYLE_OPTS.map((opt) => (
              <button key={opt.value} data-on={t.style === opt.value}
                      onClick={() => setT('style', opt.value)}>{opt.label}</button>
            ))}
          </div>
          <button className="btn btn-sm" onClick={() => setT('dark', !t.dark)}>
            {t.dark ? '☀ 淺色' : '☾ 深色'}
          </button>
        </div>
      </header>

      <div className="stage-body" data-device={t.device}>
        {(t.device === 'desktop' || t.device === 'both') && (
          <div className="frame-desktop">{desktopFrame}</div>
        )}
        {(t.device === 'mobile' || t.device === 'both') && (
          <div className="frame-mobile">{mobileFrame}</div>
        )}
      </div>

      <TweaksPanel title="原型 Tweaks">
        <TweakSection title="視覺風格">
          <TweakRadio label="樣式系統" value={t.style}
                      onChange={(v) => setT('style', v)}
                      options={STYLE_OPTS.map((o) => ({ value: o.value, label: o.label }))} />
          <TweakToggle label="深色模式" value={t.dark} onChange={(v) => setT('dark', v)} />
        </TweakSection>
        <TweakSection title="原型狀態">
          <TweakRadio label="案件完成度" value={t.completion}
                      onChange={(v) => setT('completion', v)}
                      options={COMPLETION_OPTS.map((o) => ({ value: o.value, label: o.label }))} />
          <TweakRadio label="當前角色" value={t.role}
                      onChange={(v) => setT('role', v)}
                      options={ROLE_OPTS.map((o) => ({ value: o.value, label: o.label }))} />
        </TweakSection>
        <TweakSection title="畫面切換">
          <TweakRadio label="裝置" value={t.device}
                      onChange={(v) => setT('device', v)}
                      options={DEVICE_OPTS.map((o) => ({ value: o.value, label: o.label }))} />
          <TweakSelect label="桌面導覽" value={openCase ? 'case' : nav}
                       onChange={(v) => { if (v === 'case') { setOpenCase(D.cases[0].id); setView('detail'); } else { setNav(v); setOpenCase(null); } }}
                       options={[
                         { value: 'dashboard', label: '儀表板' },
                         { value: 'cases', label: '案件中心' },
                         { value: 'case', label: '└─ 案件詳情' },
                         { value: 'plot', label: '農地清冊' },
                         { value: 'templates', label: '樣板管理' },
                         { value: 'drive', label: '雲端儲存' },
                         { value: 'ai', label: 'AI 辨識' },
                         { value: 'settings', label: '系統設定' },
                       ]} />
          {openCase && (
            <TweakRadio label="案件子頁" value={view}
                        onChange={setT.bind(null, 'view')}
                        options={[
                          { value: 'detail', label: '詳情' },
                          { value: 'f1', label: 'F1 照片' },
                          { value: 'checklist', label: '查核表' },
                        ]} />
          )}
          <TweakSelect label="手機畫面" value={mobileScreen}
                       onChange={setMobileScreen}
                       options={[
                         { value: 'list', label: '1. 區塊列表' },
                         { value: 'new', label: '2. 新增區塊' },
                         { value: 'detail', label: '3. 上傳照片' },
                         { value: 'preview', label: '4. PDF 預覽' },
                       ]} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

// Override view-set hook
const useTweaksView = () => {};

// Desktop chrome — laptop-style card with status bar
const DesktopFrame = ({ children }) => (
  <div className="desktop-chrome">
    <div className="dc-bar">
      <span className="dc-dot" style={{ background: '#ed6a5e' }} />
      <span className="dc-dot" style={{ background: '#f5bf4f' }} />
      <span className="dc-dot" style={{ background: '#62c554' }} />
      <div className="dc-url">
        <span className="text-mono text-xs">nmytl.app · 濃務一條龍</span>
      </div>
    </div>
    <div className="dc-body">{children}</div>
  </div>
);

// Phone chrome
const PhoneFrame = ({ children }) => (
  <div className="phone-chrome">
    <div className="phone-status">
      <span className="text-mono text-xs">9:41</span>
      <div className="phone-notch" />
      <span className="text-mono text-xs">5G ▮▮▮▯ 100%</span>
    </div>
    <div className="phone-body">{children}</div>
    <div className="phone-home" />
  </div>
);

const TopBar = ({ role }) => (
  <div className="topbar">
    <div className="row gap-10">
      <div className="row gap-6 text-xs text-muted">
        <Icon name="cloud_check" size={12} style={{ color: 'var(--ok)' }} />
        Drive 已同步
      </div>
      <div style={{ width: 1, height: 14, background: 'var(--line)' }} />
      <span className="text-xs text-muted">v1.3 prototype</span>
    </div>
    <div className="row gap-8">
      <button className="btn btn-sm btn-ghost"><Icon name="search" size={13} /></button>
      <button className="btn btn-sm btn-ghost"><Icon name="bell" size={13} /></button>
      <div className="row gap-6" style={{ paddingLeft: 8, borderLeft: '1px solid var(--line)' }}>
        <div style={{ width: 24, height: 24, borderRadius: 12, background: 'var(--surface-2)',
                       color: 'var(--ink-2)', display: 'flex', alignItems: 'center',
                       justifyContent: 'center', fontSize: 11, fontWeight: 600 }}>林</div>
        <div>
          <div className="text-xs font-medium">林佳穎</div>
          <div className="text-xs text-muted">{role === 'Auditor' ? '稽核員' : role === 'Reviewer' ? '審查員' : '管理員'}</div>
        </div>
      </div>
    </div>
  </div>
);

const AIPlaceholder = () => (
  <div style={{ padding: 28 }}>
    <div className="text-2xl font-semibold mb-4">AI 影像辨識</div>
    <div className="text-sm text-muted mb-16">Phase 2 · Google Gemini API</div>
    <div className="card" style={{ textAlign: 'center', padding: 60 }}>
      <Icon name="ai" size={40} style={{ color: 'var(--ink-3)', opacity: .5 }} />
      <div className="text-md mt-12 font-semibold">尚待規劃</div>
      <div className="text-sm text-muted mt-4" style={{ maxWidth: 480, margin: '4px auto 0' }}>
        將整合 Google Gemini API,提供表格 OCR、品項照片比對、證明文件辨識等功能。
        待業主提供樣本與比對規則後啟動。
      </div>
      <div className="row gap-8 mt-16" style={{ justifyContent: 'center' }}>
        <span className="status" data-status="draft"><span className="dot" />待業主決策</span>
      </div>
    </div>
  </div>
);

const SettingsScreen = () => (
  <div style={{ padding: 28 }}>
    <div className="text-2xl font-semibold mb-4">系統設定</div>
    <div className="text-sm text-muted mb-16">使用者管理、機構固定資訊、操作記錄</div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
      <div className="card">
        <div className="text-md font-semibold mb-12">機構固定資訊</div>
        <div className="kv"><span className="k">驗證機構</span><span className="v">中華驗證有限公司</span></div>
        <div className="kv"><span className="k">註冊號</span><span className="v text-mono">ZH-TAP610</span></div>
        <div className="kv"><span className="k">地址</span><span className="v">(542) 南投縣草屯鎮中正路486-11號1樓</span></div>
        <div className="kv"><span className="k">電話</span><span className="v text-mono">049-2568787</span></div>
        <div className="kv"><span className="k">傳真</span><span className="v text-mono">049-2566660</span></div>
        <div className="kv"><span className="k">Email</span><span className="v text-mono">zh.cert@msa.hinet.net</span></div>
        <button className="btn btn-sm mt-12"><Icon name="edit" size={11} />編輯</button>
      </div>
      <div className="card">
        <div className="text-md font-semibold mb-12">使用者 · 3 位</div>
        {window.NMYTL_DATA.users.map((u, i) => (
          <div key={u.id} className="row" style={{
            padding: '8px 0',
            borderTop: i ? '1px solid var(--line)' : 'none',
            justifyContent: 'space-between',
          }}>
            <div className="row gap-8">
              <div style={{ width: 28, height: 28, borderRadius: 14, background: 'var(--surface-2)',
                             color: 'var(--ink-2)', display: 'flex', alignItems: 'center',
                             justifyContent: 'center', fontSize: 12, fontWeight: 600 }}>{u.initials}</div>
              <div>
                <div className="text-sm font-medium">{u.name}</div>
                <div className="text-xs text-muted">{u.role}</div>
              </div>
            </div>
            <button className="btn btn-sm btn-ghost"><Icon name="more" size={11} /></button>
          </div>
        ))}
      </div>
    </div>
  </div>
);

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