/* global React, Icon, Pill, SrcChip */
const { useState, useEffect } = React;

function VoiceView() {
  const [typed, setTyped] = useState(0);
  const lines = [
    { who: "agent", t: "Hi John, this is the Sea Containers assistant. I can see you're heading to Rangitata this morning — what can I update for you?", at: "09:14" },
    { who: "user",  t: "Yeah, I just got confirmation from Pete. Can you mark SO-44215 as delivered, and the container number's SCNU-4820931.", at: "09:14" },
    { who: "agent", t: "Got it. Marking SO-44215 as delivered, container SCNU-4820931, today. Want me to trigger the photo-upload prompt back to Lion Crane's phone?", at: "09:14" },
    { who: "user",  t: "Yep, and let Emma know I'll send the signed paperwork through this afternoon.", at: "09:14" },
    { who: "agent", t: "Done. Photo prompt sent, note to Emma logged against the sales order. Anything else, John?", at: "09:15" },
  ];

  useEffect(() => {
    const t = setInterval(() => setTyped(n => (n < lines.length ? n + 1 : n)), 900);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="view-inner">
      <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
        <div>
          <h2 className="page-title">Voice agent · illustrative</h2>
          <p className="page-sub">A phone-based agent reps and drivers can call while on the road. Everything said flows into the same database powering the rest of the Hub.</p>
        </div>
        <Pill tone="info" noDot>Vision · one screen</Pill>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 16, alignItems: "start" }}>
        <div className="card">
          <div className="card-head">
            <h3>Call transcript · +64 9 555 0123</h3>
            <span className="count">· John Harrow · 2m 14s</span>
            <div className="right">
              <Pill tone="ok" noDot>Live · transcribing</Pill>
            </div>
          </div>
          <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 14 }}>
            {lines.slice(0, typed).map((l, i) => (
              <div key={i} className="slide-in" style={{ display: "flex", gap: 10, flexDirection: l.who === "user" ? "row-reverse" : "row" }}>
                <div style={{
                  width: 30, height: 30, borderRadius: 15, flex: "none",
                  display: "grid", placeItems: "center",
                  background: l.who === "agent" ? "var(--brand-cyan-50)" : "var(--ink-100)",
                  color: l.who === "agent" ? "var(--brand-cyan-600)" : "var(--ink-700)",
                }}>
                  <Icon name={l.who === "agent" ? "mic" : "user"} size={14} />
                </div>
                <div style={{
                  maxWidth: "78%",
                  background: l.who === "agent" ? "var(--brand-cyan-50)" : "var(--card)",
                  border: l.who === "user" ? "1px solid var(--line)" : "1px solid var(--brand-cyan-50)",
                  padding: "10px 12px", borderRadius: 12,
                }}>
                  <div style={{ fontSize: 13, color: "var(--ink-900)", lineHeight: 1.45 }}>{l.t}</div>
                  <div style={{ fontSize: 10.5, color: "var(--ink-500)", marginTop: 4, fontFamily: "var(--font-mono)" }}>{l.at}</div>
                </div>
              </div>
            ))}

            {typed < lines.length && (
              <div style={{ display: "flex", gap: 6, marginLeft: 40, color: "var(--ink-500)", fontSize: 12 }}>
                <span className="typing-dot" /><span className="typing-dot" /><span className="typing-dot" />
              </div>
            )}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Actions applied to the database</h3>
          </div>
          <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 8 }}>
            <ActionRow icon="check" title="SO-44215 marked Delivered" src="Cin7" done />
            <ActionRow icon="container" title="Container SCNU-4820931 gated-out CHC depot" src="Cin7" done />
            <ActionRow icon="camera" title="Photo-upload SMS sent to Lion Crane" src="SMS" done />
            <ActionRow icon="mail" title="Internal note logged for Emma" src="Hub" done />
            <ActionRow icon="dashboard" title="Leadership board: moves to Delivered" src="Hub" done />
            <div style={{ marginTop: 8, padding: 12, background: "var(--ink-50)", borderRadius: 8, border: "1px dashed var(--line)", fontSize: 12.5 }}>
              <Icon name="bolt" size={12} /> Everything the voice agent does is fully visible and reversible in the rest of the Hub.
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes tdot { 0%,80%,100% { opacity: 0.3; transform: scale(0.8);} 40% { opacity: 1; transform: scale(1);} }
        .typing-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; animation: tdot 1.2s infinite; }
        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
      `}</style>
    </div>
  );
}

function ActionRow({ icon, title, src, done }) {
  return (
    <div style={{ display: "flex", gap: 10, alignItems: "center", padding: "8px 0", borderBottom: "1px solid var(--line-soft)" }}>
      <div style={{ width: 26, height: 26, borderRadius: 6, background: done ? "var(--ok-bg)" : "var(--ink-100)", color: done ? "var(--ok)" : "var(--ink-500)", display: "grid", placeItems: "center" }}>
        <Icon name={done ? "check" : icon} size={13} />
      </div>
      <div style={{ fontSize: 13, flex: 1 }}>{title}</div>
      <SrcChip src={src} />
    </div>
  );
}

window.VoiceView = VoiceView;