"use client";

import * as React from "react";
import { ShieldCheck, CheckCircle2, User, Sparkles, Zap } from "lucide-react";
import { cn } from "@/lib/utils";

export function TopAdBadge({
  className,
  size = "sm",
}: {
  className?: string;
  size?: "xs" | "sm" | "md";
}) {
  const sizeClasses = {
    xs: "text-[9px] px-1.5 py-0.5 gap-0.5 font-bold",
    sm: "text-[10px] px-2 py-0.5 gap-1 font-bold",
    md: "text-xs px-2.5 py-1 gap-1 font-bold",
  };
  const iconSizes = {
    xs: "w-2.5 h-2.5",
    sm: "w-3 h-3",
    md: "w-3.5 h-3.5",
  };

  return (
    <span
      className={cn(
        "inline-flex items-center rounded-md select-none tracking-wider uppercase shadow-xs transition-all",
        "bg-gradient-to-r from-amber-500 to-amber-600 text-slate-950 font-bold",
        sizeClasses[size],
        className
      )}
      title="Top Promoted Ad · Boosted Visibility"
    >
      <Zap className={cn(iconSizes[size], "fill-slate-950 text-slate-950 shrink-0")} />
      <span>TOP</span>
    </span>
  );
}

export type BadgeType = "AGENCY" | "AGENT" | "OWNER" | "AUTO";

interface VerifiedBadgeProps {
  type?: BadgeType;
  isVerifiedAgency?: boolean;
  isVerifiedAgent?: boolean;
  role?: string;
  className?: string;
  size?: "xs" | "sm" | "md" | "lg";
  showLabel?: boolean;
}

export function VerifiedBadge({
  type = "AUTO",
  isVerifiedAgency = false,
  isVerifiedAgent = false,
  role,
  className,
  size = "sm",
  showLabel = true,
}: VerifiedBadgeProps) {
  // Determine resolved badge type
  let resolvedType: "AGENCY" | "AGENT" | "OWNER" = "OWNER";

  if (type === "AGENCY" || isVerifiedAgency) {
    resolvedType = "AGENCY";
  } else if (type === "AGENT" || isVerifiedAgent || role === "AGENT" || role === "AGENCY_ADMIN") {
    resolvedType = "AGENT";
  } else if (type === "OWNER" || role === "PROPERTY_OWNER" || role === "CUSTOMER") {
    resolvedType = "OWNER";
  }

  const sizeClasses = {
    xs: "text-[9px] px-1.5 py-0.5 gap-1",
    sm: "text-[10px] px-2 py-0.5 gap-1",
    md: "text-xs px-2.5 py-1 gap-1.5",
    lg: "text-sm px-3 py-1.5 gap-2",
  };

  const iconSizes = {
    xs: "w-2.5 h-2.5",
    sm: "w-3 h-3",
    md: "w-3.5 h-3.5",
    lg: "w-4 h-4",
  };

  if (resolvedType === "AGENCY") {
    return (
      <span
        className={cn(
          "inline-flex items-center font-semibold rounded-full border transition-all select-none shadow-2xs",
          "bg-amber-500/10 text-amber-900 dark:text-amber-300 border-amber-500/30",
          sizeClasses[size],
          className
        )}
        title="KYC Verified Agency · Corporate CAC & SCUML Registered"
      >
        <Sparkles className={cn(iconSizes[size], "text-amber-600 dark:text-amber-400 shrink-0 fill-amber-500/20")} />
        {showLabel && <span>KYC Verified Agency</span>}
      </span>
    );
  }

  if (resolvedType === "AGENT") {
    return (
      <span
        className={cn(
          "inline-flex items-center font-semibold rounded-full border transition-all select-none shadow-2xs",
          "bg-emerald-500/10 text-emerald-900 dark:text-emerald-300 border-emerald-500/30",
          sizeClasses[size],
          className
        )}
        title="KYC Verified Agent · LASRERA & NIN Authenticated"
      >
        <ShieldCheck className={cn(iconSizes[size], "text-emerald-600 dark:text-emerald-400 shrink-0")} />
        {showLabel && <span>KYC Verified Agent</span>}
      </span>
    );
  }

  return (
    <span
      className={cn(
        "inline-flex items-center font-medium rounded-full border transition-all select-none",
        "bg-muted/80 text-muted-foreground border-border/80",
        sizeClasses[size],
        className
      )}
      title="Direct Property Owner / Private Seller Listing"
    >
      <User className={cn(iconSizes[size], "text-muted-foreground shrink-0")} />
      {showLabel && <span>Direct Owner</span>}
    </span>
  );
}