"use client";

import { useId, useState, type ReactNode } from "react";
import { Bookmark, ChevronDown, ChevronRight, PenLine } from "lucide-react";

/** หุบ/กางกลุ่มรายการ (Bookmark/Annotation) ในหน้าสรุป — client component ตัวเดียว
 *  ของหน้า: เก็บแค่ state หุบ/กางต่อบล็อก เริ่มกางไว้เสมอ (เปิดหน้าสรุปครั้งแรกเห็น
 *  ครบ ผู้ใช้พับเฉพาะกลุ่มที่ไม่สนใจ) — รายการ (children) ส่งมาจาก server component
 *  ได้ตรง ๆ และเยื้องเข้า (pl-5) ให้หัวข้อกับรายการไม่ชิดเส้นซ้ายเดียวกัน */
const HEADS = {
  bookmark: { label: "Bookmark", Icon: Bookmark, iconCls: "text-amber-500" },
  annotation: { label: "Annotation", Icon: PenLine, iconCls: "text-slate-400" },
} as const;

export default function CollapsibleBlock({
  kind,
  count,
  children,
}: {
  kind: keyof typeof HEADS;
  count: number;
  children: ReactNode;
}) {
  const [open, setOpen] = useState(true);
  // design review 2026-09-17 L2: aria-controls ชี้ id ของก้อนเนื้อหา (useId
  // กันชนกันระหว่างหลายหน้าเอกสารที่ render บล็อกนี้ซ้ำ)
  const contentId = useId();
  const { label, Icon, iconCls } = HEADS[kind];
  return (
    <div>
      {/* h3 ครอบ button = disclosure pattern มาตรฐาน (heading level คงเดิม) */}
      <h3>
        <button
          type="button"
          aria-expanded={open}
          aria-controls={contentId}
          onClick={() => setOpen((v) => !v)}
          className="flex w-full items-center gap-1.5 rounded-md py-1.5 text-left text-xs font-semibold text-slate-500 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1"
        >
          {open ? (
            <ChevronDown aria-hidden className="h-3.5 w-3.5 shrink-0 text-slate-400" />
          ) : (
            <ChevronRight aria-hidden className="h-3.5 w-3.5 shrink-0 text-slate-400" />
          )}
          <Icon aria-hidden className={`h-3.5 w-3.5 shrink-0 ${iconCls}`} />
          {label}
          <span className="font-normal tabular-nums">({count})</span>
          <span aria-hidden className="ml-1 h-px min-w-4 flex-1 bg-slate-100" />
        </button>
      </h3>
      {open && (
        <div id={contentId} className="pl-5">
          {children}
        </div>
      )}
    </div>
  );
}