/* ============ AGENT — desktop app (instrukcje + stats) ============ */
/* global React */

const { useState, useEffect } = React;

function AgentInstallBlock({ tier }) {
  const [copied, setCopied] = useState("");
  const isEpic = tier === "epic";

  const copy = (text, key) => {
    try {
      navigator.clipboard.writeText(text);
      setCopied(key);
      setTimeout(() => setCopied(""), 1200);
    } catch {}
  };

  const Cmd = ({ k, cmd, label }) => (
    <div style={{ marginBottom: 10 }}>
      {label && (
        <div
          style={{
            fontSize: 9,
            letterSpacing: "0.18em",
            color: "var(--fg-dim)",
            marginBottom: 4,
          }}
        >
          {label}
        </div>
      )}
      <div style={{ display: "flex", gap: 6, alignItems: "stretch" }}>
        <pre
          style={{
            background: "#000",
            margin: 0,
            padding: "8px 10px",
            fontSize: 11,
            fontFamily: "var(--mono)",
            color: "var(--accent)",
            borderRadius: 2,
            overflowX: "auto",
            flex: 1,
            border: "1px solid rgba(var(--accent-rgb)/0.2)",
          }}
        >
          {cmd}
        </pre>
        <button
          className="auth-btn"
          style={{ fontSize: 9, padding: "0 10px", whiteSpace: "nowrap" }}
          onClick={() => copy(cmd, k)}
        >
          {copied === k ? "✓" : "KOPIUJ"}
        </button>
      </div>
    </div>
  );

  return (
    <div>
      <div
        style={{
          fontSize: 10,
          letterSpacing: "0.2em",
          color: "var(--accent)",
          marginBottom: 10,
        }}
      >
        ▣ INSTALACJA
      </div>
      <Cmd
        k="install"
        label="1. Linux / macOS — one-liner"
        cmd="curl -fsSL https://raw.githubusercontent.com/sotius1/agent-zaza/main/install.sh | bash"
      />
      <Cmd
        k="login"
        label="2. Login (te same email + hasło co tutaj)"
        cmd="agent-zaza login"
      />
      <Cmd k="run" label="3. Uruchom REPL agenta" cmd="agent-zaza" />
      <Cmd
        k="query"
        label="4. Lub jednorazowe pytanie (-q)"
        cmd={'agent-zaza -q "napisz funkcję sortującą tablicę"'}
      />
      <div
        style={{
          marginTop: 14,
          padding: 10,
          background: "rgba(0,0,0,0.35)",
          border: "1px dashed rgba(var(--accent-rgb)/0.3)",
          borderRadius: 2,
          fontSize: 10,
          lineHeight: 1.6,
          color: "var(--fg-dim)",
        }}
      >
        Token zapisany w{" "}
        <code style={{ color: "var(--accent)" }}>
          ~/.config/agent-zaza/credentials.json
        </code>
        . Repo:{" "}
        <a
          href="https://github.com/sotius1/agent-zaza"
          target="_blank"
          rel="noopener noreferrer"
          style={{ color: "var(--accent)" }}
        >
          github.com/sotius1/agent-zaza
        </a>
        . Rate limit: 60 req/min.{" "}
        {!isEpic && (
          <>
            <br />
            <b style={{ color: "var(--accent)" }}>
              Pełen dostęp do REPL/chat wymaga planu EPIC.
            </b>
          </>
        )}
      </div>
    </div>
  );
}

function AgentStatsChart({ days }) {
  if (!days || !days.length) return null;
  const max = Math.max(1, ...days.map((d) => d.tokens));
  const W = 280;
  const H = 70;
  const barW = W / days.length - 2;
  return (
    <svg
      width="100%"
      viewBox={`0 0 ${W} ${H + 16}`}
      style={{ display: "block" }}
    >
      {days.map((d, i) => {
        const h = (d.tokens / max) * H;
        const x = i * (barW + 2) + 1;
        const y = H - h;
        return (
          <g key={d.date}>
            <rect
              x={x}
              y={y}
              width={barW}
              height={h || 0.5}
              fill="var(--accent)"
              opacity={d.tokens ? 0.85 : 0.15}
            >
              <title>{`${d.date}: ${d.tokens.toLocaleString("pl-PL")} tok / ${d.requests} req`}</title>
            </rect>
          </g>
        );
      })}
      <text
        x={0}
        y={H + 12}
        fontSize="8"
        fill="var(--fg-dim)"
        fontFamily="var(--mono)"
      >
        {days[0].date.slice(5)}
      </text>
      <text
        x={W}
        y={H + 12}
        fontSize="8"
        fill="var(--fg-dim)"
        fontFamily="var(--mono)"
        textAnchor="end"
      >
        {days[days.length - 1].date.slice(5)}
      </text>
    </svg>
  );
}

function AgentStatsPanel() {
  const isLogged = !!window.AUTH?.user;
  const [stats, setStats] = useState(null);
  const [err, setErr] = useState("");
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!isLogged) return;
    let alive = true;
    const load = async () => {
      setLoading(true);
      try {
        const res = await fetch("/api/agent?action=stats", {
          headers: { "X-Auth-Token": window.AUTH?.token || "" },
        });
        const d = await res.json();
        if (!alive) return;
        if (d.ok) {
          setStats(d);
          setErr("");
        } else {
          setErr(d.error || "load_failed");
        }
      } catch (e) {
        if (alive) setErr("network_error");
      } finally {
        if (alive) setLoading(false);
      }
    };
    load();
    const t = setInterval(load, 30000);
    return () => {
      alive = false;
      clearInterval(t);
    };
  }, [isLogged]);

  if (!isLogged) {
    return (
      <div
        style={{
          padding: 12,
          background: "rgba(0,0,0,0.3)",
          border: "1px dashed rgba(var(--accent-rgb)/0.3)",
          borderRadius: 2,
          fontSize: 11,
          color: "var(--fg-dim)",
          marginBottom: 16,
        }}
      >
        Zaloguj się, żeby zobaczyć statystyki zużycia tokenów.
      </div>
    );
  }

  if (loading && !stats) {
    return (
      <div style={{ fontSize: 10, color: "var(--fg-dim)", marginBottom: 16 }}>
        Ładowanie statystyk...
      </div>
    );
  }

  if (err && !stats) {
    return (
      <div
        style={{
          padding: 10,
          fontSize: 10,
          color: "var(--accent)",
          marginBottom: 16,
        }}
      >
        Błąd: {err}
      </div>
    );
  }

  if (!stats) return null;

  const fmt = (n) => (n || 0).toLocaleString("pl-PL");
  const lastActive = stats.last_active
    ? new Date(stats.last_active).toLocaleString("pl-PL")
    : "—";
  const topModels = Object.entries(stats.models || {})
    .sort((a, b) => (b[1].tokens || 0) - (a[1].tokens || 0))
    .slice(0, 3);
  const tier = (stats.plan?.tier || "free").toUpperCase();
  const tierColor = tier === "EPIC" ? "var(--accent)" : "var(--fg-dim)";

  const Stat = ({ label, value, sub }) => (
    <div
      style={{
        flex: 1,
        minWidth: 110,
        padding: 10,
        background: "rgba(0,0,0,0.3)",
        border: "1px solid rgba(var(--accent-rgb)/0.15)",
        borderRadius: 2,
      }}
    >
      <div
        style={{
          fontSize: 8,
          letterSpacing: "0.2em",
          color: "var(--fg-dim)",
          marginBottom: 4,
        }}
      >
        {label}
      </div>
      <div
        style={{
          fontSize: 18,
          fontFamily: "var(--mono)",
          color: "var(--accent)",
          fontWeight: 700,
        }}
      >
        {value}
      </div>
      {sub && (
        <div style={{ fontSize: 9, color: "var(--fg-dim)", marginTop: 2 }}>
          {sub}
        </div>
      )}
    </div>
  );

  return (
    <div style={{ marginBottom: 18 }}>
      <div
        style={{
          fontSize: 10,
          letterSpacing: "0.2em",
          color: "var(--accent)",
          marginBottom: 8,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <span>▣ TWOJE ZUŻYCIE</span>
        <span style={{ fontSize: 9, color: tierColor }}>
          PLAN: <b>{tier}</b>
        </span>
      </div>

      <div
        style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 10 }}
      >
        <Stat
          label="TOKENY (TOTAL)"
          value={fmt(stats.total_tokens)}
          sub={`prompt ${fmt(stats.prompt_tokens)} · out ${fmt(stats.completion_tokens)}`}
        />
        <Stat
          label="ZAPYTANIA (TOTAL)"
          value={fmt(stats.total_requests)}
          sub={`limit ${stats.rate_limit_per_min}/min`}
        />
        <Stat
          label="W TYM MIESIĄCU"
          value={fmt(stats.month_tokens)}
          sub={`${fmt(stats.month_requests)} zapytań`}
        />
      </div>

      <div
        style={{
          padding: 10,
          background: "rgba(0,0,0,0.3)",
          border: "1px solid rgba(var(--accent-rgb)/0.15)",
          borderRadius: 2,
          marginBottom: 10,
        }}
      >
        <div
          style={{
            fontSize: 8,
            letterSpacing: "0.2em",
            color: "var(--fg-dim)",
            marginBottom: 6,
          }}
        >
          OSTATNIE 14 DNI · TOKENY/DZIEŃ
        </div>
        <AgentStatsChart days={stats.days} />
      </div>

      <div
        style={{
          display: "flex",
          gap: 10,
          fontSize: 10,
          color: "var(--fg-dim)",
          flexWrap: "wrap",
        }}
      >
        <div>
          Ostatnia aktywność: <b style={{ color: "var(--fg)" }}>{lastActive}</b>
        </div>
        {stats.last_model && (
          <div>
            Ostatni model:{" "}
            <b style={{ color: "var(--fg)" }}>{stats.last_model}</b>
          </div>
        )}
      </div>

      {topModels.length > 0 && (
        <div style={{ marginTop: 10 }}>
          <div
            style={{
              fontSize: 8,
              letterSpacing: "0.2em",
              color: "var(--fg-dim)",
              marginBottom: 4,
            }}
          >
            TOP MODELE
          </div>
          {topModels.map(([name, m]) => (
            <div
              key={name}
              style={{
                display: "flex",
                justifyContent: "space-between",
                fontSize: 10,
                fontFamily: "var(--mono)",
                padding: "3px 0",
                borderBottom: "1px dotted rgba(var(--accent-rgb)/0.1)",
              }}
            >
              <span style={{ color: "var(--accent)" }}>{name}</span>
              <span style={{ color: "var(--fg-dim)" }}>
                {fmt(m.tokens)} tok · {fmt(m.requests)} req
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function AgentApp() {
  const tier =
    (window.AUTH?.getActiveTier && window.AUTH.getActiveTier().tier) || "free";
  const isLogged = !!window.AUTH?.user;
  const isEpic = tier === "epic";

  return (
    <div
      className="app"
      style={{ padding: 18, overflowY: "auto", height: "100%" }}
    >
      <div style={{ marginBottom: 16 }}>
        <div
          style={{
            fontSize: 9,
            letterSpacing: "0.3em",
            color: "var(--fg-dim)",
            marginBottom: 4,
          }}
        >
          // ZAZA · CLI AGENT · v0.3.0
        </div>
        <h1
          style={{
            fontSize: 24,
            margin: 0,
            letterSpacing: "0.05em",
            color: "var(--accent)",
          }}
        >
          AGENT ZAZA
        </h1>
        <div
          style={{
            fontSize: 11,
            color: "var(--fg-dim)",
            marginTop: 6,
            lineHeight: 1.6,
          }}
        >
          Pełnowymiarowy agent AI w twoim terminalu. Edycja kodu, eksploracja
          repo, wykonywanie komend, integracja z przeglądarką i pamięć między
          sesjami — autoryzacja przez konto zaza.net.pl. Wymaga planu{" "}
          <b style={{ color: "var(--accent)" }}>EPIC</b>.
        </div>
      </div>

      {!isLogged && (
        <div
          style={{
            padding: 12,
            background: "rgba(var(--accent-rgb)/0.06)",
            border: "1px solid var(--accent)",
            borderRadius: 2,
            marginBottom: 16,
            fontSize: 11,
            lineHeight: 1.6,
          }}
        >
          ⚠ Zaloguj się, żeby pobrać token i zobaczyć statystyki zużycia.{" "}
          <a
            href="#"
            onClick={(e) => {
              e.preventDefault();
              window.AUTH?.openLogin?.();
            }}
            style={{ color: "var(--accent)" }}
          >
            Zaloguj
          </a>
        </div>
      )}

      {isLogged && !isEpic && (
        <div
          style={{
            padding: 12,
            background: "rgba(var(--accent-rgb)/0.06)",
            border: "1px solid var(--accent)",
            borderRadius: 2,
            marginBottom: 16,
            fontSize: 11,
            lineHeight: 1.6,
          }}
        >
          ⚠ Twój plan: <b>{tier.toUpperCase()}</b>. Pełny chat/REPL agenta
          wymaga EPIC.{" "}
          <a
            href="https://www.zaza.net.pl/pricing"
            target="_blank"
            rel="noopener noreferrer"
            style={{ color: "var(--accent)" }}
          >
            Upgrade
          </a>
        </div>
      )}

      <AgentStatsPanel />
      <AgentInstallBlock tier={tier} />
    </div>
  );
}

Object.assign(window, { AgentApp });