import type { LayeredSectionLike, TimingMomentumExtractV1 } from "@/lib/tuvi-overview-visual-helpers";
import { extractTimingMomentumFromLayered } from "@/lib/tuvi-overview-visual-helpers";
import {
  TUVI_VISUAL_TIMING_LEDE,
  TUVI_VISUAL_TIMING_RUBRIC_DAI,
  TUVI_VISUAL_TIMING_RUBRIC_NAM,
  TUVI_VISUAL_TIMING_RUBRIC_TIM_M,
  TUVI_VISUAL_TIMING_RUBRIC_TIM_S,
  TUVI_VISUAL_TIMING_TITLE,
} from "@/lib/tuvi-overview-visual-copy.v1";

type Props = {
  readonly layeredSections: readonly LayeredSectionLike[] | undefined;
  readonly className?: string;
};

function Segment({
  title,
  subtitle,
  body,
}: {
  readonly title: string;
  readonly subtitle: string;
  readonly body: string;
}) {
  if (!body.trim()) return null;
  return (
    <div className="w-full min-w-0 max-w-full flex-1 rounded-sm border border-[color:rgba(148,128,98,0.42)] bg-[rgba(255,252,245,0.42)] px-2.5 py-2 sm:min-w-[min(100%,11rem)] sm:flex-[1_1_40%] lg:flex-[1_1_22%]">
      <p className="font-ctkp-serif text-[10px] font-semibold tracking-[0.08em] text-[color:var(--ctkp-narrative-ink-strong)]">
        {title}
      </p>
      <p className="ctkp-narrative-rubric mt-0.5 font-ctkp-serif text-[9px] font-medium uppercase tracking-[0.14em] text-[color:var(--ctkp-narrative-caption)] opacity-90">
        {subtitle}
      </p>
      <p className="mt-1.5 break-words font-ctkp-serif text-[10px] leading-relaxed text-[color:var(--ctkp-narrative-ink-soft)] sm:text-[11px]">
        {body}
      </p>
    </div>
  );
}

export function TuViTimingMomentumStrip({ layeredSections, className }: Props) {
  const data: TimingMomentumExtractV1 | null = extractTimingMomentumFromLayered(layeredSections);
  if (!data) return null;
  const hasAny =
    data.daiVanSnippet.trim() ||
    data.annualSnippet.trim() ||
    data.tightMonthsSnippet.trim() ||
    data.smoothMonthsSnippet.trim();
  if (!hasAny) return null;

  return (
    <aside
      data-tuvi-visual="timing"
      className={`ctkp-narrative-aside-panel ctkp-tuvi-visual-panel max-w-full min-w-0 overflow-hidden print:break-inside-avoid print:max-w-full px-3 py-3 sm:px-4 ${className ?? ""}`}
      aria-label="Tham chiếu vận trình"
    >
      <h4 className="font-ctkp-serif text-[11px] font-semibold tracking-[0.1em] text-[color:var(--ctkp-narrative-ink-strong)] sm:text-[12px]">
        {TUVI_VISUAL_TIMING_TITLE}
      </h4>
      <p className="mt-1.5 font-ctkp-serif text-[10px] leading-relaxed text-[color:var(--ctkp-narrative-caption)] sm:text-[11px]">
        {TUVI_VISUAL_TIMING_LEDE}
      </p>
      <div className="mt-3 flex w-full min-w-0 max-w-full flex-col gap-2 sm:flex-row sm:flex-wrap print:grid print:grid-cols-2 print:gap-2 lg:print:grid-cols-4">
        <Segment title="Đại vận" subtitle={TUVI_VISUAL_TIMING_RUBRIC_DAI} body={data.daiVanSnippet} />
        <Segment title="Năm xem" subtitle={TUVI_VISUAL_TIMING_RUBRIC_NAM} body={data.annualSnippet} />
        <Segment title="Tháng cần giữ nhịp" subtitle={TUVI_VISUAL_TIMING_RUBRIC_TIM_M} body={data.tightMonthsSnippet} />
        <Segment title="Tháng thuận tiến" subtitle={TUVI_VISUAL_TIMING_RUBRIC_TIM_S} body={data.smoothMonthsSnippet} />
      </div>
    </aside>
  );
}
