"use client";

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

export default function PointsDashboard() {
  const { t } = useApp();

  return (
    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col gap-6">
      {/* Header Row */}
      <div className="flex items-center justify-between">
        {/* Left - Tags */}
        <div className="flex items-center gap-3">
          {/* Season 1 Tag */}
          <div className="bg-[#f9fafb] dark:bg-gray-700 border border-border-normal dark:border-gray-600 rounded-full px-3 py-1 flex items-center justify-center">
            <span className="text-caption-tiny font-bold text-text-primary dark:text-white leading-[150%] tracking-[0.01em]">
              {t("points.season1")}
            </span>
          </div>

          {/* Live Tag */}
          <div className="bg-[#e1f8ec] dark:bg-green-900/30 border border-[#b8ecd2] dark:border-green-700 rounded-full px-3 py-1 flex items-center gap-2">
            <div className="w-1.5 h-1.5 rounded-full bg-[#10b981] opacity-55" />
            <span className="text-caption-tiny font-bold text-[#10b981] dark:text-green-400 leading-[150%] tracking-[0.01em]">
              {t("points.live")}
            </span>
          </div>
        </div>

        {/* Right - 7x Points Button */}
        <div className="rounded-[14px] px-4 py-2 flex items-center gap-2 h-[34.78px] shadow-lg bg-gradient-to-r from-[#fee685] to-[#fdc700] rotate-1">
          <Image src="/icon0.svg" alt="" width={16} height={16} />
          <span className="text-caption-tiny font-bold text-text-primary leading-[150%] tracking-[0.01em]">
            {t("points.xPoints")}
          </span>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex gap-6">
        {/* Left Section - Points Info */}
        <div className="flex-1 flex flex-col gap-6">
          {/* Title */}
          <div className="flex flex-col gap-1">
            <h2 className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
              {t("points.pointsDashboard")}
            </h2>
            <p className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
              <span>{t("points.unlockUpTo")} </span>
              <span className="font-bold text-[#fdc700]">{t("points.xPoints")}</span>
              <span> {t("points.withEcosystemMultipliers")}</span>
            </p>
          </div>

          {/* Stats Grid */}
          <div className="flex items-center justify-between gap-6">
            {/* Total Points */}
            <div className="flex flex-col gap-1">
              <span className="text-body-small font-bold text-text-secondary dark:text-gray-300 leading-[150%]">
                {t("points.yourTotalPoints")}
              </span>
              <span className="text-[48px] font-extrabold leading-[110%] tracking-[-0.01em] font-jetbrains bg-gradient-to-b from-[#111827] to-[#4b5563] bg-clip-text text-transparent">
                2,450
              </span>
            </div>

            {/* Rank and Timer Container */}
            <div className="bg-bg-subtle dark:bg-gray-700 rounded-2xl border border-white/5 dark:border-gray-600 px-6 h-28 flex items-center gap-12">
              {/* Global Rank */}
              <div className="flex flex-col gap-1">
                <span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
                  {t("points.globalRank")}
                </span>
                <span className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
                  #8,204
                </span>
                <span className="text-[10px] font-regular text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
                  {t("points.topOfUsers")}
                </span>
              </div>

              {/* Divider */}
              <div className="w-px h-8 bg-border-normal dark:bg-gray-600" />

              {/* Ends In */}
              <div className="flex flex-col gap-1">
                <span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
                  {t("points.endsIn")}
                </span>
                <span className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
                  12d 4h
                </span>
                <span className="text-[10px] font-regular text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
                  Feb 28
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Right Section - VIP Card */}
        <VipCard
          memberTier="Silver Member"
          level={2}
          currentPoints={2450}
          totalPoints={3000}
          nextTier="Gold"
          pointsToNextTier={550}
        />
      </div>
    </div>
  );
}