mc-dashboard/components/LogViewer.tsx

"use client";

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

export function LogViewer() {
  const logRef = useRef<HTMLPreElement>(null);
  const [autoRefresh, setAutoRefresh] = useState(false);
  const [lines, setLines] = useState(100);
  const [hasLoaded, setHasLoaded] = 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();
    },
    enabled: hasLoaded,
    refetchInterval: autoRefresh ? 3000 : false,
  });

  // Auto-scroll only if user is near the bottom
  useEffect(() => {
    if (logRef.current && autoScrollRef.current) {
      logRef.current.scrollTop = logRef.current.scrollHeight;
    }
  }, [data]);

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

  // Fetch on mount
  useEffect(() => {
    setHasLoaded(true);
  }, []);

  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">
            <select
              value={lines}
              onChange={(e) => {
                setLines(Number(e.target.value));
                setTimeout(() => refetch(), 50);
              }}
              className="h-10 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>
      </CardHeader>
      <CardContent>
        <pre
          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 whitespace-pre-wrap break-all ${
            isError ? "border-red-500/30 text-red-300" : "border-border text-muted-foreground"
          }`}
        >
          {isError
            ? `Failed to load logs: ${error instanceof Error ? error.message : "unknown error"}`
            : data?.logs || (isFetching ? "Loading logs..." : "No logs available.")}
        </pre>
      </CardContent>
    </Card>
  );
}