// Sticky live status bar at the top of the page.
// Cycles through agent activity messages every 4s to feel "alive".

const STATUS_FEED = [
  { agent: 'Sofia',  city: 'Marseille', chan: 'WhatsApp',  what: "vient de prendre un RDV pour", who: "Christine, 14 mars 16h" },
  { agent: 'Léo',    city: 'Lyon',      chan: 'Email',     what: "qualifie un lead entrant pour", who: "un domaine viticole" },
  { agent: 'Maya',   city: 'Cassis',    chan: 'WhatsApp',  what: "envoie les recommandations de restos à", who: "un voyageur en arrivée" },
  { agent: 'Hugo',   city: 'Paris',     chan: 'Slack',     what: "résout un ticket de support pour", who: "Clinique Beaumont" },
  { agent: 'Iris',   city: 'Toulouse',  chan: 'LinkedIn',  what: "ouvre une conversation avec", who: "un CTO d'agroalimentaire" },
  { agent: 'Théo',   city: 'Aix',       chan: 'Telegram',  what: "compile le rapport hebdo pour", who: "Atlantic Surf Club" },
];

const StatusBar = () => {
  const [idx, setIdx] = React.useState(0);
  const [time, setTime] = React.useState(() => formatTime(new Date()));

  React.useEffect(() => {
    const tick = setInterval(() => {
      setIdx(i => (i + 1) % STATUS_FEED.length);
      setTime(formatTime(new Date()));
    }, 4200);
    return () => clearInterval(tick);
  }, []);

  function formatTime(d) {
    const h = String(d.getHours()).padStart(2, '0');
    const m = String(d.getMinutes()).padStart(2, '0');
    return `${h}:${m}`;
  }

  const f = STATUS_FEED[idx];

  return (
    <div className="statusbar">
      <div className="statusbar__inner">
        <span className="statusbar__live">
          <span className="statusbar__dot"></span>
          [ LIVE · {time} ]
        </span>
        <span className="statusbar__msg" key={idx}>
          <b>{f.agent}</b> {f.what} <b>{f.who}</b>
        </span>
        <span className="statusbar__meta">
          {f.chan} · {f.city}
        </span>
      </div>
    </div>
  );
};

window.StatusBar = StatusBar;