"use client";

import Image from "next/image";
import { useApp } from "@/contexts/AppContext";

interface VipCardProps {
  memberTier: string;
  level: number;
  currentPoints: number;
  totalPoints: number;
  nextTier: string;
  pointsToNextTier: number;
}

export default function VipCard({
  memberTier = "Silver Member",
  level = 2,
  currentPoints = 2450,
  totalPoints = 3000,
  nextTier = "Gold",
  pointsToNextTier = 550,
}: VipCardProps) {
  const { t } = useApp();
  const progressPercent = (currentPoints / totalPoints) * 100;
  const progressBarPercent = Math.min(progressPercent * 0.47, 38.4); // 根据原型调整比例

  return (
    <div className="w-full md:w-[340px] h-[198px] relative rounded-xl overflow-hidden" style={{ background: "linear-gradient(180deg, #484848 0%, #1e1e1e 100%)" }}>
      {/* Top Left - Member Info */}
      <div className="absolute left-6 top-[33px]">
        <div className="flex flex-col gap-1">
          <span className="text-body-default font-bold text-white leading-[150%]">
            {memberTier}
          </span>
          <span className="text-body-small font-bold text-text-tertiary dark:text-gray-400 leading-[150%]">
            {t("points.currentTier")}
          </span>
        </div>
      </div>

      {/* Top Right - VIP Badge */}
      <div className="absolute right-6 top-[26px]">
        <div className="relative w-[55px] h-[28px]">
          {/* Badge Layers */}
          <div className="absolute left-[0.45px] top-[6px]">
            <Image src="/components/points/polygon-30.svg" alt="" width={24} height={15} />
          </div>
          <div className="absolute left-[28.55px] top-[6px]">
            <Image src="/components/points/polygon-40.svg" alt="" width={24} height={15} />
          </div>
          <div className="absolute left-[4px] top-[3px]">
            <Image src="/components/points/polygon-20.svg" alt="" width={21} height={25} />
          </div>
          <div className="absolute left-[4px] top-[3px]">
            <Image src="/components/points/mask-group1.svg" alt="" width={21} height={25} />
          </div>

          {/* Decorative circles */}
          <div className="absolute left-[12.84px] top-0 w-[3.32px] h-[3.32px] rounded-full" style={{ background: "linear-gradient(180deg, #ffcd1d 0%, #ff971d 100%)" }} />
          <div className="absolute left-0 top-[5.14px] w-[2.72px] h-[2.72px] rounded-full" style={{ background: "linear-gradient(180deg, #ffcd1d 0%, #ff971d 100%)" }} />
          <div className="absolute left-[26.2px] top-[5.14px] w-[2.72px] h-[2.72px] rounded-full" style={{ background: "linear-gradient(180deg, #ffcd1d 0%, #ff971d 100%)" }} />

          {/* Level Badge */}
          <div className="absolute left-[24px] top-[9.62px]">
            <Image src="/components/points/rectangle-420.svg" alt="" width={31} height={12} />
            <span className="absolute left-[9.24px] top-0 text-[8.5px] font-semibold leading-[120%] uppercase" style={{ color: "#a07400" }}>
              LV{level}
            </span>
          </div>
        </div>
      </div>

      {/* Bottom - Progress Section */}
      <div className="absolute left-1/2 -translate-x-1/2 top-[107px] w-[280px] flex flex-col gap-1">
        {/* Progress Label */}
        <div className="flex items-center justify-between">
          <span className="text-caption-tiny font-regular leading-[150%] tracking-[0.01em]" style={{ color: "#d1d5db" }}>
            {t("points.progress")}
          </span>
          <span className="text-caption-tiny font-bold text-white leading-[150%] tracking-[0.01em]">
            {currentPoints} / {totalPoints}
          </span>
        </div>

        {/* Progress Bar */}
        <div className="relative w-full h-1 rounded-[5px]" style={{ background: "#343434" }}>
          <div
            className="absolute left-0 top-0 h-full rounded-[5px]"
            style={{
              width: `${progressBarPercent}%`,
              background: "linear-gradient(90deg, rgba(255, 255, 255, 1) 95.15%, rgba(255, 255, 255, 0) 100%)"
            }}
          />
          <div
            className="absolute w-[10px] h-[10px] rounded-full bg-white -top-[3px]"
            style={{
              left: `${Math.max(0, progressBarPercent - 3)}%`,
              filter: "blur(3.42px)"
            }}
          />
        </div>
      </div>

      {/* Bottom - Next Tier */}
      <div className="absolute left-6 top-[163px] flex items-center gap-1">
        <span className="text-caption-tiny font-regular text-white leading-[150%] tracking-[0.01em]">
          {t("points.pointsToNextTier")
            .replace("{points}", pointsToNextTier.toString())
            .split("{tier}")[0]}
          <span className="font-bold">{nextTier}</span>
        </span>
        <Image src="/icons/actions/icon-arrow-gold.svg" alt="" width={16} height={16} />
      </div>
    </div>
  );
}