import {
  palaceInterpretOverviewSections,
  palaceInterpretTabSection,
  type PalaceInterpretAdviceGroups,
  type PalaceInterpretationView,
  type PalaceInterpretSection,
  type PalaceInterpretTone,
  type PalaceStarExplainItem,
} from "@/lib/tuvi-palace-interpret-view-model";
import { getPalaceDomainStripKeys } from "@/lib/tuvi-palace-section-priority";

/** Meta ô đang luận — đồng bộ với `TuViInterpretPanelSelectedPalace`. */
export type TuViLuanCungSelectedMeta = {
  key: string;
  nameVi: string;
  indexOneBased: number;
};

const LUAN_CARD =
  "rounded-xl border border-[#d4af37]/14 bg-[linear-gradient(168deg,rgba(12,18,36,0.72)_0%,rgba(4,6,14,0.88)_100%)] px-4 py-3.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.04),inset_0_-12px_32px_rgba(0,0,0,0.22)] sm:px-5 sm:py-4";

const SECTION_BODY_SCROLL =
  "max-h-[min(11rem,30vh)] overflow-y-auto pr-1 text-pretty [scrollbar-width:thin] [scrollbar-color:rgba(212,175,55,0.22)_transparent]";

type Props = {
  interpretation: PalaceInterpretationView | null;
  selectedPalace: TuViLuanCungSelectedMeta | null;
  onNavigatePalace?: (palaceKey: string) => void;
  /**
   * `false` (default): có khối tiêu đề «Luận cung» riêng.
   * `true`: chỉ các thẻ nội dung — dùng trong `TuViInterpretPanel` đã có tiêu đề ngoài.
   */
  embedded?: boolean;
  className?: string;
};

export function TuViLuanCungPanel({
  interpretation,
  selectedPalace,
  onNavigatePalace,
  embedded = false,
  className = "",
}: Props) {
  if (!interpretation || !selectedPalace) {
    return <TuViLuanCungEmpty className={className} />;
  }

  return (
    <div
      key={selectedPalace.key}
      className={`space-y-4 ${className}`}
      aria-busy={false}
    >
      {!embedded ?
        <div className={`${LUAN_CARD} border-[#d4af37]/18`}>
          <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.28em] text-[#d4af37]/65">
            Luận cung
          </p>
          <h3 className="ctkp-tuvi-text-title-soft mt-2 font-ctkp-serif text-lg font-normal tracking-[0.08em] sm:text-xl">
            Ô đang chọn
          </h3>
          <p className="ctkp-tuvi-text-muted mt-1.5 font-sans text-[11px] leading-relaxed">
            Khung có cấu — không hiển thị một bài văn liền khối. Mỗi vùng tách thẻ để dễ quét.
          </p>
        </div>
      : null}

      <HeaderCard interpretation={interpretation} selectedPalace={selectedPalace} />

      <div className={LUAN_CARD}>
        <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.2em] text-[#d4af37]/72">
          Tóm tắt nhanh
        </p>
        <h4 className="mt-2 font-ctkp-serif text-[15px] font-normal leading-snug text-[#faf6e8] sm:text-base">
          {interpretation.headline || "—"}
        </h4>
        <p className="mt-2 font-sans text-[12px] leading-relaxed text-slate-300/95 sm:text-[13px]">
          {interpretation.summary?.trim() || "Chưa có tóm tắt — xem các mục dưới theo dữ liệu ô."}
        </p>
      </div>

      <StarsBlock interpretation={interpretation} />

      <DomainStrip interpretation={interpretation} />

      <div className="space-y-3">
        <p className="px-0.5 font-ctkp-serif text-[10px] uppercase tracking-[0.2em] text-[#d4af37]/72">
          Chi tiết luận
        </p>
        {(() => {
          const overviewSecs = palaceInterpretOverviewSections(interpretation);
          if (overviewSecs.length === 0) {
            return (
              <div className={LUAN_CARD}>
                <h4 className="font-ctkp-serif text-[12px] font-medium text-[#e8d9a8]/85">
                  Chưa có mục chi tiết
                </h4>
                <p className="mt-2 font-sans text-[11px] leading-relaxed text-slate-500">
                  Dữ liệu tra cứu hoặc bản đọc chưa cung cấp khối luận cho ô này; tóm tắt, sao và ba phạm vi phía trên vẫn dùng được.
                </p>
              </div>
            );
          }
          return overviewSecs.map((sec) => (
            <SectionCard key={`${selectedPalace.key}-${sec.key}`} section={sec} />
          ));
        })()}
      </div>

      <StructuredAdviceCard groups={interpretation.adviceGroups} />

      <RelatedActionsBlock
        actions={interpretation.relatedActions}
        onNavigatePalace={onNavigatePalace}
      />
    </div>
  );
}

function TuViLuanCungEmpty({ className = "" }: { className?: string }) {
  return (
    <div
      className={`rounded-xl border border-[#d4af37]/14 bg-[linear-gradient(175deg,rgba(10,14,28,0.85),rgba(3,5,12,0.92))] p-6 text-center shadow-[inset_0_1px_0_rgba(212,175,55,0.08)] sm:p-8 ${className}`}
      role="status"
    >
      <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.28em] text-[#d4af37]/55">
        Luận cung
      </p>
      <h3 className="ctkp-tuvi-text-title-soft mt-3 font-ctkp-serif text-lg font-normal tracking-wide sm:text-xl">
        Chưa có ô được chọn
      </h3>
      <p className="ctkp-tuvi-text-muted mx-auto mt-2 max-w-md font-sans text-[12px] leading-relaxed">
        Chọn một <span className="text-[#e8d9a8]/85">cung trên thiên bàn</span> để xem luận giải có cấu: tóm tắt, sao,
        mục chi tiết và ghi nhớ. Nếu lá chưa đủ dữ liệu, panel vẫn hiển thị khung tóm tắt có cấu trúc.
      </p>
      <div
        className="mx-auto mt-5 max-w-sm rounded-lg border border-dashed border-[#d4af37]/25 bg-black/25 px-4 py-3 font-sans text-[11px] leading-relaxed text-slate-500"
        aria-hidden
      >
        Ô Mệnh thường mang luận tổng thể từ bản đọc; các ô khác ghép gợi từ tra cứu và quy tắc.
      </div>
    </div>
  );
}

function HeaderCard({
  interpretation,
  selectedPalace,
}: {
  interpretation: PalaceInterpretationView;
  selectedPalace: TuViLuanCungSelectedMeta;
}) {
  const branch = interpretation.branch?.trim();

  return (
    <div className={LUAN_CARD}>
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div className="min-w-0">
          <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.22em] text-[#d4af37]/65">
            Đang luận
          </p>
          <p className="mt-1.5 font-ctkp-serif text-base leading-snug text-[#faf6e8] sm:text-lg">
            <span className="tracking-[0.04em]">{selectedPalace.nameVi}</span>
            <span className="ml-2 tabular-nums text-sm font-normal text-slate-500">
              {selectedPalace.indexOneBased}/12
            </span>
          </p>
          {branch ?
            <p className="mt-1 font-sans text-[11px] text-slate-500">Địa chi / can chi: {branch}</p>
          : null}
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <span
            className={`inline-flex rounded-md border px-2.5 py-1 font-ctkp-serif text-[10px] uppercase tracking-[0.12em] ${tonePillClass(interpretation.tone)}`}
          >
            {toneLabel(interpretation.tone)}
          </span>
          {interpretation.isBodyMarker ?
            <span className="rounded-md border border-violet-400/28 bg-violet-950/30 px-2.5 py-1 font-ctkp-serif text-[10px] uppercase tracking-[0.1em] text-violet-200/85">
              Thân
            </span>
          : null}
        </div>
      </div>
    </div>
  );
}

function StarsBlock({ interpretation }: { interpretation: PalaceInterpretationView }) {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      <div className={LUAN_CARD}>
        <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.18em] text-[#d4af37]/68">
          Sao chính
        </p>
        <StarList items={interpretation.majorStars} emptyHint="Chưa an sao trên ô trong phiên này." />
      </div>
      <div className={LUAN_CARD}>
        <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.18em] text-[#d4af37]/68">
          Sao phụ
        </p>
        <StarList items={interpretation.minorStars} emptyHint="Chưa liệt kê phụ tinh trên ô trong lần xem này." />
      </div>
    </div>
  );
}

function StarList({
  items,
  emptyHint,
}: {
  items: PalaceStarExplainItem[];
  emptyHint: string;
}) {
  if (items.length === 0) {
    return <p className="mt-3 font-sans text-[11px] leading-relaxed text-slate-500">{emptyHint}</p>;
  }
  return (
    <ul className="mt-3 space-y-2">
      {items.map((s) => (
        <li
          key={s.key}
          className={`rounded-lg border bg-[#050814]/55 px-2.5 py-2 ${starToneRing(s.tone)}`}
        >
          <span className="font-ctkp-serif text-[12px] tracking-wide text-[#ece6d8]/95">{s.name}</span>
          {s.shortMeaning ?
            <span className="mt-1 block font-sans text-[10px] leading-snug text-slate-500">{s.shortMeaning}</span>
          : null}
        </li>
      ))}
    </ul>
  );
}

function DomainStrip({ interpretation }: { interpretation: PalaceInterpretationView }) {
  const strip = getPalaceDomainStripKeys(interpretation.palaceKey);
  if (strip.length === 0) return null;

  const career = palaceInterpretTabSection(interpretation, "career");
  const wealth = palaceInterpretTabSection(interpretation, "wealth");
  const love = palaceInterpretTabSection(interpretation, "love");

  const gridCols =
    strip.length >= 3 ? "sm:grid-cols-3" : strip.length === 2 ? "sm:grid-cols-2" : "sm:grid-cols-1";

  return (
    <div>
      <p className="mb-2 px-0.5 font-ctkp-serif text-[10px] uppercase tracking-[0.2em] text-[#d4af37]/72">
        Phạm vi đời sống
      </p>
      <div className={`grid gap-3 ${gridCols}`}>
        {strip.includes("career") ?
          <DomainMiniCard section={career} fallbackTitle="Công danh" />
        : null}
        {strip.includes("wealth") ?
          <DomainMiniCard section={wealth} fallbackTitle="Tài lộc" />
        : null}
        {strip.includes("love") ?
          <DomainMiniCard section={love} fallbackTitle="Tình cảm" />
        : null}
      </div>
    </div>
  );
}

function DomainMiniCard({
  section,
  fallbackTitle,
}: {
  section: PalaceInterpretSection | undefined;
  fallbackTitle: string;
}) {
  const title = section?.title?.trim() || fallbackTitle;
  const body = section?.content?.trim() || "—";

  return (
    <div className={`${LUAN_CARD} py-3 sm:py-3.5`}>
      <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.14em] text-[#d4af37]/65">{title}</p>
      <div className={`mt-2 ${SECTION_BODY_SCROLL} font-ctkp-serif text-[11px] leading-[1.75] text-slate-400/95`}>
        {body.length > 0 && body !== "—" ?
          <p className="whitespace-pre-wrap">{body}</p>
        : <p className="text-slate-500">Chưa có đoạn luận riêng — tham chiếu tóm tắt và mục chi tiết.</p>}
      </div>
    </div>
  );
}

function SectionCard({ section }: { section: PalaceInterpretSection }) {
  const body = section.content?.trim() || "—";

  return (
    <div className={LUAN_CARD}>
      <h4 className="font-ctkp-serif text-[12px] font-medium tracking-wide text-[#e8d9a8]/92">
        {section.title}
      </h4>
      <div
        className={`mt-2 font-ctkp-serif text-[11px] leading-[1.8] text-slate-400/95 sm:text-[12px] ${SECTION_BODY_SCROLL}`}
      >
        {body !== "—" ?
          <p className="whitespace-pre-wrap text-pretty">{body}</p>
        : <p className="text-slate-500">Chưa có nội dung cho mục này.</p>}
      </div>
    </div>
  );
}

function normAdviceLines(lines: string[]): string[] {
  const xs = lines.map((s) => s.trim()).filter(Boolean);
  return xs.length > 0 ? xs : ["—"];
}

function StructuredAdviceCard({ groups }: { groups: PalaceInterpretAdviceGroups }) {
  const rows: { title: string; accent: string; ring: string; items: string[] }[] = [
    {
      title: "Nên phát huy",
      accent: "text-emerald-200/95",
      ring: "border-emerald-500/35 bg-emerald-950/25",
      items: normAdviceLines(groups.develop),
    },
    {
      title: "Nên tiết chế",
      accent: "text-amber-200/95",
      ring: "border-amber-500/32 bg-amber-950/22",
      items: normAdviceLines(groups.moderate),
    },
    {
      title: "Nên quan sát thêm",
      accent: "text-slate-200/95",
      ring: "border-[#d4af37]/28 bg-[#0a1020]/55",
      items: normAdviceLines(groups.observe),
    },
  ];

  return (
    <div className={LUAN_CARD}>
      <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.2em] text-[#d4af37]/72">
        Gợi ý hành động
      </p>
      <p className="ctkp-tuvi-text-muted mt-1.5 font-sans text-[11px] leading-relaxed">
        Ba nhóm ngắn — áp vào việc cụ thể; khi có AI, có thể làm sâu từng mục.
      </p>
      <div className="mt-4 space-y-3">
        {rows.map((row) => (
          <div
            key={row.title}
            className={`rounded-lg border px-3 py-2.5 sm:px-3.5 sm:py-3 ${row.ring}`}
          >
            <p className={`font-ctkp-serif text-[11px] uppercase tracking-[0.14em] ${row.accent}`}>
              {row.title}
            </p>
            <ul className="mt-2 list-none space-y-2">
              {row.items.map((line, i) => (
                <li
                  key={`${row.title}-${i}`}
                  className="relative pl-3.5 font-sans text-[12px] leading-[1.65] text-slate-300/98 before:absolute before:left-0 before:top-[0.5em] before:h-1 before:w-1 before:rounded-sm before:bg-[#d4af37]/55 before:content-['']"
                >
                  {line}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}

function RelatedActionsBlock({
  actions,
  onNavigatePalace,
}: {
  actions?: PalaceInterpretationView["relatedActions"];
  onNavigatePalace?: (palaceKey: string) => void;
}) {
  if (!actions?.length) return null;

  return (
    <div className={`${LUAN_CARD} py-3`}>
      <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.2em] text-[#d4af37]/72">
        Cung liên quan
      </p>
      <div className="mt-3 flex flex-wrap gap-2">
        {actions.map((a) =>
          onNavigatePalace ?
            <button
              key={a.key}
              type="button"
              onClick={() => onNavigatePalace(a.key)}
              className="rounded-lg border border-[#d4af37]/28 bg-[#d4af37]/08 px-3 py-2 font-ctkp-serif text-[11px] tracking-[0.06em] text-[#ece6d8]/92 transition-colors hover:border-[#d4af37]/42 hover:bg-[#d4af37]/14 hover:text-[#f5d878]"
            >
              {a.label}
            </button>
          : (
            <span
              key={a.key}
              className="rounded-lg border border-white/[0.08] bg-black/25 px-3 py-2 font-ctkp-serif text-[11px] text-slate-500"
            >
              {a.label}
            </span>
          ),
        )}
      </div>
    </div>
  );
}

function toneLabel(tone: PalaceInterpretTone): string {
  switch (tone) {
    case "good":
      return "Tông thuận";
    case "caution":
      return "Cần thận trọng";
    default:
      return "Hỗn hợp";
  }
}

function tonePillClass(tone: PalaceInterpretTone): string {
  switch (tone) {
    case "good":
      return "border-emerald-400/35 bg-emerald-950/35 text-emerald-100/95";
    case "caution":
      return "border-rose-400/35 bg-rose-950/35 text-rose-100/95";
    default:
      return "border-[#d4af37]/30 bg-[#d4af37]/08 text-[#ece6d8]/92";
  }
}

function starToneRing(tone: PalaceStarExplainItem["tone"]): string {
  switch (tone) {
    case "main":
      return "border-[#d4af37]/40";
    case "good":
      return "border-emerald-400/35";
    case "bad":
      return "border-rose-400/38";
    default:
      return "border-slate-500/35";
  }
}