/* screens-notify.jsx — 通知场景：追问与选项确认 / 超时自动通过 */
/* global React, Screen, StatusBar, Raccoon, Ic, RACCOON_SRC */

/* ---------- 锁屏外壳：深色壁纸 + 大时间 + 顶部通知横幅 ---------- */
function LockScreen({ children }) {
  return (
    <div
      className="screen"
      style={{
        background: 'linear-gradient(180deg, #1a1430 0%, #2b1f4d 55%, #0e0a1f 100%)',
        color: '#fff',
      }}
    >
      <StatusBar time="9:41" />
      <div style={{ padding: '8px 16px 0', flex: '0 0 auto' }}>{children}</div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', color: '#fff' }}>
        <div style={{ fontSize: 16, opacity: 0.78, letterSpacing: 0.4, marginBottom: 2 }}>6 月 9 日 周二</div>
        <div style={{ fontSize: 86, fontWeight: 300, letterSpacing: -2, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>9:41</div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0 36px 28px', color: '#fff' }}>
        <div style={{ width: 42, height: 42, borderRadius: 21, background: 'rgba(255,255,255,0.16)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 18.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
            <path d="M19 11V8a7 7 0 0 0-14 0v3" />
            <rect x="3" y="11" width="18" height="11" rx="2" />
          </svg>
        </div>
        <div style={{ width: 42, height: 42, borderRadius: 21, background: 'rgba(255,255,255,0.16)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="4.6" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none" /></svg>
        </div>
      </div>
      <div className="home-indicator" style={{ background: '#fff' }} />
    </div>
  );
}

/* iOS 风格通知横幅 */
function NotifyBanner({ title, body, time = '刚刚' }) {
  return (
    <div
      style={{
        background: 'rgba(255,255,255,0.92)',
        backdropFilter: 'saturate(160%) blur(20px)',
        WebkitBackdropFilter: 'saturate(160%) blur(20px)',
        borderRadius: 18,
        padding: '12px 14px',
        boxShadow: '0 6px 22px rgba(0,0,0,0.18)',
        color: 'var(--t1)',
        display: 'flex',
        gap: 10,
        alignItems: 'flex-start',
      }}
    >
      <span style={{ width: 36, height: 36, borderRadius: 9, background: 'var(--purple-bg)', border: '1px solid var(--purple-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto', overflow: 'hidden' }}>
        <img src={RACCOON_SRC} alt="" style={{ width: 28, height: 28 }} />
      </span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 2 }}>
          <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--t1)' }}>办公小浣熊</span>
          <span style={{ fontSize: 12, color: 'var(--muted)' }}>{time}</span>
        </div>
        <div style={{ fontSize: 14.5, lineHeight: 1.45, color: 'var(--t1)', fontWeight: 600, marginBottom: 2 }}>{title}</div>
        <div style={{ fontSize: 13.5, lineHeight: 1.5, color: 'var(--t2)', whiteSpace: 'pre-line' }}>{body}</div>
      </div>
    </div>
  );
}

/* ① 锁屏通知 · 追问场景 */
function NotifyLockAsk() {
  return (
    <LockScreen>
      <NotifyBanner
        title="「出海市场分析」任务有一个问题"
        body="需要你回答才能继续执行"
      />
    </LockScreen>
  );
}

/* ② 锁屏通知 · 超时自动通过场景 */
function NotifyLockCountdown() {
  return (
    <LockScreen>
      <NotifyBanner
        title="PPT 大纲已生成，请确认是否继续"
        body={'「2025 出海趋势分析」\n2:47 后无操作将自动继续'}
      />
    </LockScreen>
  );
}

/* ---------- 对话页（追问与选项确认） ---------- */
function ChatAppbar({ title }) {
  return (
    <div className="appbar" style={{ background: 'var(--bg-subtle)' }}>
      <button className="iconbtn"><Ic.back size={22} /></button>
      <div style={{ flex: 1 }}>
        <div className="appbar-title" style={{ fontSize: 15.5 }}>{title}</div>
        <div className="appbar-sub" style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
          <span className="dot on" /> 云端对话
        </div>
      </div>
      <button className="iconbtn"><Ic.plus size={20} /></button>
    </div>
  );
}

function AiAskBubble({ children }) {
  return (
    <div style={{ display: 'flex', gap: 10, margin: '0 16px 14px' }}>
      <Raccoon size="sm" />
      <div style={{ background: '#fff', border: '1px solid var(--border)', borderRadius: '16px 16px 16px 4px', padding: '11px 14px', fontSize: 14.5, lineHeight: 1.55, color: 'var(--t1)', maxWidth: '78%' }}>
        {children}
      </div>
    </div>
  );
}

/* ③ 对话页 · 选项卡片输入区 */
function NotifyAskOptions() {
  const [picked, setPicked] = React.useState(2); // 默认选中「行业媒体」做示意
  const options = ['公司内部管理层', '外部投资人', '行业媒体'];
  const otherIdx = 3;
  return (
    <Screen tinted>
      <ChatAppbar title="出海市场分析" />
      <div className="body">
        <div className="scroll" style={{ paddingTop: 10 }}>
          <div style={{ display: 'flex', justifyContent: 'center', margin: '4px 0 14px' }}>
            <span style={{ fontSize: 11.5, color: 'var(--muted)', background: 'var(--bg-muted)', padding: '4px 10px', borderRadius: 10 }}>
              刚刚 · 来自通知
            </span>
          </div>
          <AiAskBubble>这份报告的目标受众是谁？</AiAskBubble>
        </div>

        {/* 选项卡片 */}
        <div style={{ background: '#fff', borderTop: '1px solid var(--border)', padding: '14px 16px 10px' }}>
          <div style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 10 }}>请选择一项继续</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {options.map((o, i) => (
              <OptionRow key={o} label={o} selected={picked === i} />
            ))}
            <OptionRow label="其他" selected={picked === otherIdx} divider />
            {picked === otherIdx && (
              <div style={{ marginTop: 4, background: 'var(--bg-subtle)', border: '1px solid var(--border)', borderRadius: 10, padding: '10px 12px', fontSize: 13.5, color: 'var(--muted)' }}>
                请填写……
              </div>
            )}
          </div>
          <button
            style={{
              marginTop: 14,
              width: '100%',
              height: 46,
              borderRadius: 14,
              border: 'none',
              background: picked >= 0 ? 'var(--purple)' : 'var(--bg-soft)',
              color: picked >= 0 ? '#fff' : 'var(--muted)',
              fontSize: 15,
              fontWeight: 600,
              letterSpacing: 0.3,
            }}
          >
            提交
          </button>
        </div>
      </div>
    </Screen>
  );
}

function OptionRow({ label, selected, divider }) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 10,
        padding: '11px 12px',
        borderRadius: 12,
        background: selected ? 'var(--purple-bg)' : '#fff',
        border: `1px solid ${selected ? 'var(--purple-border)' : 'var(--border)'}`,
        marginTop: divider ? 4 : 0,
      }}
    >
      <span
        style={{
          width: 18,
          height: 18,
          borderRadius: 9,
          border: `1.6px solid ${selected ? 'var(--purple)' : 'var(--border-strong)'}`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flex: '0 0 auto',
        }}
      >
        {selected && <span style={{ width: 9, height: 9, borderRadius: 5, background: 'var(--purple)' }} />}
      </span>
      <span style={{ fontSize: 14.5, color: 'var(--t1)' }}>{label}</span>
    </div>
  );
}

/* ④ 对话页 · 大纲卡片 + 倒计时提示条（超时自动通过） */
function NotifyCountdownChat() {
  const outline = [
    '一、出海市场总览',
    '二、主要目标国家分析',
    '三、本地化策略与渠道',
    '四、风险与合规要点',
  ];
  return (
    <Screen tinted>
      <ChatAppbar title="2025 出海趋势分析" />
      <div className="body">
        <div className="scroll" style={{ paddingTop: 10 }}>
          <div style={{ display: 'flex', justifyContent: 'center', margin: '4px 0 14px' }}>
            <span style={{ fontSize: 11.5, color: 'var(--muted)', background: 'var(--bg-muted)', padding: '4px 10px', borderRadius: 10 }}>
              刚刚 · 来自通知
            </span>
          </div>

          <div style={{ display: 'flex', gap: 10, margin: '0 16px 14px' }}>
            <Raccoon size="sm" />
            <div style={{ flex: 1, minWidth: 0 }}>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--t2)', margin: '4px 0 8px' }}>
                我把大纲整理好了，确认无误后就开始生成 PPT。
              </p>
              <div className="card" style={{ padding: 14 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 10 }}>
                  <Ic.doc size={16} color="var(--purple-dark)" />
                  <span style={{ fontSize: 13.5, fontWeight: 600 }}>大纲已生成</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {outline.map((o) => (
                    <div key={o} style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--t2)' }}>{o}</div>
                  ))}
                </div>
                <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
                  <span style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--t3)', background: 'var(--bg-subtle)', border: '1px solid var(--border)', padding: '7px 13px', borderRadius: 18 }}>查看大纲</span>
                  <span style={{ fontSize: 12.5, fontWeight: 600, color: '#fff', background: 'var(--purple)', padding: '7px 13px', borderRadius: 18 }}>生成 PPT</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 倒计时提示条 + 输入坞 */}
        <div className="dock-wrap" style={{ paddingTop: 0 }}>
          <div
            style={{
              margin: '0 12px 8px',
              padding: '9px 12px',
              background: 'var(--purple-bg)',
              border: '1px solid var(--purple-border)',
              borderRadius: 12,
              display: 'flex',
              alignItems: 'center',
              gap: 8,
              fontSize: 13,
              color: 'var(--purple-dark)',
              fontWeight: 500,
            }}
          >
            <Ic.clock size={15} color="var(--purple-dark)" />
            <span>2:47 后无操作将自动继续生成 PPT</span>
          </div>
          <div className="dock" style={{ background: '#fff' }}>
            <span className="ph">有什么想说的……</span>
            <span className="mic"><Ic.mic size={19} /></span>
          </div>
        </div>
      </div>
    </Screen>
  );
}

Object.assign(window, { NotifyLockAsk, NotifyLockCountdown, NotifyAskOptions, NotifyCountdownChat });