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

function LineRow({
  line,
  positionFromBottom,
  tone,
  highlightMoving,
}: {
  line: HexLine;
  positionFromBottom: number;
  tone: "main" | "derived";
  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 barMain = tone === "main";
  const barYang =
    barMain && isMoving
      ? "h-[5px] rounded-full bg-amber-700/88"
      : barMain
        ? "h-1 rounded-full bg-amber-600/78"
        : "h-0.5 rounded-full bg-stone-500/50";
  const barYinDerived = "h-0.5 flex-1 rounded-full bg-stone-600/42";
  const barYinMain =
    barMain && isMoving
      ? "h-[5px] flex-1 rounded-full bg-amber-700/85"
      : "h-1 flex-1 rounded-full bg-amber-600/75";
  const yinSegClass = barMain ? barYinMain : barYinDerived;

  const idxClass = isMoving
    ? "text-[#c9a27c]/88"
    : barMain
      ? "text-amber-200/62"
      : "text-stone-500/85";

  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={yinSegClass} />
            <div className={yinSegClass} />
          </div>
        ) : (
          <div className={barYang} />
        )}
      </div>
      {line.changing && highlightMoving ? (
        <span className="shrink-0 font-ctkp-serif text-[10px] tracking-wide text-stone-500">động</span>
      ) : line.changing ? (
        <span className="shrink-0 font-ctkp-serif text-[10px] tracking-wide text-stone-600">đảo</span>
      ) : (
        <span className="w-10 shrink-0 sm:w-12" aria-hidden />
      )}
    </div>
  );
}

type HexagramBlockProps = {
  title: string;
  subtitle?: string;
  lines: HexLine[];
  /** Quẻ chính: vàng mực; quẻ biến: mực xám để đối chiếu (cùng hệ cổ thư, không màu hiện đại). */
  variant?: "primary" | "derived";
};

/** 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 HexagramBlock({ title, subtitle, lines, variant = "derived" }: HexagramBlockProps) {
  const ordered = [...lines].reverse();
  const isMain = variant === "primary";
  const highlightMoving = isMain;

  const shell = "px-1 py-4 sm:px-2 sm:py-5";

  const badge = isMain ? (
    <p className="mb-2 font-ctkp-serif text-[11px] tracking-wide text-stone-500">Quẻ chính</p>
  ) : (
    <p className="mb-2 font-ctkp-serif text-[11px] tracking-wide text-stone-600">Quẻ biến</p>
  );

  return (
    <div className={shell}>
      <div className="mb-4 text-center">
        {badge}
        <p className={`font-ctkp-display text-lg font-normal ${isMain ? "text-stone-200/95" : "text-stone-300/88"}`}>
          {title}
        </p>
        {subtitle ? (
          <p className="mt-2 text-pretty font-ctkp-serif text-xs leading-relaxed break-words text-stone-500">
            {subtitle}
          </p>
        ) : null}
      </div>
      <div className="mx-auto max-w-xs space-y-2.5 border-y border-stone-700/20 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}
            tone={isMain ? "main" : "derived"}
            highlightMoving={highlightMoving}
          />
        ))}
      </div>
      <p className="mt-5 text-center font-ctkp-serif text-[10px] text-stone-600">
        Trên là thượng quái · dưới là hạ quái
      </p>
    </div>
  );
}