"use client";

import { Tab, TabList, TabPanel, Tabs } from "@/components/ui";
import type { TraceResult } from "@/lib/admin-api";
import { DocumentInspectView } from "./document-inspect";
import { ExtractionDebugger } from "./extraction-debugger";
import { useUrlState } from "./use-url-state";

/** Document page: Inspect (registry, versions, raw body, provenance) | Trace (extraction debugger, worker dry run). */
export function DocumentWorkbench({ id, fixture }: { id: string; fixture: TraceResult | null }) {
  const [params, setParams] = useUrlState();
  const tab = params.tab === "trace" || fixture ? "trace" : "inspect";
  return (
    <Tabs value={tab} onValueChange={(v) => setParams({ tab: v === "inspect" ? null : v })}>
      <TabList label="Document views" className="mb-3">
        <Tab value="inspect">Inspect</Tab>
        <Tab value="trace">Trace · extraction debugger</Tab>
      </TabList>
      <TabPanel value="inspect" className="pt-0">
        <DocumentInspectView id={id} />
      </TabPanel>
      <TabPanel value="trace" className="pt-0">
        <ExtractionDebugger id={id} fixture={fixture} />
      </TabPanel>
    </Tabs>
  );
}