import { memo } from 'react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { PlatformId, platforms, activePlatforms } from '@/lib/platforms';

interface PlatformSelectorProps {
  value: PlatformId;
  onChange: (platform: PlatformId) => void;
  disabled?: boolean;
}

export const PlatformSelector = memo(function PlatformSelector({
  value,
  onChange,
  disabled = false,
}: PlatformSelectorProps) {
  const currentPlatform = platforms[value];

  return (
    <Select value={value} onValueChange={onChange} disabled={disabled}>
      <SelectTrigger className="w-[180px] h-8 text-xs">
        <SelectValue>
          <div className="flex items-center gap-2">
            <span>{currentPlatform.icon}</span>
            <span>{currentPlatform.displayName}</span>
            {currentPlatform.status === 'beta' && (
              <Badge variant="secondary" className="text-[10px] px-1 py-0">
                BETA
              </Badge>
            )}
          </div>
        </SelectValue>
      </SelectTrigger>
      <SelectContent>
        {activePlatforms.map((platform) => (
          <SelectItem key={platform.id} value={platform.id}>
            <div className="flex items-center gap-2">
              <span>{platform.icon}</span>
              <div className="flex flex-col">
                <span className="font-medium">{platform.displayName}</span>
                <span className="text-xs text-muted-foreground">
                  {platform.language}
                </span>
              </div>
              {platform.status === 'beta' && (
                <Badge variant="secondary" className="text-[10px] ml-auto">
                  BETA
                </Badge>
              )}
            </div>
          </SelectItem>
        ))}
        <SelectItem value="spatial" disabled>
          <div className="flex items-center gap-2 opacity-50">
            <span>🌐</span>
            <div className="flex flex-col">
              <span className="font-medium">Spatial Creator</span>
              <span className="text-xs text-muted-foreground">
                Coming Soon
              </span>
            </div>
          </div>
        </SelectItem>
        <SelectItem value="core" disabled>
          <div className="flex items-center gap-2 opacity-50">
            <span>🎯</span>
            <div className="flex flex-col">
              <span className="font-medium">Core Games</span>
              <span className="text-xs text-muted-foreground">
                Coming Soon
              </span>
            </div>
          </div>
        </SelectItem>
      </SelectContent>
    </Select>
  );
});