
'use client';

import { Shield, Award, Star, Zap, CheckCircle2, Clock, Leaf, Wrench } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';

interface TrustBadge {
  id: string;
  badgeType: string;
  name: string;
  description?: string;
  isVerified: boolean;
  issuedDate: string;
  expiryDate?: string;
  issuer?: string;
}

interface TrustBadgesProps {
  badges: TrustBadge[];
  size?: 'sm' | 'md' | 'lg';
  showLabels?: boolean;
  variant?: 'compact' | 'detailed';
}

const BADGE_CONFIG: Record<string, {
  icon: any;
  color: string;
  bgColor: string;
  label: string;
}> = {
  VERIFIED_CONTRACTOR: {
    icon: Shield,
    color: 'text-blue-600',
    bgColor: 'bg-blue-500',
    label: 'Verified Contractor',
  },
  LICENSED_PROFESSIONAL: {
    icon: Award,
    color: 'text-purple-600',
    bgColor: 'bg-purple-500',
    label: 'Licensed Professional',
  },
  INSURED: {
    icon: Shield,
    color: 'text-cyan-600',
    bgColor: 'bg-cyan-500',
    label: 'Fully Insured',
  },
  TOP_RATED: {
    icon: Star,
    color: 'text-amber-600',
    bgColor: 'bg-amber-500',
    label: 'Top Rated',
  },
  QUICK_RESPONDER: {
    icon: Zap,
    color: 'text-green-600',
    bgColor: 'bg-green-500',
    label: 'Quick Responder',
  },
  QUALITY_GUARANTEE: {
    icon: CheckCircle2,
    color: 'text-emerald-600',
    bgColor: 'bg-emerald-500',
    label: 'Quality Guarantee',
  },
  ECO_FRIENDLY: {
    icon: Leaf,
    color: 'text-lime-600',
    bgColor: 'bg-lime-500',
    label: 'Eco-Friendly',
  },
  SAFETY_CERTIFIED: {
    icon: Shield,
    color: 'text-red-600',
    bgColor: 'bg-red-500',
    label: 'Safety Certified',
  },
  WARRANTY_PROVIDER: {
    icon: CheckCircle2,
    color: 'text-indigo-600',
    bgColor: 'bg-indigo-500',
    label: 'Warranty Provider',
  },
  YEARS_IN_BUSINESS: {
    icon: Clock,
    color: 'text-gray-600',
    bgColor: 'bg-gray-500',
    label: 'Years in Business',
  },
};

const SIZE_CLASSES = {
  sm: 'w-6 h-6 text-[10px]',
  md: 'w-8 h-8 text-xs',
  lg: 'w-12 h-12 text-sm',
};

const ICON_SIZE_CLASSES = {
  sm: 'w-3 h-3',
  md: 'w-4 h-4',
  lg: 'w-6 h-6',
};

export function TrustBadges({
  badges,
  size = 'md',
  showLabels = false,
  variant = 'compact',
}: TrustBadgesProps) {
  if (!badges || badges.length === 0) return null;

  // Filter active and verified badges
  const activeBadges = badges.filter((badge) => {
    if (!badge.isVerified) return false;
    if (badge.expiryDate) {
      const expiryDate = new Date(badge.expiryDate);
      if (expiryDate < new Date()) return false;
    }
    return true;
  });

  if (activeBadges.length === 0) return null;

  if (variant === 'compact') {
    return (
      <div className="flex flex-wrap gap-2">
        {activeBadges.map((badge) => {
          const config = BADGE_CONFIG[badge.badgeType] || BADGE_CONFIG.VERIFIED_CONTRACTOR;
          const IconComponent = config.icon;

          return (
            <TooltipProvider key={badge.id}>
              <Tooltip>
                <TooltipTrigger asChild>
                  <div
                    className={`${SIZE_CLASSES[size]} ${config.bgColor} rounded-full flex items-center justify-center cursor-pointer transition-transform hover:scale-110 shadow-sm`}
                  >
                    <IconComponent className={`${ICON_SIZE_CLASSES[size]} text-white`} />
                  </div>
                </TooltipTrigger>
                <TooltipContent>
                  <div className="text-sm">
                    <p className="font-semibold">{badge.name}</p>
                    {badge.description && (
                      <p className="text-muted-foreground text-xs mt-1">
                        {badge.description}
                      </p>
                    )}
                    {badge.issuer && (
                      <p className="text-muted-foreground text-xs mt-1">
                        Issued by: {badge.issuer}
                      </p>
                    )}
                  </div>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          );
        })}
      </div>
    );
  }

  // Detailed variant with labels
  return (
    <div className="flex flex-wrap gap-3">
      {activeBadges.map((badge) => {
        const config = BADGE_CONFIG[badge.badgeType] || BADGE_CONFIG.VERIFIED_CONTRACTOR;
        const IconComponent = config.icon;

        return (
          <Badge
            key={badge.id}
            variant="secondary"
            className={`${config.color} bg-opacity-10 px-3 py-2 flex items-center gap-2`}
          >
            <div className={`${config.bgColor} rounded-full p-1`}>
              <IconComponent className="w-3 h-3 text-white" />
            </div>
            <span className="font-medium">{showLabels ? badge.name : config.label}</span>
          </Badge>
        );
      })}
    </div>
  );
}

// Standalone trust indicator for hero sections
export function TrustIndicator({ count }: { count?: number }) {
  const displayCount = count || 5;
  
  return (
    <div className="inline-flex items-center gap-3 bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2 rounded-full shadow-lg border border-gray-200 dark:border-gray-700">
      <div className="flex -space-x-2">
        <div className="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center border-2 border-white">
          <Shield className="w-3 h-3 text-white" />
        </div>
        <div className="w-6 h-6 rounded-full bg-amber-500 flex items-center justify-center border-2 border-white">
          <Star className="w-3 h-3 text-white" />
        </div>
        <div className="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center border-2 border-white">
          <CheckCircle2 className="w-3 h-3 text-white" />
        </div>
      </div>
      <div className="text-sm">
        <span className="font-semibold text-gray-900 dark:text-white">
          {displayCount}+ Verified Badges
        </span>
        <p className="text-xs text-gray-600 dark:text-gray-400">
          Trusted & Certified
        </p>
      </div>
    </div>
  );
}
