"use client";

import Link from "next/link";

import { sectionHref } from "@/app/(main)/apps/[appId]/settings/nav";
import { useAppVault } from "@/app/(main)/vault/use-app-vault";

import { SettingHeader } from "./settings-primitives";

/** 会话里只看这个应用拿到哪些密钥与变量; 增删改在应用设置里, 所有会话共用那一份. */
export const AppVaultSummary = ({ appId }: { appId: string }) => {
  const { appItems, inherited } = useAppVault(appId);
  const effective = [
    ...appItems.map((item) => ({ item, label: "本应用" })),
    ...inherited.map((item) => ({ item, label: "账户级·仅沙箱" })),
  ];

  return (
    <>
      <SettingHeader
        compact
        align="center"
        title="密钥与变量"
        description="按应用保存，这个应用的所有会话共用"
        right={
          <Link
            href={sectionHref(appId, "vault")}
            className="text-[13px] text-primary underline underline-offset-2"
          >
            管理
          </Link>
        }
      />
      {effective.length > 0 && (
        <ul className="mt-2 space-y-1">
          {effective.map(({ item, label }) => (
            <li key={item.id} className="flex items-center justify-between gap-2 text-[12px]">
              <span className="truncate font-mono text-foreground">{item.name}</span>
              <span className="shrink-0 rounded border border-border px-1 py-px text-[10px] text-muted-foreground">
                {label}
              </span>
            </li>
          ))}
        </ul>
      )}
    </>
  );
};
