/* Live activity ticker — fake real-time event stream. Adds energy and "always-on" feel. */

const TICKER_EVENTS_EN = [
  { t: "now", icon: "•", channel: "LINE OA", msg: "Booking captured · Brunch table for 4" },
  { t: "2s", icon: "→", channel: "Routing", msg: "FAQ resolved without human handoff" },
  { t: "4s", icon: "✓", channel: "Jongtoh", msg: "Menu inquiry answered in TH" },
  { t: "9s", icon: "•", channel: "FlowAIOS", msg: "Ticket auto-tagged · priority normal" },
  { t: "11s", icon: "→", channel: "LINE OA", msg: "Lead captured · routed to growth team" },
  { t: "14s", icon: "✓", channel: "Workflow", msg: "Reservation confirmation sent" },
  { t: "21s", icon: "•", channel: "Agent", msg: "Reschedule request handled" },
  { t: "25s", icon: "→", channel: "Inbox", msg: "Conversation summarised for review" },
  { t: "33s", icon: "✓", channel: "Jongtoh", msg: "Hours & location resolved" },
  { t: "40s", icon: "•", channel: "FlowAIOS", msg: "Daily ops digest dispatched" },
];

const TICKER_EVENTS_TH = [
  { t: "ตอนนี้", icon: "•", channel: "LINE OA", msg: "รับจอง · โต๊ะ 4 ที่นั่ง บรันช์" },
  { t: "2 วิ", icon: "→", channel: "Routing", msg: "ตอบคำถามที่พบบ่อยอัตโนมัติ" },
  { t: "4 วิ", icon: "✓", channel: "Jongtoh", msg: "ตอบเรื่องเมนูเป็นภาษาไทย" },
  { t: "9 วิ", icon: "•", channel: "FlowAIOS", msg: "จัดป้ายตั๋วงาน · ระดับปกติ" },
  { t: "11 วิ", icon: "→", channel: "LINE OA", msg: "เก็บลีด · ส่งต่อทีมการเติบโต" },
  { t: "14 วิ", icon: "✓", channel: "Workflow", msg: "ส่งยืนยันการจองอัตโนมัติ" },
  { t: "21 วิ", icon: "•", channel: "Agent", msg: "จัดการคำขอเลื่อนเวลา" },
  { t: "25 วิ", icon: "→", channel: "Inbox", msg: "สรุปบทสนทนาให้ทีม" },
  { t: "33 วิ", icon: "✓", channel: "Jongtoh", msg: "ตอบเวลาเปิด-ปิดและตำแหน่งร้าน" },
  { t: "40 วิ", icon: "•", channel: "FlowAIOS", msg: "ส่งรายงานปฏิบัติการประจำวัน" },
];

const LiveTicker = ({ lang }) => {
  const events = lang === "th" ? TICKER_EVENTS_TH : TICKER_EVENTS_EN;
  // Triple for seamless infinite scroll
  const items = [...events, ...events, ...events];
  return (
    <div className="ticker-wrap" aria-hidden="true">
      <div className="ticker-edge ticker-edge-l"></div>
      <div className="ticker-edge ticker-edge-r"></div>
      <div className="ticker-label">
        <span className="ticker-pulse"></span>
        <span>{lang === "th" ? "ปฏิบัติการสด" : "Live operations"}</span>
        <span className="ticker-divider"></span>
        <span className="ticker-counter mono-tag">
          {lang === "th" ? "เหตุการณ์/วินาที " : "EVENTS/SEC "}
          <ClockTick />
        </span>
      </div>
      <div className="ticker-track">
        {items.map((e, i) => (
          <div key={i} className="ticker-item">
            <span className="ticker-time mono-tag">{e.t}</span>
            <span className={`ticker-icon icon-${e.icon === "✓" ? "ok" : e.icon === "→" ? "arrow" : "dot"}`}>{e.icon}</span>
            <span className="ticker-channel mono-tag">{e.channel}</span>
            <span className="ticker-msg">{e.msg}</span>
            <span className="ticker-sep">·</span>
          </div>
        ))}
      </div>
    </div>
  );
};

const ClockTick = () => {
  const [n, setN] = React.useState(12);
  React.useEffect(() => {
    const id = setInterval(() => setN(8 + Math.floor(Math.random() * 8)), 1200);
    return () => clearInterval(id);
  }, []);
  return <span className="ticker-num">{n}</span>;
};

window.LiveTicker = LiveTicker;