mc-dashboard/components/LogViewer.tsx

"use client";

import { useQuery } from "@tanstack/react-query";
import { useMemo, useRef, useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

type Level = "ERROR" | "WARN" | "INFO" | "DEBUG" | "OTHER";

const LEVEL_ORDER: Level[] = ["ERROR", "WARN", "INFO", "DEBUG", "OTHER"];

const levelClass: Record<Level, string> = {
  ERROR: "text-red-300",
  WARN: "text-amber-300",
  INFO: "text-muted-foreground",
  DEBUG: "text-blue-300/70",
  OTHER: "text-muted-foreground/70",
};

function detectLevel(line: string): Level {
  if (/\b(ERROR|FATAL|SEVERE|Exception|Traceback)\b/i.test(line)) return "ERROR";
  if (/\b(WARN|WARNING)\b/i.test(line)) return "WARN";
  if (/\bINFO\b/i.test(line)) return "INFO";
  if (/\bDEBUG\b/i.test(line)) return "DEBUG";
  return "OTHER";
}

export function LogViewer() {
  const logRef = useRef<HTMLDivElement>(null);
  const [autoRefresh, setAutoRefresh] = useState(false);
  const [lines, setLines] = useState(100);
  const [search, setSearch] = useState("");
  const [levelFilter, setLevelFilter] = useState<Set<Level>>(
    new Set(LEVEL_ORDER)
  );
  const [autoScroll, setAutoScroll] = useState(true);
  const [copied, setCopied] = useState(false);
  const autoScrollRef = useRef(true);

  const { data, refetch, isFetching, isError, error } = useQuery<{ logs: string }>({
    queryKey: ["logs", lines],
    queryFn: async () => {
      const res = await fetch(`/api/logs?lines=${lines}`);
      if (!res.ok) throw new Error(`Failed to load logs (${res.status})`);
      return res.json();
    },
    refetchInterval: autoRefresh ? 3000 : false,
  });

  const parsed = useMemo(() => {
    if (!data?.logs) return [] as { line: string; level: Level }[];
    return data.logs
      .split("\n")
      .filter((l) => l.length > 0)
      .map((line) => ({ line, level: detectLevel(line) }));
  }, [data?.logs]);

  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase();
    return parsed.filter(
      (r) =>
        levelFilter.has(r.level) &&
        (!q || r.line.toLowerCase().includes(q))
    );
  }, [parsed, search, levelFilter]);

  useEffect(() => {
    if (autoScroll && logRef.current && autoScrollRef.current) {
      logRef.current.scrollTop = logRef.current.scrollHeight;
    }
  }, [filtered, autoScroll]);

  const handleScroll = () => {
    if (!logRef.current) return;
    const { scrollTop, scrollHeight, clientHeight } = logRef.current;
    autoScrollRef.current = scrollHeight - scrollTop - clientHeight < 80;
  };

  const toggleLevel = (lvl: Level) => {
    setLevelFilter((prev) => {
      const next = new Set(prev);
      if (next.has(lvl)) next.delete(lvl);
      else next.add(lvl);
      return next;
    });
  };

  const copyAll = async () => {
    try {
      await navigator.clipboard.writeText(filtered.map((r) => r.line).join("\n"));
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch {}
  };

  return (
    <Card>
      <CardHeader>
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
          <div>
            <CardTitle>Console Logs</CardTitle>
            <CardDescription>Server output from journalctl</CardDescription>
          </div>
          <div className="flex items-center gap-2 flex-wrap">
            <select
              value={lines}
              onChange={(e) => {
                setLines(Number(e.target.value));
                setTimeout(() => refetch(), 50);
              }}
              aria-label="Number of log lines to fetch"
              className="h-9 rounded-md border border-input bg-muted px-2 text-sm text-foreground focus:outline-none"
            >
              <option value={50}>50 lines</option>
              <option value={100}>100 lines</option>
              <option value={200}>200 lines</option>
            </select>
            <Button
              size="sm"
              variant={autoRefresh ? "default" : "outline"}
              onClick={() => {
                setAutoRefresh(!autoRefresh);
                if (!autoRefresh) autoScrollRef.current = true;
              }}
              className={`text-xs ${autoRefresh ? "animate-pulse" : ""}`}
            >
              {autoRefresh ? "Live" : "Auto"}
            </Button>
            <Button
              size="sm"
              variant="secondary"
              onClick={() => refetch()}
              disabled={isFetching}
            >
              {isFetching ? "..." : "Refresh"}
            </Button>
          </div>
        </div>

        <div className="flex flex-wrap items-center gap-2 pt-3">
          <Input
            placeholder="Search logs..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="h-8 text-sm max-w-[220px]"
          />
          <div className="flex gap-1">
            {LEVEL_ORDER.map((lvl) => {
              const active = levelFilter.has(lvl);
              return (
                <button
                  key={lvl}
                  onClick={() => toggleLevel(lvl)}
                  aria-pressed={active}
                  aria-label={`${active ? "Hide" : "Show"} ${lvl} lines`}
                  className={`text-[10px] font-semibold uppercase rounded px-2 py-1 border transition ${
                    active
                      ? `${levelClass[lvl]} border-current/40 bg-muted`
                      : "text-muted-foreground/40 border-transparent hover:text-muted-foreground"
                  }`}
                >
                  {lvl}
                </button>
              );
            })}
          </div>
          <label className="flex items-center gap-1.5 text-xs text-muted-foreground ml-auto">
            <input
              type="checkbox"
              checked={autoScroll}
              onChange={(e) => setAutoScroll(e.target.checked)}
              className="h-3.5 w-3.5 accent-primary"
            />
            Auto-scroll
          </label>
          <Button size="sm" variant="ghost" onClick={copyAll} className="text-xs h-8">
            {copied ? "Copied" : "Copy"}
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div
          ref={logRef}
          onScroll={handleScroll}
          className={`rounded-lg border bg-background p-3 sm:p-4 h-[300px] sm:h-[450px] overflow-y-auto font-mono text-xs leading-relaxed ${
            isError ? "border-red-500/30" : "border-border"
          }`}
        >
          {isError ? (
            <p className="text-red-300">
              Failed to load logs:{" "}
              {error instanceof Error ? error.message : "unknown error"}
            </p>
          ) : filtered.length === 0 ? (
            <p className="text-muted-foreground">
              {isFetching ? "Loading logs..." : "No log lines match the current filter."}
            </p>
          ) : (
            filtered.map((r, i) => (
              <div
                key={i}
                className={`whitespace-pre-wrap break-all ${levelClass[r.level]}`}
              >
                {r.line}
              </div>
            ))
          )}
        </div>
        <p className="text-[10px] text-muted-foreground mt-2 tabular-nums">
          {filtered.length} / {parsed.length} lines
        </p>
      </CardContent>
    </Card>
  );
}