import { useState } from "react";
import type { T } from "../lib/i18n";

interface Props {
  t: T;
  vars: Record<string, unknown>;
}

function describe(t: T, v: unknown): string {
  if (Array.isArray(v)) return t("var_list", { n: v.length });
  if (v && typeof v === "object") return t("var_object");
  if (typeof v === "string") return t("var_text", { n: v.length });
  return typeof v;
}

export function VarsPanel({ t, vars }: Props) {
  const [open, setOpen] = useState<Set<string>>(new Set());
  const names = Object.keys(vars ?? {});

  return (
    <div className="panel">
      <strong>{t("variables")}</strong>
      <p className="hint">{t("vars_hint")}</p>
      {names.length === 0 && <p className="hint">{t("no_vars")}</p>}
      {names.map((name) => {
        const isOpen = open.has(name);
        const val = vars[name];
        return (
          <div className="var-row" key={name}>
            <div
              className="var-head"
              onClick={() =>
                setOpen((prev) => {
                  const n = new Set(prev);
                  n.has(name) ? n.delete(name) : n.add(name);
                  return n;
                })
              }
            >
              {name} <span className="hint">({describe(t, val)})</span>
            </div>
            {isOpen && (
              <pre className="var-value">{typeof val === "string" ? val : JSON.stringify(val, null, 2)}</pre>
            )}
          </div>
        );
      })}
    </div>
  );
}