"use client";

import { useState } from "react";
import { useQuery } from "@tanstack/react-query";

import { apiFetch } from "@/lib/api";

interface LogRow {
  scraper_type?: string;
  log_id: number;
  run_id: number | null;
  ts: string | null;
  level: string;
  stage: string | null;
  entity_id: string | null;
  message: string;
}

interface Props {
  /** scraper_type filter — kn / nspd / nspd_geo / objective. */
  scraperType: "kn" | "nspd" | "nspd_geo" | "objective";
  /** Имя поля по которому фильтруем run в запросе (по умолчанию `run_id`). */
  runIdParam?: string;
  /** Лимит записей (default 200). */
  limit?: number;
  /** Заголовок панели (default — "Журнал событий"). */
  title?: string;
  /** Подзаголовок (хинт), например "обновляется каждые 3 сек". */
  subtitle?: string;
  /** Стиль контейнера (карточка) — passing through. */
  containerStyle?: React.CSSProperties;
}

/**
 * Переиспользуемая панель логов для admin-страниц scraper'ов.
 *
 * Использует унифицированный endpoint `/api/v1/admin/scrape/all/logs` с
 * фильтром по `scraper_type` и опциональным `run_id`. Auto-refetch каждые 3 сек.
 */
export default function ScrapeLogsPanel({
  scraperType,
  runIdParam = "run_id",
  limit = 200,
  title = "Журнал событий",
  subtitle = "обновляется каждые 3 сек",
  containerStyle,
}: Props) {
  const [runIdFilter, setRunIdFilter] = useState<number | "">("");

  const logs = useQuery({
    queryKey: ["scrape-logs", scraperType, runIdFilter],
    queryFn: async () => {
      const params = new URLSearchParams({ scraper_type: scraperType });
      params.set("limit", String(limit));
      if (runIdFilter !== "") {
        params.set(runIdParam, String(runIdFilter));
      }
      return apiFetch<LogRow[]>(
        `/api/v1/admin/scrape/all/logs?${params.toString()}`,
      );
    },
    refetchInterval: 3000,
  });

  return (
    <section
      style={{
        background: "#fff",
        border: "1px solid #e6e8ec",
        borderRadius: 12,
        padding: 20,
        ...containerStyle,
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          marginBottom: 12,
        }}
      >
        <h2 style={{ margin: 0, fontSize: 16 }}>
          📜 {title}{" "}
          <span style={{ fontWeight: 400, color: "#5b6066", fontSize: 13 }}>
            · {subtitle}
          </span>
        </h2>
        <input
          type="number"
          value={runIdFilter}
          onChange={(e) =>
            setRunIdFilter(e.target.value === "" ? "" : Number(e.target.value))
          }
          placeholder="job_id / run_id (опц.)"
          style={{
            padding: "8px 10px",
            border: "1px solid #d1d5db",
            borderRadius: 6,
            fontSize: 14,
            width: 180,
            boxSizing: "border-box",
          }}
        />
      </div>

      {logs.isLoading ? (
        <p style={{ color: "#5b6066" }}>Загрузка…</p>
      ) : logs.isError ? (
        <p style={{ color: "#b3261e" }}>Ошибка: {String(logs.error)}</p>
      ) : (logs.data?.length ?? 0) === 0 ? (
        <p style={{ color: "#5b6066", fontSize: 13 }}>
          Нет событий
          {runIdFilter !== "" ? ` для run_id=${runIdFilter}` : ""}.
          {scraperType === "objective"
            ? " Objective ETL пока не пишет в общий лог."
            : " Когда worker запустится — появятся записи."}
        </p>
      ) : (
        <div
          style={{
            maxHeight: 360,
            overflowY: "auto",
            fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
            fontSize: 12,
            border: "1px solid #eef0f3",
            borderRadius: 6,
            background: "#0f172a",
            color: "#e2e8f0",
            padding: 10,
          }}
        >
          {(logs.data ?? []).map((l) => {
            const color =
              l.level === "error"
                ? "#fca5a5"
                : l.level === "warn"
                  ? "#fcd34d"
                  : "#a3e635";
            return (
              <div
                key={`${l.scraper_type ?? scraperType}-${l.log_id}`}
                style={{ marginBottom: 2 }}
              >
                <span style={{ color: "#94a3b8" }}>{l.ts?.slice(11, 19)}</span>{" "}
                <span style={{ color }}>{l.level.toUpperCase()}</span>{" "}
                <span style={{ color: "#7dd3fc" }}>
                  [run-{l.run_id}
                  {l.stage ? ` · ${l.stage}` : ""}
                  {l.entity_id ? ` · ${l.entity_id}` : ""}]
                </span>{" "}
                <span>{l.message}</span>
              </div>
            );
          })}
        </div>
      )}
    </section>
  );
}
