/* Vooice — Call detail (post-call review with transcript ribbon, decisions, soft handoffs) */

const liveLinkBtn = {
  background:'transparent', color:'inherit', border:'1px solid currentColor',
  padding:'6px 10px', cursor:'pointer',
  fontFamily:"'JetBrains Mono', monospace", fontSize: 10, fontWeight: 700, letterSpacing:'.12em',
};

function CallDetail({ width = 1320, height = 880, onNavigate }) {
  const go = (k) => onNavigate && onNavigate(k);
  return (
    <div className="vc-root" style={{
      width, minHeight: height, background: VC_TOKENS.paper, color: VC_TOKENS.ink,
      display:'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(280px, 380px)', gridTemplateRows: 'auto 1fr',
      borderTop: `1px solid ${VC_TOKENS.line}`,
    }}>
      {/* Top nav — unified AppHeader */}
      <AppHeader
        onNavigate={onNavigate}
        current="outbound-call"
        crumbs={[
          { label: 'CALLS', k: 'outbound-call' },
          { label: "DR. HAN'S OFFICE" },
        ]}
      />

      <main style={{ padding: 36, display:'flex', flexDirection:'column', gap: 24, minWidth: 0 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
          <div>
            <Mono>CALL · APR 8 · 11:30 AM · 4 MIN 12 SEC</Mono>
            <h1 style={{
              fontFamily:"'Inter Tight', sans-serif",
              fontSize: 56, fontWeight: 700, letterSpacing:'-0.035em', lineHeight: 1, margin:'12px 0 6px',
            }}>
              Dr. Han's office
            </h1>
            <div style={{ fontSize: 17, color: VC_TOKENS.ink3, fontFamily:"'Instrument Serif', serif", fontStyle:'italic' }}>
              Confirmed your annual physical for April 22 at 9 AM.
            </div>
          </div>
          <Stamp color={VC_TOKENS.sage}>RESOLVED</Stamp>
        </div>

        {/* Tape transcript ribbon */}
        <div>
          <Mono style={{ marginBottom: 10, display:'block' }}>TIMELINE</Mono>
          <TapeStrip ticks={48} label="00:00 ← → 04:12" />
          <div style={{
            position:'relative', height: 80, marginTop: -29, pointerEvents:'none',
          }}>
            {[
              { x: 4,  who: 'voo' }, { x: 15, who: 'cal' },
              { x: 26, who: 'voo' }, { x: 38, who: 'cal' },
              { x: 50, who: 'voo' }, { x: 60, who: 'cal' },
              { x: 72, who: 'voo' }, { x: 86, who: 'cal' },
            ].map((n, i) => (
              <div key={i} style={{
                position:'absolute', left: `${n.x}%`, top: 30,
                width: 9, height: 9, borderRadius: '50%',
                background: n.who === 'voo' ? VC_TOKENS.signal : VC_TOKENS.ink,
              }} />
            ))}
          </div>
        </div>

        {/* Transcript */}
        <div style={{ flex: 1, overflow:'auto', display:'flex', flexDirection:'column', gap: 14 }}>
          <TLine who="voo" t="00:02" text="Hi, this is Vooice calling on behalf of Jordan Reyes — could I confirm Jordan's annual physical scheduling?" />
          <TLine who="cal" t="00:09" text="Of course, what's the date of birth on file?" />
          <TLine who="voo" t="00:14" text={<>Jordan's date of birth is <span style={{ background: VC_TOKENS.butter, padding:'0 3px' }}>03/14/1991</span>. They'd like the next available with Dr. Han.</>} />
          <TLine who="cal" t="00:24" text="I see them. We have April 22 at 9 AM, or May 1 at 11:30." />
          <TLine who="voo" t="00:32" text="April 22 at 9 AM works on Jordan's calendar. Confirming: 9 AM with Dr. Han at the Mission location, fasting required if labs are included. Is that right?" />
          <TLine who="cal" t="00:46" text="Yes, fasting 8 hours, and bring insurance card." />
          <TLine who="voo" t="00:53" text="Got it. I'll add a calendar reminder at 9 PM the night before to start the fast. Anything else Jordan should bring?" />
          <TLine who="cal" t="01:04" text="Just the insurance card. We have everything else." />
        </div>

        <div style={{ display:'flex', gap: 12 }}>
          <ChipBtn label="Listen back" />
          <ChipBtn label="Search transcript" />
          <ChipBtn label="Export" />
          <ChipBtn label="Flag for human review" tone="signal" />
        </div>
      </main>

      <aside style={{
        background: VC_TOKENS.paper2, borderLeft: `1px solid ${VC_TOKENS.line}`,
        padding: 28, display:'flex', flexDirection:'column', gap: 22, overflow: 'auto',
      }}>
        <div>
          <Mono>WHAT VOOICE DID</Mono>
          <div style={{ display:'flex', flexDirection:'column', gap: 10, marginTop: 10 }}>
            <DoneItem head="Created calendar event" sub="Apr 22 · 9:00–9:45 · Dr. Han · Mission" />
            <DoneItem head="Set fasting reminder" sub="Apr 21 · 9:00 PM · Telegram" />
            <DoneItem head="Updated contact" sub='Added "fasting required, bring insurance card" to Dr. Han' />
          </div>
        </div>

        <div>
          <Mono>SOFT HANDOFF</Mono>
          <div style={{
            marginTop: 10, padding: 14, border: `1px solid ${VC_TOKENS.lineSoft}`, background: VC_TOKENS.paper,
          }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>None needed</div>
            <div style={{ fontSize: 13, color: VC_TOKENS.ink3, marginTop: 4 }}>
              Vooice closed the loop in‑call.
            </div>
          </div>
        </div>

        <div>
          <Mono>HONESTY CHECK</Mono>
          <div style={{ marginTop: 10, fontSize: 13, color: VC_TOKENS.ink2, lineHeight: 1.6 }}>
            Vooice was not asked "are you human?" on this call. If asked, the rule is:
            <em style={{ color: VC_TOKENS.signal, fontStyle:'normal' }}> answer truthfully</em>, offer to dial Jordan in.
          </div>
        </div>

        <div>
          <Mono>WHO PICKED UP</Mono>
          <div style={{ marginTop: 10, display:'flex', alignItems:'center', gap: 12 }}>
            <Avatar name="Reception" size={40} bg={VC_TOKENS.ink2} />
            <div>
              <div style={{ fontWeight: 600 }}>Front desk</div>
              <Mono color={VC_TOKENS.ink3}>NOT IDENTIFIED · 1ST CALL</Mono>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 'auto', paddingTop: 20, borderTop: `1px solid ${VC_TOKENS.lineSoft}` }}>
          <FieldRow label="Cost">$0.054 (4.2 min × $0.013)</FieldRow>
          <FieldRow label="Audit ID">c_8F2A3B91</FieldRow>
        </div>
      </aside>
    </div>
  );
}

function TLine({ who, t, text }) {
  const isVoo = who === 'voo';
  return (
    <div style={{ display:'grid', gridTemplateColumns:'72px 16px 1fr', gap: 14, alignItems:'baseline' }}>
      <Mono color={VC_TOKENS.ink3}>{t}</Mono>
      <span style={{
        width: 8, height: 8, borderRadius: '50%', marginTop: 6,
        background: isVoo ? VC_TOKENS.signal : VC_TOKENS.ink,
      }} />
      <div>
        <Mono color={isVoo ? VC_TOKENS.signal : VC_TOKENS.ink3} style={{ display:'block', marginBottom: 4 }}>
          {isVoo ? 'VOOICE' : 'RECEPTION'}
        </Mono>
        <div style={{ fontSize: 16, lineHeight: 1.5, color: VC_TOKENS.ink }}>{text}</div>
      </div>
    </div>
  );
}

function DoneItem({ head, sub }) {
  return (
    <div style={{
      padding: 12, background: VC_TOKENS.paper, border: `1px solid ${VC_TOKENS.lineSoft}`,
      borderLeft: `3px solid ${VC_TOKENS.sage}`,
    }}>
      <div style={{ fontSize: 14, fontWeight: 600 }}>{head}</div>
      <div style={{ fontSize: 12, color: VC_TOKENS.ink3, marginTop: 2 }}>{sub}</div>
    </div>
  );
}

function ChipBtn({ label, tone }) {
  const isSig = tone === 'signal';
  return (
    <button style={{
      padding: '8px 14px', cursor:'pointer',
      background: isSig ? VC_TOKENS.signal : 'transparent',
      color: isSig ? VC_TOKENS.paper : VC_TOKENS.ink,
      border: `1px solid ${isSig ? VC_TOKENS.signal : VC_TOKENS.line}`,
      fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 600, letterSpacing:'.1em', textTransform:'uppercase',
    }}>{label}</button>
  );
}

window.CallDetail = CallDetail;