"use client";

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

import type { MonthlyPeriodProseItemUi } from "@/lib/fortune";
import type { FortuneTone, FortuneTag, NguyetVanMonthView } from "@/lib/tuvi-fortune-view-model";

const TAG_LABEL_VI: Record<string, string> = {
  career: "Công danh",
  wealth: "Tài lộc",
  relationship: "Nhân duyên",
  health: "Sức khỏe",
  travel: "Đi lại",
  family: "Gia đình",
  paperwork: "Giấy tờ",
  mental: "Tinh thần",
};

function toneLabelVi(tone: FortuneTone): string {
  if (tone === "good") return "Thuận";
  if (tone === "caution") return "Thận trọng";
  return "Ổn định";
}

function tonePillClass(tone: FortuneTone): string {
  if (tone === "good") return "bg-emerald-950/55 text-emerald-100/95 ring-emerald-600/35";
  if (tone === "caution") return "bg-rose-950/50 text-rose-100/92 ring-rose-600/35";
  return "bg-amber-950/45 text-amber-50/95 ring-amber-600/32";
}

function toneStripeSelected(tone: FortuneTone): string {
  if (tone === "good") return "shadow-[inset_0_0_0_1px_rgba(52,211,153,0.28)]";
  if (tone === "caution") return "shadow-[inset_0_0_0_1px_rgba(251,113,133,0.28)]";
  return "shadow-[inset_0_0_0_1px_rgba(212,175,55,0.32)]";
}

const PLACEHOLDER_MONTH: Omit<NguyetVanMonthView, "month"> = {
  tone: "mixed",
  headline: "Tháng",
  tags: ["career", "mental", "health"] as FortuneTag[],
  content:
    "Khung nguyệt vận tháng này đang ở dạng tóm tắt có cấu trúc — sao lưu nguyệt và luận theo cung tháng sẽ được bổ sung trong bản sau. Trong lúc này, dùng tab Luận cung để đọc ô liên quan.",
};

function ensureTwelveMonths(months: NguyetVanMonthView[]): NguyetVanMonthView[] {
  const byN = new Map<number, NguyetVanMonthView>();
  for (const m of months) {
    if (typeof m.month === "number" && m.month >= 1 && m.month <= 12) {
      byN.set(m.month, m);
    }
  }
  const out: NguyetVanMonthView[] = [];
  for (let month = 1; month <= 12; month++) {
    const hit = byN.get(month);
    if (hit) {
      const tags = (hit.tags ?? []).filter(Boolean).slice(0, 3) as FortuneTag[];
      while (tags.length < 2) {
        tags.push((["career", "mental"] as const)[tags.length] as FortuneTag);
      }
      out.push({ ...hit, month, tags });
    } else {
      out.push({
        month,
        ...PLACEHOLDER_MONTH,
        headline: `Tháng ${month}`,
        content: PLACEHOLDER_MONTH.content.replace("tháng này", `tháng ${month}`),
      });
    }
  }
  return out;
}

function monthLabelVi(month: number): string {
  return `Tháng ${month}`;
}

type Props = {
  months: NguyetVanMonthView[];
  /** Khớp `monthlyPeriodProse.months` từ engine. */
  monthlyPeriodProse?: MonthlyPeriodProseItemUi[] | null;
};

export function TuViNguyetVanGrid({ months, monthlyPeriodProse }: Props) {
  const normalized = useMemo(() => ensureTwelveMonths(months), [months]);

  const engineMonths = useMemo(() => {
    if (!monthlyPeriodProse?.length) return null;
    return [...monthlyPeriodProse].sort((a, b) => a.monthNumber - b.monthNumber);
  }, [monthlyPeriodProse]);

  const defaultMonth = useMemo(() => {
    const nowM = new Date().getMonth() + 1;
    return nowM >= 1 && nowM <= 12 ? nowM : 1;
  }, []);

  const [selected, setSelected] = useState(defaultMonth);

  useEffect(() => {
    let cancelled = false;
    queueMicrotask(() => {
      if (cancelled) return;
      setSelected((s) => (normalized.some((m) => m.month === s) ? s : defaultMonth));
    });
    return () => {
      cancelled = true;
    };
  }, [defaultMonth, normalized]);

  const active = normalized.find((m) => m.month === selected) ?? normalized[0]!;

  const cardTags = (m: NguyetVanMonthView) => (m.tags ?? []).slice(0, 3);

  return (
    <section
      className="relative 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="Nguyệt vận — lưới mười hai tháng"
    >
      <div
        className="pointer-events-none absolute inset-0 opacity-[0.065]"
        style={{
          backgroundImage:
            "radial-gradient(ellipse 55% 42% at 82% 0%, rgba(120,90,180,0.35), transparent 55%), radial-gradient(ellipse 50% 40% at 10% 100%, rgba(201,161,93,0.2), transparent 55%)",
        }}
        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">
          Trong năm
        </p>
        <h2 className="ctkp-tuvi-text-title-soft mt-2 font-ctkp-serif text-2xl tracking-[0.05em] sm:text-[26px]">
          Nguyệt vận
        </h2>
        <p className="mt-3 max-w-2xl font-sans text-sm leading-relaxed text-slate-400">
          Chọn một tháng để đọc nhanh tông thái và chủ đề; chi tiết hiển thị bên cạnh trên màn hình lớn, phía dưới trên di động.
        </p>
      </header>

      <div className="relative border-b border-[#d4af37]/12 px-5 py-5 sm:px-7 sm:py-6">
        <h3 className="font-ctkp-serif text-[11px] uppercase tracking-[0.2em] text-[#d4af37]/58">
          Luận nguyệt vận (engine)
        </h3>
        {engineMonths?.length ?
          <div className="mt-4 space-y-2">
            {engineMonths.map((m) => (
              <details
                key={m.monthNumber}
                className="group overflow-hidden rounded-xl border border-[#d4af37]/14 bg-[linear-gradient(160deg,rgba(18,22,36,0.92),rgba(8,10,18,0.96))] shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
              >
                <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 font-ctkp-serif text-[13px] leading-snug text-[#e8dcc4] marker:content-none [&::-webkit-details-marker]:hidden">
                  <span className="min-w-0">
                    Tháng {m.monthNumber} · {m.activatedPalaceLabel} · {m.branch}
                  </span>
                  <span className="shrink-0 font-sans text-[10px] uppercase tracking-wider text-[#d4af37]/55 group-open:hidden">
                    Mở
                  </span>
                  <span className="hidden shrink-0 font-sans text-[10px] uppercase tracking-wider text-[#d4af37]/55 group-open:inline">
                    Thu
                  </span>
                </summary>
                <div className="border-t border-[#d4af37]/10 px-4 py-4 sm:px-5">
                  <h4 className="font-ctkp-serif text-base text-[#f0e6bc]">{m.title}</h4>
                  <p className="mt-3 whitespace-pre-wrap font-sans text-[13px] leading-relaxed text-slate-300/95">
                    {m.prose}
                  </p>
                  {m.warnings.length > 0 ?
                    <p className="mt-3 font-sans text-[11px] leading-relaxed text-slate-500">
                      {m.warnings.join(" · ")}
                    </p>
                  : null}
                </div>
              </details>
            ))}
          </div>
        : <p className="mt-4 font-sans text-[13px] text-slate-500">Chưa có bài luận Nguyệt vận từ engine.</p>}
      </div>

      <div className="relative grid gap-0 lg:grid-cols-12 lg:gap-0">
        {/* Month grid */}
        <div className="border-b border-[#d4af37]/10 px-4 py-5 sm:px-6 lg:col-span-7 lg:border-b-0 lg:border-r lg:py-6">
          <ul className="grid grid-cols-2 gap-2 sm:grid-cols-3 sm:gap-2.5 md:grid-cols-4">
            {normalized.map((m) => {
              const isSel = m.month === selected;
              const tags = cardTags(m);
              return (
                <li key={m.month} className="min-w-0">
                  <button
                    type="button"
                    onClick={() => setSelected(m.month)}
                    aria-pressed={isSel}
                    aria-label={`${monthLabelVi(m.month)}, ${m.headline}`}
                    className={`group flex w-full flex-col rounded-xl border px-2.5 py-2.5 text-left transition-[transform,box-shadow,border-color,background] duration-200 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-[#d4af37]/55 sm:px-3 sm:py-3 ${
                      isSel ?
                        `-translate-y-0.5 border-[#d4af37]/45 bg-[linear-gradient(160deg,rgba(30,34,52,0.96),rgba(12,14,24,0.98))] ring-2 ring-[#d4af37]/35 ${toneStripeSelected(m.tone)}`
                      : `border-[#d4af37]/14 bg-[linear-gradient(160deg,rgba(18,22,36,0.9),rgba(8,10,18,0.94))] hover:border-[#d4af37]/26 hover:shadow-[0_6px_20px_rgba(0,0,0,0.28)]`
                    }`}
                  >
                    <div className="flex items-start justify-between gap-1">
                      <span className="font-ctkp-serif text-xl tabular-nums leading-none text-[#f5ead8] sm:text-2xl">
                        {m.month}
                      </span>
                      <span
                        className={`max-w-[4.5rem] shrink-0 truncate rounded-full px-1.5 py-0.5 text-center font-ctkp-serif text-[8px] uppercase leading-tight tracking-wider ring-1 sm:max-w-none sm:px-2 sm:text-[9px] ${tonePillClass(m.tone)}`}
                      >
                        {toneLabelVi(m.tone)}
                      </span>
                    </div>
                    <p className="mt-2 line-clamp-2 font-ctkp-serif text-[11px] leading-snug text-[#c9bfaa] sm:text-[12px]">
                      {m.headline}
                    </p>
                    <div className="mt-2 flex min-h-[1.5rem] flex-wrap gap-1">
                      {tags.slice(0, 3).map((t) => (
                        <span
                          key={t}
                          className="rounded border border-[#d4af37]/12 bg-black/35 px-1 py-0.5 font-sans text-[9px] leading-none text-slate-500 sm:text-[10px]"
                        >
                          {TAG_LABEL_VI[t] ?? t}
                        </span>
                      ))}
                    </div>
                  </button>
                </li>
              );
            })}
          </ul>
        </div>

        {/* Detail panel */}
        <div className="bg-black/10 px-4 py-5 sm:px-6 lg:col-span-5 lg:px-7 lg:py-6">
          <div className="sticky top-4">
            <p className="font-ctkp-serif text-[11px] uppercase tracking-[0.22em] text-[#d4af37]/58">
              Đang xem
            </p>
            <div className="mt-2 flex flex-wrap items-baseline gap-2">
              <h3 className="font-ctkp-serif text-3xl tabular-nums tracking-tight text-[#f5ead8]">
                {monthLabelVi(active.month)}
              </h3>
              <span
                className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 font-ctkp-serif text-[10px] uppercase tracking-[0.12em] ring-1 ${tonePillClass(active.tone)}`}
              >
                <span className="h-1 w-1 rounded-full bg-current opacity-85" aria-hidden />
                {toneLabelVi(active.tone)}
              </span>
            </div>
            <p className="mt-3 font-ctkp-serif text-[17px] leading-snug text-[#e8dcc4] sm:text-lg">
              {active.headline}
            </p>

            {cardTags(active).length > 0 ?
              <div className="mt-4 flex flex-wrap gap-2">
                {cardTags(active).map((t) => (
                  <span
                    key={t}
                    className="rounded-lg border border-[#d4af37]/22 bg-[#d4af37]/08 px-2.5 py-1 font-sans text-[11px] text-[#e8dcc4]/92"
                  >
                    {TAG_LABEL_VI[t] ?? t}
                  </span>
                ))}
              </div>
            : null}

            <div className="mt-6 rounded-xl border border-[#d4af37]/14 bg-[linear-gradient(180deg,rgba(20,24,38,0.75),rgba(8,10,16,0.82))] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]">
              <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.18em] text-[#d4af37]/55">
                Luận tháng
              </p>
              <div className="tuvi-nguyet-detail-scroll mt-3 max-h-[min(42vh,340px)] overflow-y-auto pr-1 font-sans text-[14px] leading-relaxed text-slate-400 [scrollbar-width:thin] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[#d4af37]/22 [&::-webkit-scrollbar]:w-1.5">
                <p className="whitespace-pre-wrap">{active.content}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}