"use client";

/**
 * T-141 — read-only template PREVIEW dialog.
 *
 * Renders the template's CURRENT snapshot (`GET /templates/:id/preview`)
 * as read-only text. The snapshot's blocks are DETACHED (they belong to no
 * live page), so the interactive `BlockRenderer` cannot be reused — this
 * reuses the house text-extractors instead (`blockText` for text-ish
 * content shapes, `codeBlockText` for code), which also never interpret the
 * stored HTML (a saved snapshot is untrusted input — same rule as the
 * version-compare panel).
 */
import { useQuery } from "@tanstack/react-query";
import { Dialog } from "./dialog";
import { templateApi } from "@/lib/api";
import { blockText } from "@/components/editor/version-text";
import { codeBlockText } from "@/components/editor/block-renderer";
import { sortByPosition } from "@/lib/utils";
import type { TemplateInfo } from "@/lib/types";

/* The snapshot's frozen shape (see `captureSubtree` in page.service). */
interface SnapshotBlock {
  id: string;
  type: string;
  content: unknown;
  properties: Record<string, unknown>;
  parentId: string | null;
  position: string;
}
interface TemplateSnapshot {
  page?: { title: string; icon: string | null; description: string | null } | null;
  blocks: SnapshotBlock[];
  children: { title: string; blocks: SnapshotBlock[] }[];
}

function Placeholder({ label }: { label: string }) {
  return (
    <span className="inline-block rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">
      {label}
    </span>
  );
}

function BlockView({ b }: { b: SnapshotBlock }) {
  const text = blockText(b.content);
  const props = b.properties ?? {};
  switch (b.type) {
    case "heading_1":
      return <p className="text-2xl font-bold">{text}</p>;
    case "heading_2":
      return <p className="text-xl font-semibold">{text}</p>;
    case "heading_3":
      return <p className="text-lg font-semibold">{text}</p>;
    case "quote":
      return <p className="border-l-[3px] border-foreground pl-3 text-[15px]">{text}</p>;
    case "callout":
      return (
        <p className="rounded-md border border-border bg-muted/40 p-2">
          <span className="mr-1" aria-hidden>{(props.icon as string) ?? "ℹ️"}</span>
          {text}
        </p>
      );
    case "bulleted_list":
      return <p className="flex gap-2"><span className="mt-[0.6em] size-1.5 shrink-0 rounded-full bg-foreground" aria-hidden />{text}</p>;
    case "numbered_list":
      return <p className="flex gap-2"><span className="w-5 shrink-0 text-right text-sm text-muted-foreground" aria-hidden>•</span>{text}</p>;
    case "todo":
      return (
        <p className="flex gap-2">
          <span className="mt-[0.2em] flex size-4 shrink-0 items-center justify-center rounded-sm border border-muted-foreground/50 text-[10px]">
            {props.checked ? "✓" : ""}
          </span>
          <span className={props.checked ? "text-muted-foreground line-through" : undefined}>{text}</span>
        </p>
      );
    case "code":
      return (
        <pre className="overflow-x-auto rounded-md border border-border bg-muted/30 p-3 font-mono text-sm whitespace-pre">
          {codeBlockText(b.content)}
        </pre>
      );
    case "table": {
      const rows = (props.rows as string[][] | undefined) ?? [];
      return rows.length ? (
        <div className="overflow-x-auto rounded-md border border-border">
          <table className="w-full border-collapse text-sm">
            <tbody>
              {rows.map((row, ri) => (
                <tr key={ri}>
                  {row.map((cell, ci) => (
                    <td key={ci} className="border-b border-border px-3 py-1.5">{cell}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <Placeholder label="table" />
      );
    }
    case "divider":
      return <hr className="border-border" />;
    case "spacer":
      return null;
    case "image":
    case "file":
    case "video":
    case "audio":
      return <Placeholder label={(props.name as string) || b.type} />;
    case "bookmark":
    case "embed":
      return <Placeholder label={(props.title as string) ?? (props.src as string) ?? b.type} />;
    case "database":
    case "linked_database":
    case "child_database":
      return <Placeholder label="database" />;
    case "chart":
      return <Placeholder label="chart" />;
    case "form":
      return <Placeholder label="form" />;
    case "child_page":
      return <Placeholder label={(props.title as string) ?? "page link"} />;
    case "synced_block":
      return <Placeholder label="synced block" />;
    case "toc":
      return <Placeholder label="table of contents" />;
    case "equation":
      return <pre className="rounded-md border border-border bg-muted/30 p-2 font-mono text-sm">{text}</pre>;
    default:
      // paragraph, toggle titles, column content, anything new — plain text.
      return text ? <p>{text}</p> : null;
  }
}

export function TemplatePreviewDialog({ template, onClose }: { template: TemplateInfo; onClose: () => void }) {
  const query = useQuery({
    queryKey: ["templates", template.id, "preview"],
    queryFn: () => templateApi.preview(template.id),
    staleTime: 60_000
  });
  const snap: TemplateSnapshot | null = (query.data as { snapshot?: TemplateSnapshot } | null)?.snapshot ?? null;

  return (
    <Dialog
      open
      title={`Preview — ${template.name || "Untitled"}`}
      description="Read-only — the saved snapshot. Later edits to the source page do not change it."
      onClose={onClose}
      width="max-w-3xl"
    >
      {query.isLoading ? (
        <p className="py-6 text-center text-sm text-muted-foreground" data-testid="template-preview-loading">
          Loading preview…
        </p>
      ) : query.isError ? (
        <p className="py-6 text-center text-sm text-destructive" data-testid="template-preview-error">
          Could not load the template snapshot.
        </p>
      ) : (
        <div className="space-y-2" data-testid="template-preview-body">
          {snap?.page?.icon && (
            <p className="text-2xl" aria-hidden>{snap.page.icon}</p>
          )}
          <p className="text-xl font-semibold" data-testid="template-preview-title">
            {snap?.page?.title || template.name || "Untitled"}
          </p>
          {sortByPosition(snap?.blocks ?? []).map((b) => (
            <div key={b.id}>{<BlockView b={b} />}</div>
          ))}
          {snap && snap.blocks.length === 0 && (
            <p className="text-sm text-muted-foreground" data-testid="template-preview-empty">
              This template has no blocks.
            </p>
          )}
          {snap && snap.children.length > 0 && (
            <div className="mt-3 border-t border-border pt-2">
              <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Sub-pages
              </p>
              <ul className="space-y-0.5">
                {snap.children.map((c, i) => (
                  <li key={i} className="flex items-center gap-1.5 text-sm">
                    <span aria-hidden>▸</span>
                    {c.title}
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>
      )}
    </Dialog>
  );
}