/* screens-newtask.jsx — 新建任务 4 状态 + 快捷卡片 + 输入坞 */
/* global React, Screen, Raccoon, Ic, Icon */

const SHORTCUTS = [
  { key: 'data', name: '数据分析', desc: '传表格，出结论', icon: Ic.chart },
  { key: 'plan', name: '任务规划', desc: '拆目标，排步骤', icon: Ic.route },
  { key: 'ppt', name: 'PPT 生成', desc: '一句话成稿', icon: Ic.slides },
  { key: 'copy', name: '文案生成', desc: '周报·邮件·纪要', icon: Ic.pen },
];

function Shortcuts() {
  return (
    <div className="shortcut-grid">
      {SHORTCUTS.map((s) => (
        <div className="shortcut" key={s.key}>
          <span className="sc-ic"><s.icon size={20} /></span>
          <div>
            <div className="sc-name">{s.name}</div>
            <div className="sc-desc">{s.desc}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* 顶部模式切换器 */
function Switcher({ mode, device }) {
  // mode: 'cloud' | 'device' ; device: {name, online} | null
  return (
    <div className="switcher">
      <div className={`seg ${mode === 'cloud' ? 'active' : ''}`}>
        <Ic.cloud size={16} /> 云端
      </div>
      {device && (
        <div className={`seg ${mode === 'device' ? 'active' : ''}`}>
          <span className={`dot ${device.online ? 'on' : 'off'}`} />
          {device.name}
        </div>
      )}
      <div className="seg add">
        <Ic.plus size={15} /> {device ? '添加' : '添加设备'}
      </div>
    </div>
  );
}

/* 底部输入坞（默认语音态） */
function Dock({ placeholder = '长按说话，或点击输入', disabled = false, scope }) {
  return (
    <div className="dock-wrap">
      {scope && (
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6, marginBottom: 10,
          fontSize: 12, fontWeight: 500, color: 'var(--purple-dark)',
          background: 'var(--purple-bg)', border: '1px solid var(--purple-border)',
          padding: '5px 10px', borderRadius: 20,
        }}>
          正在对话：{scope} <Ic.x size={13} />
        </div>
      )}
      <div className="dock" style={disabled ? { opacity: 0.45 } : null}>
        <span className="ph">{placeholder}</span>
        <span className="mic"><Ic.mic size={19} /></span>
      </div>
    </div>
  );
}

function AppBar({ title = '办公小浣熊' }) {
  return (
    <div className="appbar">
      <button className="iconbtn"><Ic.menu size={22} /></button>
      <div className="appbar-title">{title}</div>
      <div className="spacer" />
      <Raccoon size="sm" />
    </div>
  );
}

/* ---------- 状态 A：云端模式（默认首页 / 侧边栏收起） ---------- */
function NewTaskCloud() {
  return (
    <Screen>
      <AppBar />
      <div className="body">
        <Switcher mode="cloud" device={{ name: 'MacBook', online: true }} />
        <div className="scroll">
          <Shortcuts />
          <div style={{ textAlign: 'center', marginTop: 26, padding: '0 24px' }}>
            <Raccoon size="lg" brand />
            <p style={{ fontSize: 15, color: 'var(--t2)', marginTop: 12, fontWeight: 500 }}>
              下午好，今天想让我帮你做点什么？
            </p>
            <p style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 4 }}>
              云端模式 · 无需选择设备即可发起
            </p>
          </div>
        </div>
        <Dock />
      </div>
    </Screen>
  );
}

/* ---------- 状态 B：已关联设备（在线） ---------- */
function NewTaskOnline() {
  return (
    <Screen>
      <AppBar />
      <div className="body">
        <Switcher mode="device" device={{ name: 'MacBook', online: true }} />
        <div className="scroll" style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 28px', textAlign: 'center' }}>
            <div style={{ width: 72, height: 72, borderRadius: 20, background: 'var(--purple-bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--purple-dark)' }}>
              <Ic.laptop size={34} />
            </div>
            <div style={{ marginTop: 16, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span className="dot on" />
              <span style={{ fontSize: 16, fontWeight: 600 }}>MacBook · 在线</span>
            </div>
            <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 8, lineHeight: 1.6 }}>
              已就绪。发起本地对话，让小浣熊直接<br />操作这台 Mac 上的文件与应用。
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center', marginTop: 18 }}>
              {['整理桌面文件', '打开并汇总季度报表', '回复未读邮件'].map((t) => (
                <span key={t} style={{ fontSize: 12.5, color: 'var(--t3)', background: 'var(--bg-subtle)', border: '1px solid var(--border)', padding: '7px 13px', borderRadius: 18 }}>{t}</span>
              ))}
            </div>
          </div>
        </div>
        <Dock placeholder="长按说话，向 MacBook 发起本地对话" />
      </div>
    </Screen>
  );
}

/* ---------- 状态 C：已关联设备（离线） ---------- */
function NewTaskOffline() {
  return (
    <Screen>
      <AppBar />
      <div className="body">
        <div className="switcher">
          <div className="seg"><Ic.cloud size={16} /> 云端</div>
          <div className="seg active"><span className="dot off" />MacBook</div>
          <div className="seg add"><Ic.plus size={15} /> 添加</div>
        </div>
        <div className="scroll" style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 28px', textAlign: 'center' }}>
            <div style={{ width: 72, height: 72, borderRadius: 20, background: 'var(--bg-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--subtle)' }}>
              <Ic.laptop size={34} />
            </div>
            <div style={{ marginTop: 16, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span className="dot off" />
              <span style={{ fontSize: 16, fontWeight: 600, color: 'var(--t3)' }}>MacBook 当前离线</span>
            </div>
            <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 8, lineHeight: 1.6 }}>
              该设备暂时不可用，无法发起本地对话。<br />可切换到云端模式，或唤醒这台 Mac 后重试。
            </p>
            <button style={{ marginTop: 18, fontSize: 13.5, fontWeight: 600, color: 'var(--purple-dark)', background: 'var(--purple-bg)', border: '1px solid var(--purple-border)', padding: '10px 18px', borderRadius: 12 }}>
              切换到云端模式
            </button>
          </div>
        </div>
        <div className="dock-wrap">
          <div className="dock" style={{ opacity: 0.4 }}>
            <span className="ph">设备离线，暂不可发起</span>
            <span className="mic" style={{ background: 'var(--bg-soft)', color: 'var(--subtle)' }}><Ic.mic size={19} /></span>
          </div>
        </div>
      </div>
    </Screen>
  );
}

/* ---------- 状态 D：未关联任何设备 ---------- */
function NewTaskNoDevice() {
  return (
    <Screen>
      <AppBar />
      <div className="body">
        <div className="switcher">
          <div className="seg active"><Ic.cloud size={16} /> 云端</div>
          <div className="seg add" style={{ flex: 1 }}><Ic.plus size={15} /> 添加设备</div>
        </div>
        <div className="scroll">
          <Shortcuts />
          {/* 引导卡片 */}
          <div style={{ margin: '18px 16px 0', border: '1px solid var(--purple-border)', background: 'var(--purple-bg)', borderRadius: 14, padding: 16, position: 'relative' }}>
            <button className="iconbtn" style={{ position: 'absolute', top: 6, right: 6, width: 28, height: 28, color: 'var(--muted)' }}><Ic.x size={16} /></button>
            <div style={{ display: 'flex', gap: 12 }}>
              <div style={{ width: 38, height: 38, borderRadius: 10, background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--purple-dark)', flex: '0 0 auto' }}>
                <Ic.laptop size={20} />
              </div>
              <div style={{ flex: 1, paddingRight: 14 }}>
                <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--t1)' }}>想让小浣熊帮你操控电脑？</div>
                <p style={{ fontSize: 12.5, color: 'var(--t3)', marginTop: 5, lineHeight: 1.6 }}>
                  关联一台远程设备，就能在手机上发起任务，让 Mac 或 Windows 在后台替你执行。
                </p>
              </div>
            </div>
            <button style={{ width: '100%', marginTop: 14, height: 40, borderRadius: 11, background: 'var(--purple)', color: '#fff', fontSize: 14, fontWeight: 600, border: 'none' }}>
              添加远程设备
            </button>
          </div>
        </div>
        <Dock />
      </div>
    </Screen>
  );
}

Object.assign(window, {
  NewTaskCloud, NewTaskOnline, NewTaskOffline, NewTaskNoDevice,
  Shortcuts, Switcher, Dock, AppBar,
});