/* projects/mobile-v1-companion/app.jsx
 * 移动端 V1 · 随身 AI 办公调度台
 * 依赖：shared/shared.jsx、design-canvas.jsx、本目录 screens-*.jsx
 */
/* global React, DesignCanvas, DCSection, DCArtboard, Raccoon,
   NewTaskCloud, NewTaskOnline, NewTaskOffline, NewTaskNoDevice,
   SidebarExpandedPlus, SidebarExpandedFree,
   InputDefault, InputRecording, InputTyping,
   ChatScreen, HistoryScreen,
   KnowledgeOverview, KbSubpage, DocsSubpage, HealthSubpage,
   PairIntro, PairDesktopQR, PairDesktopLinked, PairConfirm, PairSuccess,
   NotifyLockAsk, NotifyAskOptions, NotifyLockCountdown, NotifyCountdownChat */

const W = 390, H = 844;

function MobileIntro() {
  return (
    <div className="intro">
      <span className="tag">移动端 V1 · 基于 apps/office 适配</span>
      <h1>办公小浣熊 · 随身 AI 办公调度台</h1>
      <p>
        以移动端 PRD 的信息架构与命名为<b>新标准</b>，Web 端后续对齐。移动端是<b>调度入口</b>而非功能复刻：
        所有功能（数据分析 / 任务规划 / PPT / 文案）统一收拢进<b>「和 AI 对话」</b>这一核心范式，
        不还原桌面端的画布、编辑器等复杂界面。
      </p>
      <p>
        视觉上<b>尽量继承 Web 端</b>——沿用品牌紫、中性浅灰系、Inter 字体与 8px 圆角，
        浣熊作为对话 AI 头像贯穿全程。下方为各关键屏的高保真界面（纯屏幕，iOS 上下文）。
      </p>
      <div className="sysrow">
        <span className="chip"><span className="sw" style={{ background: '#8e6bf2' }} />品牌紫 #8E6BF2</span>
        <span className="chip"><span className="sw" style={{ background: '#f3effd', border: '1px solid #e7e2f6' }} />浅紫底 #F3EFFD</span>
        <span className="chip"><span className="sw" style={{ background: '#36383b' }} />标题 #36383B</span>
        <span className="chip"><span className="sw" style={{ background: '#f7f7f7', border: '1px solid #ececec' }} />中性灰系</span>
        <span className="chip">Inter / 8px 圆角</span>
      </div>
    </div>
  );
}

function MobileApp() {
  return (
    <DesignCanvas>
      <DCSection id="intro" title="概览" subtitle="设计目标与系统说明">
        <div style={{ padding: '0 60px', maxWidth: 720 }}>
          <MobileIntro />
        </div>
      </DCSection>

      <DCSection id="newtask" title="① 新建任务 · 设备状态 A–D" subtitle="默认进入云端；顶部切换器：云端 / 已关联设备 / 添加新设备">
        <DCArtboard id="nt-a" label="状态 A · 云端模式（默认首页 / 侧边栏收起）" width={W} height={H}><NewTaskCloud /></DCArtboard>
        <DCArtboard id="nt-b" label="状态 B · 已关联设备（在线）" width={W} height={H}><NewTaskOnline /></DCArtboard>
        <DCArtboard id="nt-c" label="状态 C · 已关联设备（离线）" width={W} height={H}><NewTaskOffline /></DCArtboard>
        <DCArtboard id="nt-d" label="状态 D · 未关联任何设备" width={W} height={H}><NewTaskNoDevice /></DCArtboard>
      </DCSection>

      <DCSection id="nav" title="② 侧边栏导航（抽屉）" subtitle="从左滑出，约 70% 宽，右侧半透明遮罩；账户固定底部。收起态即状态 A 首页">
        <DCArtboard id="nav-open" label="侧边栏展开 · 升级版账户" width={W} height={H}><SidebarExpandedPlus /></DCArtboard>
        <DCArtboard id="nav-open-free" label="侧边栏展开 · 免费版账户" width={W} height={H}><SidebarExpandedFree /></DCArtboard>
      </DCSection>

      <DCSection id="input" title="③ 发起对话输入框 · 三态" subtitle="语音优先、文字备用：长按说话 → 录音波形 → 轻点弹键盘打字">
        <DCArtboard id="in-1" label="默认态 · 长按说话" width={W} height={H}><InputDefault /></DCArtboard>
        <DCArtboard id="in-2" label="长按录音中 · 松开发送" width={W} height={H}><InputRecording /></DCArtboard>
        <DCArtboard id="in-3" label="轻点切换 · 文字输入" width={W} height={H}><InputTyping /></DCArtboard>
      </DCSection>

      <DCSection id="chat" title="④ 对话界面" subtitle="所有功能以对话承载，结果以文字 / 摘要 / 简单卡片在对话流中呈现">
        <DCArtboard id="chat-1" label="数据分析对话 · 结果卡片" width={W} height={H}><ChatScreen /></DCArtboard>
      </DCSection>

      <DCSection id="history" title="⑤ 历史任务" subtitle="按来源分组：云端对话 + 各设备本地对话（含离线设备仍可查看）">
        <DCArtboard id="hist-1" label="历史任务 · 按来源分组" width={W} height={H}><HistoryScreen /></DCArtboard>
      </DCSection>

      <DCSection id="knowledge" title="⑥ 知识源" subtitle="总览页统一管理 + 跨源对话引导；子页三段式：状态条 / 内容区 / 标注 scope 的对话框">
        <DCArtboard id="kn-overview" label="总览页 · 内置 + 第三方数据源" width={W} height={H}><KnowledgeOverview /></DCArtboard>
        <DCArtboard id="kn-kb" label="内置知识库子页（文档型）" width={W} height={H}><KbSubpage /></DCArtboard>
        <DCArtboard id="kn-docs" label="我的文档子页（文档型）" width={W} height={H}><DocsSubpage /></DCArtboard>
        <DCArtboard id="kn-health" label="Apple Health 子页（流数据型）" width={W} height={H}><HealthSubpage /></DCArtboard>
      </DCSection>

      <DCSection id="pair" title="⑦ 关联电脑流程" subtitle="手机端引导 → 桌面端二维码 → 手机扫码确认 → 关联成功（入口：状态 D 的「+ 添加电脑」或顶部切换器）">
        <DCArtboard id="pair-1" label="① 手机端引导页 · 指引去电脑端开启" width={W} height={H}><PairIntro /></DCArtboard>
        <DCArtboard id="pair-2" label="② 桌面端「设置 → 关联手机」· 未关联（展示二维码）" width={720} height={H}><PairDesktopQR /></DCArtboard>
        <DCArtboard id="pair-2b" label="②′ 桌面端「设置 → 关联手机」· 已关联（管理态）" width={720} height={H}><PairDesktopLinked /></DCArtboard>
        <DCArtboard id="pair-3" label="③ 手机扫码后 · 确认设备信息" width={W} height={H}><PairConfirm /></DCArtboard>
        <DCArtboard id="pair-4" label="④ 关联成功 · 自动回到「新建任务」" width={W} height={H}><PairSuccess /></DCArtboard>
      </DCSection>

      <DCSection id="notify" title="⑧ 通知场景" subtitle="AI 在后台执行时主动找到用户：锁屏横幅 + 点击后跳回对话现场（选项卡片 / 倒计时提示条）">
        <DCArtboard id="nt-lock-ask" label="① 锁屏横幅 · 追问与选项确认" width={W} height={H}><NotifyLockAsk /></DCArtboard>
        <DCArtboard id="nt-chat-ask" label="② 对话页 · 选项卡片输入区" width={W} height={H}><NotifyAskOptions /></DCArtboard>
        <DCArtboard id="nt-lock-cd" label="③ 锁屏横幅 · 超时自动通过（PPT 大纲确认）" width={W} height={H}><NotifyLockCountdown /></DCArtboard>
        <DCArtboard id="nt-chat-cd" label="④ 对话页 · 大纲卡片 + 倒计时提示条" width={W} height={H}><NotifyCountdownChat /></DCArtboard>
      </DCSection>

      <div style={{ position: 'sticky', left: 0, width: '100vw' }}>
        <div style={{ padding: '56px 24px 36px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, textAlign: 'center' }}>
          <div style={{ width: 64, height: 1, background: 'rgba(10,10,6,0.08)' }} />
          <div style={{ marginTop: 6 }}><Raccoon size="md" brand /></div>
          <div style={{ fontSize: 14, color: '#7a7a6e', fontWeight: 500, letterSpacing: '0.3px' }}>—— 到这里就是全部了 ——</div>
          <div style={{ fontSize: 12.5, color: '#a0a094', lineHeight: 1.7 }}>
            Crafted by Joe · 办公小浣熊 移动端 V1<br />最近更新：2026-06-09
          </div>
        </div>
      </div>
    </DesignCanvas>
  );
}