/* hermon-hero-feed.jsx — "live activity stream" hero visual (alt to the dashboard)
   globals: Icon, CountUp */

const FEED_SRC = [
  { ic:"card",        tile:"#635BFF", t:"Payment cleared",        sub:"Amara Khan",        src:"Stripe",      sc:"#635BFF", val:"+ $28,000", vc:"green", ago:"just now" },
  { ic:"calendar",    tile:"#0A6CFF", t:"Strategy call booked",   sub:"Priya Anand",       src:"Calendly",    sc:"#0A6CFF", val:"2:00 PM",   vc:"",      ago:"14s ago" },
  { ic:"pen",         tile:"#1F9D6B", t:"Contract signed",        sub:"Marcus · Wealth Kings", src:"eSignatures", sc:"#1F9D6B", val:"€12,500",  vc:"green", ago:"38s ago" },
  { ic:"users",       tile:"#0A77F2", t:"New lead routed",        sub:"→ Devin Wright",    src:"Meta Ads",    sc:"#0A77F2", val:"Hot",      vc:"amber", ago:"1m ago" },
  { ic:"sparkle",     tile:"#6D4AE6", t:"Call summarized by AI",  sub:"Outcome set · Won", src:"Hermon AI",   sc:"#6D4AE6", val:"Won",      vc:"green", ago:"2m ago" },
  { ic:"message",     tile:"#4A154B", t:"Posted to #sales-wins",  sub:"Deal closed 🎉",    src:"Slack",       sc:"#4A154B", val:"€28,000",  vc:"green", ago:"2m ago" },
  { ic:"checkCircle", tile:"#6D4AE6", t:"Deal marked Closed",     sub:"Theo Park",       src:"Pipeline",    sc:"#6D4AE6", val:"Won",      vc:"green", ago:"3m ago" },
  { ic:"phoneCall",   tile:"#C98A1E", t:"Call-back requested",    sub:"Marco Diaz",     src:"Pipeline",    sc:"#C98A1E", val:"Warm",     vc:"amber", ago:"4m ago" },
];

const VISIBLE = 5;
let __frId = 0;

function FeedRow({ ev, isNew }) {
  const Ic = Icon[ev.ic] || Icon.zap;
  return (
    <div className={"afeed__row"+(isNew?" fr--new":"")}>
      <span className="afr__ic" style={{background:ev.tile}}><Ic width={20} height={20}/></span>
      <div className="afr__main">
        <div className="afr__t">{ev.t}</div>
        <div className="afr__sub">
          <span>{ev.sub}</span>
          <span className="afr__src"><span className="d" style={{background:ev.sc}}></span>{ev.src}</span>
        </div>
      </div>
      <div className="afr__right">
        <span className={"afr__val "+ev.vc}>{ev.val}</span>
        <span className="afr__time">{ev.ago}</span>
      </div>
    </div>
  );
}

function ActivityFeed({ motion = true }) {
  const seed = React.useMemo(()=> FEED_SRC.slice(0, VISIBLE + 1).map(ev=>({ id: __frId++, ev })), []);
  const [rows, setRows] = React.useState(seed);
  const ptr = React.useRef(VISIBLE + 1);

  React.useEffect(()=>{
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce || !motion) return;
    const id = setInterval(()=>{
      const base = FEED_SRC[ptr.current % FEED_SRC.length];
      ptr.current += 1;
      const ev = { ...base, ago: "just now" };
      setRows(prev => [{ id: __frId++, ev }, ...prev].slice(0, VISIBLE + 1));
    }, 2600);
    return ()=> clearInterval(id);
  }, [motion]);

  return (
    <div className="afeed">
      <div className="afeed__head">
        <span className="afeed__title"><span className="afeed__live"></span>Live sales floor</span>
        <span className="afeed__synced"><Icon.sync width={13} height={13}/>All systems synced</span>
      </div>
      <div className="afeed__sweep"><i></i></div>
      <div className="afeed__body">
        {rows.map((r, i)=> <FeedRow key={r.id} ev={r.ev} isNew={i === 0}/>)}
      </div>
      <div className="afeed__foot">
        <span className="afeed__count"><b>1,284</b> events synced today</span>
        <span className="afeed__procs">
          <i style={{background:"#635BFF"}}>S</i><i style={{background:"#1A1A1A"}}>M</i>
          <i style={{background:"#FF6231"}}>W</i><i style={{background:"#0A6CFF"}}>C</i>
          <span>+4 sources</span>
        </span>
      </div>
    </div>
  );
}

/* the full hero stage built around the feed (mirrors the dashboard stage's float accents) */
function FeedStage() {
  return (
    <div className="feedstage reveal" data-d="3">
      <div className="ff-float tr">
        <div className="gchip floaty" style={{animationDelay:'-2s', padding:'13px 17px'}}>
          <div>
            <div className="l">Closed today</div>
            <div style={{display:'flex', alignItems:'baseline', gap:8, marginTop:2}}>
              <div style={{fontSize:'1.5rem', fontWeight:800, letterSpacing:'-.03em'}}>$<CountUp to={49} dur={1600}/>k</div>
              <div style={{color:'var(--green)', fontWeight:700, fontSize:'.78rem', display:'inline-flex', alignItems:'center', gap:3}}><Icon.up width={12} height={12}/>18%</div>
            </div>
          </div>
        </div>
      </div>
      <div className="ff-float bl">
        <div className="gchip floaty" style={{animationDelay:'-3.4s'}}>
          <div className="ic" style={{background:'var(--green-soft)', color:'var(--green)'}}><Icon.trophy width={18} height={18}/></div>
          <div>
            <div className="l">Top closer · live</div>
            <div className="v">Marcus · +€28,000</div>
          </div>
        </div>
      </div>
      <ActivityFeed/>
    </div>
  );
}

Object.assign(window, { ActivityFeed, FeedStage });