/* projects/desktop-message-channels/app.jsx
 * 桌面端 · 消息渠道
 * 依赖：shared/shared.jsx、design-canvas.jsx、本目录 screens-channels.jsx
 */
/* global React, DesignCanvas, DCSection, DCArtboard, Raccoon,
   CH_Default, CH_FeishuConnected, CH_BothConnected,
   CH_FeishuModalEmpty, CH_FeishuModalError,
   CH_WechatWaiting, CH_WechatScanned, CH_WechatExpired,
   CH_UnbindFeishu, CH_UnbindWechat */

const D_W = 880, D_H = 620;

function DesktopIntro() {
  return (
    <div className="intro" style={{ width: 620 }}>
      <span className="tag" style={{ color: '#8E6BF2', background: '#F3EFFD' }}>桌面端 · 设置 → 消息渠道</span>
      <h1>把飞书 / 微信接入本地 AI 网关</h1>
      <p>
        视觉直接对齐 officev3 桌面端 SettingModal（Tailwind + Shadcn），整体外壳 880 × 620、
        左侧导航 #F7F7F7、品牌紫 #8E6BF2 与移动端一致，所以你切到这里不会有视觉割裂感。
      </p>
      <p>
        本路径覆盖三张渠道卡片（飞书 / 微信 / 自家移动端「敬请期待」）的完整状态机：
        <b>未连接 → 配置弹窗 → 连接失败 → 已连接 → 解绑确认</b>。
      </p>
    </div>
  );
}

function DesktopApp() {
  return (
    <DesignCanvas>
      <DCSection id="d-intro" title="概览" subtitle="桌面端消息渠道交互稿 · 对齐 officev3 SettingModal">
        <div style={{ padding: '0 60px', maxWidth: 720 }}>
          <DesktopIntro />
        </div>
      </DCSection>

      <DCSection id="ch-main" title="① 消息渠道主页 · 三种装填" subtitle="入口位于「设置」左侧导航，沿用原「连接数据源」位置">
        <DCArtboard id="ch-default" label="状态 A · 飞书 / 微信均未连接" width={D_W} height={D_H}><CH_Default /></DCArtboard>
        <DCArtboard id="ch-fs-on"   label="状态 B · 飞书已连接 / 微信未连接" width={D_W} height={D_H}><CH_FeishuConnected /></DCArtboard>
        <DCArtboard id="ch-both-on" label="状态 C · 飞书与微信均已连接" width={D_W} height={D_H}><CH_BothConnected /></DCArtboard>
      </DCSection>

      <DCSection id="ch-feishu" title="② 飞书 · 注册弹窗" subtitle="点击「配置」打开；连接方式固定 WebSocket，不暴露选项">
        <DCArtboard id="ch-fs-empty" label="① 空状态 · 等待输入" width={D_W} height={D_H}><CH_FeishuModalEmpty /></DCArtboard>
        <DCArtboard id="ch-fs-error" label="② 凭证错误 · 重试" width={D_W} height={D_H}><CH_FeishuModalError /></DCArtboard>
      </DCSection>

      <DCSection id="ch-wechat" title="③ 微信 ClawBot · 注册弹窗" subtitle="扫码授权个人微信，登录态保留在本地">
        <DCArtboard id="ch-wx-waiting" label="① 等待扫码" width={D_W} height={D_H}><CH_WechatWaiting /></DCArtboard>
        <DCArtboard id="ch-wx-scanned" label="② 已扫码 · 等待手机确认" width={D_W} height={D_H}><CH_WechatScanned /></DCArtboard>
        <DCArtboard id="ch-wx-expired" label="③ 二维码已过期 · 重新生成" width={D_W} height={D_H}><CH_WechatExpired /></DCArtboard>
      </DCSection>

      <DCSection id="ch-unbind" title="④ 解绑确认" subtitle="所有解绑操作都走二次确认 Modal，避免误触导致服务中断">
        <DCArtboard id="ch-unbind-fs" label="飞书解绑确认" width={D_W} height={D_H}><CH_UnbindFeishu /></DCArtboard>
        <DCArtboard id="ch-unbind-wx" label="微信解绑确认" width={D_W} height={D_H}><CH_UnbindWechat /></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 }}>
            视觉对齐 officev3 SettingModal · 内容来源：桌面端连接飞书和微信的流程设计<br />最近更新：2026-06-10
          </div>
        </div>
      </div>
    </DesignCanvas>
  );
}