"use client";
import { motion } from "framer-motion";
import { Lock } from "lucide-react";
import { useSeller } from "@/lib/SellerContext";
import { formatShortDate } from "./mockData";

export function SellerAchievements() {
  const { profile } = useSeller();
  const { achievements } = profile;
  const earnedCount = achievements.filter((a) => a.earned).length;

  return (
    <div className="mx-4 mb-4 rounded-2xl p-4" id="achievements" style={{ background: "var(--card)", border: "1px solid var(--border)" }}>
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-base font-bold text-[var(--text-primary)]">Achievements</h2>
        <span
          className="text-xs font-semibold px-2.5 py-1 rounded-full"
          style={{
            background: "rgba(240,192,64,0.12)",
            color: "#f0c040",
            border: "1px solid rgba(240,192,64,0.3)",
          }}
        >
          {earnedCount}/{achievements.length} Earned
        </span>
      </div>

      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
        {achievements.map((badge, i) => (
          <motion.div
            key={badge.id}
            initial={{ opacity: 0, scale: 0.85 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: i * 0.06, type: "spring", stiffness: 300, damping: 24 }}
            className="rounded-2xl p-3 text-center relative overflow-hidden"
            style={{
              background: badge.earned ? badge.bgColor : "rgba(255,255,255,0.02)",
              border: `1px solid ${badge.earned ? `${badge.color}40` : "rgba(255,255,255,0.06)"}`,
              opacity: badge.earned ? 1 : 0.5,
            }}
          >
            {/* Glow for earned */}
            {badge.earned && (
              <div
                className="absolute -top-4 -right-4 w-16 h-16 rounded-full pointer-events-none"
                style={{ background: `${badge.color}08`, filter: "blur(12px)" }}
              />
            )}

            {/* Lock overlay for unearned */}
            {!badge.earned && (
              <div className="absolute top-2 right-2">
                <Lock size={10} color="rgba(255,255,255,0.25)" />
              </div>
            )}

            <div className="text-3xl mb-2 leading-none">{badge.emoji}</div>

            <p
              className="text-xs font-black leading-tight mb-0.5"
              style={{ color: badge.earned ? badge.color : "var(--text-muted)" }}
            >
              {badge.label}
            </p>

            <p className="text-[9px] text-[var(--text-muted)] leading-snug mb-1.5">
              {badge.description}
            </p>

            {badge.earned && badge.earnedAt && (
              <span
                className="inline-block text-[9px] font-semibold px-1.5 py-0.5 rounded-md"
                style={{ background: `${badge.color}20`, color: badge.color }}
              >
                {formatShortDate(badge.earnedAt)}
              </span>
            )}

            {!badge.earned && (
              <span
                className="inline-block text-[9px] font-medium px-1.5 py-0.5 rounded-md"
                style={{ background: "rgba(255,255,255,0.04)", color: "var(--text-muted)" }}
              >
                Locked
              </span>
            )}
          </motion.div>
        ))}
      </div>
    </div>
  );
}
