"use client";
import { useState } from "react";
import clsx from "clsx";

export function JsonView({ value, collapsed = false, className, maxHeight = "20rem" }: { value: unknown; collapsed?: boolean; className?: string; maxHeight?: string }) {
  const [open, setOpen] = useState(!collapsed);
  if (value === null || value === undefined) return <span className="text-ink-3">—</span>;
  const text = typeof value === "string" ? value : JSON.stringify(value, null, 2);
  const short = text.length > 80 ? text.slice(0, 80) + "…" : text;
  if (!open)
    return (
      <button className="font-mono text-xs text-ink-2 underline-offset-2 hover:underline text-left break-all" onClick={() => setOpen(true)} title="Expand">
        {short.replace(/\s+/g, " ")}
      </button>
    );
  return (
    <div className={clsx("relative", className)}>
      <pre className="overflow-auto rounded-md border border-hairline bg-surface-2 p-2 font-mono text-xs leading-relaxed text-ink-1" style={{ maxHeight }}>
        {text}
      </pre>
      {collapsed && (
        <button className="absolute right-1 top-1 btn btn-ghost btn-sm" onClick={() => setOpen(false)}>
          collapse
        </button>
      )}
    </div>
  );
}