/* screens-input.jsx — 发起对话输入框 三态：默认 / 长按录音 / 文字键盘 */
/* global React, Screen, Raccoon, Ic, AppBar, Wave */

function MiniHero({ title, sub }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 30px', textAlign: 'center' }}>
      <Raccoon size="lg" brand />
      <p style={{ fontSize: 15, color: 'var(--t2)', marginTop: 12, fontWeight: 500 }}>{title}</p>
      {sub && <p style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 5 }}>{sub}</p>}
    </div>
  );
}

/* ① 默认态 —— 语音优先，不弹键盘 */
function InputDefault() {
  return (
    <Screen>
      <AppBar />
      <div className="body">
        <MiniHero title="按住下方说话，或点击切换打字" sub="语音优先 · 首次长按才请求麦克风权限" />
        <div className="dock-wrap">
          <div className="dock">
            <span className="ph">长按说话</span>
            <span className="mic"><Ic.mic size={19} /></span>
          </div>
          <p style={{ textAlign: 'center', fontSize: 11.5, color: 'var(--subtle)', marginTop: 9 }}>
            长按 🎙 录音 · 轻点输入文字
          </p>
        </div>
      </div>
    </Screen>
  );
}

/* ② 长按录音中 —— 波形动画 + 松开发送 */
function InputRecording() {
  return (
    <Screen>
      <AppBar />
      <div className="body">
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 30px', textAlign: 'center' }}>
          <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--purple)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 0 10px rgba(142,107,242,0.14)' }}>
            <Ic.mic size={28} />
          </div>
          <p style={{ fontSize: 15, color: 'var(--purple-dark)', marginTop: 16, fontWeight: 600 }}>正在聆听…</p>
          <p style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 5 }}>松开发送 · 上滑取消</p>
        </div>
        <div className="dock-wrap">
          <div className="dock recording">
            <Wave n={34} />
            <span className="ph">松开发送</span>
          </div>
        </div>
      </div>
    </Screen>
  );
}

/* iOS 键盘（简化拟真） */
const KB_ROWS = [
  ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
  ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
  ['Z', 'X', 'C', 'V', 'B', 'N', 'M'],
];
function Keyboard() {
  return (
    <div style={{ background: '#d3d6db', padding: '8px 4px 6px', flex: '0 0 auto', userSelect: 'none' }}>
      {KB_ROWS.map((row, ri) => (
        <div key={ri} style={{ display: 'flex', justifyContent: 'center', gap: 6, padding: '0 3px', marginBottom: 7, paddingLeft: ri === 1 ? 18 : 3, paddingRight: ri === 1 ? 18 : 3 }}>
          {ri === 2 && <div style={kbWide}><Ic.arrowUp size={18} color="#3a3a3a" /></div>}
          {row.map((k) => (
            <div key={k} style={kbKey}>{k}</div>
          ))}
          {ri === 2 && <div style={kbWide}><Ic.x size={17} color="#3a3a3a" /></div>}
        </div>
      ))}
      <div style={{ display: 'flex', gap: 6, padding: '0 3px' }}>
        <div style={{ ...kbKey, flex: '0 0 auto', width: 42, fontSize: 14 }}>123</div>
        <div style={{ ...kbKey, flex: '0 0 auto', width: 34 }}>🌐</div>
        <div style={{ ...kbKey, flex: 1 }}>空格</div>
        <div style={{ ...kbKey, flex: '0 0 auto', width: 64, background: 'var(--purple)', color: '#fff' }}>发送</div>
      </div>
    </div>
  );
}
const kbKey = { flex: 1, height: 42, background: '#fff', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 17, color: '#0a0a06', boxShadow: '0 1px 0 rgba(0,0,0,0.28)', maxWidth: 33 };
const kbWide = { width: 42, height: 42, background: '#aeb3bd', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 1px 0 rgba(0,0,0,0.28)', flex: '0 0 auto' };

/* ③ 点击后切换文字输入 —— 键盘弹出，保留语音图标 */
function InputTyping() {
  return (
    <Screen>
      <AppBar />
      <div className="body">
        <div style={{ flex: 1, minHeight: 0 }} />
        <div style={{ padding: '10px 16px 12px' }}>
          <div className="dock typing">
            <span style={{ flex: 1, fontSize: 15, color: 'var(--t1)' }}>帮我把这周的会议纪要整理成周报<span className="caret" /></span>
            <span className="iconbtn" style={{ width: 32, color: 'var(--muted)' }}><Ic.mic size={19} /></span>
            <span className="send"><Ic.arrowUp size={19} /></span>
          </div>
        </div>
        <Keyboard />
      </div>
    </Screen>
  );
}

Object.assign(window, { InputDefault, InputRecording, InputTyping, Keyboard });