// Screen 5: Voice call, in-app overlay over the Emirates app
// Live transcript with detailed exchanges, scrollable

// Reading speed roughly tuned to natural human speech: ~80–100ms per character + pause
const VOICE_LINES = [
  { who: 'system', text: 'Connecting to Hala…', t: 0, delay: 1600 },
  { who: 'system', text: 'Connected · Same conversation continued from chat', t: 0, delay: 1800 },

  { who: 'aria',  ts: '00:02', text: "Hi Sarah, it's Hala again. Before we continue, I just need to verify a couple of things, for security, since this is a different channel.", delay: 4200 },
  { who: 'aria',  ts: '00:08', text: "Can you confirm your booking reference and last name?", delay: 2600 },
  { who: 'sarah', ts: '00:12', text: "Sure. Booking is M-T-C-H-L-7 and last name is Mitchell.", delay: 3400 },
  { who: 'aria',  ts: '00:16', text: "Thank you, Sarah, you're verified. ✓", delay: 2400 },

  { who: 'aria',  ts: '00:18', text: "Picking up where we left off, you were leaning toward Option 1, EK203 direct, departing Dubai 22:40 tonight, arriving New York at 04:55 tomorrow. Same fare, no extra cost, and seat 23A is still available.", delay: 5200 },

  { who: 'sarah', ts: '00:30', text: "Yeah, that's the one. But I have a few more questions before I confirm.", delay: 3600 },
  { who: 'aria',  ts: '00:34', text: "Of course, take your time.", delay: 2000 },

  { who: 'sarah', ts: '00:36', text: "First, my hotel reservation. I'm at the Marriott in Manhattan, checked in for the 28th. If I land on the 29th, will I lose the first night?", delay: 4600 },
  { who: 'aria',  ts: '00:44', text: "Most properties hold the room for late arrival, but I can't make changes on your behalf. I'd recommend contacting the Marriott directly. If you booked the hotel through Emirates, I can transfer you.", delay: 4400 },

  { who: 'sarah', ts: '00:54', text: "I booked it separately. I'll handle that.", delay: 2800 },
  { who: 'sarah', ts: '00:58', text: "Second, I requested a vegetarian meal on the original flight. Will that carry over?", delay: 3800 },
  { who: 'aria',  ts: '01:04', text: "Yes, your AVML special meal preference is on your profile and will follow you to EK203 automatically.", delay: 3600 },

  { who: 'sarah', ts: '01:10', text: "OK, and one more, I have SilverKris lounge access at DXB through my Skywards Silver. Still good?", delay: 4000 },
  { who: 'aria',  ts: '01:18', text: "Yes, your tier benefits don't change. SilverKris lounge access at DXB before EK203 is included.", delay: 3600 },

  { who: 'sarah', ts: '01:24', text: "Alright, I think I'm ready. Wait, one more. What if EK203 also gets cancelled? I can't miss this meeting.", delay: 4400 },
  { who: 'aria',  ts: '01:32', text: "Understood. EK203 is currently on schedule. If anything changes, you'll be notified through the app and we can reaccommodate immediately. I can also flag your booking for priority disruption handling, would you like that?", delay: 4800 },
  { who: 'sarah', ts: '01:42', text: "Yes please.", delay: 2200 },
  { who: 'aria',  ts: '01:44', text: "Done. ✓", delay: 1800 },

  { who: 'aria',  ts: '01:46', text: "So to confirm, I'm moving you from EK202 (cancelled) to EK203, departing Dubai 22:40 tonight, arriving New York 04:55 tomorrow, seat 23A, vegetarian meal, priority handling enabled. Same fare, no charge. Should I make that change?", delay: 5400 },

  { who: 'sarah', ts: '02:00', text: "Hmm, actually, before we change anything, let me think for a second. Can you tell me again how confident you are about EK203's schedule?", delay: 4400 },
  { who: 'aria',  ts: '02:08', text: "EK203 has operated on schedule for 28 of the last 30 days. There's no current weather or operational concern flagged on the route. I'd say it's high confidence.", delay: 4400 },

  { who: 'sarah', ts: '02:18', text: "OK that's reassuring.", delay: 2400 },
  { who: 'sarah', ts: '02:22', text: "But you know what, before you make the change, I'd rather speak to a human just to double-check. This trip is really important.", delay: 4400 },
  { who: 'aria',  ts: '02:32', text: "That's completely understandable. Let me transfer you to one of our human consultants. They'll have everything we just discussed and can finalise the change for you.", delay: 4400 },
  { who: 'aria',  ts: '02:40', text: "Connecting you now, please hold for a moment.", delay: 2800 },

  { who: 'system', text: 'Transferring to a human consultant', t: 0, delay: 1800 },
];

function VoiceCallScreen({ onAdvance, autoAdvance }) {
  const [step, setStep] = React.useState(0);
  const [seconds, setSeconds] = React.useState(0);
  const [showHandoff, setShowHandoff] = React.useState(false);
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    const t = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(t);
  }, []);

  React.useEffect(() => {
    if (step >= VOICE_LINES.length) {
      setShowHandoff(true);
      if (autoAdvance) {
        const t = setTimeout(() => onAdvance && onAdvance(), 2400);
        return () => clearTimeout(t);
      }
      return;
    }
    const msg = VOICE_LINES[step];
    const t = setTimeout(() => setStep(s => s + 1), msg.delay);
    return () => clearTimeout(t);
  }, [step, autoAdvance]);

  React.useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [step]);

  const formatTime = (sec) => {
    const m = Math.floor(sec / 60), s = sec % 60;
    return `${m}:${s.toString().padStart(2,'0')}`;
  };

  const visible = VOICE_LINES.slice(0, step);

  return (
    <PhoneFrame statusTime="09:21" dark>
      <div className="ekapp">
        {/* Background app, slightly visible behind overlay */}
        <div className="ekapp-head">
          <div>
            <div className="greet">Hello, <strong>Sarah</strong></div>
          </div>
          <div className="logo"><img src="assets/emirates-logo.png" alt="Emirates" /></div>
          <div className="icons"><Icon.search size={20} /></div>
        </div>

        <div className="ekapp-call-overlay">
          <div className="top-bar">
            <span>Voice call · in-app</span>
            <span className="branding"><img src="assets/emirates-logo.png" alt="Emirates" /></span>
          </div>

          <div className="agent-block">
            <div className="ring"><img src="assets/emirates-logo.png" alt="Hala" /></div>
            <div className="name">Hala</div>
            <div className="role">Emirates Virtual Assistant · Same conversation</div>
            <div className="meta-row">
              <span className="rec-dot"></span>
              <span>Recording</span>
              <span style={{opacity:0.4}}>·</span>
              <span className="timer">{formatTime(seconds)}</span>
            </div>
          </div>

          {showHandoff && (
            <div className="handoff-banner">
              <span className="rec-dot" style={{background:'#FFB4B4'}}></span>
              Transferring to a human consultant
            </div>
          )}

          <div className="tx" ref={scrollRef}>
            {visible.map((line, i) => {
              if (line.who === 'system') {
                return <div key={i} className="tx-line system"><div className="text">{line.text}</div></div>;
              }
              const cls = line.who === 'aria' ? 'aria' : 'sarah';
              const label = line.who === 'aria' ? 'HALA · AI' : 'SARAH';
              return (
                <div key={i} className={`tx-line ${cls}`}>
                  <div className="head">
                    <span>{label}</span>
                    <span className="ts">{line.ts}</span>
                  </div>
                  <div className="text">{line.text}</div>
                </div>
              );
            })}
          </div>

          <div className="ctrls">
            <div className="ctrl"><div className="circle"><Icon.mute size={20} /></div><span>Mute</span></div>
            <div className="ctrl"><div className="circle"><Icon.keypad size={18} /></div><span>Keypad</span></div>
            <div className="ctrl"><div className="circle"><Icon.speaker size={20} /></div><span>Speaker</span></div>
            <div className="ctrl end" onClick={onAdvance}><div className="circle"><Icon.endcall size={20} /></div><span>End</span></div>
          </div>
        </div>
      </div>
    </PhoneFrame>
  );
}

window.VoiceCallScreen = VoiceCallScreen;