import { useState, useEffect } from 'react'; import { useRouter } from 'next/router'; import Link from 'next/link'; import Head from 'next/head'; import { VerticalFarm, GrowingZone, GrowingRecipe } from '../../../lib/vertical-farming/types'; import ZoneGrid from '../../../components/vertical-farm/ZoneGrid'; import ZoneDetailCard from '../../../components/vertical-farm/ZoneDetailCard'; import EnvironmentGauge from '../../../components/vertical-farm/EnvironmentGauge'; import RecipeSelector from '../../../components/vertical-farm/RecipeSelector'; export default function ZoneManagement() { const router = useRouter(); const { farmId } = router.query; const [farm, setFarm] = useState(null); const [selectedZone, setSelectedZone] = useState(null); const [loading, setLoading] = useState(true); const [showStartBatch, setShowStartBatch] = useState(false); const [selectedRecipe, setSelectedRecipe] = useState(null); const [plantCount, setPlantCount] = useState(''); const [seedBatchId, setSeedBatchId] = useState(''); useEffect(() => { if (farmId) { fetchFarm(); } }, [farmId]); const fetchFarm = async () => { try { const response = await fetch(`/api/vertical-farm/${farmId}`); const data = await response.json(); if (data.success) { setFarm(data.farm); } } catch (error) { console.error('Error fetching farm:', error); } finally { setLoading(false); } }; const handleStartBatch = async () => { if (!selectedZone || !selectedRecipe) return; try { const response = await fetch('/api/vertical-farm/batch/start', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ farmId, zoneId: selectedZone.id, recipeId: selectedRecipe.id, seedBatchId: seedBatchId || `seed-${Date.now()}`, plantCount: parseInt(plantCount) || selectedZone.plantPositions, }), }); const data = await response.json(); if (data.success) { setShowStartBatch(false); setSelectedRecipe(null); setPlantCount(''); setSeedBatchId(''); fetchFarm(); } } catch (error) { console.error('Error starting batch:', error); } }; if (loading) { return (
); } if (!farm) { return (

Farm not found

); } return (
Zone Management - {farm.name}
← Back

Zone Management

{farm.name}

{/* Zone Grid */}

All Zones

{/* Zone Detail / Actions */}
{selectedZone ? ( <>

{selectedZone.name}

Status

{selectedZone.status}

Method

{selectedZone.growingMethod}

Level

{selectedZone.level}

Area

{selectedZone.areaSqm}m²

Positions

{selectedZone.plantPositions}

Active Plants

{selectedZone.plantIds.length}

{selectedZone.currentCrop && (

Current Crop

{selectedZone.currentCrop}

{selectedZone.expectedHarvestDate && (

Harvest: {new Date(selectedZone.expectedHarvestDate).toLocaleDateString()}

)}
)}
{/* Environment Readings */} {selectedZone.currentEnvironment && (

Current Environment

)} {/* Actions */}

Actions

{selectedZone.status === 'empty' && ( )} {(selectedZone.status === 'growing' || selectedZone.status === 'ready') && ( )}
) : (

Select a zone to view details and actions

)}
{/* Start Batch Modal */} {showStartBatch && selectedZone && (

Start New Batch

Zone: {selectedZone.name}

setPlantCount(e.target.value)} placeholder={`Max: ${selectedZone.plantPositions}`} className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500" />
setSeedBatchId(e.target.value)} placeholder="Auto-generated if empty" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500" />
)}
); }