import React, { useState } from 'react';

const FoodProductionModel = () => {
  const [selectedSystem, setSelectedSystem] = useState('aquaponics');
  
  // Production calculations
  const aquaponicsData = {
    containers: 7,
    fishPerContainer: 300, // lbs/year
    greensPerContainer: 2100, // lbs/year
    totalFish: 2100, // lbs/year
    totalGreens: 14700, // lbs/year
    fishValue: 8.50, // $/lb for trout
    greensValue: 3.00, // $/lb for mixed greens
    operatingCost: 12000, // per container per year
  };
  
  const foodForestData = {
    acres: 12,
    matureYears: 7,
    year1Yield: 500, // lbs
    matureYield: 15000, // lbs/year at maturity
    installCost: 8000, // per acre
    maintenanceCost: 500, // per acre per year
  };

  const gardenData = {
    totalPlots: 98, // 14 per cluster × 7 clusters
    sqftPerPlot: 100,
    yieldPerSqft: 0.5, // lbs per sqft per season
    seasonsPerYear: 2,
    totalYield: 9800, // lbs/year
  };

  const households = 50;
  
  // Calculate totals
  const totalFoodProduction = aquaponicsData.totalFish + aquaponicsData.totalGreens + foodForestData.year1Yield + gardenData.totalYield;
  const perHouseholdWeekly = (totalFoodProduction / households / 52).toFixed(1);
  
  const totalValue = (aquaponicsData.totalFish * aquaponicsData.fishValue) + 
                     (aquaponicsData.totalGreens * aquaponicsData.greensValue) +
                     (foodForestData.year1Yield * 2.50) +
                     (gardenData.totalYield * 2.00);

  return (
    <div className="min-h-screen bg-slate-900 text-white p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="text-center mb-6">
          <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent mb-2">
            Food Production Model
          </h1>
          <p className="text-slate-400">50 Households • Year-Round Production • Integrated Systems</p>
        </div>

        {/* System Flow Diagram */}
        <div className="bg-slate-800/50 rounded-xl p-6 border border-slate-700 mb-6">
          <h2 className="text-sm font-mono text-emerald-400 mb-4 uppercase tracking-wider">Integrated Food System Flow</h2>
          
          <svg viewBox="0 0 900 400" className="w-full h-auto">
            <defs>
              <linearGradient id="solarGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stopColor="#f59e0b"/>
                <stop offset="100%" stopColor="#fbbf24"/>
              </linearGradient>
              <linearGradient id="waterGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stopColor="#0ea5e9"/>
                <stop offset="100%" stopColor="#00d9ff"/>
              </linearGradient>
              <linearGradient id="fishGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stopColor="#00d9ff"/>
                <stop offset="100%" stopColor="#0891b2"/>
              </linearGradient>
              <linearGradient id="plantGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stopColor="#22c55e"/>
                <stop offset="100%" stopColor="#16a34a"/>
              </linearGradient>
              <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
                <polygon points="0 0, 10 3.5, 0 7" fill="#64748b"/>
              </marker>
            </defs>

            {/* Solar Input */}
            <g onClick={() => setSelectedSystem('solar')} className="cursor-pointer">
              <rect x="30" y="50" width="120" height="70" rx="10" fill="url(#solarGrad)" stroke="#f59e0b" strokeWidth="2"/>
              <text x="90" y="80" textAnchor="middle" fill="#1e293b" fontSize="12" fontWeight="bold">SOLAR</text>
              <text x="90" y="100" textAnchor="middle" fill="#1e293b" fontSize="10">850 kW</text>
            </g>

            {/* Arrow: Solar to Aquaponics */}
            <path d="M 150 85 L 200 85" stroke="#64748b" strokeWidth="2" markerEnd="url(#arrowhead)"/>
            <text x="175" y="75" textAnchor="middle" fill="#94a3b8" fontSize="9">Power</text>

            {/* Aquaponics System - Central */}
            <g onClick={() => setSelectedSystem('aquaponics')} className="cursor-pointer">
              <rect x="220" y="30" width="200" height="140" rx="12" 
                fill={selectedSystem === 'aquaponics' ? 'rgba(0, 217, 255, 0.3)' : 'rgba(0, 217, 255, 0.15)'} 
                stroke="#00d9ff" strokeWidth="3"/>
              <text x="320" y="55" textAnchor="middle" fill="#00d9ff" fontSize="14" fontWeight="bold">AQUAPONICS</text>
              <text x="320" y="75" textAnchor="middle" fill="#94a3b8" fontSize="10">7 Containers</text>
              
              {/* Fish tank */}
              <ellipse cx="270" cy="115" rx="35" ry="25" fill="url(#fishGrad)" opacity="0.8"/>
              <text x="270" y="120" textAnchor="middle" fill="#f0f4f8" fontSize="9">🐟 Fish</text>
              
              {/* Grow beds */}
              <rect x="330" y="95" width="70" height="40" rx="5" fill="url(#plantGrad)" opacity="0.8"/>
              <text x="365" y="120" textAnchor="middle" fill="#f0f4f8" fontSize="9">🌱 Greens</text>
              
              {/* Cycle arrow */}
              <path d="M 305 100 Q 320 90 335 100" stroke="#64748b" strokeWidth="1.5" fill="none" markerEnd="url(#arrowhead)"/>
            </g>

            {/* Water System */}
            <g onClick={() => setSelectedSystem('water')} className="cursor-pointer">
              <rect x="30" y="180" width="120" height="60" rx="10" fill="url(#waterGrad)" stroke="#0ea5e9" strokeWidth="2"/>
              <text x="90" y="205" textAnchor="middle" fill="#1e293b" fontSize="11" fontWeight="bold">RAINWATER</text>
              <text x="90" y="220" textAnchor="middle" fill="#1e293b" fontSize="9">Collection</text>
            </g>

            {/* Arrow: Water to Aquaponics */}
            <path d="M 150 200 L 200 150" stroke="#0ea5e9" strokeWidth="2" strokeDasharray="5,3" markerEnd="url(#arrowhead)"/>

            {/* Food Forest */}
            <g onClick={() => setSelectedSystem('foodforest')} className="cursor-pointer">
              <rect x="480" y="30" width="160" height="100" rx="12" 
                fill={selectedSystem === 'foodforest' ? 'rgba(34, 197, 94, 0.3)' : 'rgba(34, 197, 94, 0.15)'} 
                stroke="#22c55e" strokeWidth="2"/>
              <text x="560" y="55" textAnchor="middle" fill="#22c55e" fontSize="12" fontWeight="bold">FOOD FOREST</text>
              <text x="560" y="75" textAnchor="middle" fill="#94a3b8" fontSize="10">12 Acres</text>
              {/* Trees */}
              {[[505,100],[530,95],[555,105],[580,95],[605,100]].map(([x,y], i) => (
                <circle key={i} cx={x} cy={y} r="12" fill="#166534"/>
              ))}
            </g>

            {/* Community Gardens */}
            <g onClick={() => setSelectedSystem('gardens')} className="cursor-pointer">
              <rect x="480" y="150" width="160" height="80" rx="12" 
                fill={selectedSystem === 'gardens' ? 'rgba(34, 197, 94, 0.3)' : 'rgba(34, 197, 94, 0.15)'} 
                stroke="#22c55e" strokeWidth="2"/>
              <text x="560" y="175" textAnchor="middle" fill="#22c55e" fontSize="12" fontWeight="bold">GARDENS</text>
              <text x="560" y="195" textAnchor="middle" fill="#94a3b8" fontSize="10">98 Plots (14/cluster)</text>
              {/* Garden beds */}
              {[0,1,2,3].map((i) => (
                <rect key={i} x={495 + i*40} y={205} width="30" height="15" rx="2" fill="#15803d" opacity="0.6"/>
              ))}
            </g>

            {/* Compost System */}
            <g onClick={() => setSelectedSystem('compost')} className="cursor-pointer">
              <rect x="700" y="100" width="120" height="70" rx="10" fill="#78350f" stroke="#a16207" strokeWidth="2"/>
              <text x="760" y="130" textAnchor="middle" fill="#fef3c7" fontSize="11" fontWeight="bold">COMPOST</text>
              <text x="760" y="148" textAnchor="middle" fill="#fef3c7" fontSize="9">& Worms</text>
            </g>

            {/* Arrows to Compost */}
            <path d="M 420 140 L 680 135" stroke="#78350f" strokeWidth="2" strokeDasharray="5,3" markerEnd="url(#arrowhead)"/>
            <path d="M 640 170 L 680 145" stroke="#78350f" strokeWidth="2" strokeDasharray="5,3" markerEnd="url(#arrowhead)"/>
            <text x="550" y="125" textAnchor="middle" fill="#a16207" fontSize="8">Waste</text>

            {/* Arrow: Compost back to gardens */}
            <path d="M 760 175 Q 760 250 640 230" stroke="#78350f" strokeWidth="2" markerEnd="url(#arrowhead)"/>
            <text x="720" y="220" textAnchor="middle" fill="#a16207" fontSize="8">Fertility</text>

            {/* Output: Households */}
            <g>
              <rect x="220" y="280" width="450" height="100" rx="12" fill="rgba(249, 115, 22, 0.1)" stroke="#f97316" strokeWidth="2"/>
              <text x="445" y="305" textAnchor="middle" fill="#f97316" fontSize="14" fontWeight="bold">50 HOUSEHOLDS</text>
              
              {/* Output metrics */}
              <g transform="translate(240, 320)">
                <rect width="100" height="45" rx="6" fill="rgba(0, 217, 255, 0.2)"/>
                <text x="50" y="18" textAnchor="middle" fill="#00d9ff" fontSize="10" fontWeight="bold">2,100 lbs</text>
                <text x="50" y="32" textAnchor="middle" fill="#94a3b8" fontSize="8">Fish/year</text>
              </g>
              <g transform="translate(355, 320)">
                <rect width="100" height="45" rx="6" fill="rgba(34, 197, 94, 0.2)"/>
                <text x="50" y="18" textAnchor="middle" fill="#22c55e" fontSize="10" fontWeight="bold">25,000 lbs</text>
                <text x="50" y="32" textAnchor="middle" fill="#94a3b8" fontSize="8">Produce/year</text>
              </g>
              <g transform="translate(470, 320)">
                <rect width="100" height="45" rx="6" fill="rgba(249, 115, 22, 0.2)"/>
                <text x="50" y="18" textAnchor="middle" fill="#f97316" fontSize="10" fontWeight="bold">~10 lbs</text>
                <text x="50" y="32" textAnchor="middle" fill="#94a3b8" fontSize="8">Per HH/week</text>
              </g>
            </g>

            {/* Arrows to Households */}
            <path d="M 320 175 L 320 260" stroke="#00d9ff" strokeWidth="2" markerEnd="url(#arrowhead)"/>
            <path d="M 560 230 L 500 260" stroke="#22c55e" strokeWidth="2" markerEnd="url(#arrowhead)"/>
          </svg>
        </div>

        {/* Detailed Production Tables */}
        <div className="grid md:grid-cols-2 gap-6 mb-6">
          
          {/* Aquaponics Detail */}
          <div className={`bg-slate-800/50 rounded-xl p-5 border ${selectedSystem === 'aquaponics' ? 'border-cyan-500' : 'border-slate-700'}`}>
            <h2 className="text-lg font-bold text-cyan-400 mb-4 flex items-center gap-2">
              <span className="text-2xl">🐟</span> Aquaponics Production
            </h2>
            
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-slate-700">
                  <th className="text-left py-2 text-slate-400">Metric</th>
                  <th className="text-right py-2 text-slate-400">Per Container</th>
                  <th className="text-right py-2 text-slate-400">Total (×7)</th>
                </tr>
              </thead>
              <tbody>
                <tr className="border-b border-slate-800">
                  <td className="py-2 text-slate-300">Rainbow Trout</td>
                  <td className="text-right text-cyan-400 font-mono">300 lbs</td>
                  <td className="text-right text-cyan-400 font-mono font-bold">2,100 lbs</td>
                </tr>
                <tr className="border-b border-slate-800">
                  <td className="py-2 text-slate-300">Leafy Greens</td>
                  <td className="text-right text-emerald-400 font-mono">2,100 lbs</td>
                  <td className="text-right text-emerald-400 font-mono font-bold">14,700 lbs</td>
                </tr>
                <tr className="border-b border-slate-800">
                  <td className="py-2 text-slate-300">Herbs</td>
                  <td className="text-right text-emerald-400 font-mono">150 lbs</td>
                  <td className="text-right text-emerald-400 font-mono font-bold">1,050 lbs</td>
                </tr>
                <tr className="border-b border-slate-700">
                  <td className="py-2 text-slate-300">Operating Cost</td>
                  <td className="text-right text-red-400 font-mono">$12,000</td>
                  <td className="text-right text-red-400 font-mono">$84,000</td>
                </tr>
                <tr>
                  <td className="py-2 text-slate-300">Market Value</td>
                  <td className="text-right text-amber-400 font-mono">$9,750</td>
                  <td className="text-right text-amber-400 font-mono font-bold">$68,250</td>
                </tr>
              </tbody>
            </table>
            
            <div className="mt-4 p-3 bg-cyan-500/10 rounded-lg border border-cyan-500/30">
              <p className="text-sm text-slate-300">
                <span className="text-cyan-400 font-medium">Key insight:</span> Operating cost is covered by ~86% of market value. 
                Community benefit (free food) makes up the difference.
              </p>
            </div>
          </div>

          {/* Food Forest Detail */}
          <div className={`bg-slate-800/50 rounded-xl p-5 border ${selectedSystem === 'foodforest' ? 'border-emerald-500' : 'border-slate-700'}`}>
            <h2 className="text-lg font-bold text-emerald-400 mb-4 flex items-center gap-2">
              <span className="text-2xl">🌳</span> Food Forest Projection
            </h2>
            
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-slate-700">
                  <th className="text-left py-2 text-slate-400">Year</th>
                  <th className="text-right py-2 text-slate-400">Yield (lbs)</th>
                  <th className="text-right py-2 text-slate-400">Value</th>
                  <th className="text-right py-2 text-slate-400">Cumulative</th>
                </tr>
              </thead>
              <tbody>
                <tr className="border-b border-slate-800">
                  <td className="py-2 text-slate-300">Year 1</td>
                  <td className="text-right text-emerald-400 font-mono">500</td>
                  <td className="text-right text-amber-400 font-mono">$1,250</td>
                  <td className="text-right text-slate-500 font-mono">$1,250</td>
                </tr>
                <tr className="border-b border-slate-800">
                  <td className="py-2 text-slate-300">Year 2</td>
                  <td className="text-right text-emerald-400 font-mono">1,500</td>
                  <td className="text-right text-amber-400 font-mono">$3,750</td>
                  <td className="text-right text-slate-500 font-mono">$5,000</td>
                </tr>
                <tr className="border-b border-slate-800">
                  <td className="py-2 text-slate-300">Year 3</td>
                  <td className="text-right text-emerald-400 font-mono">3,500</td>
                  <td className="text-right text-amber-400 font-mono">$8,750</td>
                  <td className="text-right text-slate-500 font-mono">$13,750</td>
                </tr>
                <tr className="border-b border-slate-800">
                  <td className="py-2 text-slate-300">Year 5</td>
                  <td className="text-right text-emerald-400 font-mono">8,000</td>
                  <td className="text-right text-amber-400 font-mono">$20,000</td>
                  <td className="text-right text-slate-500 font-mono">$47,500</td>
                </tr>
                <tr className="border-b border-slate-700">
                  <td className="py-2 text-slate-300">Year 7+</td>
                  <td className="text-right text-emerald-400 font-mono font-bold">15,000</td>
                  <td className="text-right text-amber-400 font-mono font-bold">$37,500</td>
                  <td className="text-right text-emerald-400 font-mono">Ongoing</td>
                </tr>
              </tbody>
            </table>
            
            <div className="mt-4 p-3 bg-emerald-500/10 rounded-lg border border-emerald-500/30">
              <p className="text-sm text-slate-300">
                <span className="text-emerald-400 font-medium">Species mix:</span> Apples, pears, plums, hazelnuts, chestnuts, 
                elderberry, currants, asparagus, rhubarb, perennial kale
              </p>
            </div>
          </div>
        </div>

        {/* Gardens & Weekly Share */}
        <div className="grid md:grid-cols-3 gap-6 mb-6">
          
          {/* Community Gardens */}
          <div className={`bg-slate-800/50 rounded-xl p-5 border ${selectedSystem === 'gardens' ? 'border-emerald-500' : 'border-slate-700'}`}>
            <h2 className="text-lg font-bold text-emerald-400 mb-4">🥕 Community Gardens</h2>
            <div className="space-y-3">
              <div className="flex justify-between">
                <span className="text-slate-400">Total Plots</span>
                <span className="text-emerald-400 font-mono">98</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-400">Size per Plot</span>
                <span className="text-slate-300 font-mono">100 sq ft</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-400">Plots per Household</span>
                <span className="text-slate-300 font-mono">~2</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-400">Growing Seasons</span>
                <span className="text-slate-300 font-mono">2/year</span>
              </div>
              <div className="border-t border-slate-700 pt-3">
                <div className="flex justify-between font-medium">
                  <span className="text-emerald-400">Annual Yield</span>
                  <span className="text-emerald-400 font-mono">~9,800 lbs</span>
                </div>
              </div>
            </div>
          </div>

          {/* Weekly Share Breakdown */}
          <div className="bg-gradient-to-br from-slate-800/50 to-orange-900/20 rounded-xl p-5 border border-orange-500/30">
            <h2 className="text-lg font-bold text-orange-400 mb-4">📦 Weekly Share (per household)</h2>
            <div className="space-y-3">
              <div className="flex justify-between items-center">
                <span className="text-slate-300 flex items-center gap-2"><span>🐟</span> Trout</span>
                <span className="text-cyan-400 font-mono">0.8 lbs</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-slate-300 flex items-center gap-2"><span>🥬</span> Greens</span>
                <span className="text-emerald-400 font-mono">5.6 lbs</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-slate-300 flex items-center gap-2"><span>🌿</span> Herbs</span>
                <span className="text-emerald-400 font-mono">0.4 lbs</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-slate-300 flex items-center gap-2"><span>🥕</span> Garden Veg</span>
                <span className="text-emerald-400 font-mono">3.8 lbs</span>
              </div>
              <div className="border-t border-slate-700 pt-3">
                <div className="flex justify-between font-bold">
                  <span className="text-orange-400">Weekly Total</span>
                  <span className="text-orange-400 font-mono">~10.6 lbs</span>
                </div>
                <p className="text-xs text-slate-500 mt-2">Plus seasonal fruit from food forest</p>
              </div>
            </div>
          </div>

          {/* Value Summary */}
          <div className="bg-gradient-to-br from-slate-800/50 to-amber-900/20 rounded-xl p-5 border border-amber-500/30">
            <h2 className="text-lg font-bold text-amber-400 mb-4">💰 Annual Value</h2>
            <div className="space-y-3">
              <div className="flex justify-between">
                <span className="text-slate-400">Fish (market)</span>
                <span className="text-cyan-400 font-mono">$17,850</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-400">Greens (market)</span>
                <span className="text-emerald-400 font-mono">$44,100</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-400">Herbs (market)</span>
                <span className="text-emerald-400 font-mono">$6,300</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-400">Garden produce</span>
                <span className="text-emerald-400 font-mono">$19,600</span>
              </div>
              <div className="border-t border-slate-700 pt-3">
                <div className="flex justify-between font-bold">
                  <span className="text-amber-400">Total Value</span>
                  <span className="text-amber-400 font-mono">$87,850</span>
                </div>
                <div className="flex justify-between mt-2">
                  <span className="text-slate-500 text-sm">Per household</span>
                  <span className="text-amber-400 font-mono text-sm">$1,757/yr</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500 text-sm">Monthly savings</span>
                  <span className="text-amber-400 font-mono text-sm">~$146/mo</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Seasonality Chart */}
        <div className="bg-slate-800/50 rounded-xl p-6 border border-slate-700">
          <h2 className="text-lg font-bold text-purple-400 mb-4">📅 Seasonal Production Calendar</h2>
          
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-slate-700">
                  <th className="text-left py-2 text-slate-400 w-32">System</th>
                  {['J','F','M','A','M','J','J','A','S','O','N','D'].map((m, i) => (
                    <th key={i} className="text-center py-2 text-slate-500 w-12">{m}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                <tr className="border-b border-slate-800">
                  <td className="py-3 text-cyan-400 font-medium">Aquaponics</td>
                  {[...Array(12)].map((_, i) => (
                    <td key={i} className="text-center">
                      <div className="w-6 h-6 mx-auto rounded bg-cyan-500/60"></div>
                    </td>
                  ))}
                </tr>
                <tr className="border-b border-slate-800">
                  <td className="py-3 text-emerald-400 font-medium">Gardens</td>
                  {[0,0,1,2,3,3,3,3,3,2,1,0].map((level, i) => (
                    <td key={i} className="text-center">
                      <div 
                        className="w-6 h-6 mx-auto rounded" 
                        style={{ 
                          backgroundColor: level > 0 ? `rgba(34, 197, 94, ${level * 0.25})` : 'rgba(100, 116, 139, 0.2)'
                        }}
                      ></div>
                    </td>
                  ))}
                </tr>
                <tr className="border-b border-slate-800">
                  <td className="py-3 text-green-400 font-medium">Food Forest</td>
                  {[0,0,0,1,1,2,3,3,3,2,1,0].map((level, i) => (
                    <td key={i} className="text-center">
                      <div 
                        className="w-6 h-6 mx-auto rounded" 
                        style={{ 
                          backgroundColor: level > 0 ? `rgba(22, 163, 74, ${level * 0.25})` : 'rgba(100, 116, 139, 0.2)'
                        }}
                      ></div>
                    </td>
                  ))}
                </tr>
                <tr>
                  <td className="py-3 text-orange-400 font-medium">Combined</td>
                  {[2,2,3,4,5,6,7,7,7,5,4,2].map((level, i) => (
                    <td key={i} className="text-center">
                      <div 
                        className="w-6 h-6 mx-auto rounded" 
                        style={{ 
                          backgroundColor: `rgba(249, 115, 22, ${level * 0.1})`
                        }}
                      ></div>
                    </td>
                  ))}
                </tr>
              </tbody>
            </table>
          </div>
          
          <div className="mt-4 flex items-center gap-6 text-xs text-slate-500">
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 rounded bg-cyan-500/60"></div>
              <span>Year-round (controlled environment)</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 rounded bg-emerald-500/75"></div>
              <span>Peak season</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 rounded bg-slate-600/50"></div>
              <span>Dormant</span>
            </div>
          </div>
        </div>

        <p className="text-center text-slate-500 text-xs mt-6">Click system components to highlight • Food Production Model v1</p>
      </div>
    </div>
  );
};

export default FoodProductionModel;