import { useState, useEffect } from 'react'; import { useRouter } from 'next/router'; import Link from 'next/link'; import Head from 'next/head'; import EnvironmentalDisplay from '../../components/EnvironmentalDisplay'; import { GrowingEnvironment } from '../../lib/environment/types'; interface Plant { id: string; commonName: string; scientificName?: string; species?: string; genus?: string; family?: string; parentPlantId?: string; propagationType?: string; generation: number; plantedDate: string; status: string; location: { latitude: number; longitude: number; city?: string; country?: string; address?: string; }; owner: { id: string; name: string; email: string; }; childPlants: string[]; environment?: GrowingEnvironment; notes?: string; registeredAt: string; updatedAt: string; } interface Lineage { plantId: string; ancestors: Plant[]; descendants: Plant[]; siblings: Plant[]; generation: number; } export default function PlantDetail() { const router = useRouter(); const { id } = router.query; const [plant, setPlant] = useState(null); const [lineage, setLineage] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(''); const [activeTab, setActiveTab] = useState<'details' | 'lineage' | 'environment'>('details'); useEffect(() => { if (id) { fetchPlantData(); } }, [id]); const fetchPlantData = async () => { try { const [plantResponse, lineageResponse] = await Promise.all([ fetch(`/api/plants/${id}`), fetch(`/api/plants/lineage/${id}`), ]); const plantData = await plantResponse.json(); const lineageData = await lineageResponse.json(); if (!plantResponse.ok) { throw new Error(plantData.error || 'Failed to fetch plant'); } setPlant(plantData.plant); if (lineageResponse.ok) { setLineage(lineageData.lineage); } } catch (err: any) { setError(err.message || 'An error occurred'); } finally { setLoading(false); } }; if (loading) { return (

Loading plant data...

); } if (error || !plant) { return (

Error

{error || 'Plant not found'}

Go Home
); } 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} - LocalGreenChain {/* Header */}
{/* Main Content */}
{/* Plant Header */}

{plant.commonName}

{plant.scientificName && (

{plant.scientificName}

)}
{plant.status}

Generation

{plant.generation}

Descendants

{plant.childPlants.length}

Propagation Type

{plant.propagationType || 'Original'}

{/* Tabs */}
{/* Details Tab */} {activeTab === 'details' && (
{/* Plant Information */}

Plant Information

{plant.scientificName && ( )} {plant.genus && } {plant.family && }
{plant.notes && (

Notes

{plant.notes}

)}
{/* Location & Owner */}
{/* Owner */}

Owner

{/* Location */}

Location

{plant.location.city && ( )} {plant.location.country && ( )}
)} {/* Lineage Tab */} {activeTab === 'lineage' && lineage && (
{/* Ancestors */} {lineage.ancestors.length > 0 && (

🌲 Ancestors ({lineage.ancestors.length})

{lineage.ancestors.map((ancestor, idx) => ( ))}
)} {/* Siblings */} {lineage.siblings.length > 0 && (

👥 Siblings ({lineage.siblings.length})

{lineage.siblings.map((sibling) => ( ))}
)} {/* Descendants */} {lineage.descendants.length > 0 && (

🌱 Descendants ({lineage.descendants.length})

{lineage.descendants.map((descendant) => ( ))}
)} {lineage.ancestors.length === 0 && lineage.siblings.length === 0 && lineage.descendants.length === 0 && (

This plant has no recorded lineage yet.
Create a clone to start building the family tree!

)}
)} {/* Environment Tab */} {activeTab === 'environment' && (
{plant.environment ? ( ) : (
🌍

No Environmental Data Yet

Track soil, climate, nutrients, and growing conditions to:

💡

Get Recommendations

Receive personalized advice to optimize conditions

🔍

Compare & Learn

Find what works for similar plants

📈

Track Success

Monitor growth and health over time

📘 Learn more in the{' '} Environmental Tracking Guide

)}
)}
); } function InfoRow({ label, value }: { label: string; value: string }) { return (
{label}
{value}
); } function PlantLineageCard({ plant, label, }: { plant: Plant; label?: string; }) { return (

{plant.commonName}

{plant.scientificName && (

{plant.scientificName}

)}

👤 {plant.owner.name}

{label && ( {label} )}
); }