"use client";

import type { TuViPremiumDeepReportV1 } from "@/lib/tuvi-premium-report.v1";

export type TuViPremiumDeepReportOutlineProps = {
  readonly report: TuViPremiumDeepReportV1;
  className?: string;
};

/** Bản xem trước mục lục luận chuyên sâu — không thanh toán, không mở toàn văn. */
export function TuViPremiumDeepReportOutline({ report, className }: TuViPremiumDeepReportOutlineProps) {
  return (
    <section
      aria-label="Bản luận sâu sẽ gồm những phần nào (xem trước)"
      className={`rounded-lg border border-[color:rgba(90,72,52,0.28)] bg-[rgba(12,14,22,0.45)] px-4 py-5 sm:px-6 ${className ?? ""}`}
    >
      <h3 className="text-center font-ctkp-serif text-[0.82rem] font-semibold uppercase tracking-[0.14em] text-[color:var(--ctkp-narrative-caption)]">
        Bản luận sâu sẽ gồm những phần này
      </h3>
      <p className="mx-auto mt-3 max-w-prose text-center font-ctkp-serif text-[13px] leading-[1.75] text-[color:var(--ctkp-narrative-caption)] text-pretty sm:text-[14px]">
        Đây là khung mục lục — mỗi dòng một câu xem trước từ dữ liệu phiên hiện tại. Các mục đánh dấu «Khóa · mở rộng» sẽ đào
        sâu hơn khi gói chuyên sâu mở (không cam kết thời điểm; chưa thu phí trong beta).
      </p>
      <ul className="mt-5 space-y-4">
        {report.sections.map((sec) => (
          <li
            key={sec.kind}
            className="border-b border-[color:rgba(90,72,52,0.12)] pb-4 last:border-b-0 last:pb-0"
          >
            <div className="flex flex-wrap items-start justify-between gap-2">
              <span className="font-ctkp-serif text-[14px] font-semibold text-[color:var(--ctkp-narrative-ink-strong)] sm:text-[15px]">
                {sec.title}
              </span>
              {sec.premiumExpandsBeyondFree ?
                <span
                  className="inline-flex shrink-0 items-center gap-1 rounded border border-amber-800/35 bg-amber-950/25 px-2 py-0.5 font-sans text-[9px] font-medium uppercase tracking-[0.12em] text-amber-100/90"
                  title="Dự kiến sâu hơn bản công khai hiện tại"
                >
                  Khóa · mở rộng
                </span>
              : <span className="shrink-0 font-sans text-[9px] uppercase tracking-[0.12em] text-[color:var(--ctkp-narrative-caption)]">
                  Tài khoản
                </span>}
            </div>
            <p className="mt-2 font-ctkp-serif text-[13px] leading-[1.8] text-[color:var(--ctkp-narrative-ink)] text-pretty sm:text-[14px]">
              {sec.previewSentence}
            </p>
          </li>
        ))}
      </ul>
    </section>
  );
}