import type { ReactNode } from "react";
import { StatusBadge } from "~/components/console/status-badge.tsx";
import { cn } from "~/lib/utils.ts";

/** 分区内锚点 id:`<分区>-<节>`,URL hash 写作 `#<分区>/<节>` */
export const anchorId = (section: string, anchor: string) => `settings-${section}-${anchor}`;

/** 设置分区里的一节:标题 + 一句说明 + 未保存提示 + 内容;带锚点 */
export function SettingsBlock({
  section,
  anchor,
  title,
  description,
  dirty,
  actions,
  plain,
  children,
}: {
  section: string;
  anchor: string;
  title: string;
  description?: ReactNode;
  dirty?: boolean;
  actions?: ReactNode;
  /** 不包卡片(内容自带 DataTable 卡片时用) */
  plain?: boolean;
  children: ReactNode;
}) {
  const id = anchorId(section, anchor);
  return (
    <section id={id} aria-labelledby={`${id}-title`} className="scroll-mt-24">
      <div className="mb-3 flex flex-wrap items-end justify-between gap-3">
        <div className="min-w-0">
          <h2 id={`${id}-title`} className="flex items-center gap-2 text-body font-semibold text-foreground">
            {title}
            {dirty ? <StatusBadge tone="warning">未保存</StatusBadge> : null}
          </h2>
          {description ? <p className="mt-0.5 max-w-2xl text-caption text-muted-foreground">{description}</p> : null}
        </div>
        {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
      </div>
      <div className={cn(!plain && "pg-slab min-w-0 rounded-xl p-5")}>{children}</div>
    </section>
  );
}