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';

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

const TRUST_LEVELS = [
  {
    value: 'all' as const,
    label: 'All Users',
    description: 'Show content from everyone',
    icon: Users,
    color: 'text-gray-400',
  },
  {
    value: 'verified' as const,
    label: 'Verified',
    description: 'You follow them or they are verified (trust ≥90)',
    icon: CheckCircle2,
    color: 'text-green-500',
  },
  {
    value: 'trusted' as const,
    label: 'Trusted',
    description: 'Friends-of-friends or NIP-05 verified (trust ≥60)',
    icon: Shield,
    color: 'text-yellow-500',
  },
  {
    value: 'following' as const,
    label: 'Following Only',
    description: 'Only show content from people you follow',
    icon: CheckCircle2,
    color: 'text-green-500',
  },
];

export function TrustFilter({ value, onChange, className, compact = false }: TrustFilterProps) {
  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" />
            Trust Filter
            {value !== 'all' && (
              <Badge variant="secondary" className="ml-1 px-1.5 py-0 text-[10px]">
                {value === 'verified' ? '≥90' : value === 'trusted' ? '≥60' : 'Following'}
              </Badge>
            )}
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-72">
          <DropdownMenuLabel>Filter by Trust Level</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">{level.label}</span>
              </div>
              <p className="text-xs text-muted-foreground pl-6">{level.description}</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]" />
        Trust Filter
      </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">{level.label}</div>
                <p className="text-xs text-gray-400">{level.description}</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
 */