import { AgentShortcutsHelp } from "~/components/console/agent-launcher.tsx";
import { Switch } from "~/components/ui/switch.tsx";
import { setUiPref, useUiPrefs } from "~/lib/ui-prefs.ts";
import { anchorId, SettingsBlock } from "./settings-block.tsx";

// 界面:本机显示偏好(存浏览器,不进 settings 表)与快捷键说明

export function InterfaceSection() {
  return (
    <div className="grid grid-cols-1 gap-8">
      <DisplayBlock />
      {/* 快捷键说明自带标题,只包卡片与锚点 */}
      <section id={anchorId("interface", "shortcuts")} className="pg-slab min-w-0 scroll-mt-20 rounded-xl p-5 sm:p-6">
        <AgentShortcutsHelp />
      </section>
    </div>
  );
}

function DisplayBlock() {
  const prefs = useUiPrefs();
  return (
    <SettingsBlock section="interface" anchor="display" title="显示">
      <div className="flex items-start justify-between gap-4">
        <div className="min-w-0">
          <p className="text-sm font-medium text-foreground" id="ui-techinfo-label">
            默认展开技术信息
          </p>
          <p className="mt-1 text-caption text-muted-foreground">
            ID、hash、token 数、耗时和原始错误码平时收在「技术信息」里。开启后各页默认展开。
          </p>
        </div>
        <Switch
          id="f-ui.techInfoExpanded"
          aria-labelledby="ui-techinfo-label"
          checked={prefs.techInfoExpanded}
          onCheckedChange={(v) => setUiPref("techInfoExpanded", v)}
        />
      </div>
    </SettingsBlock>
  );
}