/* ========================================================================
   screen-tap-call.jsx, Emirates calls LUKAS.
   After the chat, Hala asked "should I call you?" Lukas said yes. Lukas's
   phone rings. iOS incoming-call UI, caller is "Emirates" with the
   verified-business badge. Lukas accepts → connecting → handoff is ready.
   ======================================================================== */

function ScreenTapCall({ active }) {
  const hala = window.DEMO_SCRIPT.hala;
  const lukas = window.DEMO_SCRIPT.passenger;
  // 0: ringing, 1: accepted, 2: connecting, 3: connected
  const [step, setStep] = useState(0);

  useEffect(() => {
    if (!active) { setStep(0); return; }
    const t1 = setTimeout(() => setStep(1), 2200);
    const t2 = setTimeout(() => setStep(2), 3000);
    const t3 = setTimeout(() => setStep(3), 5200);
    return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
  }, [active]);

  const ctxItems = [
    ["Identity re-verified", `Booking ref ${lukas.booking_ref} + email \u00b7 matched`],
    ["Booking pulled",      `${lukas.booking_ref} \u00b7 EK202 cancellation`],
    ["Chat history loaded", "Web chat just now \u00b7 full transcript"],
    ["Personal context",    `Sister's wedding \u00b7 Brooklyn, 11:00 tomorrow`],
    ["Preferences carried", "Seat 23A preference \u00b7 vegetarian meal"],
    ["One thread",          "Seamless journey \u00b7 web \u2192 phone, no repeat"],
  ];

  // iOS incoming-call icons
  const Icon = {
    message:  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12c0 4.5-4 8-9 8a10 10 0 0 1-3.7-.7L3 21l1.3-4A8.6 8.6 0 0 1 3 12c0-4.4 4-8 9-8s9 3.5 9 8z"/></svg>,
    remind:   <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="13" r="8"/><path d="M12 9v5l3 1M8 3l-4 3M16 3l4 3"/></svg>,
    decline:  <svg width="30" height="30" viewBox="0 0 30 30" fill="none"><path d="M6 18c2-3 5-5 9-5s7 2 9 5c.6 1 .5 2.2-.4 2.9l-2 1.7a1.7 1.7 0 0 1-2.3-.2l-1.5-1.7a1.7 1.7 0 0 1-.4-1.2l.2-1.4c-1-.3-2-.5-2.6-.5s-1.6.2-2.6.5l.2 1.4c.1.5-.1.9-.4 1.2L8.7 22.4a1.7 1.7 0 0 1-2.3.2l-2-1.7C5.5 20.2 5.4 19 6 18Z" fill="white" transform="rotate(135 15 17)"/></svg>,
    accept:   <svg width="30" height="30" viewBox="0 0 30 30" fill="none"><path d="M6 18c2-3 5-5 9-5s7 2 9 5c.6 1 .5 2.2-.4 2.9l-2 1.7a1.7 1.7 0 0 1-2.3-.2l-1.5-1.7a1.7 1.7 0 0 1-.4-1.2l.2-1.4c-1-.3-2-.5-2.6-.5s-1.6.2-2.6.5l.2 1.4c.1.5-.1.9-.4 1.2L8.7 22.4a1.7 1.7 0 0 1-2.3.2l-2-1.7C5.5 20.2 5.4 19 6 18Z" fill="white"/></svg>,
    verified: <svg width="14" height="14" viewBox="0 0 24 24" fill="#3578E5"><path d="M12 1l2.5 2L17.8 2l1 3.2 3.2 1-1 3.2 2 2.6-2 2.6 1 3.2-3.2 1-1 3.2-3.3-1L12 23l-2.5-2-3.3 1-1-3.2-3.2-1 1-3.2L1 12l2-2.6-1-3.2 3.2-1 1-3.2L9.5 3z"/><path d="M8 12l3 3 6-6" stroke="white" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  };

  const stateLabel =
    step === 0 ? "Incoming call" :
    step === 1 ? "Connecting\u2026" :
    step === 2 ? "Connecting\u2026" :
                 "Connected";

  return (
    <div className="canvas canvas-paper">
      <PhaseTag label="Channel · Emirates calling Lukas · 09:23"/>

      <div className="voice-stage" style={{gap: 70}}>
        {/* iOS-style INCOMING call screen */}
        <div className="phone fade-in">
          <div className={`phone-screen ios-call ios-incoming step-${step}`}>

            {/* iOS status bar */}
            <div className="ios-status">
              <div className="left">9:23</div>
              <div className="right">
                <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><path d="M1 7h2v3H1zM5 5h2v5H5zM9 3h2v7H9zM13 1h2v9h-2z"/></svg>
                <svg width="15" height="11" viewBox="0 0 15 11" fill="none" stroke="currentColor" strokeWidth="1"><path d="M1 4 Q7.5 -1 14 4M3 6 Q7.5 2 12 6M5.5 8 Q7.5 6.5 9.5 8"/><circle cx="7.5" cy="9.5" r="0.7" fill="currentColor"/></svg>
                <svg width="24" height="11" viewBox="0 0 24 11" fill="none">
                  <rect x="0.5" y="0.5" width="20" height="10" rx="2.5" stroke="currentColor"/>
                  <rect x="2" y="2" width="16" height="7" rx="1" fill="currentColor"/>
                  <rect x="21.5" y="3.5" width="1.5" height="4" rx="0.5" fill="currentColor"/>
                </svg>
              </div>
            </div>

            <div className="ios-call-body">
              {/* Caller block, Emirates (verified) is the caller, not Hala */}
              <div className="ios-caller ios-caller--incoming">
                <div className="ios-mini-lbl">{stateLabel}</div>
                <div className="ios-caller-logo">
                  <img src="assets/emirates-logo.png" alt="" style={{height: 28, width: "auto", filter: "brightness(0) invert(1)"}}/>
                </div>
                <div className="ios-name ios-name--biz">
                  Emirates
                  {Icon.verified}
                </div>
                <div className="ios-sub" style={{justifyContent: "center"}}>
                  <span>mobile</span>
                </div>
              </div>

              {/* Incoming actions: decline + accept (big), shortcuts above */}
              <div className="ios-incoming-actions">
                <div className="ios-shortcuts" style={{opacity: step === 0 ? 1 : 0.4}}>
                  <div className="ios-sc">
                    <div className="ios-sc-circle">{Icon.remind}</div>
                    <div className="ios-sc-lbl">Remind Me</div>
                  </div>
                  <div className="ios-sc">
                    <div className="ios-sc-circle">{Icon.message}</div>
                    <div className="ios-sc-lbl">Message</div>
                  </div>
                </div>
                <div className="ios-big-btns">
                  <div className="ios-big ios-big--decline">
                    {Icon.decline}
                    <div className="ios-big-lbl">Decline</div>
                  </div>
                  <div
                    className={`ios-big ios-big--accept ${step === 0 ? "is-ringing" : ""} ${step >= 1 ? "is-tapped" : ""}`}
                    onClick={() => {
                      setStep(3);
                      // One-shot flag picked up by ScreenVoice on mount so the
                      // Accept tap both advances the scene and starts the call.
                      window.__autoStartVoiceCall = true;
                      setTimeout(() => window.dispatchEvent(new CustomEvent('demo:advance')), 900);
                    }}
                  >
                    {Icon.accept}
                    <div className="ios-big-lbl">Accept</div>
                  </div>
                </div>
              </div>

              <div className="ios-home-indicator"/>
            </div>
          </div>
        </div>

        {/* Right pane, what's flowing across */}
        <div className="intent-card fade-in" style={{animationDelay: "0.15s"}}>
          <div className="eyebrow">No hold music. No "press 1 for…"</div>
          <h2>Emirates calls Lukas. Same agent. Same memory.</h2>
          <p>
            Hala asked if Lukas would rather take a call, he said yes. Emirates places the outbound call and the chat session rides with it. He doesn't dial anything; he doesn't sit in a queue.
          </p>
          <p style={{color: "var(--ink-3)"}}>
            When he taps accept, Hala picks up the conversation mid-sentence: cancellation, the wedding, EK203, seat 23A, vegetarian, all already in context.
          </p>

          {/* Live context-handoff card */}
          <div className="tc-handoff">
            <div className="tc-handoff-head">
              <div className="uppercase" style={{fontSize: 10.5, color: "var(--ink-3)"}}>Context handoff · live</div>
              <div className="tc-handoff-state">
                <span className="tc-state-dot" data-step={step}/>
                {step === 0 && "Phone ringing\u2026"}
                {step === 1 && "Lukas accepted\u2026"}
                {step === 2 && "Forwarding session\u2026"}
                {step === 3 && "Ready \u00b7 No hold time"}
              </div>
            </div>
            <div className="tc-handoff-list">
              {ctxItems.map(([k, v], i) => {
                const visible = step >= 2 && i < (step === 2 ? Math.min(3, ctxItems.length) : ctxItems.length);
                return (
                  <div key={k} className={`tc-row ${visible ? "is-on" : ""}`} style={{transitionDelay: `${i * 160}ms`}}>
                    <div className="tc-check">
                      <svg width="11" height="11" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3 3 7-7" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </div>
                    <div className="tc-row-text">
                      <div className="tc-k">{k}</div>
                      <div className="tc-v">{v}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ScreenTapCall = ScreenTapCall;