"use client";
import { motion } from "framer-motion";
import { Mail, Phone, Shield, User, BadgeCheck, Crown, Clock } from "lucide-react";
import { useSeller } from "@/lib/SellerContext";
import type { VerificationItem } from "./types";
import { formatProfileDate } from "./mockData";

const ICON_MAP: Record<string, React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement> & { size?: number | string; color?: string }>> = {
  "Email Verified": Mail,
  "Phone Verified": Phone,
  "KYC Verified": Shield,
  "Identity Verified": User,
  "Trusted Seller": BadgeCheck,
  "Premium Seller": Crown,
};

function VerifItem({ item, idx }: { item: VerificationItem; idx: number }) {
  const Icon = ICON_MAP[item.label] ?? BadgeCheck;
  const isVerified = item.status === "verified";
  const isPending = item.status === "pending";

  const color = isVerified ? "#f0c040" : isPending ? "#fb923c" : "#6b7280";
  const bg = isVerified ? "rgba(240,192,64,0.1)" : isPending ? "rgba(251,146,60,0.1)" : "rgba(107,114,128,0.08)";
  const border = isVerified ? "rgba(240,192,64,0.3)" : isPending ? "rgba(251,146,60,0.3)" : "rgba(107,114,128,0.15)";
  const statusLabel = isVerified ? "Verified" : isPending ? "Pending" : "Not Verified";

  return (
    <motion.div
      initial={{ opacity: 0, x: -12 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ delay: idx * 0.07, type: "spring", stiffness: 300, damping: 26 }}
      className="flex items-center gap-3 p-3 rounded-xl"
      style={{ background: bg, border: `1px solid ${border}` }}
    >
      <div
        className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0"
        style={{ background: `${color}20` }}
      >
        <Icon size={15} color={color} />
      </div>
      <div className="flex-1 min-w-0">
        <p className="text-xs font-bold text-[var(--text-primary)] truncate">{item.label}</p>
        <p className="text-[10px] text-[var(--text-muted)] truncate">{item.description}</p>
      </div>
      <div className="shrink-0 text-right">
        <div className="flex items-center gap-1">
          {isVerified && (
            <div className="w-1.5 h-1.5 rounded-full" style={{ background: "#22c55e" }} />
          )}
          {isPending && (
            <Clock size={10} style={{ color: "#fb923c" }} />
          )}
          <span className="text-[10px] font-semibold" style={{ color }}>
            {statusLabel}
          </span>
        </div>
        {item.date && isVerified && (
          <p className="text-[9px] text-[var(--text-muted)] mt-0.5">{formatProfileDate(item.date)}</p>
        )}
      </div>
    </motion.div>
  );
}

export function VerificationBadges() {
  const { profile } = useSeller();
  const verifiedCount = profile.verifications.filter((v) => v.status === "verified").length;

  return (
    <div className="mx-4 mb-4 rounded-2xl p-4" id="verification" style={{ background: "var(--card)", border: "1px solid var(--border)" }}>
      <div className="flex items-center justify-between mb-3">
        <h2 className="text-base font-bold text-[var(--text-primary)]">Verification</h2>
        <span
          className="text-xs font-semibold px-2.5 py-1 rounded-full"
          style={{
            background: "rgba(34,197,94,0.12)",
            color: "#22c55e",
            border: "1px solid rgba(34,197,94,0.3)",
          }}
        >
          {verifiedCount}/{profile.verifications.length} Verified
        </span>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
        {profile.verifications.map((item, i) => (
          <VerifItem key={item.id} item={item} idx={i} />
        ))}
      </div>
    </div>
  );
}