// GS Car — Main App orchestrator

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#e10a17",
  "secondAccent": "#c9a96a",
  "darkMode": true,
  "fontFamily": "Helvetica",
  "tabOrder": "feed,market,map,inbox,profile",
  "aiScript": "default"
}/*EDITMODE-END*/;

const FONT_OPTIONS = {
  Helvetica: "'Helvetica Neue', Helvetica, 'PingFang HK', sans-serif",
  Inter: "'Inter', 'PingFang HK', sans-serif",
  SFPro: "-apple-system, BlinkMacSystemFont, 'PingFang HK', sans-serif",
  Mono: "'SF Mono', 'JetBrains Mono', ui-monospace, monospace",
};

const AI_SCRIPTS = {
  default: DATA.aiScript,
  detail: [
    { from: 'user', text: '我架 Porsche 想做 ceramic coating，邊度好？' },
    { from: 'ai', text: '收到。讓我搜尋香港 detailing 工房，按評分、距離同預算排序…', delay: 800 },
    { from: 'ai', typing: true, delay: 1200 },
    { from: 'ai', text: '搵到 3 間值得推薦嘅 detailing studio ⬇️', delay: 600 },
    { from: 'ai', card: true, delay: 400 },
    { from: 'ai', text: '我推薦 Apex Detailing — 用 Gtechniq Crystal Serum，9H 硬度。要我預約嗎？', delay: 800 },
  ],
  tune: [
    { from: 'user', text: 'M3 想加 stage 1 ECU remap，邊間靠得住？' },
    { from: 'ai', text: '了解。M3 Comp S58 引擎 stage 1 通常可以多 60-80hp。讓我搵專做 BMW 嘅工房…', delay: 800 },
    { from: 'ai', typing: true, delay: 1200 },
    { from: 'ai', text: '搵到 3 間有 BMW dyno + bootmod3 牌嘅工房 ⬇️', delay: 600 },
    { from: 'ai', card: true, delay: 400 },
    { from: 'ai', text: 'GT Tuning 係官方 bootmod3 dealer，有 Mustang AWD dyno。約定？', delay: 800 },
  ],
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', tweaks.accentColor);
    root.style.setProperty('--accent-bright', tweaks.accentColor);
    root.style.setProperty('--accent-soft', tweaks.accentColor + '20');
    root.style.setProperty('--gold', tweaks.secondAccent);
    root.style.setProperty('--gold-soft', tweaks.secondAccent + '24');
    root.style.setProperty('--font-sans', FONT_OPTIONS[tweaks.fontFamily] || FONT_OPTIONS.Helvetica);
    if (!tweaks.darkMode) {
      root.style.setProperty('--bg-0', '#f8f8fa');
      root.style.setProperty('--bg-1', '#ffffff');
      root.style.setProperty('--bg-2', '#f0f0f3');
      root.style.setProperty('--bg-3', '#e6e6ea');
      root.style.setProperty('--bg-4', '#dcdce0');
      root.style.setProperty('--ink-0', '#0a0a0e');
      root.style.setProperty('--ink-1', '#2a2a30');
      root.style.setProperty('--ink-2', '#5a5a64');
      root.style.setProperty('--ink-3', '#8a8a94');
      root.style.setProperty('--ink-4', '#bababf');
      root.style.setProperty('--line', '#e0e0e4');
      root.style.setProperty('--line-soft', '#ececef');
    } else {
      root.style.setProperty('--bg-0', '#08080a');
      root.style.setProperty('--bg-1', '#0e0e11');
      root.style.setProperty('--bg-2', '#15151a');
      root.style.setProperty('--bg-3', '#1d1d24');
      root.style.setProperty('--bg-4', '#26262f');
      root.style.setProperty('--ink-0', '#f5f5f7');
      root.style.setProperty('--ink-1', '#d6d6db');
      root.style.setProperty('--ink-2', '#9a9aa3');
      root.style.setProperty('--ink-3', '#6a6a73');
      root.style.setProperty('--ink-4', '#44444c');
      root.style.setProperty('--line', '#2a2a33');
      root.style.setProperty('--line-soft', '#1f1f27');
    }
  }, [tweaks]);

  // Navigation state
  const [authed, setAuthed] = React.useState(true);
  const [tab, setTab] = React.useState('market');
  const [stack, setStack] = React.useState([]); // overlay screens

  const push = (screen) => setStack(s => [...s, screen]);
  const pop = () => setStack(s => s.slice(0, -1));
  const reset = () => setStack([]);

  const top = stack[stack.length - 1];

  if (!authed) {
    return (
      <>
        <StageLabel screen="Auth" />
        <div className="viewport" data-screen-label="01 Auth">
          <ScreenAuth onSignIn={() => setAuthed(true)} />
        </div>
        <TweaksPanelUI tweaks={tweaks} setTweak={setTweak} />
      </>
    );
  }

  const renderTab = () => {
    switch (tab) {
      case 'feed': return <ScreenFeed onOpenAI={() => push({ type: 'ai' })} />;
      case 'market': return <ScreenMarketplace
        onOpenListing={(l) => push({ type: 'listing', data: l })}
        onOpenUpload={() => push({ type: 'upload' })} />;
      case 'map': return <ScreenMap onOpenMerchant={(m) => push({ type: 'merchant', data: m })} />;
      case 'inbox': return <ScreenInbox
        onOpenChat={(c) => push({ type: 'chat', data: c })}
        onOpenAI={() => push({ type: 'ai' })} />;
      case 'profile': return <ScreenProfile />;
      default: return null;
    }
  };

  const renderOverlay = () => {
    if (!top) return null;
    switch (top.type) {
      case 'listing': return <ScreenListingDetail listing={top.data}
        onBack={pop}
        onContact={() => { setStack([]); setTab('inbox'); setTimeout(() => push({ type: 'chat', data: DATA.conversations[1] }), 50); }}
        onSign={() => push({ type: 'sign', data: top.data })} />;
      case 'upload': return <ScreenUpload onClose={pop} onPay={() => { pop(); push({ type: 'paySuccess' }); }} />;
      case 'paySuccess': return <ScreenPaymentSuccess onDone={pop} />;
      case 'sign': return <ScreenSignContract listing={top.data} onBack={pop} onComplete={reset} />;
      case 'merchant': return <ScreenMerchantDetail merchant={top.data}
        onBack={pop}
        onBook={() => push({ type: 'booking', data: top.data })}
        onContact={() => { reset(); setTab('inbox'); setTimeout(() => push({ type: 'chat', data: DATA.conversations[3] }), 50); }} />;
      case 'booking': return <ScreenBooking merchant={top.data} onClose={pop} onConfirm={() => { pop(); push({ type: 'paySuccess' }); }} />;
      case 'ai': return <ScreenAIAgent onBack={pop}
        script={AI_SCRIPTS[tweaks.aiScript] || AI_SCRIPTS.default}
        onOpenMerchant={(m) => push({ type: 'merchant', data: m })} />;
      case 'chat': return <ScreenChat conversation={top.data} onBack={pop} />;
      default: return null;
    }
  };

  const tabOrder = (tweaks.tabOrder || 'feed,market,map,inbox,profile').split(',').map(s => s.trim());
  const screenLabel = top ? top.type : tab;

  // Some overlays should hide tab bar
  const fullOverlay = top && ['sign', 'paySuccess', 'upload', 'booking', 'ai', 'chat', 'merchant', 'listing'].includes(top.type);

  return (
    <>
      <div className={`viewport${top && top.type === 'ai' ? ' ai-mode' : ''}`} data-screen-label={screenLabel}>
        {renderTab()}
        {top && (
          <div style={{ position: 'absolute', inset: 0, zIndex: 50 }}>
            {renderOverlay()}
          </div>
        )}
        {!fullOverlay && <TabBar active={tab} onChange={(t) => { setTab(t); setStack([]); }} order={tabOrder} />}
      </div>
      <TweaksPanelUI tweaks={tweaks} setTweak={setTweak}
        onSignOut={() => { setAuthed(false); setStack([]); }} />
    </>
  );
}

// Custom Tweaks panel UI
function TweaksPanelUI({ tweaks, setTweak, onSignOut }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="主題">
        <TweakToggle label="Dark mode" value={tweaks.darkMode} onChange={(v) => setTweak('darkMode', v)} />
      </TweakSection>
      <TweakSection title="主色調">
        <TweakColor label="Accent" value={tweaks.accentColor} onChange={(v) => setTweak('accentColor', v)} />
        <TweakColor label="Second" value={tweaks.secondAccent} onChange={(v) => setTweak('secondAccent', v)} />
        <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
          {[
            { name: 'Racing Red', a: '#e10a17', b: '#c9a96a' },
            { name: 'Electric Blue', a: '#0a7ee1', b: '#4a9eff' },
            { name: 'Forest', a: '#1a8a4a', b: '#c9a96a' },
            { name: 'Sunset', a: '#ff6b35', b: '#ffb547' },
          ].map(p => (
            <button key={p.name} onClick={() => { setTweak('accentColor', p.a); setTweak('secondAccent', p.b); }}
              style={{
                flex: 1, padding: '6px 4px', fontSize: 9,
                background: `linear-gradient(135deg, ${p.a}, ${p.b})`,
                color: '#fff', borderRadius: 6, fontWeight: 600,
              }}>{p.name.split(' ')[0]}</button>
          ))}
        </div>
      </TweakSection>
      <TweakSection title="字體">
        <TweakSelect label="Font" value={tweaks.fontFamily} onChange={(v) => setTweak('fontFamily', v)}
          options={[
            { value: 'Helvetica', label: 'Helvetica' },
            { value: 'SFPro', label: 'SF Pro (system)' },
            { value: 'Inter', label: 'Inter' },
            { value: 'Mono', label: 'Mono (experimental)' },
          ]} />
      </TweakSection>
      <TweakSection title="Tab 排列">
        <TweakSelect label="Order" value={tweaks.tabOrder} onChange={(v) => setTweak('tabOrder', v)}
          options={[
            { value: 'feed,market,map,inbox,profile', label: '發現 → 市場 → 地圖' },
            { value: 'market,feed,map,inbox,profile', label: '市場 → 發現 → 地圖' },
            { value: 'market,map,feed,inbox,profile', label: '市場 → 地圖 → 發現' },
            { value: 'inbox,market,map,feed,profile', label: 'Inbox 行先' },
          ]} />
      </TweakSection>
      <TweakSection title="AI Agent 對話腳本">
        <TweakRadio value={tweaks.aiScript} onChange={(v) => setTweak('aiScript', v)}
          options={[
            { value: 'default', label: '氛圍燈' },
            { value: 'detail', label: 'Detailing' },
            { value: 'tune', label: '改裝' },
          ]} />
      </TweakSection>
      <TweakSection title="Demo">
        <TweakButton label="重看登入流程" onClick={onSignOut} secondary />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div className="stage">
    <App />
  </div>
);