SkateSpots/src/components/TrustFilter.tsx

import { Shield, CheckCircle2, Users } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import type { TrustFilterLevel } from '@/lib/trustFilter';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuCheckboxItem,
  DropdownMenuTrigger,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu';
import { cn } from '@/lib/utils';
import { useTranslation } from '@/contexts/language';

interface TrustFilterProps {
  value: TrustFilterLevel;
  onChange: (value: TrustFilterLevel) => void;
  className?: string;
  compact?: boolean;
}

const TRUST_LEVELS = [
  {
    value: 'all' as const,
    labelKey: 'chromeUi.trust.all',
    descKey: 'chromeUi.trust.allDesc',
    icon: Users,
    color: 'text-gray-400',
  },
  {
    value: 'verified' as const,
    labelKey: 'chromeUi.trust.verified',
    descKey: 'chromeUi.trust.verifiedDesc',
    icon: CheckCircle2,
    color: 'text-green-500',
  },
  {
    value: 'trusted' as const,
    labelKey: 'chromeUi.trust.trusted',
    descKey: 'chromeUi.trust.trustedDesc',
    icon: Shield,
    color: 'text-yellow-500',
  },
  {
    value: 'following' as const,
    labelKey: 'chromeUi.trust.following',
    descKey: 'chromeUi.trust.followingDesc',
    icon: CheckCircle2,
    color: 'text-green-500',
  },
];

export function TrustFilter({ value, onChange, className, compact = false }: TrustFilterProps) {
  const { t } = useTranslation();
  const currentLevel = TRUST_LEVELS.find((l) => l.value === value) || TRUST_LEVELS[0];
  const Icon = currentLevel.icon;

  if (compact) {
    return (
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="outline"
            size="sm"
            className={cn("gap-2", className)}
          >
            <Icon className="h-4 w-4" />
            {t('chromeUi.trustFilter')}
            {value !== 'all' && (
              <Badge variant="secondary" className="ml-1 px-1.5 py-0 text-[10px]">
                {value === 'verified' ? '≥90' : value === 'trusted' ? '≥60' : t('chromeUi.trust.followingShort')}
              </Badge>
            )}
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-72">
          <DropdownMenuLabel>{t('chromeUi.filterByTrustLevel')}</DropdownMenuLabel>
          <DropdownMenuSeparator />
          {TRUST_LEVELS.map((level) => (
            <DropdownMenuCheckboxItem
              key={level.value}
              checked={value === level.value}
              onCheckedChange={() => onChange(level.value)}
              className="flex flex-col items-start py-3"
            >
              <div className="flex items-center gap-2 mb-1">
                <level.icon className={cn("h-4 w-4", level.color)} />
                <span className="font-bold">{t(level.labelKey)}</span>
              </div>
              <p className="text-xs text-muted-foreground pl-6">{t(level.descKey)}</p>
            </DropdownMenuCheckboxItem>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>
    );
  }

  return (
    <div className={cn("space-y-3", className)}>
      <label className="text-sm font-bold text-gray-300 uppercase tracking-wide flex items-center gap-2">
        <Shield className="h-4 w-4 text-[#ccff00]" />
        {t('chromeUi.trustFilter')}
      </label>
      <div className="grid gap-2">
        {TRUST_LEVELS.map((level) => {
          const Icon = level.icon;
          const isActive = value === level.value;

          return (
            <button
              key={level.value}
              onClick={() => onChange(level.value)}
              className={cn(
                "flex items-start gap-3 p-3 rounded-lg border-2 transition-all text-left",
                isActive
                  ? "bg-black/50 border-[#ccff00] shadow-[0_0_10px_rgba(204,255,0,0.3)]"
                  : "bg-black/20 border-white/10 hover:border-white/30"
              )}
            >
              <Icon className={cn("h-5 w-5 flex-shrink-0 mt-0.5", isActive ? level.color : "text-gray-500")} />
              <div className="flex-1">
                <div className="font-bold text-white mb-1">{t(level.labelKey)}</div>
                <p className="text-xs text-gray-400">{t(level.descKey)}</p>
              </div>
              {isActive && (
                <CheckCircle2 className="h-5 w-5 text-[#ccff00] flex-shrink-0" />
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
}

/**
 * Helper function to filter items by trust score
 */