// ============================================================
// app.jsx — main shell + state machine
// ============================================================

const { useState, useEffect } = React;

const STAGES = [
  { id: 'home',       label: 'Home · 智能体首页' },
  { id: 'analyzing',  label: '商品分析进行中' },
  { id: 'analyzed',   label: '商品分析完成 + 出图类型' },
  { id: 'supplement', label: '资料补充' },
  { id: 'replanning', label: '出图方案规划中' },
  { id: 'plans',      label: '出图方案已生成' },
  { id: 'model',      label: '选择生图模型' },
  { id: 'generating', label: '批量生成中' },
];

function App() {
  const [stage, setStage] = useState('home');
  const [mode, setMode] = useState('step');
  const [showSettings, setShowSettings] = useState(false);
  const [showTweaks, setShowTweaks] = useState(false);
  const [selectedTypes, setSelectedTypes] = useState(new Set(['main', 'white', 'rules']));

  // Auto-advance simulated stages for visual flair
  useEffect(() => {
    if (stage === 'analyzing') {
      const t = setTimeout(() => setStage('analyzed'), 2400);
      return () => clearTimeout(t);
    }
    if (stage === 'replanning') {
      const t = setTimeout(() => setStage('plans'), 2400);
      return () => clearTimeout(t);
    }
  }, [stage]);

  const onNewTask = () => {
    setStage('analyzing');
  };

  const onPickAgent = (id) => {
    if (id === 'ecom') setStage('home');
  };

  const toggleType = (id) => {
    const s = new Set(selectedTypes);
    s.has(id) ? s.delete(id) : s.add(id);
    setSelectedTypes(s);
  };

  // Product strip is shown on top-right during workflow stages
  const showStrip = ['analyzing','analyzed','supplement','replanning','plans','model','generating'].includes(stage);
  const productThumbs = [0,1,2,3,4,5]; // kind index

  // Edit mode keyboard shortcut for tweaks
  useEffect(() => {
    const handler = (e) => {
      if (e.key === 't' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setShowTweaks(s => !s);
      }
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, []);

  // Edit mode for tweaks panel — host integration
  useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setShowTweaks(true);
      if (e.data?.type === '__deactivate_edit_mode') setShowTweaks(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const renderStage = () => {
    switch (stage) {
      case 'home':
        return <HomeStage onStart={() => setStage('analyzing')} mode={mode} setMode={setMode} />;
      case 'analyzing':
        return <AnalyzingStage productThumbs={productThumbs} />;
      case 'analyzed':
        return <AnalyzedStage
          selected={selectedTypes}
          onToggle={toggleType}
          onConfirm={() => setStage('supplement')} />;
      case 'supplement':
        return <SupplementStage
          selected={selectedTypes}
          onSubmit={() => setStage('replanning')} />;
      case 'replanning':
        return <ReplanningStage />;
      case 'plans':
        return <PlansStage onConfirm={() => setStage('model')} />;
      case 'model':
        return <ModelStage onConfirm={() => setStage('generating')} />;
      case 'generating':
        return <GeneratingStage />;
      default:
        return null;
    }
  };

  return (
    <div className="shell">
      <Sidebar activeAgent="ecom" onPickAgent={onPickAgent} />
      <main className="main"
            data-screen-label={STAGES.find(s => s.id === stage)?.label}>
        <TopBar
          onNewTask={onNewTask}
          productThumbs={productThumbs}
          showProductStrip={showStrip}
          currentLabel={showStrip ? '穹妹' : null} />
        <div className="main-scroll">
          {renderStage()}
        </div>
        {stage !== 'home' && (
          <>
            <SettingsFab onClick={() => setShowSettings(true)} />
            <PlaybookFab />
            <BottomDock mode={mode} setMode={setMode} stage={stage} />
          </>
        )}
      </main>

      <SettingsModal open={showSettings} onClose={() => setShowSettings(false)} />

      {showTweaks ? (
        <TweakPanel
          stage={stage}
          setStage={setStage}
          onClose={() => {
            setShowTweaks(false);
            window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
          }} />
      ) : (
        <button className="tweaks-fab" onClick={() => setShowTweaks(true)}>
          <Ico.Spark /> 阶段切换 <kbd>⌘T</kbd>
        </button>
      )}
    </div>
  );
}

// ============================================================
// Bottom dock — fixed mode toggle visible across workflow stages
// ============================================================

function BottomDock({ mode, setMode, stage }) {
  return (
    <div style={{
      position: 'absolute',
      bottom: 28,
      right: 48,
      zIndex: 4,
      display: 'flex',
      gap: 8,
    }}>
      <div className="composer-mode" style={{boxShadow: '0 12px 30px rgba(0,0,0,0.4)'}}>
        <button
          className={'mode-btn ' + (mode === 'step' ? 'active' : '')}
          onClick={() => setMode('step')}>
          <Ico.ArrowUp /> 逐步确认
        </button>
        <button
          className={'mode-btn ' + (mode === 'auto' ? 'active' : '')}
          onClick={() => setMode('auto')}>
          <Ico.Bolt /> 智能托管
        </button>
      </div>
    </div>
  );
}

// ============================================================
// Tweak panel — stage navigator
// ============================================================

function TweakPanel({ stage, setStage, onClose }) {
  return (
    <div className="tweak-panel">
      <div className="tweak-panel-head">
        <Ico.Spark /> Tweaks · 阶段导航
        <div className="spacer"></div>
        <button onClick={onClose} style={{color: 'var(--text-2)'}}><Ico.X /></button>
      </div>
      <div className="tweak-stage-list">
        {STAGES.map((s, i) => (
          <button key={s.id}
                  className={'tweak-stage ' + (stage === s.id ? 'active' : '')}
                  onClick={() => setStage(s.id)}>
            <span className="tweak-stage-num">{i}</span>
            <span style={{flex: 1, textAlign: 'left', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>{s.label}</span>
          </button>
        ))}
      </div>
      <div style={{borderTop: '1px solid var(--border)', marginTop: 10, paddingTop: 10, fontSize: 11, color: 'var(--text-3)', lineHeight: 1.5}}>
        点击「新任务」从首页进入工作流，或直接在上方跳到任意阶段预览。
      </div>
    </div>
  );
}

// ============================================================
// Mount
// ============================================================

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