/* Vooice — mobile screens, on iOS frame.
   - MobileLiveCall: viewing the live outbound call from your phone
   - MobileChat: telegram-style async thread with Vooice (text + voice clip)
*/

function MobileLiveCall({ tweaks }) {
  const [tSec, setTSec] = React.useState(8);
  React.useEffect(() => {
    const id = setInterval(() => setTSec(t => (t + 0.1) % 46), 100);
    return () => clearInterval(id);
  }, []);

  return (
    <IOSDevice width={390} height={844} dark={false}>
      <div style={{
        background: VC_TOKENS.paper, height: '100%', display:'flex', flexDirection:'column',
      }}>
        {/* Top */}
        <div style={{ padding: '16px 20px 8px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <Mono color={VC_TOKENS.ink3}>← BACK</Mono>
          <Mono>VOOICE / LIVE</Mono>
          <Mono color={VC_TOKENS.ink3}>···</Mono>
        </div>

        <div style={{ padding: '16px 20px 0' }}>
          <div style={{ display:'flex', alignItems:'center', gap: 8, marginBottom: 6 }}>
            <RingingRing size={10} color={VC_TOKENS.signal} />
            <Mono color={VC_TOKENS.signal}>OUTBOUND · ON THE LINE</Mono>
          </div>
          <div style={{ fontFamily:"'Inter Tight', sans-serif", fontSize: 32, fontWeight: 700, letterSpacing:'-0.03em', lineHeight: 1.05 }}>
            Bayview Hair<br/>Studio
          </div>
          <div style={{ marginTop: 8, fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontSize: 17, color: VC_TOKENS.ink2 }}>
            Booking Thursday at 2 with Marcus.
          </div>
        </div>

        {/* Wave */}
        <div style={{ padding: '20px', marginTop: 4 }}>
          <div style={{ background: VC_TOKENS.ink, padding: 16, color: VC_TOKENS.paper }}>
            <div style={{ display:'flex', justifyContent:'space-between', marginBottom: 10 }}>
              <Mono color={VC_TOKENS.signal}>VOOICE</Mono>
              <Mono color={VC_TOKENS.paper}>00:{(20 + Math.floor(tSec)).toString().padStart(2,'0')}</Mono>
            </div>
            <Waveform bars={36} height={56} speaker="vooice" color={VC_TOKENS.paper} accent={VC_TOKENS.signal} />
          </div>
        </div>

        {/* Live transcript bubble */}
        <div style={{ padding: '0 20px', flex: 1, overflow:'hidden', display:'flex', flexDirection:'column', gap: 10 }}>
          <div style={{ background: VC_TOKENS.paper2, padding: 14 }}>
            <Mono color={VC_TOKENS.ink3} style={{ marginBottom: 6, display:'block' }}>MARCUS · 00:13</Mono>
            <div style={{ fontSize: 14 }}>"Sure, let me check… we have Wednesday 3:30 with Lina, or Thursday 2 with Marcus."</div>
          </div>
          <div style={{ background: VC_TOKENS.ink, color: VC_TOKENS.paper, padding: 14 }}>
            <Mono color={VC_TOKENS.signal} style={{ marginBottom: 6, display:'block' }}>VOOICE · NOW</Mono>
            <div style={{ fontSize: 14, lineHeight: 1.5 }}>
              "Thursday at 2 works for Jordan's calendar. Could you confirm 45 minutes, on the books as Marcus Wu?"
              <span style={{ display:'inline-block', width: 6, height: 14, background: VC_TOKENS.signal, marginLeft: 3, verticalAlign:'-2px', animation: 'vc-cursor 0.8s steps(1) infinite' }} />
            </div>
          </div>
        </div>

        {/* Big buttons */}
        <div style={{ padding: 20, display:'flex', flexDirection:'column', gap: 10 }}>
          <button style={{
            padding: '16px', background: VC_TOKENS.signal, color: VC_TOKENS.paper, border:'none',
            fontFamily:"'JetBrains Mono', monospace", fontWeight: 700, letterSpacing: '.14em', fontSize: 12,
          }}>BRING ME IN ▸</button>
          <button style={{
            padding: '16px', background: 'transparent', color: VC_TOKENS.ink, border:`1px solid ${VC_TOKENS.line}`,
            fontFamily:"'JetBrains Mono', monospace", fontWeight: 700, letterSpacing: '.14em', fontSize: 12,
          }}>HOLD &amp; INTERVENE</button>
        </div>
      </div>
    </IOSDevice>
  );
}

function MobileChat() {
  return (
    <IOSDevice width={390} height={844} dark={false}>
      <div style={{ background: VC_TOKENS.paper, height: '100%', display:'flex', flexDirection:'column' }}>
        {/* Top */}
        <div style={{
          padding: '14px 20px', borderBottom: `1px solid ${VC_TOKENS.lineSoft}`,
          display:'flex', justifyContent:'space-between', alignItems:'center',
        }}>
          <Mono color={VC_TOKENS.ink3}>← TELEGRAM</Mono>
          <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
            <VLogo size={16} />
            <span style={{ fontWeight: 700, letterSpacing:'-0.02em' }}>vooice</span>
          </div>
          <Mono color={VC_TOKENS.ink3}>i</Mono>
        </div>

        {/* Day stamp */}
        <div style={{ textAlign:'center', padding: '12px 0' }}>
          <Mono color={VC_TOKENS.ink3}>TODAY · APR 8</Mono>
        </div>

        <div style={{ padding: '0 20px', flex: 1, overflow:'auto', display:'flex', flexDirection:'column', gap: 12 }}>
          {/* You */}
          <Bub side="me" t="11:24">Can you call Bayview Hair and book a haircut this week? Wed or Thu afternoon.</Bub>

          {/* Vooice voice clip reply */}
          <Bub side="voo" t="11:24" voice>
            <VoiceClip duration="0:08" caption="On it — calling now. I'll repeat back the slot before I commit." />
          </Bub>

          <div style={{ textAlign:'center', padding: '6px 0' }}>
            <Mono color={VC_TOKENS.ink3}>· · · 4 minutes · · ·</Mono>
          </div>

          {/* Update card */}
          <div style={{
            background: VC_TOKENS.ink, color: VC_TOKENS.paper, padding: 16,
            alignSelf:'flex-start', maxWidth: '88%',
          }}>
            <Mono color={VC_TOKENS.signal} style={{ marginBottom: 8, display:'block' }}>BOOKED</Mono>
            <div style={{ fontFamily:"'Inter Tight', sans-serif", fontSize: 18, fontWeight: 600, lineHeight: 1.25 }}>
              Thu Apr 11 · 2:00–2:45 PM<br/>Marcus Wu · Bayview Hair Studio
            </div>
            <div style={{
              marginTop: 10, padding: 10,
              border: `1px solid ${VC_TOKENS.signal}`, color: VC_TOKENS.paper,
              fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontSize: 14, lineHeight: 1.4,
            }}>
              "Marcus is the same one cutting your hair — he's the owner. He said hi."
            </div>
            <div style={{ display:'flex', gap: 8, marginTop: 12 }}>
              <Mono color={VC_TOKENS.paper}>📅 ADDED</Mono>
              <Mono color={VC_TOKENS.ink3}>·</Mono>
              <Mono color={VC_TOKENS.paper}>🔔 30 MIN BEFORE</Mono>
            </div>
          </div>

          <Bub side="me" t="11:29">Nice. Did he ask about the cancellation last time?</Bub>

          <Bub side="voo" t="11:29">No — and he didn't seem to remember. I logged it as resolved.</Bub>

          <Bub side="me" t="11:30">k thx</Bub>
        </div>

        {/* Composer */}
        <div style={{
          padding: 14, borderTop: `1px solid ${VC_TOKENS.lineSoft}`,
          display:'flex', gap: 10, alignItems:'center', background: VC_TOKENS.paper2,
        }}>
          <div style={{
            flex: 1, padding: '12px 14px', background: VC_TOKENS.paper,
            border: `1px solid ${VC_TOKENS.lineSoft}`, fontSize: 14, color: VC_TOKENS.ink3,
          }}>Message Vooice…</div>
          <div style={{
            width: 44, height: 44, borderRadius: '50%',
            background: VC_TOKENS.signal, display:'inline-flex',
            alignItems:'center', justifyContent:'center', color: VC_TOKENS.paper,
          }}>
            <PhoneGlyph size={18} color={VC_TOKENS.paper} />
          </div>
        </div>
      </div>
    </IOSDevice>
  );
}

function Bub({ side, t, voice, children }) {
  const isMe = side === 'me';
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems: isMe ? 'flex-end' : 'flex-start', gap: 4 }}>
      <Mono color={VC_TOKENS.ink3}>{isMe ? 'YOU' : 'VOOICE'} · {t}</Mono>
      <div style={{
        maxWidth: '86%',
        background: isMe ? VC_TOKENS.paper2 : VC_TOKENS.paper,
        border: isMe ? 'none' : `1px solid ${VC_TOKENS.line}`,
        padding: voice ? 0 : '10px 14px',
        fontSize: 14, lineHeight: 1.45,
      }}>
        {children}
      </div>
    </div>
  );
}

function VoiceClip({ duration, caption }) {
  return (
    <div style={{ padding: 12, display:'flex', flexDirection:'column', gap: 8, minWidth: 240 }}>
      <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
        <span style={{
          width: 28, height: 28, borderRadius: '50%', background: VC_TOKENS.signal, color: VC_TOKENS.paper,
          display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize: 11,
        }}>▶</span>
        <Waveform bars={28} height={20} speaker="vooice" color={VC_TOKENS.ink} accent={VC_TOKENS.signal} barWidth={2} gap={2} />
        <Mono>{duration}</Mono>
      </div>
      <div style={{ fontSize: 13, color: VC_TOKENS.ink3 }}>{caption}</div>
    </div>
  );
}

window.MobileLiveCall = MobileLiveCall;
window.MobileChat = MobileChat;