import { ChevronDown } from "lucide-react";
import { type ReactNode, useId, useState } from "react";
import { CHEVRON_CLASS, Disclosure } from "~/components/agentui/disclosure.tsx";
import { type KvItem, KvList } from "~/components/console/kv-list.tsx";
import { useUiPrefs } from "~/lib/ui-prefs.ts";
import { cn } from "~/lib/utils.ts";

/**
 * 技术信息折叠区:ID、hash、trace、token 数、耗时、模型 ID、原始字段、内部状态码都放这里,默认收起
 * (设置 → 界面可改为默认展开)。值为空的项不显示;全部为空时整块不渲染。
 */
export function TechInfo({
  items,
  children,
  title = "技术信息",
  className,
  columns = 2,
}: {
  items?: (KvItem | null | false | undefined)[];
  children?: ReactNode;
  title?: string;
  className?: string;
  columns?: 1 | 2;
}) {
  const prefs = useUiPrefs();
  const [override, setOverride] = useState<boolean | null>(null);
  const open = override ?? prefs.techInfoExpanded;
  const id = useId();
  const rows = (items ?? []).filter(
    (it): it is KvItem => !!it && it.value !== null && it.value !== undefined && it.value !== "",
  );
  if (!rows.length && !children) return null;
  return (
    <div className={cn("min-w-0", className)} data-slot="tech-info">
      <button
        type="button"
        aria-expanded={open}
        aria-controls={id}
        onClick={() => setOverride(!open)}
        className="inline-flex items-center gap-1 rounded-md py-1 text-meta text-muted-foreground transition-colors duration-micro hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none"
      >
        {title}
        <ChevronDown className={cn("size-3.5", CHEVRON_CLASS, open && "rotate-180")} aria-hidden />
      </button>
      <Disclosure id={id} open={open}>
        <div className="grid gap-3 pt-2 pb-1">
          {rows.length ? <KvList items={rows.map((r) => ({ mono: true, ...r }))} columns={columns} /> : null}
          {children}
        </div>
      </Disclosure>
    </div>
  );
}