/* v2 Live Feed — used in hero side panel and dashboard right rail */

const V2_FEED = [
  { time: "09:42", loc: "IOF · Mas Castanyer",         action: "Vigent fins 2032 · revisió pendent 2027",   tone: "ok"    },
  { time: "09:38", loc: "Inventari · Rodal 04",        action: "AB 24,1 m²/ha · ORGEST PIH3",               tone: "info"  },
  { time: "09:31", loc: "Memòria SIDER · 24206",       action: "Pressupost desglossat preparat",            tone: "ok"    },
  { time: "09:24", loc: "ARP/836/2026",                action: "Convocatòria oberta · 41 dies restants",    tone: "warn"  },
  { time: "09:18", loc: "Actuació · Aclarida Q03",     action: "Executada · 4 evidències fotogràfiques",    tone: "field" },
  { time: "09:11", loc: "PTGMF · Roureda del Cardener",action: "Caduca en 47 dies · prepara revisió",       tone: "warn"  },
  { time: "09:04", loc: "Pressupost · 12,4 ha",        action: "Conforme estàndard CPF",                    tone: "ok"    },
  { time: "08:58", loc: "Prevenció incendis · 2026",   action: "Termini fins 27/05 · expedient obert",      tone: "warn"  },
  { time: "08:51", loc: "Inventari dasomètric",        action: "Densitat 1.240 peus/ha · Pinus halep.",     tone: "info"  },
  { time: "08:46", loc: "Acta comprovació CPF",        action: "Verificada · pagament en tràmit",           tone: "ok"    },
  { time: "08:39", loc: "Serveis ecosistèmics",        action: "ARP/325/2026 · sol·licitud preparada",      tone: "ok"    },
  { time: "08:32", loc: "Restauració danys forestals", action: "ARP/1428/2025 · documentació en revisió",   tone: "info"  },
];

const V2LiveFeed = () => {
  const [items, setItems] = React.useState(() => V2_FEED.slice(0, 4));
  const [counter, setCounter] = React.useState(4);

  React.useEffect(() => {
    const id = setInterval(() => {
      setItems((prev) => {
        const idx = counter % V2_FEED.length;
        const next = { ...V2_FEED[idx], _k: counter };
        setCounter((c) => c + 1);
        return [next, ...prev.slice(0, 3)];
      });
    }, 2800);
    return () => clearInterval(id);
  }, [counter]);

  return (
    <div className="v2-feed">
      <div className="v2-feed__head">
        <span className="v2-feed__pulse" />
        <span className="v2-feed__title">VISTA OPERATIVA · DEMO</span>
        <span className="v2-feed__count">FITXA · CARTERA</span>
      </div>
      <div className="v2-feed__list">
        {items.map((e, i) => (
          <div key={e._k ?? `init-${i}`} className={`v2-feed-item v2-feed-item--${e.tone}`} style={{ animationDelay: `${i * 30}ms` }}>
            <span className="v2-feed-item__dot" />
            <div className="v2-feed-item__body">
              <div className="v2-feed-item__action">{e.action}</div>
              <div className="v2-feed-item__meta">
                <span>{e.time}</span>
                <span className="v-sep">·</span>
                <span>{e.loc}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

window.V2LiveFeed = V2LiveFeed;