import React, { useState } from 'react'; import { base44 } from '@/api/base44Client'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { Button } from "@/components/ui/button"; import { Plus, Loader2, Sparkles, MapPin, Zap } from 'lucide-react'; import { motion, AnimatePresence } from 'framer-motion'; import { toast } from "sonner"; import SightingCard from '@/components/pokemon/SightingCard'; import AddSightingDialog from '@/components/pokemon/AddSightingDialog'; import FilterBar from '@/components/pokemon/FilterBar'; export default function Home() { const [dialogOpen, setDialogOpen] = useState(false); const [filters, setFilters] = useState({ search: '', rarity: 'all', type: 'all' }); const queryClient = useQueryClient(); const { data: sightings = [], isLoading } = useQuery({ queryKey: ['sightings'], queryFn: () => base44.entities.PokemonSighting.list('-created_date', 100), }); const createMutation = useMutation({ mutationFn: (data) => base44.entities.PokemonSighting.create(data), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['sightings'] }); setDialogOpen(false); toast.success('Sichtung gemeldet!', { description: 'Andere Trainer können jetzt dorthin teleportieren.' }); }, }); const verifyMutation = useMutation({ mutationFn: (sighting) => base44.entities.PokemonSighting.update(sighting.id, { verification_count: (sighting.verification_count || 0) + 1, verified: (sighting.verification_count || 0) >= 2 }), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['sightings'] }); toast.success('Bestätigt!'); }, }); const filteredSightings = sightings.filter(s => { const matchesSearch = !filters.search || s.pokemon_name.toLowerCase().includes(filters.search.toLowerCase()); const matchesRarity = filters.rarity === 'all' || s.rarity === filters.rarity; const matchesType = filters.type === 'all' || s.pokemon_type === filters.type; return matchesSearch && matchesRarity && matchesType; }); const stats = { total: sightings.length, legendary: sightings.filter(s => s.rarity === 'legendär' || s.rarity === 'mythisch').length, shiny: sightings.filter(s => s.rarity === 'shiny').length, }; return (
{/* Ambient Background */}
{/* Header */}
Community Koordinaten
PokéSpot Finder
Teile und finde seltene Pokémon-Koordinaten mit der Community
{/* Stats */}
{stats.legendary}
Legendäre
{/* Filter Bar */}
{/* Add Button */}
{/* Sightings List */} {isLoading ? (
) : filteredSightings.length === 0 ? (
{filters.search || filters.rarity !== 'all' || filters.type !== 'all' ? 'Keine Treffer' : 'Noch keine Sichtungen'}
{filters.search || filters.rarity !== 'all' || filters.type !== 'all' ? 'Versuche andere Filter' : 'Sei der Erste und melde ein seltenes Pokémon!'}
) : (
{filteredSightings.map((sighting, index) => ( verifyMutation.mutate(s)} /> ))} )}
{/* Add Dialog */}
createMutation.mutate(data)} isSubmitting={createMutation.isPending} /> ); }