/* Wa by Elivate — Activity log */

const LEVELS = {
  info:   { tone: "blue",   label: "info" },
  action: { tone: "brand",  label: "action" },
  warn:   { tone: "amber",  label: "warn" },
  error:  { tone: "red",    label: "error" },
};

function LogsScreen() {
  const [level, setLevel] = React.useState("all");
  const [logs, setLogs] = React.useState([]);
  const [error, setError] = React.useState("");

  React.useEffect(() => {
    let alive = true;
    const load = () => window.WaApi.logs({ limit: 100 })
      .then((items) => { if (alive) setLogs(items); })
      .catch((err) => { if (alive) setError(err.message); });
    load();
    const timer = setInterval(load, 5000);
    return () => { alive = false; clearInterval(timer); };
  }, []);

  const shown = logs.filter((l) => level === "all" || l.level === level);

  const counts = { all: logs.length, info: 0, action: 0, warn: 0, error: 0 };
  logs.forEach((l) => counts[l.level]++);

  return (
    <div className="page wide route-anim">
      <div className="list-toolbar">
        <div className="seg">
          {["all", "action", "info", "warn", "error"].map((k) => (
            <button key={k} className={"seg-btn" + (level === k ? " active" : "")} onClick={() => setLevel(k)}>
              {k.charAt(0).toUpperCase() + k.slice(1)} <span className="seg-n">{counts[k]}</span>
            </button>
          ))}
        </div>
        <div className="topbar-spacer"></div>
        <div className="tag green"><span className="dot green"></span> Live</div>
        <button className="btn ghost sm"><Icons.copy size={14} /> Export</button>
      </div>

      <div className="card log-card">
        <div className="log-head-row">
          <span style={{ width: 78 }}>Time</span>
          <span style={{ width: 70 }}>Level</span>
          <span style={{ width: 40 }}>Dir</span>
          <span style={{ width: 116 }}>Event</span>
          <span style={{ flex: 1 }}>Detail</span>
          <span style={{ width: 150 }}>Rule</span>
        </div>
        <div className="log-rows">
          {shown.map((l) => {
            const L = LEVELS[l.level];
            return (
              <div className="log-row" key={l.id}>
                <span className="lr-time mono" style={{ width: 78 }}>{formatLogTime(l.time)}</span>
                <span style={{ width: 70 }}><span className={"log-pill " + L.tone}>{L.label}</span></span>
                <span style={{ width: 40 }} className="lr-dir">{l.dir === "in" ? <Icons.arrowDown size={14} /> : l.dir === "out" ? <Icons.arrowUp size={14} /> : <Icons.sliders size={14} />}</span>
                <span style={{ width: 116 }} className="lr-evt mono">{l.evt}</span>
                <span style={{ flex: 1 }} className="lr-detail">{l.detail}</span>
                <span style={{ width: 150 }} className="lr-rule muted">{l.rule}</span>
              </div>
            );
          })}
          {shown.length === 0 && <div className="empty-state"><Icons.logs size={26} /><p>{error || "No live log entries yet."}</p></div>}
        </div>
      </div>
    </div>
  );
}

window.LogsScreen = LogsScreen;