export type TuViChuyenDeTopicId = "career" | "wealth" | "love";

type TopicSpec = {
  id: TuViChuyenDeTopicId;
  title: string;
  summary: string;
};

function clipSummary(s: string, max: number): string {
  const t = s.replace(/\s+/g, " ").trim();
  if (!t) return "";
  if (t.length <= max) return t;
  return `${t.slice(0, max - 1).trim()}…`;
}

const FALLBACK_SUMMARY_VI: Record<TuViChuyenDeTopicId, string> = {
  career:
    "Khung chuyên đề neo vào Quan lộc và các ô công danh trên lá — xem tiểu vận năm và đại vận để nắm bối cảnh dài ngắn trước khi đào sâu.",
  wealth:
    "Tài lộc gắn ô Tài bạch và dòng tiền trong các vòng vận; luận theo lá hiện tại là điểm xuất phát ổn trước khi có lớp chuyên sâu hơn.",
  love:
    "Nhân duyên và gia đạo đối chiếu Phu thê, Phụ mẫu, Tử tức — chuyên đề giúp tập trung một chủ đề thay vì đọc rải rác.",
};

type Props = {
  /** Đoạn rút từ luận lá (nếu có); thiếu thì dùng bản dự phòng có cấu trúc. */
  summaries?: Partial<Record<TuViChuyenDeTopicId, string>>;
  onDeepDive?: (topic: TuViChuyenDeTopicId) => void;
  /** Mở tab Luận cung để bám ô trực tiếp. */
  onOpenLuancung?: () => void;
  onOpenLaSo?: () => void;
};

export function TuViChuyenDeHub({ summaries = {}, onDeepDive, onOpenLuancung, onOpenLaSo }: Props) {
  const topics: TopicSpec[] = [
    {
      id: "career",
      title: "Công danh sự nghiệp",
      summary: clipSummary(summaries.career ?? "", 220) || FALLBACK_SUMMARY_VI.career,
    },
    {
      id: "wealth",
      title: "Tài lộc tiền bạc",
      summary: clipSummary(summaries.wealth ?? "", 220) || FALLBACK_SUMMARY_VI.wealth,
    },
    {
      id: "love",
      title: "Tình cảm gia đạo",
      summary: clipSummary(summaries.love ?? "", 220) || FALLBACK_SUMMARY_VI.love,
    },
  ];

  return (
    <section
      className="relative overflow-hidden rounded-2xl border border-[var(--ctkp-border-gold-strong)] bg-[linear-gradient(165deg,rgba(14,18,32,0.96),rgba(5,7,14,0.99))] shadow-[inset_0_1px_0_rgba(212,175,55,0.1),0_24px_48px_rgba(0,0,0,0.42)]"
      aria-label="Chuyên đề — đào sâu có cấu trúc"
    >
      <div
        className="pointer-events-none absolute inset-0 opacity-[0.06]"
        style={{
          backgroundImage:
            "radial-gradient(ellipse 55% 40% at 75% 0%, rgba(90,70,140,0.28), transparent 50%), radial-gradient(ellipse 45% 36% at 12% 100%, rgba(201,161,93,0.18), transparent 52%)",
        }}
        aria-hidden
      />

      <header className="relative border-b border-[#d4af37]/12 px-5 py-5 sm:px-7 sm:py-6">
        <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.32em] text-[#d4af37]/72">Chuyên đề</p>
        <h2 className="ctkp-tuvi-text-title-soft mt-2 font-ctkp-serif text-2xl tracking-[0.05em] sm:text-[26px]">
          Đào sâu theo chủ đề
        </h2>
        <p className="mt-3 max-w-2xl font-sans text-sm leading-relaxed text-slate-400">
          Ba trụ chính bám lá đã ghi và luận rule — hữu ích ngay cả khi lớp AI chuyên sâu đang mở rộng. Mỗi thẻ có lối vào
          luận chi tiết và gợi bước tiếp.
        </p>
      </header>

      <ul className="relative grid gap-4 px-5 py-6 sm:grid-cols-1 sm:px-7 md:grid-cols-3 md:gap-5 md:py-7">
        {topics.map((t, i) => (
          <li
            key={t.id}
            className="group flex flex-col rounded-xl border border-[#d4af37]/14 bg-[linear-gradient(165deg,rgba(22,26,42,0.94),rgba(10,12,22,0.97))] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] transition-[border-color,box-shadow] duration-300 hover:border-[#d4af37]/28 hover:shadow-[0_12px_32px_rgba(0,0,0,0.28)]"
          >
            <span
              className="font-ctkp-serif text-[10px] tabular-nums text-[#d4af37]/55"
              aria-hidden
            >{`0${i + 1}`}</span>
            <h3 className="mt-1 font-ctkp-serif text-lg leading-snug tracking-wide text-[#f0e6bc]">{t.title}</h3>
            <p className="mt-3 grow font-sans text-[13px] leading-relaxed text-slate-400">{t.summary}</p>
            <div className="mt-5 flex flex-col gap-2 sm:flex-col">
              <button
                type="button"
                onClick={() => onDeepDive?.(t.id)}
                className="ctkp-tuvi-interactive w-full rounded-lg border border-[#d4af37]/38 bg-[#d4af37]/14 py-2.5 font-ctkp-serif text-[11px] uppercase tracking-[0.14em] text-[#f5ebd6] shadow-[inset_0_1px_0_rgba(212,175,55,0.12)] transition-[transform,background] duration-200 hover:-translate-y-0.5 hover:bg-[#d4af37]/22 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#d4af37]/45"
              >
                Mở luận chuyên sâu
              </button>
              {onOpenLuancung ?
                <button
                  type="button"
                  onClick={onOpenLuancung}
                  className="w-full rounded-lg border border-white/10 bg-black/25 py-2 font-sans text-[12px] text-slate-400 transition-colors hover:border-[#d4af37]/22 hover:text-slate-300"
                >
                  Xem theo cung trên lá
                </button>
              : null}
            </div>
          </li>
        ))}
      </ul>

      <p className="relative border-t border-[#d4af37]/10 px-5 py-4 font-sans text-[11px] leading-relaxed text-slate-500 sm:px-7">
        Luận chữ trong thẻ lấy từ khung đọc đã lưu (rút gọn). Cần bối cảnh đầy đủ:{" "}
        {onOpenLaSo ?
          <button
            type="button"
            onClick={onOpenLaSo}
            className="font-ctkp-serif text-[#e8d9a8] underline underline-offset-2 decoration-[#d4af37]/45"
          >
            Lá số
          </button>
        : <span className="text-[#e8d9a8]/88">Lá số</span>}
        ,{" "}
        {onOpenLuancung ?
          <button
            type="button"
            onClick={onOpenLuancung}
            className="font-ctkp-serif text-[#e8d9a8] underline underline-offset-2 decoration-[#d4af37]/45"
          >
            Luận cung
          </button>
        : <span className="text-[#e8d9a8]/88">Luận cung</span>}
        , hoặc các tab Đại / Tiểu / Nguyệt / Nhật vận.
      </p>
    </section>
  );
}