ThothII/frontend/src/viewers/SqlViewer.tsx

import React, { useEffect, useState } from "react";
import { highlightSql } from "./highlight";

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",
};

const STATUS_CLASSES: Record<string, string> = {
  passed: "bg-[oklch(var(--success)/0.15)] text-[oklch(0.45_0.12_165)] ring-1 ring-[oklch(var(--success)/0.3)]",
  failed: "bg-destructive/10 text-destructive ring-1 ring-destructive/25",
  untested: "bg-muted text-muted-foreground ring-1 ring-border",
};

function Block({ block }: { block: SqlBlock }) {
  const [open, setOpen] = useState(true);
  const [html, setHtml] = useState<string>("");

  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
    ? STATUS_CLASSES[block.testStatus]
    : "";

  return (
    <div className="sql-block rounded-lg border border-border/70 mb-2">
      <button
        className="w-full flex 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="font-semibold">{block.name}</span>
        {block.fields !== undefined && (
          <span className="text-muted-foreground text-xs">
            {block.fields} campi
          </span>
        )}
        {badge && (
          <span
            className={`ml-auto text-xs px-1.5 py-0.5 rounded-md ${badgeClass}`}
          >
            {badge}
          </span>
        )}
      </button>

      {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 [layout, setLayout] = useState<Layout>("vertical");

  return (
    <div className="sql-viewer">
      <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"))
          }
        >
          {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>
  );
}