"use client";

import {
  useCallback,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
} from "react";
import { cancelJobAction } from "../../actions";

type Props = {
  jobId: string;
  initiallyRunning: boolean;
};

type LogResponse = {
  content: string;
  nextOffset: number;
  status: string;
  queueKey?: string;
  queuePosition?: number;
};

export function JobLogTail({ jobId, initiallyRunning }: Props) {
  const [log, setLog] = useState("");
  const [status, setStatus] = useState<string>(
    initiallyRunning ? "running" : "loaded",
  );
  const [queueKey, setQueueKey] = useState<string | undefined>();
  const [queuePosition, setQueuePosition] = useState<number>(-1);
  const [cancelling, setCancelling] = useState(false);
  const offsetRef = useRef(0);
  const preRef = useRef<HTMLPreElement | null>(null);
  const stickToBottomRef = useRef(true);

  useLayoutEffect(() => {
    const el = preRef.current;
    if (!el || !stickToBottomRef.current) return;
    el.scrollTop = el.scrollHeight;
  }, [log]);

  const handleScroll = useCallback(() => {
    const el = preRef.current;
    if (!el) return;
    const dist = el.scrollHeight - el.scrollTop - el.clientHeight;
    stickToBottomRef.current = dist < 24;
  }, []);

  useEffect(() => {
    let cancelled = false;
    let timer: ReturnType<typeof setTimeout> | null = null;

    async function tick() {
      try {
        const res = await fetch(
          `/api/jobs/${encodeURIComponent(jobId)}/log?from=${offsetRef.current}`,
          { cache: "no-store" },
        );
        if (!res.ok) return;
        const data = (await res.json()) as LogResponse;
        if (cancelled) return;
        if (data.content) setLog((prev) => prev + data.content);
        offsetRef.current = data.nextOffset;
        setStatus(data.status);
        setQueueKey(data.queueKey);
        setQueuePosition(
          typeof data.queuePosition === "number" ? data.queuePosition : -1,
        );
        if (data.status === "running" || data.status === "queued") {
          timer = setTimeout(tick, 600);
        }
      } catch {
        if (!cancelled) timer = setTimeout(tick, 1500);
      }
    }
    tick();
    return () => {
      cancelled = true;
      if (timer) clearTimeout(timer);
    };
  }, [jobId]);

  async function handleCancel() {
    setCancelling(true);
    try {
      await cancelJobAction(jobId);
    } finally {
      setCancelling(false);
    }
  }

  const isRunning = status === "running";
  const isQueued = status === "queued";

  return (
    <div className="flex flex-col gap-2">
      <div className="flex items-center gap-3 flex-wrap">
        <div className="text-xs text-muted-foreground">
          Status: <span aria-label="Job status">{status}</span>
        </div>
        {isQueued && queueKey && queuePosition > 0 && (
          <div role="status" className="text-xs text-muted-foreground">
            Queued in <code className="font-mono">{queueKey}</code>, position{" "}
            {queuePosition}
          </div>
        )}
        {(isRunning || isQueued) && (
          <button
            type="button"
            onClick={handleCancel}
            disabled={cancelling}
            className="px-3 py-1.5 rounded-md border border-destructive/30 text-sm font-medium text-destructive hover:bg-destructive-soft disabled:opacity-50"
          >
            {cancelling ? "Cancelling…" : "Cancel"}
          </button>
        )}
      </div>
      <pre
        ref={preRef}
        onScroll={handleScroll}
        role="log"
        aria-label="Job log"
        className="text-xs font-mono bg-muted border border-border rounded p-3 h-96 overflow-auto whitespace-pre-wrap"
      >
        {log || "(empty log)"}
      </pre>
    </div>
  );
}