"use client";

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

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

const HIGHLIGHT_PAD_VI = [
  "Ô tương ứng trên lá có thể xem kỹ hơn ở tab Luận cung.",
  "Mốc tuổi có thể là ước lượng khi lá chưa ghi đủ mốc tuổi — vẫn đủ để theo dõi chu kỳ mười năm.",
  "Đối chiếu thêm tiểu vận năm hiện tại để tinh chỉnh diễn biến ngắn.",
] as const;

function toneLabelVi(tone: FortuneTone): string {
  if (tone === "good") return "Thuận";
  if (tone === "caution") return "Thận trọng";
  return "Hỗn hợp";
}

function toneAccentClass(tone: FortuneTone): string {
  if (tone === "good")
    return "shadow-[inset_0_1px_0_rgba(52,211,153,0.22)] [--dai-accent:rgba(52,211,153,0.35)]";
  if (tone === "caution")
    return "shadow-[inset_0_1px_0_rgba(251,113,133,0.18)] [--dai-accent:rgba(251,113,133,0.35)]";
  return "shadow-[inset_0_1px_0_rgba(212,175,55,0.14)] [--dai-accent:rgba(212,175,55,0.4)]";
}

function highlightsForDisplay(raw: string[]): string[] {
  const cleaned = raw.map((s) => s.trim()).filter(Boolean);
  const out = [...cleaned];
  let padIdx = 0;
  while (out.length < 3) {
    out.push(HIGHLIGHT_PAD_VI[padIdx % HIGHLIGHT_PAD_VI.length]!);
    padIdx += 1;
  }
  return out.slice(0, 5);
}

type Props = {
  items: DaiVanItemView[];
  onGoLaSo?: () => void;
};

export function TuViDaiVanTimeline({ items, onGoLaSo }: Props) {
  const defaultIndex = useMemo(() => {
    const cur = items.findIndex((d) => d.isCurrent);
    return cur >= 0 ? cur : 0;
  }, [items]);

  const [selectedIndex, setSelectedIndex] = useState(defaultIndex);

  useEffect(() => {
    setSelectedIndex(defaultIndex);
  }, [defaultIndex]);

  useEffect(() => {
    if (items.length === 0) return;
    setSelectedIndex((i) => (i >= 0 && i < items.length ? i : 0));
  }, [items.length]);

  const safeIndex = items.length > 0 ? Math.min(Math.max(selectedIndex, 0), items.length - 1) : 0;
  const selected = items[safeIndex];

  const onKeyNavigate = useCallback(
    (e: React.KeyboardEvent, idx: number) => {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        setSelectedIndex(idx);
      }
    },
    [],
  );

  const hl = selected ? highlightsForDisplay(selected.highlights) : [];

  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))] p-5 shadow-[inset_0_1px_0_rgba(212,175,55,0.1),0_24px_48px_rgba(0,0,0,0.45)] sm:p-8"
      aria-label="Đại vận — dòng thời gian mười năm"
    >
      <div
        className="pointer-events-none absolute inset-0 opacity-[0.07]"
        style={{
          backgroundImage: `radial-gradient(ellipse 80% 50% at 50% -20%, rgba(201,161,93,0.9), transparent 55%)`,
        }}
        aria-hidden
      />

      <header className="relative">
        <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.32em] text-[#d4af37]/72">Mười năm một bước</p>
        <h2 className="ctkp-tuvi-text-title-soft mt-2 font-ctkp-serif text-xl tracking-[0.06em] sm:text-2xl">
          Đại vận
        </h2>
        <p className="mt-3 max-w-2xl font-sans text-sm leading-relaxed text-slate-300/95">
          Mỗi ô là một thập niên trên vòng lá. Chọn thập niên để đọc chi tiết; giai đoạn hiện tại được đánh dấu riêng.
        </p>
      </header>

      {items.length === 0 ?
        <p className="relative mt-8 rounded-xl border border-[#d4af37]/15 bg-black/30 px-4 py-6 font-sans text-sm text-slate-400">
          Chưa có dữ liệu đại vận từ lá đã lưu. Mở lại từ bước ghi canh khắc hoặc tab Lá số.
        </p>
      : <>
          {/* Mobile: vertical timeline */}
          <div className="relative mt-8 md:hidden">
            <div
              className="absolute bottom-2 left-[21px] top-8 w-px bg-gradient-to-b from-[#d4af37]/45 via-[#d4af37]/22 to-transparent"
              aria-hidden
            />
            <ul className="relative flex flex-col gap-2">
              {items.map((d, idx) => {
                const active = idx === safeIndex;
                const toneRing =
                  d.tone === "good" ? "ring-emerald-500/35"
                  : d.tone === "caution" ? "ring-rose-500/35"
                  : "ring-amber-400/30";
                return (
                  <li key={d.key} className="flex gap-3 pl-1">
                    <div className="relative z-[1] flex w-10 shrink-0 flex-col items-center pt-3">
                      <span
                        className={`h-3 w-3 rounded-full border-2 border-[#0a0c14] shadow-md ${
                          d.isCurrent ? "bg-[#d4af37] ring-2 ring-[#d4af37]/55"
                          : active ? "bg-[#c9a15d]/85"
                          : "bg-[#3d4458]"
                        }`}
                      />
                    </div>
                    <button
                      type="button"
                      onClick={() => setSelectedIndex(idx)}
                      onKeyDown={(e) => onKeyNavigate(e, idx)}
                      aria-pressed={active}
                      aria-current={d.isCurrent ? "step" : undefined}
                      className={`group min-w-0 flex-1 rounded-xl border px-4 py-3.5 text-left transition-[transform,box-shadow,border-color] duration-200 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-[#d4af37]/55 ${toneAccentClass(d.tone)} ${
                        active ?
                          `z-[1] -translate-y-0.5 border-[#d4af37]/42 bg-[linear-gradient(180deg,rgba(28,32,48,0.96),rgba(12,14,22,0.98))] shadow-[0_16px_36px_rgba(0,0,0,0.35)] ring-2 ${toneRing}`
                        : `border-[#d4af37]/12 bg-[linear-gradient(180deg,rgba(18,22,35,0.88),rgba(8,10,18,0.92))] hover:border-[#d4af37]/24 hover:shadow-[0_8px_24px_rgba(0,0,0,0.25)]`
                      }`}
                    >
                      <div className="flex flex-wrap items-center gap-2">
                        <span className="font-ctkp-serif text-[15px] text-[#f0e6bc]">Tuổi {d.label}</span>
                        {d.isCurrent ?
                          <span className="rounded border border-[#d4af37]/35 bg-[#d4af37]/12 px-2 py-0.5 font-ctkp-serif text-[9px] uppercase tracking-[0.12em] text-[#f5ead0]">
                            Hiện tại
                          </span>
                        : null}
                      </div>
                      {d.palaceName ?
                        <p className="ctkp-tuvi-text-muted mt-1 font-sans text-[12px]">{d.palaceName}</p>
                      : null}
                      <p className="mt-1.5 line-clamp-2 font-ctkp-serif text-[12px] leading-snug text-slate-400/95">
                        {d.headline}
                      </p>
                    </button>
                  </li>
                );
              })}
            </ul>
          </div>

          {/* Desktop: horizontal timeline */}
          <div className="relative mt-8 hidden md:block">
            <div
              className="pointer-events-none absolute left-8 right-8 top-[26px] h-px bg-gradient-to-r from-transparent via-[#d4af37]/28 to-transparent"
              aria-hidden
            />
            <div className="snap-x snap-mandatory overflow-x-auto pb-4 [-ms-overflow-style:none] [scrollbar-width:thin] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[#d4af37]/25">
              <ul className="relative flex min-w-min snap-x gap-2 px-1 pt-1">
                {items.map((d, idx) => {
                  const active = idx === safeIndex;
                  const toneRing =
                    d.tone === "good" ? "ring-emerald-500/35"
                    : d.tone === "caution" ? "ring-rose-500/35"
                    : "ring-amber-400/30";
                  return (
                    <li key={d.key} className="flex w-[112px] shrink-0 snap-start flex-col items-center lg:w-[128px]">
                      <div className="relative flex h-8 w-full justify-center">
                        <span
                          className={`absolute top-1/2 z-[1] h-3 w-3 -translate-y-1/2 rounded-full border-2 border-[#07080f] ${
                            d.isCurrent ? "bg-[#d4af37] shadow-[0_0_12px_rgba(212,175,55,0.45)]"
                            : active ? "bg-[#c9a15d]/90"
                            : "bg-[#3a4158]"
                          }`}
                        />
                      </div>
                      <button
                        type="button"
                        onClick={() => setSelectedIndex(idx)}
                        onKeyDown={(e) => onKeyNavigate(e, idx)}
                        aria-pressed={active}
                        aria-current={d.isCurrent ? "step" : undefined}
                        className={`mt-2 flex min-h-[118px] w-full flex-col rounded-xl border px-2.5 py-3 text-center transition-[transform,box-shadow,border-color] duration-200 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-[#d4af37]/55 ${toneAccentClass(d.tone)} ${
                          active ?
                            `-translate-y-1 border-[#d4af37]/45 bg-[linear-gradient(185deg,rgba(30,34,52,0.97),rgba(10,12,20,0.99))] shadow-[0_14px_32px_rgba(0,0,0,0.38)] ring-2 ${toneRing}`
                          : `border-[#d4af37]/14 bg-[linear-gradient(185deg,rgba(20,24,38,0.9),rgba(8,10,18,0.94))] hover:border-[#d4af37]/28 hover:shadow-[0_6px_20px_rgba(0,0,0,0.28)]`
                        }`}
                      >
                        <span className="font-ctkp-serif text-[13px] leading-tight text-[#f0e6bc] lg:text-sm">{d.label}</span>
                        {d.isCurrent ?
                          <span className="mx-auto mt-1.5 inline-block max-w-full truncate rounded border border-[#d4af37]/35 bg-[#d4af37]/12 px-1.5 py-0.5 font-ctkp-serif text-[8px] uppercase leading-none tracking-wider text-[#f2e8c8]">
                            Hiện tại
                          </span>
                        : null}
                        {d.palaceName ?
                          <span className="ctkp-tuvi-text-muted mt-2 line-clamp-2 min-h-[2rem] font-sans text-[10px] leading-snug lg:text-[11px]">
                            {d.palaceName}
                          </span>
                        : <span className="ctkp-tuvi-text-muted mt-2 min-h-[2rem] font-sans text-[10px] italic opacity-60 lg:text-[11px]">
                            —
                          </span>}
                        <span className="mt-auto pt-2 font-ctkp-serif text-[9px] uppercase tracking-[0.12em] text-slate-500">
                          {toneLabelVi(d.tone)}
                        </span>
                      </button>
                    </li>
                  );
                })}
              </ul>
            </div>
          </div>

          {/* Detail panel */}
          {selected ?
            <div className="relative mt-6 md:mt-10">
              <div
                className="pointer-events-none absolute -left-px -right-px top-0 h-px bg-gradient-to-r from-transparent via-[#d4af37]/35 to-transparent"
                aria-hidden
              />
              <div
                className={`relative rounded-xl border border-[#d4af37]/16 bg-[linear-gradient(135deg,rgba(22,26,42,0.92),rgba(8,10,18,0.96))] p-5 sm:p-7 ${toneAccentClass(selected.tone)}`}
              >
                <div className="absolute left-4 top-0 h-6 w-6 -translate-y-1/2 rounded-br border-b border-r border-[#d4af37]/28 sm:left-6" />
                <div className="absolute right-4 top-0 h-6 w-6 -translate-y-1/2 rounded-bl border-b border-l border-[#d4af37]/28 sm:right-6" />

                <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                  <div>
                    <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.22em] text-[#d4af37]/65">
                      Giai đoạn chọn
                    </p>
                    <h3 className="mt-2 font-ctkp-serif text-2xl tracking-[0.04em] text-[#f5ead8]">
                      Tuổi {selected.label}
                    </h3>
                    <p className="mt-1 font-sans text-sm text-slate-400">
                      Khoảng cụ thể:{" "}
                      <span className="text-slate-200">
                        {selected.ageStart}–{selected.ageEnd}
                      </span>
                    </p>
                  </div>
                  <div className="flex flex-wrap items-center gap-2 sm:justify-end">
                    <span
                      className={`inline-flex items-center gap-2 rounded-full px-3 py-1.5 font-ctkp-serif text-[11px] uppercase tracking-[0.14em] ring-1 ${
                        selected.tone === "good" ? "bg-emerald-950/55 text-emerald-100 ring-emerald-600/35"
                        : selected.tone === "caution" ? "bg-rose-950/50 text-rose-100 ring-rose-600/35"
                        : "bg-amber-950/45 text-amber-50 ring-amber-600/35"
                      }`}
                    >
                      <span className="h-1.5 w-1.5 rounded-full bg-current opacity-80" aria-hidden />
                      {toneLabelVi(selected.tone)}
                    </span>
                    {selected.isCurrent ?
                      <span className="rounded-full border border-[#d4af37]/45 bg-[#d4af37]/14 px-3 py-1.5 font-ctkp-serif text-[10px] uppercase tracking-[0.16em] text-[#faf3dd]">
                        Đang trong giai đoạn này
                      </span>
                    : null}
                  </div>
                </div>

                <div className="mt-6 border-t border-[#d4af37]/10 pt-5">
                  <p className="font-ctkp-serif text-[11px] uppercase tracking-[0.16em] text-[#d4af37]/55">Cung / palace</p>
                  <p className="mt-2 font-ctkp-serif text-lg text-[#e8dcc4]">
                    {selected.palaceName ?? "Chưa gắn tên cung — xem lưới Lá số"}
                  </p>
                </div>

                <div className="mt-6">
                  <p className="font-ctkp-serif text-[11px] uppercase tracking-[0.16em] text-[#d4af37]/55">Tóm tắt</p>
                  <p className="ctkp-tuvi-text-body mt-2 font-sans text-[15px] leading-relaxed text-slate-200/92">
                    {selected.headline}
                  </p>
                </div>

                <div className="mt-6">
                  <p className="font-ctkp-serif text-[11px] uppercase tracking-[0.16em] text-[#d4af37]/55">
                    Điểm nhấn ({hl.length})
                  </p>
                  <ol className="mt-4 space-y-3">
                    {hl.map((line, i) => (
                      <li
                        key={`${selected.key}-hl-${i}`}
                        className="flex gap-3 rounded-lg border border-white/[0.06] bg-black/20 px-3 py-2.5"
                      >
                        <span className="font-ctkp-serif text-[13px] tabular-nums text-[#d4af37]/75">{i + 1}.</span>
                        <span className="font-sans text-[13px] leading-relaxed text-slate-400">{line}</span>
                      </li>
                    ))}
                  </ol>
                </div>
              </div>
            </div>
          : null}

          <div className="relative mt-10 border-t border-[#d4af37]/12 pt-8">
            <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.22em] text-[#d4af37]/72">Luận Đại vận (engine)</p>
            {items.some((d) => Boolean(d.majorPeriodProse?.trim())) ?
              <div className="mt-4 space-y-2">
                {items.map((d) => (
                  <details
                    key={`dv-mp-${d.key}`}
                    className="group rounded-xl border border-[#d4af37]/14 bg-black/22 px-4 py-2.5 open:border-[#d4af37]/28"
                  >
                    <summary className="cursor-pointer list-none font-sans text-[13px] text-[#e8dcc4] outline-none [&::-webkit-details-marker]:hidden">
                      <span className="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
                        <span className="font-ctkp-serif tabular-nums text-[#f0e6bc]">{d.label}</span>
                        <span className="text-[#d4af37]/45">·</span>
                        <span>{d.palaceName ?? "—"}</span>
                        <span className="text-[#d4af37]/45">·</span>
                        <span className="text-slate-400">{d.majorPeriodBranch ?? "—"}</span>
                      </span>
                    </summary>
                    <div className="mt-4 border-t border-[#d4af37]/08 pt-4">
                      {d.majorPeriodTitle ?
                        <p className="font-ctkp-serif text-[15px] text-[#faf6e8]">{d.majorPeriodTitle}</p>
                      : null}
                      {d.majorPeriodProse?.trim() ?
                        <p className="mt-3 whitespace-pre-line font-sans text-[13px] leading-[1.72] text-slate-200/92">
                          {d.majorPeriodProse}
                        </p>
                      : (
                        <p className="mt-3 font-sans text-[12px] text-slate-500">
                          Chưa có bài luận Đại vận từ engine.
                        </p>
                      )}
                    </div>
                  </details>
                ))}
              </div>
            : (
              <p className="mt-4 font-sans text-[12px] leading-relaxed text-slate-500">
                Chưa có bài luận Đại vận từ engine.
              </p>
            )}
          </div>

          <p className="relative mt-8 font-sans text-[12px] leading-relaxed text-slate-500">
            Luận sâu theo từng ô:{" "}
            {onGoLaSo ?
              <button
                type="button"
                onClick={onGoLaSo}
                className="font-ctkp-serif text-[#e8d9a8] underline underline-offset-2 decoration-[#d4af37]/45 hover:decoration-[#d4af37]/65"
              >
                Lá số
              </button>
            : <span className="text-[#e8d9a8]/92">Lá số</span>}
            {" · "}
            <span className="text-slate-400">Luận cung</span>
          </p>
        </>
      }
    </section>
  );
}