/* parcel-debug-panel.jsx — collapsible bottom debug bar for the live pipeline.
   ───────────────────────────────────────────────────────────────────────────
   Subscribes to window.DebugLog (see debug-log.js) and renders two tabs:
     • APIs — one row per GUGiK service with a red/green/neutral status dot.
     • Log  — reverse-chronological stream of every fetch/step (status, ms, error).

   Browser script (React-in-browser, NO import/export). Exposed as window.DebugPanel.
   position:fixed so it sits at screen-bottom regardless of the host page layout,
   and self-guards: if window.DebugLog is absent it renders nothing.
*/
(function () {
  const { useState, useEffect } = React;

  const CSS = `
  .dbg { position:fixed; left:0; right:0; bottom:0; z-index:9000;
    font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --dbg-bg:#1c1a17; --dbg-bg2:#25231f; --dbg-line:#39352f; --dbg-ink:#e8e3da;
    --dbg-faint:#9a938a; --dbg-ok:#6fae55; --dbg-fail:#e5624f; --dbg-empty:#c79a4a;
    --dbg-idle:#5a544c; color:var(--dbg-ink); }
  .dbg-bar { display:flex; align-items:center; gap:12px; height:30px; padding:0 12px;
    background:var(--dbg-bg); border-top:1px solid var(--dbg-line); font-size:12px; }
  .dbg-tag { font-weight:600; letter-spacing:.08em; color:var(--dbg-faint); cursor:pointer;
    display:flex; align-items:center; gap:6px; }
  .dbg-tabs { display:flex; gap:2px; }
  .dbg-tab { background:none; border:1px solid transparent; color:var(--dbg-faint);
    font:inherit; font-size:11px; padding:2px 9px; border-radius:5px; cursor:pointer; }
  .dbg-tab.on { background:var(--dbg-bg2); border-color:var(--dbg-line); color:var(--dbg-ink); }
  .dbg-counts { display:flex; gap:10px; font-size:11px; }
  .dbg-cok { color:var(--dbg-ok); } .dbg-cfail { color:var(--dbg-fail); }
  .dbg-spacer { flex:1; }
  .dbg-run { color:var(--dbg-faint); font-size:11px; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; max-width:34ch; }
  .dbg-btn { background:none; border:1px solid var(--dbg-line); color:var(--dbg-faint);
    font:inherit; font-size:11px; padding:2px 8px; border-radius:5px; cursor:pointer; }
  .dbg-caret { color:var(--dbg-faint); cursor:pointer; font-size:13px; width:16px; text-align:center; }
  .dbg-body { max-height:40vh; overflow:auto; background:var(--dbg-bg2);
    border-top:1px solid var(--dbg-line); font-size:12px; }
  .dbg-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; display:inline-block; }
  .dbg-row { display:flex; align-items:center; gap:10px; padding:5px 12px;
    border-bottom:1px solid var(--dbg-line); }
  .dbg-name { width:8ch; flex:0 0 auto; color:var(--dbg-ink); }
  .dbg-st { width:8ch; flex:0 0 auto; color:var(--dbg-faint); }
  .dbg-note { color:var(--dbg-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dbg-note.fail { color:var(--dbg-fail); }
  .dbg-logrow { display:flex; align-items:baseline; gap:8px; padding:3px 12px;
    border-bottom:1px solid rgba(57,53,47,.5); line-height:1.35; }
  .dbg-logrow.fail { background:rgba(229,98,79,.08); }
  .dbg-lms { width:6ch; flex:0 0 auto; text-align:right; color:var(--dbg-faint); }
  .dbg-lapi { width:8ch; flex:0 0 auto; }
  .dbg-lstat { width:5ch; flex:0 0 auto; color:var(--dbg-faint); }
  .dbg-lurl { color:var(--dbg-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dbg-empty { padding:14px 12px; color:var(--dbg-faint); }
  `;

  function injectCSS() {
    if (typeof document === "undefined" || document.getElementById("dbg-styles")) return;
    const s = document.createElement("style");
    s.id = "dbg-styles"; s.textContent = CSS;
    document.head.appendChild(s);
  }

  const DOT = { ok: "var(--dbg-ok)", fail: "var(--dbg-fail)", empty: "var(--dbg-empty)", idle: "var(--dbg-idle)" };

  function statusLabel(s) {
    if (!s || s.state === "idle") return "—";
    if (s.state === "fail") return s.status != null ? String(s.status) : (s.error ? "błąd" : "✗");
    if (s.status != null) return String(s.status);
    return s.state === "ok" ? "ok" : "—";
  }

  function ApiRow(props) {
    const s = props.summary || { state: "idle" };
    const note = s.error || s.note || "";
    return (
      <div className="dbg-row">
        <span className="dbg-dot" style={{ background: DOT[s.state] || DOT.idle }} />
        <span className="dbg-name">{props.api}</span>
        <span className="dbg-st">{statusLabel(s)}{s.ms != null ? " · " + s.ms + "ms" : ""}</span>
        <span className={"dbg-note" + (s.error ? " fail" : "")}>{note}</span>
      </div>
    );
  }

  function LogRow(props) {
    const e = props.e, fail = e.state === "fail";
    return (
      <div className={"dbg-logrow" + (fail ? " fail" : "")}>
        <span className="dbg-dot" style={{ background: DOT[e.state] || DOT.idle, alignSelf: "center" }} />
        <span className="dbg-lms">{e.ms != null ? e.ms + "ms" : ""}</span>
        <span className="dbg-lapi">{e.api}</span>
        <span className="dbg-lstat">{e.kind === "mark" ? "·" : (e.status != null ? e.status : (e.error ? "✗" : ""))}</span>
        <span className="dbg-lurl" title={e.url || ""}>{e.error || e.note || e.url || ""}</span>
      </div>
    );
  }

  function DebugPanel() {
    const DL = typeof window !== "undefined" && window.DebugLog;
    if (!DL) return null;
    injectCSS();

    const [open, setOpen] = useState(false);
    const [tab, setTab] = useState("apis");
    const [, bump] = useState(0);

    useEffect(() => {
      const unsub = DL.subscribe(() => bump((n) => n + 1));
      return unsub;
    }, []);

    const apis = DL.getApiStatus();
    const entries = DL.getEntries();
    const c = DL.counts();
    const run = DL.getRun();

    return (
      <div className="dbg">
        <div className="dbg-bar">
          <span className="dbg-tag" onClick={() => setOpen(!open)}>{open ? "▾" : "▸"} DEBUG</span>
          <div className="dbg-tabs">
            <button className={"dbg-tab" + (tab === "apis" ? " on" : "")} onClick={() => { setTab("apis"); setOpen(true); }}>APIs</button>
            <button className={"dbg-tab" + (tab === "log" ? " on" : "")} onClick={() => { setTab("log"); setOpen(true); }}>Log</button>
          </div>
          <div className="dbg-counts">
            <span className="dbg-cok">{c.ok} ✓</span>
            <span className="dbg-cfail">{c.fail} ✗</span>
          </div>
          <span className="dbg-spacer" />
          {run.query ? <span className="dbg-run" title={run.query}>{run.query}</span> : null}
          <button className="dbg-btn" onClick={() => DL.reset()}>wyczyść</button>
          <span className="dbg-caret" onClick={() => setOpen(!open)}>{open ? "⌄" : "⌃"}</span>
        </div>
        {open ? (
          <div className="dbg-body">
            {tab === "apis"
              ? apis.map((a) => <ApiRow key={a.api} api={a.api} summary={a.summary} />)
              : (entries.length
                  ? entries.slice().reverse().map((e) => <LogRow key={e.id} e={e} />)
                  : <div className="dbg-empty">Brak zdarzeń — uruchom wyszukiwanie działki.</div>)}
          </div>
        ) : null}
      </div>
    );
  }

  window.DebugPanel = DebugPanel;
})();