"use client";

/**
 * DocReadingView — toggles between the clean LLM reading version (default) and
 * the raw extracted chunks. The per-page "ver scan original" stays available
 * inside the chunks renderer. When no reading version exists, only chunks show.
 */
import { useState } from "react";
import { MarkdownBody } from "@/components/markdown-body";
import { DocRendererV2 } from "@/components/doc-renderer-v2";
import type { ParsedChunk } from "@/lib/chunks";

type View = "reading" | "chunks";

export function DocReadingView({
  docId,
  reading,
  chunksByPage,
}: {
  docId: string;
  reading: string | null;
  chunksByPage: Array<[number, ParsedChunk[]]>;
}) {
  const [view, setView] = useState<View>(reading ? "reading" : "chunks");

  return (
    <div>
      {reading && (
        <div className="mb-6 flex items-center gap-2 font-mono text-xs">
          <button
            onClick={() => setView("reading")}
            className={`px-3 py-1.5 border rounded ${
              view === "reading"
                ? "border-[#00ff9c] text-[#00ff9c] bg-[rgba(0,255,156,0.08)]"
                : "border-[rgba(0,255,156,0.20)] text-[#8896aa]"
            }`}
          >
            📖 leitura
          </button>
          <button
            onClick={() => setView("chunks")}
            className={`px-3 py-1.5 border rounded ${
              view === "chunks"
                ? "border-[#7fdbff] text-[#7fdbff] bg-[rgba(127,219,255,0.08)]"
                : "border-[rgba(127,219,255,0.20)] text-[#8896aa]"
            }`}
          >
            🔍 trechos · scan original
          </button>
        </div>
      )}

      {view === "reading" && reading ? (
        <article className="markdown-body max-w-3xl text-[#c8d4e6] leading-relaxed">
          <MarkdownBody>{reading}</MarkdownBody>
        </article>
      ) : (
        <DocRendererV2 docId={docId} chunksByPage={chunksByPage} />
      )}
    </div>
  );
}