"use client";

import type { HexLine } from "@/lib/gieo-que";

import { getTrigramByKey } from "./trigrams-data";
import type { IchingHexagramView } from "./types";

function LineRow({
  line,
  positionFromBottom,
  highlightMoving,
}: {
  line: HexLine;
  positionFromBottom: number;
  highlightMoving: boolean;
}) {
  const isYin = line.kind === "yin";
  const isMoving = line.changing && highlightMoving;
  const rowShell = isMoving ? "py-1.5 sm:py-2" : "py-0.5";

  const barYang = isMoving
    ? "h-[5px] rounded-full bg-[color:var(--tuvi-chart-vermilion)]/92"
    : "h-1 rounded-full bg-[color:var(--tuvi-chart-ink)]/78";
  const barYinSeg = isMoving
    ? "h-[5px] flex-1 rounded-full bg-[color:var(--tuvi-chart-vermilion)]/90"
    : "h-1 flex-1 rounded-full bg-[color:var(--tuvi-chart-ink)]/72";

  const idxClass = isMoving ? "text-[color:var(--tuvi-chart-vermilion)]" : "text-[color:var(--tuvi-chart-ink-muted)]";

  return (
    <div className={`flex items-center gap-3 sm:gap-4 ${rowShell}`}>
      <span className={`w-7 shrink-0 text-right font-ctkp-display text-xs tabular-nums sm:w-8 ${idxClass}`}>
        {positionFromBottom}
      </span>
      <div className="min-w-0 flex-1">
        {isYin ? (
          <div className="flex h-2 items-center gap-[12%]">
            <div className={barYinSeg} />
            <div className={barYinSeg} />
          </div>
        ) : (
          <div className={barYang} />
        )}
      </div>
      {line.changing && highlightMoving ? (
        <span className="shrink-0 font-ctkp-serif text-[10px] tracking-wide text-[color:var(--tuvi-chart-vermilion)]">
          động
        </span>
      ) : line.changing ? (
        <span className="shrink-0 font-ctkp-serif text-[10px] tracking-wide text-[color:var(--tuvi-chart-ink-muted)]">
          đảo
        </span>
      ) : (
        <span className="w-10 shrink-0 sm:w-12" aria-hidden />
      )}
    </div>
  );
}

type IchingHexCardProps = {
  label: string;
  view: IchingHexagramView;
  /** Chỉ quẻ chính mới highlight hào động */
  variant: "primary" | "mutual" | "changed";
};

/** lines[0] = sơ hào (dưới), lines[5] = thượng hào (trên). Hiển thị từ trên xuống. */
export function IchingHexCard({ label, view, variant }: IchingHexCardProps) {
  const ordered = [...view.lines].reverse();
  const highlightMoving = variant === "primary";
  const rec = view.record;
  const upper = getTrigramByKey(rec.upperTrigram);
  const lower = getTrigramByKey(rec.lowerTrigram);

  return (
    <article className="iching-card flex h-full flex-col rounded-sm border border-[color:var(--tuvi-chart-border)] bg-[color:var(--tuvi-chart-paper-raised)]/92 p-4 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.35)] sm:p-5">
      <header className="border-b border-[color:var(--tuvi-chart-border-soft)] pb-3 text-center">
        <p className="font-ctkp-serif text-[11px] uppercase tracking-[0.14em] text-[color:var(--tuvi-chart-ink-muted)]">
          {label}
        </p>
        <p className="mt-2 font-ctkp-display text-lg font-normal text-[color:var(--tuvi-chart-ink)]">
          {rec.nameHan} · {rec.nameVi}
        </p>
        <p className="mt-1 font-ctkp-serif text-xs text-[color:var(--tuvi-chart-ink-muted)]">
          Văn Vương {view.summary.kingWenNumber} · Thượng {upper.symbol} / Hạ {lower.symbol}
        </p>
      </header>
      <div className="mx-auto mt-4 w-full max-w-xs flex-1 space-y-2.5 border-y border-[color:var(--tuvi-chart-border-soft)] py-5 sm:max-w-sm sm:space-y-3 sm:py-6">
        {ordered.map((line, idx) => (
          <LineRow
            key={6 - idx}
            line={line}
            positionFromBottom={6 - idx}
            highlightMoving={highlightMoving}
          />
        ))}
      </div>
      <p className="mt-3 text-center font-ctkp-serif text-[10px] text-[color:var(--tuvi-chart-ink-muted)]">
        Trên là thượng quái · dưới là hạ quái
      </p>
    </article>
  );
}