ThothII/frontend/src/viewers/SqlViewer.tsx

import React, { useEffect, useState } from "react";
import { Check, Copy, TriangleAlert } from "lucide-react";
import { highlightSql } from "./highlight";
import { statusBadgeClass } from "./statusBadge";
import { useI18n } from "../i18n";

export interface SqlBlock {
  name: string;
  fields?: number;
  testStatus?: "passed" | "failed" | "untested";
  sql: string;
  comments?: Record<string, string>;
}

type Layout = "vertical" | "horizontal";

const STATUS_LABELS: Record<string, string> = {
  passed: "passed",
  failed: "failed",
  untested: "untested",
};

function Block({ block }: { block: SqlBlock }) {
  const { t } = useI18n();
  const [open, setOpen] = useState(true);
  const [html, setHtml] = useState<string>("");
  const [copyState, setCopyState] = useState<"idle" | "copied" | "failed">("idle");

  useEffect(() => {
    let cancelled = false;
    highlightSql(block.sql).then((result) => {
      if (!cancelled) setHtml(result);
    });
    return () => {
      cancelled = true;
    };
  }, [block.sql]);

  const badge = block.testStatus ? STATUS_LABELS[block.testStatus] : null;
  const badgeClass = block.testStatus
    ? statusBadgeClass(block.testStatus)
    : "";

  async function copySql() {
    try {
      if (!navigator.clipboard?.writeText) throw new Error("Clipboard unavailable");
      await navigator.clipboard.writeText(block.sql);
      setCopyState("copied");
    } catch {
      setCopyState("failed");
    }
  }

  return (
    <div className="sql-block rounded-lg border border-border/70 mb-2">
      <div className="flex items-stretch">
        <button
          className="flex min-w-0 flex-1 items-center gap-2 px-3 py-2 text-left font-mono text-sm hover:bg-muted/30"
          onClick={() => setOpen((o) => !o)}
          aria-expanded={open}
        >
          <span className="select-none">{open ? "▾" : "▸"}</span>
          <span className="truncate font-semibold">{block.name}</span>
          {block.fields !== undefined && (
            <span className="shrink-0 text-xs text-muted-foreground">
              {t(block.fields === 1 ? "{count} field" : "{count} fields", { count: block.fields })}
            </span>
          )}
          {badge && (
            <span
              className={`ml-auto shrink-0 rounded-md px-1.5 py-0.5 text-xs ${badgeClass}`}
            >
              {t(badge)}
            </span>
          )}
        </button>
        <button
          type="button"
          aria-label={t("Copy SQL for {name}", { name: block.name })}
          title={t("Copy SQL")}
          onClick={copySql}
          className="flex shrink-0 items-center gap-1.5 border-l border-border/70 px-2.5 text-xs text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground"
        >
          {copyState === "copied" ? (
            <Check className="size-3.5 text-success" aria-hidden="true" />
          ) : copyState === "failed" ? (
            <TriangleAlert className="size-3.5 text-destructive" aria-hidden="true" />
          ) : (
            <Copy className="size-3.5" aria-hidden="true" />
          )}
          <span role="status" aria-live="polite">
            {copyState === "copied" ? t("Copied") : copyState === "failed" ? t("Copy failed") : ""}
          </span>
        </button>
      </div>

      {open && (
        <div className="sql-block-body px-3 pb-3">
          {html ? (
            // eslint-disable-next-line react/no-danger
            <div dangerouslySetInnerHTML={{ __html: html }} />
          ) : (
            <pre className="font-mono text-sm opacity-50">{block.sql}</pre>
          )}
          {block.comments && Object.keys(block.comments).length > 0 && (
            <dl className="mt-2 text-xs text-muted-foreground grid grid-cols-[auto_1fr] gap-x-2 gap-y-0.5">
              {Object.entries(block.comments).map(([field, comment]) => (
                <React.Fragment key={field}>
                  <dt className="font-mono font-medium">{field}</dt>
                  <dd>{comment}</dd>
                </React.Fragment>
              ))}
            </dl>
          )}
        </div>
      )}
    </div>
  );
}

export function SqlViewer({ blocks }: { blocks: SqlBlock[] }) {
  const { t } = useI18n();
  const [layout, setLayout] = useState<Layout>("vertical");

  return (
    <div className="sql-viewer">
      {blocks.length > 1 && (
        <div className="flex gap-2 mb-2">
          <button
            className="text-xs px-2 py-1 rounded-md border border-border/70 shadow-xs transition-colors hover:bg-accent"
            onClick={() =>
              setLayout((l) => (l === "vertical" ? "horizontal" : "vertical"))
            }
          >
            {t(layout === "vertical" ? "Horizontal" : "Vertical")}
          </button>
        </div>
      )}

      <div
        className={
          layout === "horizontal"
            ? "flex gap-2 overflow-x-auto"
            : "flex flex-col"
        }
      >
        {blocks.map((block) => (
          <div
            key={block.name}
            className={layout === "horizontal" ? "min-w-72 flex-1" : ""}
          >
            <Block block={block} />
          </div>
        ))}
      </div>
    </div>
  );
}