dev-lab/src/page/json-viewer/index.tsx

import { useCallback, useMemo, useState } from "react"
import { useTranslation } from "react-i18next"
import jp from "jsonpath"
import JsonTreeNode from "@/components/json-tree-node"
import JsonCodeEditor from "@/components/json-code-editor"
import Seo from "@/components/seo"

/**
 * JSON Viewer page component that displays the JSON visualisation tool in DevLab.
 */
export default function JsonViewer() {
  const { t } = useTranslation()
  const initialData = {
    centre_id: "LON-01",
    location: "London",
    is_active: true,
    staff_members: [
      { id: 101, name: "Alice", roles: ["Admin", "Manager"] },
      { id: 102, name: "Bob", roles: ["Developer"] },
    ],
    config: {
      colour_scheme: "Dark Mode",
      retention_days: 30,
    },
  }

  const [jsonInput, setJsonInput] = useState<string>(JSON.stringify(initialData, null, 2))
  const [query, setQuery] = useState<string>("$.staff_members[*].name")
  const [copied, setCopied] = useState(false)

  const isPlainObject = (value: unknown): value is Record<string, unknown> => {
    return value !== null && typeof value === "object" && !Array.isArray(value)
  }

  // Compute matching results
  const result = useMemo(() => {
    let parsed
    try {
      parsed = JSON.parse(jsonInput)
    } catch (e) {
      return { parsed: null, matchedPaths: [], matchedValues: [], error: (e as Error).message, queryError: null }
    }

    try {
      const nodes = jp.nodes(parsed, query)
      return {
        parsed,
        matchedPaths: nodes.map((n) => jp.stringify(n.path)),
        matchedValues: nodes.map((n) => n.value),
        error: null,
        queryError: null,
      }
    } catch (e) {
      // When JSONPath expression is invalid, still display the JSON tree but with no matches
      return { parsed, matchedPaths: [], matchedValues: [], error: null, queryError: (e as Error).message }
    }
  }, [jsonInput, query])

  // Copy as CSV
  const copyAsCsv = useCallback(() => {
    if (result.matchedValues.length === 0) return

    const escapeCsvValue = (val: unknown): string => {
      const str = typeof val === "object" ? JSON.stringify(val) : String(val)
      if (str.includes(",") || str.includes('"') || str.includes("\n")) {
        return `"${str.replace(/"/g, '""')}"`
      }
      return str
    }

    const objectMatches = result.matchedValues.filter(isPlainObject)
    const isObjectTable = objectMatches.length > 0 && objectMatches.length === result.matchedValues.length

    const csv = isObjectTable
      ? (() => {
        const columns = Array.from(new Set(objectMatches.flatMap((item) => Object.keys(item))))
        const headerRow = columns.map(escapeCsvValue).join(",")
        const valueRows = objectMatches.map((item) => columns.map((column) => escapeCsvValue(item[column])).join(","))
        return [headerRow, ...valueRows].join("\n")
      })()
      : (() => {
        const header = query
        const rows = result.matchedValues.map(escapeCsvValue)
        return [header, ...rows].join("\n")
      })()

    navigator.clipboard.writeText(csv).then(() => {
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    })
  }, [query, result.matchedValues])

  return (
    <div className="h-full flex gap-4 overflow-hidden">
      <Seo
        title={t("seo.jsonViewer.title")}
        description={t("seo.jsonViewer.description")}
        path="/json-viewer"
      />
      {/* Left panel - 30% */}
      <div className="w-[30%] flex flex-col gap-4 min-h-0">
        {/* JSON Source - fills remaining height */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex-1 flex flex-col min-h-0">
          <div className="bg-slate-50 px-4 py-2 border-b border-slate-200 shrink-0">
            <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
              {t("jsonViewer.jsonSource")}
            </span>
          </div>
          <JsonCodeEditor value={jsonInput} onChange={setJsonInput} />
        </div>

        {/* JSONPath Expression - fixed height */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4 shrink-0">
          <label className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider mb-2">
            <span className="text-slate-500">{t("jsonViewer.jsonPathExpression")}</span>
            {result.queryError && (
              <span className="text-red-500 normal-case">{t("jsonViewer.invalidSyntax")}</span>
            )}
          </label>
          <input
            type="text"
            className={`w-full p-3 font-mono text-sm border rounded-lg focus:ring-2 outline-none transition-all shadow-sm ${
              result.queryError
                ? "border-red-300 focus:ring-red-500 focus:border-red-500"
                : "border-slate-200 focus:ring-indigo-500 focus:border-indigo-500"
            }`}
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder={t("jsonViewer.placeholder")}
          />
        </div>
      </div>

      {/* Right visualisation panel - 70% */}
      <div className="w-[70%] bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col overflow-hidden min-h-0">
        <div className="bg-slate-50 px-4 py-2 border-b border-slate-200 flex justify-between items-center shrink-0">
          <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
            {t("jsonViewer.visualisedResult")}
          </span>
          <div className="flex items-center gap-2">
            <span className="text-xs font-medium px-2 py-0.5 bg-indigo-100 text-indigo-700 rounded-full">
              {result.matchedPaths.length} {t("jsonViewer.matches")}
            </span>
            <button
              onClick={copyAsCsv}
              disabled={result.matchedValues.length === 0 || !!result.error}
              className="text-xs font-medium px-3 py-1 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 disabled:bg-slate-300 disabled:cursor-not-allowed transition-colours"
            >
              {copied ? t("jsonViewer.copied") : t("jsonViewer.copyAsCsv")}
            </button>
          </div>
        </div>

        <div className="flex-1 p-6 overflow-auto font-mono text-sm leading-relaxed min-h-0">
          {result.error && (
            <div className="bg-red-50 text-red-600 p-4 rounded-lg border border-red-100 text-xs mb-4">
              <strong>{t("jsonViewer.error")}</strong> {result.error}
            </div>
          )}
          {result.parsed && (
            <JsonTreeNode
              data={result.parsed}
              path={["$"]}
              matchedPaths={result.matchedPaths}
            />
          )}
        </div>
      </div>
    </div>
  )
}