"use client";

import { useCallback, useEffect, useMemo, useState } from "react";

import { CtkpResultPageNav } from "@/components/CtkpResultPageNav";
import {
  TuViA4OverviewSection,
  TuViChartBoard,
  TuViChartTitleBar,
  TuViChuyenDeInsightPanel,
  TuViInterpretFocusOverlay,
  TuViInterpretPanel,
  TuViInterpretTabStrip,
  type TuViInterpretAiDeepDive,
  type TuViInterpretNormalized,
  type TuViInterpretPanelSelectedPalace,
  type TuViInterpretPanelTabId,
  TuViDaiVanPanel,
  TuViLuanCungSeedAccordion,
  TuViLuanCungWorkspace,
  TuViNguyetVanPanel,
  TuViNhatVanPanel,
  TuViSummaryBar,
  TuViTieuVanPanel,
  TuViTopTabs,
  type TuViSummaryItem,
  type TuViTopTabKey,
} from "@/components/tu-vi";
import type { FortuneReading } from "@/lib/fortune";
import type { TuViStoredPayload } from "@/lib/tuvi";
import { buildA4OverviewInterpretation } from "@/lib/tuvi-a4-overview-interpretation";
import {
  buildTuViPremiumTeaserV1,
  tuViA4EligibleForPremiumTeaserV1,
} from "@/lib/tuvi-premium-teaser.v1";
import { resolveTuViPremiumDeepReportForUi } from "@/lib/tuvi-premium-report.v1";
import {
  buildTuViWealthInterpretTabBody,
  mapApiTuViToChartViewModel,
  splitPalaceBranchDisplay,
  type TuViChartViewModel,
} from "@/lib/tuvi-chart-view-model";
import { clampInterpretTabToPalace } from "@/lib/tuvi-palace-section-priority";
import { buildPalaceInterpretationView } from "@/lib/tuvi-palace-interpret-view-model";
import { parseTuViInterpretationContext, parseTuViInterpretationDebug, parseTuViInterpretationProse } from "@/lib/tuvi-interpretation-context";
import { isTuViInterpretationProseDebugPanelEnabled } from "@/lib/tuvi-interpretation-debug";
import { mapTuViFortuneFromPayload } from "@/lib/tuvi-fortune-view-model";
import { pickTuViLaSoHousesPayload } from "@/lib/tuvi-result-types";
import { TUVI_PALACE_KEYS } from "@/lib/tuvi-palace-interpret-sections-config";
import { viewingYearFromStoredPayload } from "@/lib/tu-vi-stored-payload";

const calendarLabel: Record<string, string> = {
  solar: "Dương lịch",
  lunar: "Âm lịch",
};

function vmSec(vm: TuViChartViewModel, key: string) {
  return vm.summarySections.find((s) => s.key === key);
}

export type TuViStoredReadonlyCanvasProps = {
  data: TuViStoredPayload;
  savedLabel?: string;
  savedAtDisplay?: string;
  /** Account saved-reading row id — forwards premium interest capture when set. */
  premiumSavedReadingId?: string | null;
};

export function TuViStoredReadonlyCanvas({
  data,
  savedLabel = "Lá số đã lưu",
  savedAtDisplay,
  premiumSavedReadingId = null,
}: TuViStoredReadonlyCanvasProps) {
  const proseDebugUi = isTuViInterpretationProseDebugPanelEnabled();
  const rawSeedDebug = false;

  const [topTab, setTopTab] = useState<TuViTopTabKey>("la-so");
  const [interpretTab, setInterpretTab] = useState<TuViInterpretPanelTabId>("overview");
  const [interpretOverlayOpen, setInterpretOverlayOpen] = useState(false);
  const [selectedPalaceKey, setSelectedPalaceKey] = useState("menh");

  const vm = useMemo(() => mapApiTuViToChartViewModel(data), [data]);
  const fortuneViewModel = useMemo(() => mapTuViFortuneFromPayload(data, vm), [data, vm]);
  const viewingYear = useMemo(() => viewingYearFromStoredPayload(data), [data]);

  const scrollToChartBlock = useCallback(() => {
    if (typeof document === "undefined") return;
    if (topTab === "luan-cung") {
      document.getElementById("tuvi-luan-cung-root")?.scrollIntoView({ behavior: "smooth", block: "start" });
    } else {
      document.getElementById("tuvi-chart-board-anchor")?.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  }, [topTab]);

  const interpretAiDeepDive = useMemo(
    (): TuViInterpretAiDeepDive => ({
      available: false,
      onRequest: () => {},
      unavailableHint: "Luận AI sâu không bật trên trang lá đã lưu trong tài khoản.",
    }),
    [],
  );

  useEffect(() => {
    if (!vm.palaces.some((p) => p.key === selectedPalaceKey)) {
      queueMicrotask(() => setSelectedPalaceKey("menh"));
    }
  }, [vm, selectedPalaceKey]);

  useEffect(() => {
    const key = vm.palaces.some((p) => p.key === selectedPalaceKey) ? selectedPalaceKey : "menh";
    setInterpretTab((tab) => clampInterpretTabToPalace(key, tab));
  }, [selectedPalaceKey, vm]);

  useEffect(() => {
    setInterpretOverlayOpen(false);
  }, [topTab]);

  useEffect(() => {
    if (topTab !== "luan-cung") return;
    let cancelled = false;
    const id1 = window.requestAnimationFrame(() => {
      window.requestAnimationFrame(() => {
        if (cancelled) return;
        if (!window.matchMedia("(max-width: 1023px)").matches) return;
        document.getElementById("tuvi-luan-cung-root")?.scrollIntoView({
          block: "start",
          behavior: "auto",
        });
      });
    });
    return () => {
      cancelled = true;
      cancelAnimationFrame(id1);
    };
  }, [topTab, selectedPalaceKey]);

  const { source, ctkp_history_warning_v1 } = data;
  const generationPartial = data.result.ctkp_generation_partial_v1;

  const seedInterpretContext = parseTuViInterpretationContext(data.result.interpretationContext);
  const seedInterpretProse = parseTuViInterpretationProse(data.result.interpretationProse);
  const housesForOverview = pickTuViLaSoHousesPayload(data.result);
  const a4Overview = buildA4OverviewInterpretation(
    {
      palaceProses: seedInterpretProse?.palaceProses ?? null,
      chartOverviewOnePage: seedInterpretProse?.chartOverviewOnePage ?? null,
    },
    housesForOverview,
  );
  const premiumTeaser =
    a4Overview &&
    tuViA4EligibleForPremiumTeaserV1({
      wordCount: a4Overview.wordCount,
      overviewSource: a4Overview.overviewSource,
      body: a4Overview.body,
      sectionsCount: a4Overview.sections.length,
    }) ?
      buildTuViPremiumTeaserV1({
        viewingYearSolar: viewingYear,
        chartOverviewOnePage: seedInterpretProse?.chartOverviewOnePage ?? null,
      })
    : null;
  const premiumDeepReport = resolveTuViPremiumDeepReportForUi(data.result as Record<string, unknown>);
  const useServerOverviewBody = a4Overview?.overviewSource === "server";
  const interpretationDebugBlock = parseTuViInterpretationDebug(data.result.interpretationDebug);
  const bodyPalaceKeyAccordion = vm.palaces.find((p) => p.bodyMarker)?.key ?? null;
  const pf = vm.profile;
  const readingTitle = vmSec(vm, "reading-title")?.content ?? "—";
  const receivedLabel = vmSec(vm, "received-at")?.content ?? "—";
  const textSource = vmSec(vm, "text-source")?.content as FortuneReading["text_source"] | undefined;
  const starPlacementBlurb = vmSec(vm, "star-placement-phase1")?.content;
  const canhKhacChiTiet = vmSec(vm, "canh-khac-chi-tiet")?.content;
  const prepSummary = vmSec(vm, "prep-summary")?.content;
  const openingProvenance = vmSec(vm, "opening-provenance")?.content ?? "—";
  const readingOpening = vmSec(vm, "reading-opening")?.content ?? "";
  const tongQuan = vmSec(vm, "reading-tong-quan")?.content;
  const tinhCach = vmSec(vm, "reading-tinh-cach")?.content;
  const congViec = vmSec(vm, "reading-cong-viec")?.content;
  const tinhCam = vmSec(vm, "reading-tinh-cam")?.content;
  const loiKhuyenProse = vmSec(vm, "reading-loi-khuyen")?.content?.trim() ?? "";
  const versesBlock = vmSec(vm, "reading-verses")?.content ?? "";
  const versesSafe = versesBlock
    ? versesBlock.split("\n").map((l) => l.replace(/^\d+\.\s*/, "").trim())
    : [];
  const snapshotWarn = vmSec(vm, "snapshot-warning")?.content;
  const interpretTraceWarn = vmSec(vm, "interpret-trace-warning")?.content;
  const interpretTraceText = vmSec(vm, "interpret-trace")?.content ?? "";
  const keySignalsBlock = vmSec(vm, "prep-key-signals")?.content ?? "";
  const keySignalsSafe = keySignalsBlock
    ? keySignalsBlock.split("\n").map((l) => l.replace(/^\d+\.\s*/, "").trim()).filter(Boolean)
    : [];
  const tensionsBlock = vmSec(vm, "prep-tensions")?.content ?? "";
  const tensionsSafe = tensionsBlock
    ? tensionsBlock.split(/\r?\n/).map((l) => l.replace(/^•\s*/, "").trim()).filter(Boolean)
    : [];
  const placementHintsBlock = vmSec(vm, "db-placement-hints")?.content ?? "";
  const placementHintLines = placementHintsBlock
    ? placementHintsBlock.split("\n\n").map((block) => {
        const lines = block.split("\n");
        const head = lines[0] ?? "";
        const hint = lines.slice(1).join("\n") || head;
        const starPalace = head.split(" · ");
        return {
          starLabel: starPalace[0] ?? "",
          palaceLabel: starPalace[1] ?? "",
          hint,
        };
      })
    : [];
  const starShelfSections = vm.summarySections.filter((s) => s.key.startsWith("star-shelf-"));
  const showSignalsBlock = keySignalsSafe.length > 0;
  const showStarsShelf = starShelfSections.length > 0;
  const dbLookupMeta = vmSec(vm, "db-lookup-meta")?.content ?? "";
  const menhPalaceVm = vm.palaces.find((p) => p.key === "menh");
  const mingQuickDisplay = (() => {
    const b = menhPalaceVm ? splitPalaceBranchDisplay(menhPalaceVm.branch) : { han: "", vi: "—" };
    return (b.han ? `${b.han} ${b.vi}` : b.vi).trim() || "—";
  })();
  const menhNameNote = vmSec(vm, "banner-menh-theme")?.content;
  const thanNameNote = vmSec(vm, "banner-than-theme")?.content;
  const cucDisplay = pf.cucText ?? "—";
  const menhChuDisplay = pf.menhChuText ?? "—";
  const thanChuDisplay = pf.thanChuText ?? "—";
  const centerAgeLine = pf.ageText?.trim() || "—";
  const chartSummaryItems: TuViSummaryItem[] = [
    { label: "Tuổi", value: centerAgeLine, hint: pf.lunarYearText },
    { label: "Mệnh", value: mingQuickDisplay, hint: menhNameNote ?? pf.menhText },
    { label: "Cục", value: cucDisplay, hint: pf.cucText },
    { label: "Mệnh chủ", value: menhChuDisplay, hint: menhNameNote },
    { label: "Thân chủ", value: thanChuDisplay, hint: thanNameNote },
    { label: "Âm Dương", value: pf.amDuongText ?? "—", hint: pf.genderText },
  ];
  const wealthTabBody = buildTuViWealthInterpretTabBody(vm);
  const calendarModeVm = vmSec(vm, "form-calendar-mode")?.content ?? "solar";
  const birthYmdVm = vmSec(vm, "form-birth-ymd")?.content ?? "";
  const formLunarNote = vmSec(vm, "form-lunar-note")?.content;
  const bannerMenhNote = vmSec(vm, "banner-menh-note")?.content;
  const bannerThanNote = vmSec(vm, "banner-than-note")?.content;

  const palaceOrderIndex = new Map<string, number>();
  vm.palaces.forEach((p, i) => palaceOrderIndex.set(p.key, i + 1));

  const interpretNormalized: TuViInterpretNormalized = {
    overview: {
      opening: readingOpening,
      tongQuan,
      tinhCach,
      loiKhuyen: loiKhuyenProse || undefined,
      verses: versesSafe.length ? versesSafe : undefined,
    },
    career: congViec?.trim() ?? "",
    wealth: wealthTabBody,
    love: tinhCam?.trim() ?? "",
  };

  const resolvedPalaceKey = vm.palaces.some((p) => p.key === selectedPalaceKey) ? selectedPalaceKey : "menh";
  const palaceInterpretation = buildPalaceInterpretationView(vm, resolvedPalaceKey, interpretNormalized);
  const selectedPalacePanel: TuViInterpretPanelSelectedPalace = (() => {
    const p = vm.palaces.find((x) => x.key === resolvedPalaceKey) ?? vm.palaces.find((x) => x.key === "menh")!;
    return {
      key: p.key,
      nameVi: p.name,
      indexOneBased: palaceOrderIndex.get(p.key) ?? 1,
    };
  })();

  const luanCungTabEnabled = vm.tabs.find((t) => t.key === "luan-cung")?.enabled ?? false;

  const alerts = (
    <>
      {ctkp_history_warning_v1?.message_vi ? (
        <p
          role="status"
          className="mt-4 rounded-lg border border-amber-800/40 bg-amber-950/25 px-4 py-3 font-sans text-[13px] leading-relaxed text-amber-100/90"
        >
          {ctkp_history_warning_v1.message_vi}
        </p>
      ) : null}
      {generationPartial?.message_vi ? (
        <p
          role="status"
          className="mt-3 rounded-lg border border-sky-800/40 bg-sky-950/25 px-4 py-3 font-sans text-[13px] leading-relaxed text-sky-100/90"
        >
          {generationPartial.message_vi}
        </p>
      ) : null}
      {snapshotWarn ? (
        <p
          role="note"
          className="mt-3 rounded-lg border border-stone-700/45 bg-[#0c0b0a]/55 px-4 py-3 font-sans text-[12px] leading-relaxed text-stone-400"
        >
          {snapshotWarn}
        </p>
      ) : null}
      {interpretTraceWarn ? (
        <p
          role="note"
          className="mt-3 rounded-lg border border-stone-700/45 bg-[#0c0b0a]/55 px-4 py-3 font-sans text-[12px] leading-relaxed text-stone-400"
        >
          {interpretTraceWarn}
        </p>
      ) : null}
    </>
  );

  const journalLabelButton = "Lá đã lưu (TK)";

  return (
    <div className="ctkp-result-canvas ctkp-tuvi-dashboard-canvas relative min-h-0 overflow-x-hidden rounded-xl border border-stone-800/50">
      <div className="ctkp-tuvi-dash-particles" aria-hidden />
      <div className="ctkp-tuvi-dash-particles-fine" aria-hidden />
      <div className="relative z-[1] mx-auto max-w-[1320px] px-3 pb-12 pt-4 sm:px-5 sm:pb-14 sm:pt-5 lg:px-7">
        <CtkpResultPageNav
          backHref="/account/saved-readings"
          backLabel="← danh sách"
          journalLink={{ href: "/account/saved-readings", label: "đã lưu TK" }}
        />

        <div
          className="mt-4 rounded-lg border border-emerald-900/35 bg-emerald-950/20 px-4 py-3 font-sans text-[13px] leading-relaxed text-emerald-50/90"
          role="status"
        >
          <p className="font-medium text-emerald-100/95">{savedLabel}</p>
          {savedAtDisplay ? (
            <p className="mt-1 text-[12px] text-stone-400">Đã lưu vào tài khoản: {savedAtDisplay}</p>
          ) : null}
          <p className="mt-1 text-[11px] text-stone-500">Chỉ hiển thị dữ liệu đã lưu — không tính lại lá số.</p>
        </div>

        {alerts}

        <TuViTopTabs tabs={vm.tabs} active={topTab} onChange={setTopTab} className="mt-4" />

        <div
          id="ctkp-tuvi-saved-top-panel"
          role="tabpanel"
          className={`mt-4 transition-opacity duration-300 ease-out ${
            topTab === "dai-van" ||
            topTab === "tieu-van" ||
            topTab === "nguyet-van" ||
            topTab === "nhat-van" ||
            topTab === "chuyen-de"
              ? "min-h-[min(62vh,620px)]"
              : ""
          }`}
        >
          {(topTab === "la-so" || topTab === "luan-cung") && (
            <div className="mx-auto max-w-[1200px] xl:max-w-[1320px]">
              <TuViChartTitleBar
                title={readingTitle}
                onDeepDive={() => scrollToChartBlock()}
                className="mt-0"
                journalLink={{ href: "/account/saved-readings", label: journalLabelButton }}
                kicker={topTab === "luan-cung" ? "Luận cung · theo ô" : undefined}
                subtitle={
                  topTab === "luan-cung"
                    ? "Chọn cung ở thiên bàn thu nhỏ, bấm mục luận để đọc từng phần. Tab Lá số: thiên bàn đầy đủ."
                    : "Bấm mục luận dưới thiên bàn để đọc từng phần tập trung."
                }
              />

              <TuViSummaryBar className="mt-3 hidden lg:block" items={chartSummaryItems} />

              {topTab === "la-so" ? (
                <div className="mt-3 space-y-3 lg:hidden">
                  <div className="flex flex-col gap-3 rounded-lg border border-[#d4af37]/12 bg-[#060912]/55 px-4 py-3 font-sans text-[11px] leading-relaxed sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
                    <p className="text-center sm:text-left">
                      <span className="text-[#e8d9a8]/92">Niêm ấn</span>{" "}
                      <span className="tabular-nums text-white/88">{receivedLabel}</span>
                      {textSource ? (
                        <>
                          <span className="mx-2 text-slate-600" aria-hidden>
                            |
                          </span>
                          <span className="text-slate-400">
                            Nguồn luận:{" "}
                            <span className="text-slate-300">
                              {textSource === "rule_interpret_v1"
                                ? "quy tắc + tra cứu"
                                : textSource === "db_lookup_v1"
                                  ? "tra cứu tham chiếu"
                                  : "engine nội bộ"}
                            </span>
                          </span>
                        </>
                      ) : null}
                    </p>
                    {prepSummary ? (
                      <p className="border-t border-[#d4af37]/10 pt-3 text-center text-slate-500 sm:border-t-0 sm:pt-0 sm:text-right">
                        {prepSummary}
                      </p>
                    ) : null}
                  </div>

                  {(source !== "api" || starPlacementBlurb) && (
                    <div className="flex flex-col gap-3 sm:flex-row sm:gap-3">
                      {source !== "api" ? (
                        <p className="flex-1 rounded-lg border border-amber-800/35 bg-amber-950/20 px-3 py-2.5 font-sans text-[11px] leading-relaxed text-amber-100/88">
                          <span className="font-medium text-amber-200/95">Đang xem ngoại tuyến.</span> Một số ô có thể
                          chưa đồng bộ với bản đầy đủ trên máy chủ.
                        </p>
                      ) : null}
                      {starPlacementBlurb ? (
                        <p className="flex-1 rounded-lg border border-[#d4af37]/14 bg-[#0a1020]/5 px-3 py-2.5 font-sans text-[11px] leading-relaxed">
                          <span className="font-ctkp-serif text-[10px] uppercase tracking-[0.18em] text-[#d4af37]/75">
                            An sao · bước 1
                          </span>
                          <span className="mt-1 block text-slate-300">{starPlacementBlurb}</span>
                        </p>
                      ) : null}
                    </div>
                  )}
                </div>
              ) : topTab === "luan-cung" && !luanCungTabEnabled ? (
                <div
                  role="status"
                  className="mt-3 rounded-lg border border-amber-800/35 bg-amber-950/18 px-4 py-3 font-sans text-[12px] leading-relaxed text-amber-100/88"
                >
                  <span className="font-medium text-amber-200/95">Luận cung (phạm vi hiện tại).</span> Lá trong phiên này
                  chưa có lưới đủ 12 cung hoặc luận có cấu trúc đầy đủ — phần luận theo ô vẫn chạy trên dữ liệu đã có và tra
                  cứu kèm theo.
                </div>
              ) : null}

              <div className="mt-4 space-y-4">
                {topTab === "la-so" ? (
                  <>
                    <section
                      id="tuvi-chart-board-anchor"
                      className="scroll-mt-6 min-w-0 overflow-x-auto overflow-y-visible lg:overflow-x-visible"
                      aria-labelledby="tuvi-chart-board-heading"
                    >
                      <TuViChartBoard
                        className="w-full"
                        palaces={vm.palaces}
                        profile={pf}
                        centerChartTitle="TỬ VI NAM PHÁI"
                        viewingYear={viewingYear}
                        centerMenhDisplay={pf.menhText ?? mingQuickDisplay}
                        centerAgeLine={centerAgeLine}
                        centerTagline={undefined}
                        summaryItems={chartSummaryItems}
                        palaceOrderIndex={palaceOrderIndex}
                        selectedPalaceKey={resolvedPalaceKey}
                        onSelectPalace={setSelectedPalaceKey}
                        arenaSubtitle={undefined}
                        footnote={undefined}
                      />
                    </section>
                    <TuViA4OverviewSection
                      className="mt-4 w-full min-w-0"
                      softLaunchReading={null}
                      overviewPalaces={TUVI_PALACE_KEYS.map((k) => {
                        const p = vm.palaces.find((x) => x.key === k);
                        return { key: k, name: p?.name ?? k };
                      })}
                      serverOverview={
                        useServerOverviewBody && a4Overview
                          ? {
                              body: a4Overview.body,
                              paragraphRoles: a4Overview.overviewParagraphRoles ?? [],
                              ...(a4Overview.layeredSections?.length ? { layeredSections: a4Overview.layeredSections } : {}),
                              ...(a4Overview.interpretationSignals?.length
                                ? { interpretationSignals: a4Overview.interpretationSignals }
                                : {}),
                              ...(a4Overview.strategicRecommendationsA4?.bullets?.length
                                ? {
                                    strategicRecommendationsA4: a4Overview.strategicRecommendationsA4,
                                    ...(a4Overview.strategicRecommendationsBlockPlain
                                      ? { strategicRecommendationsBlockPlain: a4Overview.strategicRecommendationsBlockPlain }
                                      : {}),
                                  }
                                : {}),
                            }
                          : null
                      }
                      composedSections={useServerOverviewBody ? null : (a4Overview?.sections ?? null)}
                      composedFooter={useServerOverviewBody ? null : (a4Overview?.footer ?? null)}
                      body={null}
                      overviewPipelineDebug={
                        a4Overview
                          ? {
                              overviewSource: a4Overview.overviewSource,
                              semanticLayerApplied: a4Overview.semanticLayerApplied,
                              semanticReplacementCount: a4Overview.semanticReplacementCount,
                              semanticReplacementsSample: a4Overview.semanticReplacementsSample,
                            }
                          : null
                      }
                      fallbackMessage="Chưa có đủ dữ liệu để tạo luận giải khái quát."
                      premiumTeaser={premiumTeaser}
                      premiumDeepReport={premiumTeaser ? premiumDeepReport : null}
                      premiumSavedReadingId={premiumSavedReadingId}
                      onContinueToDetailedAnalysis={() => setInterpretOverlayOpen(true)}
                    />
                    <TuViInterpretTabStrip
                      palaceKey={resolvedPalaceKey}
                      active={interpretTab}
                      onSelect={(id) => {
                        setInterpretTab(id);
                        setInterpretOverlayOpen(true);
                      }}
                      className="px-0.5"
                    />
                  </>
                ) : (
                  <TuViLuanCungWorkspace
                    palaces={vm.palaces}
                    palaceOrderIndex={palaceOrderIndex}
                    selectedPalaceKey={resolvedPalaceKey}
                    onSelectPalace={setSelectedPalaceKey}
                    centerHint={pf.fullName.trim() || undefined}
                  >
                    <TuViInterpretTabStrip
                      palaceKey={resolvedPalaceKey}
                      active={interpretTab}
                      onSelect={(id) => {
                        setInterpretTab(id);
                        setInterpretOverlayOpen(true);
                      }}
                      className="px-0.5"
                    />
                    <TuViLuanCungSeedAccordion
                      className="mt-1"
                      palaceProses={seedInterpretProse?.palaceProses ?? null}
                      palaceRows={seedInterpretContext?.palaceInterpretations ?? null}
                      proseDebugUi={proseDebugUi}
                      rawSeedDebug={rawSeedDebug}
                      interpretationDebugBlock={interpretationDebugBlock}
                      selectedPalaceKey={resolvedPalaceKey}
                      onSelectPalace={setSelectedPalaceKey}
                      bodyPalaceKey={bodyPalaceKeyAccordion}
                    />
                  </TuViLuanCungWorkspace>
                )}
              </div>

              <TuViInterpretFocusOverlay
                open={interpretOverlayOpen}
                onClose={() => setInterpretOverlayOpen(false)}
                onShowChart={scrollToChartBlock}
                headerExtra={
                  <TuViInterpretTabStrip
                    size="compact"
                    palaceKey={resolvedPalaceKey}
                    active={interpretTab}
                    onSelect={setInterpretTab}
                    className="px-0.5"
                  />
                }
              >
                <div className="mx-auto w-full max-w-[52rem]">
                  <TuViInterpretPanel
                    chrome="minimal"
                    hideTabBar
                    layout="workspace"
                    className="w-full"
                    interpretation={palaceInterpretation}
                    selectedPalace={selectedPalacePanel}
                    activeTab={interpretTab}
                    onTabChange={setInterpretTab}
                    onNavigatePalace={(key) => vm.palaces.some((p) => p.key === key) && setSelectedPalaceKey(key)}
                    aiDeepDive={interpretAiDeepDive}
                    footer={
                      <p className="border-t border-[#d4af37]/10 pt-4 text-center font-sans text-[11px] leading-relaxed text-slate-500">
                        Đang xem bản đã lưu — không tính lại lá số.
                      </p>
                    }
                  />
                </div>
              </TuViInterpretFocusOverlay>

              {topTab === "la-so" ? (
                <details className="group mt-5 rounded-xl border border-[#d4af37]/12 bg-[rgba(5,8,20,0.45)] px-4 py-3 sm:px-5">
                  <summary className="ctkp-tuvi-text-title-soft cursor-pointer font-ctkp-serif text-[13px] tracking-[0.04em]">
                    Hồ sơ kỹ thuật &amp; căn cứ đã ghi
                  </summary>
                  <div className="mt-5 space-y-8 border-t border-stone-800/40 pt-5">
                    <dl className="grid gap-8 sm:grid-cols-2">
                      <div>
                        <dt className="ctkp-tuvi-text-muted font-ctkp-serif text-[10px] uppercase tracking-[0.14em]">
                          Họ và tên
                        </dt>
                        <dd className="ctkp-tuvi-text-body mt-1.5 font-ctkp-serif text-base">{pf.fullName}</dd>
                      </div>
                      <div>
                        <dt className="ctkp-tuvi-text-muted font-ctkp-serif text-[10px] uppercase tracking-[0.14em]">
                          Giới tính
                        </dt>
                        <dd className="ctkp-tuvi-text-body mt-1.5 font-sans text-sm">{pf.genderText}</dd>
                      </div>
                      <div>
                        <dt className="ctkp-tuvi-text-muted font-ctkp-serif text-[10px] uppercase tracking-[0.14em]">
                          Ngày sinh
                        </dt>
                        <dd className="ctkp-tuvi-text-body mt-1.5 font-sans text-sm">{pf.birthDateText}</dd>
                        <dd className="ctkp-tuvi-text-muted mt-1 font-sans text-xs">
                          {calendarLabel[calendarModeVm] ?? calendarModeVm} · {birthYmdVm}
                        </dd>
                        {formLunarNote ? (
                          <dd className="ctkp-tuvi-text-muted mt-2 max-w-prose font-sans text-xs leading-relaxed">
                            {formLunarNote}
                          </dd>
                        ) : null}
                      </div>
                      <div>
                        <dt className="ctkp-tuvi-text-muted font-ctkp-serif text-[10px] uppercase tracking-[0.14em]">
                          Giờ sinh
                        </dt>
                        <dd className="ctkp-tuvi-text-body mt-1.5 font-ctkp-serif text-base">{pf.birthHourText}</dd>
                      </div>
                    </dl>

                    {canhKhacChiTiet ? (
                      <div>
                        <h3 className="ctkp-tuvi-text-title-soft font-ctkp-serif text-[11px] uppercase tracking-[0.12em]">
                          Mốc lịch &amp; tứ trụ (engine)
                        </h3>
                        <p className="ctkp-tuvi-text-body mt-2 whitespace-pre-wrap font-sans text-xs leading-relaxed opacity-90">
                          {canhKhacChiTiet}
                        </p>
                      </div>
                    ) : null}

                    {bannerMenhNote || bannerThanNote ? (
                      <div className="ctkp-tuvi-text-body space-y-3 font-sans text-xs opacity-90">
                        {bannerMenhNote ? <p>Mệnh — {bannerMenhNote}</p> : null}
                        {bannerThanNote ? <p>Thân — {bannerThanNote}</p> : null}
                      </div>
                    ) : null}

                    <p className="font-ctkp-serif text-[11px] leading-relaxed text-stone-600">{openingProvenance}</p>

                    {placementHintLines.length > 0 ? (
                      <div>
                        <h3 className="ctkp-tuvi-text-title-soft font-ctkp-serif text-[10px] uppercase tracking-[0.2em]">
                          Gợi sao – cung (DB)
                        </h3>
                        <ul className="mt-3 space-y-3">
                          {placementHintLines.map((row, i) => (
                            <li
                              key={`${row.starLabel}-${row.palaceLabel}-${i}`}
                              className="border-t border-stone-800/35 pt-2 first:border-t-0 first:pt-0"
                            >
                              <p className="font-ctkp-serif text-[11px]">
                                <span className="ctkp-tuvi-text-title-soft">{row.starLabel}</span>{" "}
                                <span className="ctkp-tuvi-text-muted">· {row.palaceLabel}</span>
                              </p>
                              <p className="ctkp-tuvi-text-body mt-1 font-sans text-xs leading-relaxed opacity-90">
                                {row.hint}
                              </p>
                            </li>
                          ))}
                        </ul>
                      </div>
                    ) : null}

                    {showSignalsBlock ? (
                      <div>
                        <h3 className="ctkp-tuvi-text-title-soft font-ctkp-serif text-[10px] uppercase tracking-[0.2em]">
                          Tín hiệu từ mốc
                        </h3>
                        <ol className="ctkp-tuvi-text-body mt-3 list-decimal space-y-2 pl-5 text-sm">
                          {keySignalsSafe.map((line, i) => (
                            <li key={i}>{line}</li>
                          ))}
                        </ol>
                        {tensionsSafe.length > 0 ? (
                          <ul className="ctkp-tuvi-text-muted mt-4 list-none space-y-2 text-sm">
                            {tensionsSafe.map((t, i) => (
                              <li key={i}>{t}</li>
                            ))}
                          </ul>
                        ) : null}
                      </div>
                    ) : null}

                    {showStarsShelf ? (
                      <div>
                        <h3 className="ctkp-tuvi-text-title-soft font-ctkp-serif text-[10px] uppercase tracking-[0.2em]">
                          Ý lược sao (kho)
                        </h3>
                        <ul className="mt-3 space-y-4">
                          {starShelfSections.map((s) => (
                            <li key={s.key} className="border-b border-stone-800/35 pb-3 last:border-0">
                              <p className="ctkp-tuvi-text-title-soft font-ctkp-serif text-sm">{s.title}</p>
                              <p className="ctkp-tuvi-text-body mt-1 whitespace-pre-wrap font-sans text-xs opacity-90">
                                {s.content}
                              </p>
                            </li>
                          ))}
                        </ul>
                      </div>
                    ) : null}

                    {dbLookupMeta ? (
                      <p className="ctkp-tuvi-text-muted whitespace-pre-wrap font-sans text-xs">{dbLookupMeta}</p>
                    ) : null}

                    {interpretTraceText.trim() ? (
                      <details className="ctkp-tuvi-glass rounded-lg px-3 py-2">
                        <summary className="ctkp-tuvi-text-muted cursor-pointer font-ctkp-serif text-[12px]">
                          interpret_trace
                        </summary>
                        <pre className="ctkp-tuvi-text-muted mt-3 overflow-x-auto whitespace-pre-wrap font-mono text-[10px] leading-relaxed">
                          {interpretTraceText}
                        </pre>
                      </details>
                    ) : null}
                  </div>
                </details>
              ) : null}
            </div>
          )}

          {topTab === "dai-van" && fortuneViewModel ? (
            <TuViDaiVanPanel items={fortuneViewModel.daiVan} onGoLaSo={() => setTopTab("la-so")} />
          ) : null}
          {topTab === "tieu-van" && fortuneViewModel ? (
            <TuViTieuVanPanel view={fortuneViewModel.tieuVan} onGoLaSo={() => setTopTab("la-so")} />
          ) : null}
          {topTab === "nguyet-van" && fortuneViewModel ? (
            <TuViNguyetVanPanel months={fortuneViewModel.nguyetVan} monthlyPeriodProse={fortuneViewModel.monthlyPeriodProse} />
          ) : null}
          {topTab === "nhat-van" && fortuneViewModel ? (
            <TuViNhatVanPanel view={fortuneViewModel.nhatVan} onGoLaSo={() => setTopTab("la-so")} />
          ) : null}
          {topTab === "chuyen-de" ? (
            <div className="animate-[ctkp-fade-in-slow_0.45s_ease-out_both]">
              <TuViChuyenDeInsightPanel
                topics={fortuneViewModel?.insightProse?.topics}
                personalizedAdvice={fortuneViewModel?.personalizedAdvice ?? undefined}
                onOpenLuancung={() => setTopTab("luan-cung")}
                onOpenLaSo={() => setTopTab("la-so")}
              />
            </div>
          ) : null}
        </div>

        <footer className="mt-8 sm:mt-10" aria-label="Lưu ý">
          <p className="ctkp-tuvi-text-muted text-center font-ctkp-serif text-xs leading-[1.85]">
            Bản xem từ dữ liệu đã lưu; không thay cho thầy hay thầy thuốc.
          </p>
        </footer>
      </div>
    </div>
  );
}