"use client";

import { useEffect, useRef, useState } from "react";

type Phase =
  | { kind: "idle" }
  | { kind: "loading" }
  | { kind: "ready"; text: string }
  | { kind: "error"; message: string };

type Props = {
  src: string;
  filename: string;
};

export function TextFilePreview({ src, filename }: Props) {
  const [phase, setPhase] = useState<Phase>({ kind: "idle" });
  const abortRef = useRef<AbortController | null>(null);

  useEffect(
    () => () => {
      abortRef.current?.abort();
    },
    [],
  );

  function handleToggle(e: React.SyntheticEvent<HTMLDetailsElement>) {
    if (!e.currentTarget.open || phase.kind !== "idle") return;
    const controller = new AbortController();
    abortRef.current = controller;
    setPhase({ kind: "loading" });
    fetch(src, { signal: controller.signal })
      .then(async (res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.text();
      })
      .then((text) => {
        if (controller.signal.aborted) return;
        let display = text;
        if (filename.toLowerCase().endsWith(".json")) {
          try {
            display = JSON.stringify(JSON.parse(text), null, 2);
          } catch {
            // Keep raw text on parse failure (empty file, truncated, etc).
          }
        }
        setPhase({ kind: "ready", text: display });
      })
      .catch((err: unknown) => {
        if (controller.signal.aborted) return;
        const message = err instanceof Error ? err.message : String(err);
        setPhase({ kind: "error", message });
      });
  }

  return (
    <details
      onToggle={handleToggle}
      className="text-sm"
      aria-label={`preview ${filename}`}
    >
      <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
        Preview contents
      </summary>
      <div className="mt-2">
        {phase.kind === "loading" && (
          <p role="status" className="text-xs text-muted-foreground">
            Loading…
          </p>
        )}
        {phase.kind === "error" && (
          <p
            role="alert"
            className="text-xs text-destructive"
          >
            Failed to load: {phase.message}
          </p>
        )}
        {phase.kind === "ready" && (
          <pre
            aria-label={`preview of ${filename}`}
            className="text-xs font-mono bg-muted border border-border rounded p-3 h-96 overflow-auto whitespace-pre-wrap"
          >
            {phase.text}
          </pre>
        )}
      </div>
    </details>
  );
}