"use client";

interface QuotaCardProps {
  /** 今日剩余票数 */
  remaining: number;
  /** 每日总额度（用于「重置为 X 票」展示） */
  dailyQuota: number;
}

export default function QuotaCard({ remaining, dailyQuota }: QuotaCardProps) {
  return (
    <div className="relative overflow-hidden rounded-2xl border border-purple-500/30 bg-gradient-to-br from-purple-500/[0.12] via-purple-500/[0.04] to-transparent shadow-[0_8px_32px_rgba(0,0,0,0.55),0_0_28px_rgba(139,92,246,0.2)]">
      {/* 装饰：右侧紫色光晕 */}
      <div
        aria-hidden
        className="absolute right-0 top-0 bottom-0 w-1/2 pointer-events-none"
        style={{
          background:
            "radial-gradient(circle at 70% 50%, rgba(139,92,246,0.45) 0%, transparent 60%)",
        }}
      />
      {/* 装饰：右侧"水晶"占位（无素材时用 CSS 渲染的辉光六边形） */}
      <CrystalDecoration />

      <div className="relative p-6 sm:p-8">
        <p className="text-xs text-white/70 tracking-wider">今日剩余票数</p>
        <div className="mt-2 flex items-baseline gap-1">
          <span className="font-display text-5xl sm:text-6xl text-white tabular-nums leading-none">
            {remaining}
          </span>
          <span className="text-xl text-white/85 ml-1">票</span>
        </div>
        <p className="text-[11px] text-white/55 mt-3">
          明日 00:00 重置为{" "}
          <span className="text-purple-300 font-display tabular-nums">
            {dailyQuota}
          </span>{" "}
          票
        </p>
      </div>
    </div>
  );
}

/** 右侧装饰：用 CSS 渲染的简易"紫色水晶"效果，作为 3D 素材到位前的占位。 */
function CrystalDecoration() {
  return (
    <div
      aria-hidden
      className="absolute right-4 sm:right-8 top-1/2 -translate-y-1/2 w-32 h-32 sm:w-40 sm:h-40 pointer-events-none"
      style={{ perspective: "600px" }}
    >
      <div
        className="absolute inset-0 rounded-2xl border border-purple-300/40"
        style={{
          background:
            "linear-gradient(135deg, rgba(196,181,253,0.4) 0%, rgba(139,92,246,0.25) 60%, rgba(91,33,182,0.4) 100%)",
          transform: "rotate(45deg) skewY(8deg)",
          boxShadow:
            "0 0 24px rgba(196,181,253,0.5), inset 0 0 24px rgba(255,255,255,0.15)",
        }}
      />
      <div
        className="absolute inset-3 rounded-xl"
        style={{
          background:
            "linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 60%)",
          transform: "rotate(45deg) skewY(8deg)",
        }}
      />
      <div className="absolute top-1/4 left-1/4 w-2 h-2 rounded-full bg-white/85 shadow-[0_0_8px_rgba(255,255,255,0.9)]" />
      <div className="absolute bottom-1/4 right-1/4 w-1 h-1 rounded-full bg-purple-200 shadow-[0_0_6px_rgba(196,181,253,0.9)]" />
    </div>
  );
}