import React, { useState } from 'react';

const ClusterDetailLayout = () => {
  const [selectedElement, setSelectedElement] = useState(null);
  
  const elements = {
    home1: { type: 'home', name: 'Unit A1', beds: 3, sqft: 960, orientation: 'South-facing' },
    home2: { type: 'home', name: 'Unit A2', beds: 3, sqft: 960, orientation: 'South-facing' },
    home3: { type: 'home', name: 'Unit A3', beds: 3, sqft: 960, orientation: 'Southeast' },
    home4: { type: 'home', name: 'Unit A4', beds: 3, sqft: 960, orientation: 'East-facing' },
    home5: { type: 'home', name: 'Unit A5', beds: 3, sqft: 960, orientation: 'Northeast' },
    home6: { type: 'home', name: 'Unit A6', beds: 3, sqft: 960, orientation: 'North-facing' },
    home7: { type: 'home', name: 'Unit A7', beds: 3, sqft: 960, orientation: 'Northwest' },
    aquaponics: { type: 'aquaponics', name: 'Aquaponics Container', capacity: '40ft', fish: '300 lbs/yr', greens: '2,100 lbs/yr' },
    toolshed: { type: 'shared', name: 'Tool Shed & Storage', sqft: 200, features: 'Garden tools, bike storage, shared equipment' },
    gathering: { type: 'shared', name: 'Gathering Pavilion', sqft: 400, features: 'Covered outdoor space, BBQ, community meals' },
    garden: { type: 'garden', name: 'Community Garden', sqft: 3500, plots: 14, features: '2 plots per household + communal herbs' },
    parking: { type: 'parking', name: 'Parking Court', spaces: 14, ev: 4, features: 'Permeable pavers, EV charging' },
    orchard: { type: 'garden', name: 'Mini Orchard', trees: 12, features: 'Dwarf fruit trees, berry bushes' }
  };

  const getElementColor = (type) => {
    switch(type) {
      case 'home': return '#f59e0b';
      case 'aquaponics': return '#00d9ff';
      case 'shared': return '#8b5cf6';
      case 'garden': return '#22c55e';
      case 'parking': return '#64748b';
      default: return '#ffffff';
    }
  };

  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-amber-400 to-orange-500 bg-clip-text text-transparent mb-2">
            Cluster Detail: "Maple Grove"
          </h1>
          <p className="text-slate-400">7 Triple Trio Units • ~1.5 Acres • Shared Aquaponics + Gardens</p>
        </div>

        <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
          
          {/* Main Site Plan */}
          <div className="xl:col-span-2 bg-slate-800/50 rounded-xl p-4 border border-slate-700">
            <h2 className="text-sm font-mono text-amber-400 mb-4 uppercase tracking-wider">Cluster Site Plan • ~1.5 Acres</h2>
            
            <svg viewBox="0 0 800 700" className="w-full h-auto">
              <defs>
                <pattern id="grass" patternUnits="userSpaceOnUse" width="20" height="20">
                  <rect width="20" height="20" fill="#1a3d2e"/>
                  <circle cx="5" cy="5" r="1" fill="#22c55e" opacity="0.3"/>
                  <circle cx="15" cy="15" r="1" fill="#22c55e" opacity="0.3"/>
                </pattern>
                <linearGradient id="homeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stopColor="#f59e0b"/>
                  <stop offset="100%" stopColor="#d97706"/>
                </linearGradient>
                <linearGradient id="aquaGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stopColor="#00d9ff"/>
                  <stop offset="100%" stopColor="#00ff88"/>
                </linearGradient>
                <filter id="glow">
                  <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
                  <feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge>
                </filter>
              </defs>
              
              {/* Background */}
              <rect x="0" y="0" width="800" height="700" fill="url(#grass)"/>
              
              {/* Cluster boundary (informal, organic shape) */}
              <ellipse cx="400" cy="350" rx="380" ry="330" fill="none" stroke="#22c55e" strokeWidth="2" strokeDasharray="10,5" opacity="0.5"/>
              
              {/* Paths - organic curved walkways */}
              <path d="M 400 650 Q 400 500 400 350" stroke="#a1887f" strokeWidth="8" fill="none" strokeLinecap="round"/>
              <path d="M 400 350 Q 300 350 180 280" stroke="#a1887f" strokeWidth="6" fill="none" strokeLinecap="round"/>
              <path d="M 400 350 Q 500 350 620 280" stroke="#a1887f" strokeWidth="6" fill="none" strokeLinecap="round"/>
              <path d="M 400 350 Q 350 280 280 180" stroke="#a1887f" strokeWidth="6" fill="none" strokeLinecap="round"/>
              <path d="M 400 350 Q 450 280 520 180" stroke="#a1887f" strokeWidth="6" fill="none" strokeLinecap="round"/>
              <path d="M 400 350 Q 400 280 400 150" stroke="#a1887f" strokeWidth="6" fill="none" strokeLinecap="round"/>
              <path d="M 400 350 Q 300 400 200 450" stroke="#a1887f" strokeWidth="6" fill="none" strokeLinecap="round"/>
              <path d="M 400 350 Q 500 400 600 450" stroke="#a1887f" strokeWidth="6" fill="none" strokeLinecap="round"/>
              
              {/* Parking Court */}
              <g onClick={() => setSelectedElement('parking')} className="cursor-pointer">
                <rect x="300" y="580" width="200" height="80" rx="8" 
                  fill={selectedElement === 'parking' ? '#475569' : '#334155'} 
                  stroke="#64748b" strokeWidth="2"/>
                {/* Parking spaces */}
                {[0,1,2,3,4,5,6].map((i) => (
                  <rect key={i} x={315 + i*25} y="595" width="20" height="35" rx="2" fill="#1e293b" stroke="#475569"/>
                ))}
                {[0,1,2,3,4,5,6].map((i) => (
                  <rect key={i} x={315 + i*25} y="635" width="20" height="20" rx="2" fill="#1e293b" stroke="#475569"/>
                ))}
                {/* EV chargers */}
                {[0,1,2,3].map((i) => (
                  <circle key={i} cx={325 + i*50} cy="603" r="4" fill="#3b82f6"/>
                ))}
                <text x="400" y="675" textAnchor="middle" fill="#94a3b8" fontSize="10">PARKING (14 + 4 EV)</text>
              </g>

              {/* Houses arranged in arc */}
              {/* Unit A1 - South */}
              <g onClick={() => setSelectedElement('home1')} className="cursor-pointer">
                <rect x="350" y="480" width="100" height="50" rx="4" 
                  fill={selectedElement === 'home1' ? '#fbbf24' : 'url(#homeGrad)'} 
                  stroke="#92400e" strokeWidth="2"
                  filter={selectedElement === 'home1' ? 'url(#glow)' : ''}/>
                <rect x="355" y="475" width="30" height="5" fill="#3b82f6" rx="1"/> {/* Solar */}
                <text x="400" y="510" textAnchor="middle" fill="#1e293b" fontSize="11" fontWeight="bold">A1</text>
              </g>
              
              {/* Unit A2 - Southeast */}
              <g onClick={() => setSelectedElement('home2')} className="cursor-pointer">
                <rect x="520" y="420" width="100" height="50" rx="4" 
                  fill={selectedElement === 'home2' ? '#fbbf24' : 'url(#homeGrad)'} 
                  stroke="#92400e" strokeWidth="2"
                  transform="rotate(30, 570, 445)"
                  filter={selectedElement === 'home2' ? 'url(#glow)' : ''}/>
                <text x="570" y="450" textAnchor="middle" fill="#1e293b" fontSize="11" fontWeight="bold">A2</text>
              </g>
              
              {/* Unit A3 - East */}
              <g onClick={() => setSelectedElement('home3')} className="cursor-pointer">
                <rect x="600" y="280" width="100" height="50" rx="4" 
                  fill={selectedElement === 'home3' ? '#fbbf24' : 'url(#homeGrad)'} 
                  stroke="#92400e" strokeWidth="2"
                  transform="rotate(60, 650, 305)"
                  filter={selectedElement === 'home3' ? 'url(#glow)' : ''}/>
                <text x="640" y="320" textAnchor="middle" fill="#1e293b" fontSize="11" fontWeight="bold">A3</text>
              </g>
              
              {/* Unit A4 - Northeast */}
              <g onClick={() => setSelectedElement('home4')} className="cursor-pointer">
                <rect x="480" y="130" width="100" height="50" rx="4" 
                  fill={selectedElement === 'home4' ? '#fbbf24' : 'url(#homeGrad)'} 
                  stroke="#92400e" strokeWidth="2"
                  transform="rotate(20, 530, 155)"
                  filter={selectedElement === 'home4' ? 'url(#glow)' : ''}/>
                <text x="530" y="165" textAnchor="middle" fill="#1e293b" fontSize="11" fontWeight="bold">A4</text>
              </g>
              
              {/* Unit A5 - North */}
              <g onClick={() => setSelectedElement('home5')} className="cursor-pointer">
                <rect x="350" y="80" width="100" height="50" rx="4" 
                  fill={selectedElement === 'home5' ? '#fbbf24' : 'url(#homeGrad)'} 
                  stroke="#92400e" strokeWidth="2"
                  filter={selectedElement === 'home5' ? 'url(#glow)' : ''}/>
                <rect x="355" y="75" width="30" height="5" fill="#3b82f6" rx="1"/>
                <text x="400" y="110" textAnchor="middle" fill="#1e293b" fontSize="11" fontWeight="bold">A5</text>
              </g>
              
              {/* Unit A6 - Northwest */}
              <g onClick={() => setSelectedElement('home6')} className="cursor-pointer">
                <rect x="220" y="130" width="100" height="50" rx="4" 
                  fill={selectedElement === 'home6' ? '#fbbf24' : 'url(#homeGrad)'} 
                  stroke="#92400e" strokeWidth="2"
                  transform="rotate(-20, 270, 155)"
                  filter={selectedElement === 'home6' ? 'url(#glow)' : ''}/>
                <text x="270" y="165" textAnchor="middle" fill="#1e293b" fontSize="11" fontWeight="bold">A6</text>
              </g>
              
              {/* Unit A7 - West */}
              <g onClick={() => setSelectedElement('home7')} className="cursor-pointer">
                <rect x="100" y="280" width="100" height="50" rx="4" 
                  fill={selectedElement === 'home7' ? '#fbbf24' : 'url(#homeGrad)'} 
                  stroke="#92400e" strokeWidth="2"
                  transform="rotate(-60, 150, 305)"
                  filter={selectedElement === 'home7' ? 'url(#glow)' : ''}/>
                <text x="150" y="320" textAnchor="middle" fill="#1e293b" fontSize="11" fontWeight="bold">A7</text>
              </g>

              {/* Community Garden - large area */}
              <g onClick={() => setSelectedElement('garden')} className="cursor-pointer">
                <rect x="180" y="380" width="120" height="100" rx="8" 
                  fill={selectedElement === 'garden' ? 'rgba(34, 197, 94, 0.4)' : 'rgba(34, 197, 94, 0.2)'} 
                  stroke="#22c55e" strokeWidth="2"/>
                {/* Garden beds */}
                {[0,1,2,3].map((row) => (
                  [0,1].map((col) => (
                    <rect key={`${row}-${col}`} x={190 + col*55} y={390 + row*22} width="45" height="16" rx="2" fill="#15803d" opacity="0.6"/>
                  ))
                ))}
                <text x="240" y="495" textAnchor="middle" fill="#22c55e" fontSize="10" fontWeight="bold">GARDENS</text>
              </g>

              {/* Mini Orchard */}
              <g onClick={() => setSelectedElement('orchard')} className="cursor-pointer">
                <ellipse cx="620" cy="480" rx="60" ry="50" 
                  fill={selectedElement === 'orchard' ? 'rgba(34, 197, 94, 0.3)' : 'rgba(34, 197, 94, 0.15)'} 
                  stroke="#22c55e" strokeWidth="1"/>
                {/* Trees */}
                {[[600,460],[640,460],[580,480],[620,480],[660,480],[600,500],[640,500]].map(([x,y], i) => (
                  <circle key={i} cx={x} cy={y} r="8" fill="#166534"/>
                ))}
                <text x="620" y="545" textAnchor="middle" fill="#22c55e" fontSize="9">ORCHARD</text>
              </g>

              {/* Central Aquaponics Container */}
              <g onClick={() => setSelectedElement('aquaponics')} className="cursor-pointer">
                <rect x="340" y="320" width="120" height="60" rx="6" 
                  fill={selectedElement === 'aquaponics' ? 'rgba(0, 217, 255, 0.5)' : 'url(#aquaGrad)'} 
                  stroke="#00d9ff" strokeWidth="3"
                  filter={selectedElement === 'aquaponics' ? 'url(#glow)' : ''}/>
                <text x="400" y="345" textAnchor="middle" fill="#0a1628" fontSize="10" fontWeight="bold">AQUAPONICS</text>
                <text x="400" y="360" textAnchor="middle" fill="#0a1628" fontSize="9">40' Container</text>
                {/* Fish tank icon */}
                <ellipse cx="365" cy="365" rx="12" ry="8" fill="#0891b2" opacity="0.6"/>
                {/* Grow beds icon */}
                <rect x="410" y="358" width="35" height="15" rx="2" fill="#22c55e" opacity="0.6"/>
              </g>

              {/* Gathering Pavilion */}
              <g onClick={() => setSelectedElement('gathering')} className="cursor-pointer">
                <path d="M 400 240 L 440 280 L 440 320 L 360 320 L 360 280 Z" 
                  fill={selectedElement === 'gathering' ? 'rgba(139, 92, 246, 0.5)' : 'rgba(139, 92, 246, 0.3)'} 
                  stroke="#8b5cf6" strokeWidth="2"/>
                <text x="400" y="300" textAnchor="middle" fill="#c4b5fd" fontSize="9" fontWeight="bold">PAVILION</text>
              </g>

              {/* Tool Shed */}
              <g onClick={() => setSelectedElement('toolshed')} className="cursor-pointer">
                <rect x="480" y="340" width="50" height="35" rx="4" 
                  fill={selectedElement === 'toolshed' ? 'rgba(139, 92, 246, 0.5)' : 'rgba(139, 92, 246, 0.3)'} 
                  stroke="#8b5cf6" strokeWidth="2"/>
                <text x="505" y="362" textAnchor="middle" fill="#c4b5fd" fontSize="8">TOOLS</text>
              </g>

              {/* Legend */}
              <g transform="translate(20, 20)">
                <rect width="150" height="130" rx="8" fill="rgba(0,0,0,0.6)" stroke="#334155"/>
                <text x="10" y="20" fill="#f0f4f8" fontSize="10" fontWeight="bold">LEGEND</text>
                <rect x="10" y="30" width="20" height="12" rx="2" fill="url(#homeGrad)"/>
                <text x="35" y="40" fill="#f0f4f8" fontSize="9">Triple Trio Home</text>
                <rect x="10" y="48" width="20" height="12" rx="2" fill="url(#aquaGrad)"/>
                <text x="35" y="58" fill="#f0f4f8" fontSize="9">Aquaponics</text>
                <rect x="10" y="66" width="20" height="12" rx="2" fill="#8b5cf6" opacity="0.5"/>
                <text x="35" y="76" fill="#f0f4f8" fontSize="9">Shared Space</text>
                <rect x="10" y="84" width="20" height="12" rx="2" fill="#22c55e" opacity="0.3"/>
                <text x="35" y="94" fill="#f0f4f8" fontSize="9">Gardens/Orchard</text>
                <rect x="10" y="102" width="20" height="12" rx="2" fill="#334155"/>
                <text x="35" y="112" fill="#f0f4f8" fontSize="9">Parking</text>
              </g>

              {/* Scale */}
              <g transform="translate(650, 650)">
                <line x1="0" y1="0" x2="100" y2="0" stroke="#94a3b8" strokeWidth="2"/>
                <line x1="0" y1="-5" x2="0" y2="5" stroke="#94a3b8" strokeWidth="2"/>
                <line x1="100" y1="-5" x2="100" y2="5" stroke="#94a3b8" strokeWidth="2"/>
                <text x="50" y="15" textAnchor="middle" fill="#94a3b8" fontSize="9">~100 ft</text>
              </g>
            </svg>
          </div>

          {/* Info Panel */}
          <div className="space-y-4">
            {/* Selected Element Info */}
            <div className="bg-slate-800/50 rounded-xl p-4 border border-slate-700 min-h-[200px]">
              <h2 className="text-sm font-mono text-cyan-400 mb-3 uppercase tracking-wider">
                {selectedElement ? elements[selectedElement]?.name : 'Click an element'}
              </h2>
              {selectedElement && elements[selectedElement] ? (
                <div className="space-y-3">
                  <div 
                    className="w-full h-2 rounded"
                    style={{ backgroundColor: getElementColor(elements[selectedElement].type) }}
                  />
                  {Object.entries(elements[selectedElement]).filter(([k]) => k !== 'type' && k !== 'name').map(([key, value]) => (
                    <div key={key} className="flex justify-between text-sm">
                      <span className="text-slate-400 capitalize">{key.replace(/([A-Z])/g, ' $1')}</span>
                      <span className="text-slate-200 font-mono">{value}</span>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-slate-500 text-sm">Click on any element in the site plan to see details</p>
              )}
            </div>

            {/* Cluster Totals */}
            <div className="bg-slate-800/50 rounded-xl p-4 border border-slate-700">
              <h2 className="text-sm font-mono text-amber-400 mb-3 uppercase tracking-wider">Cluster Totals</h2>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-slate-400">Housing Units</span>
                  <span className="text-amber-400 font-mono">7</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-400">Total Living Space</span>
                  <span className="text-amber-400 font-mono">6,720 sf</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-400">Residents (est.)</span>
                  <span className="text-amber-400 font-mono">18-24</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-400">Cluster Footprint</span>
                  <span className="text-emerald-400 font-mono">~1.5 acres</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-400">Parking Spaces</span>
                  <span className="text-slate-300 font-mono">14 + 4 EV</span>
                </div>
              </div>
            </div>

            {/* Food Production */}
            <div className="bg-gradient-to-br from-slate-800/50 to-emerald-900/20 rounded-xl p-4 border border-emerald-500/30">
              <h2 className="text-sm font-mono text-emerald-400 mb-3 uppercase tracking-wider">Cluster Food Production</h2>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-slate-400">Trout (annual)</span>
                  <span className="text-cyan-400 font-mono">~300 lbs</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-400">Leafy Greens</span>
                  <span className="text-emerald-400 font-mono">~2,100 lbs</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-400">Garden Produce</span>
                  <span className="text-emerald-400 font-mono">~1,500 lbs</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-400">Fruit (mature)</span>
                  <span className="text-emerald-400 font-mono">~400 lbs</span>
                </div>
                <div className="border-t border-slate-700 pt-2 mt-2">
                  <div className="flex justify-between font-medium">
                    <span className="text-emerald-400">Per Household/Week</span>
                    <span className="text-emerald-400 font-mono">~15 lbs</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Design Principles */}
            <div className="bg-slate-800/50 rounded-xl p-4 border border-slate-700">
              <h2 className="text-sm font-mono text-purple-400 mb-3 uppercase tracking-wider">Design Principles</h2>
              <ul className="space-y-2 text-sm text-slate-300">
                <li className="flex items-start gap-2">
                  <span className="text-purple-400">→</span>
                  <span>Homes face inward to central commons</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-purple-400">→</span>
                  <span>Cars at perimeter, pedestrian interior</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-purple-400">→</span>
                  <span>Aquaponics centrally located for all access</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-purple-400">→</span>
                  <span>Mature trees preserved between homes</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-purple-400">→</span>
                  <span>All homes within 200ft of shared spaces</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        {/* Triple Trio Detail */}
        <div className="mt-6 bg-slate-800/50 rounded-xl p-6 border border-slate-700">
          <h2 className="text-lg font-bold text-amber-400 mb-4">The Triple Trio Unit: 3-40' Containers = 960 SF Home</h2>
          <div className="grid md:grid-cols-4 gap-4">
            <div className="bg-slate-900/50 rounded-lg p-4 border-t-2 border-amber-500">
              <div className="text-2xl font-bold text-amber-400">3</div>
              <div className="text-sm text-slate-400">Bedrooms</div>
              <div className="text-xs text-slate-500 mt-1">Each 8' × 12' minimum</div>
            </div>
            <div className="bg-slate-900/50 rounded-lg p-4 border-t-2 border-blue-500">
              <div className="text-2xl font-bold text-blue-400">2</div>
              <div className="text-sm text-slate-400">Full Bathrooms</div>
              <div className="text-xs text-slate-500 mt-1">One en-suite primary</div>
            </div>
            <div className="bg-slate-900/50 rounded-lg p-4 border-t-2 border-emerald-500">
              <div className="text-2xl font-bold text-emerald-400">960</div>
              <div className="text-sm text-slate-400">Square Feet</div>
              <div className="text-xs text-slate-500 mt-1">Efficient open layout</div>
            </div>
            <div className="bg-slate-900/50 rounded-lg p-4 border-t-2 border-purple-500">
              <div className="text-2xl font-bold text-purple-400">$85K</div>
              <div className="text-sm text-slate-400">Est. Unit Cost</div>
              <div className="text-xs text-slate-500 mt-1">Containers + fitout</div>
            </div>
          </div>
          
          <div className="mt-4 grid md:grid-cols-2 gap-4 text-sm">
            <div>
              <h3 className="text-slate-300 font-medium mb-2">Standard Features</h3>
              <ul className="space-y-1 text-slate-400">
                <li>• Roof-mounted solar panels (8-10 kW)</li>
                <li>• Mini-split heating/cooling</li>
                <li>• Tankless water heater</li>
                <li>• Full kitchen with Energy Star appliances</li>
                <li>• Washer/dryer hookups</li>
              </ul>
            </div>
            <div>
              <h3 className="text-slate-300 font-medium mb-2">Community Integration</h3>
              <ul className="space-y-1 text-slate-400">
                <li>• Smart meter for community microgrid</li>
                <li>• Rainwater collection to shared cistern</li>
                <li>• Compost connection to community system</li>
                <li>• Fiber/wifi to central hub</li>
                <li>• Weekly produce share allocation</li>
              </ul>
            </div>
          </div>
        </div>

        <p className="text-center text-slate-500 text-xs mt-6">Click elements to explore • Cluster Detail v1</p>
      </div>
    </div>
  );
};

export default ClusterDetailLayout;