import { useState } from 'react'; import Link from 'next/link'; import Head from 'next/head'; interface Plant { id: string; commonName: string; scientificName?: string; owner: { name: string }; location: { city?: string; country?: string }; status: string; generation: number; } interface NearbyPlant { plant: Plant; distance: number; } export default function ExplorePlants() { const [searchTerm, setSearchTerm] = useState(''); const [searchResults, setSearchResults] = useState([]); const [nearbyPlants, setNearbyPlants] = useState([]); const [loading, setLoading] = useState(false); const [latitude, setLatitude] = useState(''); const [longitude, setLongitude] = useState(''); const [radius, setRadius] = useState('50'); const [activeTab, setActiveTab] = useState<'search' | 'nearby'>('search'); const handleSearch = async (e: React.FormEvent) => { e.preventDefault(); setLoading(true); try { const response = await fetch( `/api/plants/search?q=${encodeURIComponent(searchTerm)}` ); const data = await response.json(); if (data.success) { setSearchResults(data.results); } } catch (error) { console.error('Error searching plants:', error); } finally { setLoading(false); } }; const handleFindNearby = async (e: React.FormEvent) => { e.preventDefault(); setLoading(true); try { const response = await fetch( `/api/plants/nearby?lat=${latitude}&lon=${longitude}&radius=${radius}` ); const data = await response.json(); if (data.success) { setNearbyPlants(data.plants); } } catch (error) { console.error('Error finding nearby plants:', error); } finally { setLoading(false); } }; const getCurrentLocation = () => { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => { setLatitude(position.coords.latitude.toString()); setLongitude(position.coords.longitude.toString()); }, (error) => { console.error('Error getting location:', error); } ); } }; return (
Explore Plants - LocalGreenChain {/* Header */}
{/* Main Content */}

Explore the Plant Network

{/* Tabs */}
{/* Search Tab */} {activeTab === 'search' && (
setSearchTerm(e.target.value)} placeholder="Search by plant name, species, or owner..." className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" />
{searchResults.length > 0 && (

Found {searchResults.length} plants

{searchResults.map((plant) => ( ))}
)} {searchResults.length === 0 && searchTerm && !loading && (

No plants found. Try a different search term.

)}
)} {/* Nearby Tab */} {activeTab === 'nearby' && (
setLatitude(e.target.value)} required className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" />
setLongitude(e.target.value)} required className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" />
setRadius(e.target.value)} required className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" />
{nearbyPlants.length > 0 && (

Found {nearbyPlants.length} nearby plants

{nearbyPlants.map(({ plant, distance }) => ( ))}
)} {nearbyPlants.length === 0 && latitude && longitude && !loading && (

No plants found nearby. Try increasing the search radius.

)}
)}
); } function PlantCard({ plant, distance, }: { plant: Plant; distance?: number; }) { const statusColors: { [key: string]: string } = { sprouted: 'bg-yellow-100 text-yellow-800', growing: 'bg-green-100 text-green-800', mature: 'bg-blue-100 text-blue-800', flowering: 'bg-purple-100 text-purple-800', fruiting: 'bg-orange-100 text-orange-800', dormant: 'bg-gray-100 text-gray-800', }; return (

{plant.commonName}

{plant.status}
{plant.scientificName && (

{plant.scientificName}

)}

👤 {plant.owner.name}

{(plant.location.city || plant.location.country) && (

📍{' '} {[plant.location.city, plant.location.country] .filter(Boolean) .join(', ')}

)}

🌱 Generation {plant.generation}

{distance !== undefined && (

📏 {distance.toFixed(1)} km away

)}
); }