import { ThunderboltFill } from "@gravity-ui/icons";
import { Nfc } from "lucide-react";
import { CARD_FACE_REGISTRY, type CardFaceName } from "@/components/faces";

// ---------------------------------------------------------------------------
// Palette
// ---------------------------------------------------------------------------

const CARD_PALETTES = [
  "bg-linear-to-br from-blue-600 to-indigo-700",
  "bg-linear-to-br from-violet-600 to-purple-700",
  "bg-linear-to-br from-emerald-600 to-teal-700",
  "bg-linear-to-br from-rose-500 to-pink-700",
  "bg-linear-to-br from-amber-500 to-orange-600",
  "bg-linear-to-br from-slate-600 to-zinc-700",
];

function paletteForId(idTag: string): string {
  const hash = idTag.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
  return CARD_PALETTES[hash % CARD_PALETTES.length];
}

// ---------------------------------------------------------------------------
// Layout — 内容元素（余额、logo、卡号）的排列方式
// ---------------------------------------------------------------------------

export type CardLayoutName = "center" | "around";

// ---------------------------------------------------------------------------
// IdTagCard
// ---------------------------------------------------------------------------

type IdTagCardProps = {
  idTag: string;
  balance: number;
  isSelected?: boolean;
  isDisabled?: boolean;
  /** 内容排列方式：余额、logo、卡号等信息元素的布局 */
  layout?: CardLayoutName;
  /** 卡底装饰风格：纹理、光效、几何图形等视觉元素 */
  skin?: CardFaceName;
  onClick?: () => void;
};

export function IdTagCard({
  idTag,
  balance,
  isSelected = false,
  isDisabled = false,
  layout = "around",
  skin = "circles",
  onClick,
}: IdTagCardProps) {
  const palette = paletteForId(idTag);
  const Skin = CARD_FACE_REGISTRY[skin];

  return (
    <button
      type="button"
      disabled={isDisabled}
      onClick={onClick}
      className={[
        "relative w-full overflow-hidden rounded-2xl select-none",
        "aspect-[1.586/1] transition-all duration-200 active:scale-[0.97]",
        isDisabled ? "cursor-not-allowed opacity-45 grayscale-[0.25]" : "cursor-pointer",
        isSelected
          ? "ring-3 ring-offset-2 ring-offset-background ring-accent shadow-2xl shadow-accent/25"
          : "ring-1 ring-black/8 hover:ring-accent/40 shadow-md hover:shadow-xl",
      ].join(" ")}
    >
      {/* 渐变底色 */}
      <div className={`absolute inset-0 ${palette}`} />

      {/* 卡底装饰 */}
      <Skin />

      {/* 内容布局 */}
      {layout === "center" ? (
        <div className="relative flex h-full flex-col justify-between px-5 py-4">
          <div className="flex items-center justify-between">
            <span className="text-[9px] font-bold uppercase tracking-[0.2em] text-white/50">
              储值卡
            </span>
            <div className="flex items-center gap-1">
              <ThunderboltFill className="size-3.5 text-white/60" />
              <span className="text-[9px] font-bold uppercase tracking-[0.15em] text-white/60">
                Helios
              </span>
            </div>
          </div>

          <div className="mt-2">
            <p className="text-[24px] font-medium leading-none tracking-[0.22em] text-white drop-shadow-md">
              {idTag.replace(/(.{4})/, "$1 ")}
            </p>
          </div>

          <div className="flex items-end justify-between">
            <Nfc className="size-6 rotate-180 text-white/30 stroke-[1.5]" />
            <div className="text-right">
              <p className="text-[8px] font-semibold uppercase tracking-[0.15em] text-white/40">
                余额
              </p>
              <p className="text-lg font-bold leading-tight text-white drop-shadow">
                ¥{(balance / 100).toFixed(2)}
              </p>
            </div>
          </div>
        </div>
      ) : (
        <div className="relative flex h-full flex-col justify-between px-5 py-4">
          <div className="flex items-start justify-between">
            <Nfc className="size-7 rotate-180 text-white/35 stroke-[1.5]" />
            <div className="flex items-center gap-1">
              <ThunderboltFill className="size-3.5 text-white/60" />
              <span className="text-[9px] font-bold uppercase tracking-[0.15em] text-white/60">
                Helios
              </span>
            </div>
          </div>

          <div className="flex items-end justify-between">
            <div className="flex flex-col items-start gap-0.5">
              <p className="text-[10px] font-semibold uppercase tracking-[0.15em] text-white/40">
                储值余额
              </p>
              <p className="text-[22px] font-bold text-white drop-shadow">
                ¥{(balance / 100).toFixed(2)}
              </p>
            </div>
            <div className="flex flex-col items-end gap-0.5">
              <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-white/35">
                储值卡
              </span>
              <p className="text-lg font-medium tracking-widest text-white/90 drop-shadow">
                {idTag.replace(/(.{4})/, "$1 ")}
              </p>
            </div>
          </div>
        </div>
      )}
    </button>
  );
}
