import type { InsightProseItemUi, PersonalizedAdviceUi } from "@/lib/fortune";

type Props = {
  topics: InsightProseItemUi[] | null | undefined;
  personalizedAdvice?: PersonalizedAdviceUi | null;
  onOpenLuancung?: () => void;
  onOpenLaSo?: () => void;
};

export function TuViChuyenDeInsightPanel({ topics, personalizedAdvice, onOpenLuancung, onOpenLaSo }: Props) {
  const list = topics?.length === 7 ? topics : null;
  const pa = personalizedAdvice?.summary?.trim() ? personalizedAdvice : null;

  return (
    <section
      className="relative mx-auto max-w-3xl 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 đề — luận deterministic"
    >
      <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]">
          Insight theo chủ đề
        </h2>
        <p className="mt-3 max-w-2xl font-sans text-sm leading-relaxed text-slate-400">
          Bảy luận ghép từ nghĩa cung, chính tinh và rule tại cung trong thư viện seed — deterministic, không gọi AI.
        </p>
      </header>

      <div className="relative px-5 py-6 sm:px-7 sm:py-7">
        {!list ?
          <p className="font-sans text-[13px] leading-relaxed text-slate-500">Chưa có dữ liệu chuyên đề.</p>
        : <ul className="space-y-10">
            {list.map((t) => (
              <li key={t.topic} className="border-b border-[#d4af37]/10 pb-10 last:border-b-0 last:pb-0">
                <h3 className="font-ctkp-serif text-lg tracking-wide text-[#f0e6bc]">{t.title}</h3>
                <p className="mt-4 whitespace-pre-wrap font-sans text-[13px] leading-[1.75] text-slate-300">{t.prose}</p>
                {t.warnings.length > 0 ?
                  <p className="mt-3 font-sans text-[11px] leading-relaxed text-slate-600">{t.warnings.join(" · ")}</p>
                : null}
              </li>
            ))}
          </ul>
        }
      </div>

      {pa ?
        <div className="relative border-t border-[#d4af37]/12 px-5 py-6 sm:px-7 sm:py-8">
          <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.28em] text-[#d4af37]/72">Hành động</p>
          <h3 className="ctkp-tuvi-text-title-soft mt-2 font-ctkp-serif text-xl tracking-[0.04em] text-[#f0e6bc]">
            Hành động đề xuất
          </h3>
          <p className="mt-4 font-sans text-[13px] leading-relaxed text-slate-300">{pa.summary}</p>

          <h4 className="mt-6 font-ctkp-serif text-xs uppercase tracking-[0.2em] text-[#d4af37]/65">Ưu tiên</h4>
          <ol className="mt-2 list-decimal space-y-1.5 pl-5 font-sans text-[13px] leading-relaxed text-slate-300">
            {pa.priorities.map((p, i) => (
              <li key={`p-${i}`}>{p}</li>
            ))}
          </ol>

          <h4 className="mt-6 font-ctkp-serif text-xs uppercase tracking-[0.2em] text-[#d4af37]/65">Nên làm</h4>
          <ul className="mt-2 list-disc space-y-1.5 pl-5 font-sans text-[13px] leading-relaxed text-slate-300">
            {pa.doList.map((p, i) => (
              <li key={`d-${i}`}>{p}</li>
            ))}
          </ul>

          <h4 className="mt-6 font-ctkp-serif text-xs uppercase tracking-[0.2em] text-[#d4af37]/65">Tránh</h4>
          <ul className="mt-2 list-disc space-y-1.5 pl-5 font-sans text-[13px] leading-relaxed text-slate-300">
            {pa.dontList.map((p, i) => (
              <li key={`x-${i}`}>{p}</li>
            ))}
          </ul>

          {pa.riskAlerts.length > 0 ?
            <>
              <h4 className="mt-6 font-ctkp-serif text-xs uppercase tracking-[0.2em] text-[#d4af37]/65">Cảnh báo rủi ro</h4>
              <ul className="mt-2 list-disc space-y-1.5 pl-5 font-sans text-[12px] leading-relaxed text-slate-500">
                {pa.riskAlerts.map((p, i) => (
                  <li key={`r-${i}`}>{p}</li>
                ))}
              </ul>
            </>
          : null}

          {pa.opportunityHints.length > 0 ?
            <>
              <h4 className="mt-6 font-ctkp-serif text-xs uppercase tracking-[0.2em] text-[#d4af37]/65">Cơ hội — điểm tựa</h4>
              <ul className="mt-2 list-disc space-y-1.5 pl-5 font-sans text-[12px] leading-relaxed text-slate-400">
                {pa.opportunityHints.map((p, i) => (
                  <li key={`o-${i}`}>{p}</li>
                ))}
              </ul>
            </>
          : null}
        </div>
      : null}

      <p className="relative border-t border-[#d4af37]/10 px-5 py-4 font-sans text-[11px] leading-relaxed text-slate-500 sm:px-7">
        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>
  );
}