import React, { useState, useEffect, useRef, useMemo } from 'react';
import { 
  TreeDeciduous, 
  Tent, 
  Palette, 
  PawPrint, 
  Crosshair, 
  Globe, 
  Leaf, 
  ZoomIn, 
  ZoomOut, 
  RefreshCw,
  Sprout
} from 'lucide-react';

const generateForestData = () => {
  return {
    id: 'root',
    label: 'FOREST',
    icon: 'TreeDeciduous',
    color: '#22c55e',
    children: [
      {
        id: 'fauna',
        label: 'Fauna',
        icon: 'PawPrint',
        color: '#ef4444',
        children: [
          {
            id: 'mammals',
            label: 'Mammals',
            children: [
              { id: 'predators', label: 'Predators', children: [{id: 'wolves', label: 'Wolves'}, {id: 'bears', label: 'Bears'}, {id: 'bigcats', label: 'Lynx/Cougar'}, {id: 'foxes', label: 'Foxes'}] },
              { id: 'herbivores', label: 'Herbivores', children: [{id: 'deer', label: 'Deer/Elk'}, {id: 'moose', label: 'Moose'}, {id: 'rabbits', label: 'Rabbits'}, {id: 'rodents', label: 'Squirrels/Beavers'}] },
              { id: 'primates', label: 'Primates', children: [{id: 'monkeys', label: 'Howler Monkeys'}, {id: 'lemurs', label: 'Lemurs'}, {id: 'apes', label: 'Gorillas'}] }
            ]
          },
          {
            id: 'birds',
            label: 'Birds',
            children: [
              { id: 'raptors', label: 'Raptors', children: [{id: 'eagles', label: 'Eagles'}, {id: 'owls', label: 'Owls (Nocturnal)'}, {id: 'hawks', label: 'Hawks'}] },
              { id: 'songbirds', label: 'Songbirds', children: [{id: 'cardinals', label: 'Cardinals'}, {id: 'warblers', label: 'Warblers'}, {id: 'robins', label: 'Thrushes'}] },
              { id: 'ground', label: 'Ground Birds', children: [{id: 'turkey', label: 'Wild Turkey'}, {id: 'grouse', label: 'Grouse'}] }
            ]
          },
          {
            id: 'insects',
            label: 'Insects & Micro',
            children: [
              { id: 'pollinators', label: 'Pollinators', children: [{id: 'bees', label: 'Wild Bees'}, {id: 'butterflies', label: 'Butterflies'}] },
              { id: 'decomposers', label: 'Decomposers', children: [{id: 'beetles', label: 'Beetles'}, {id: 'ants', label: 'Ant Colonies'}, {id: 'termites', label: 'Termites'}] },
              { id: 'pests', label: 'Pests', children: [{id: 'mosquitoes', label: 'Mosquitoes'}, {id: 'ticks', label: 'Ticks'}] }
            ]
          }
        ]
      },
      {
        id: 'flora',
        label: 'Flora',
        icon: 'Leaf',
        color: '#84cc16',
        children: [
          {
            id: 'trees',
            label: 'Trees',
            children: [
              { id: 'deciduous', label: 'Deciduous', children: [{id: 'oak', label: 'Oak'}, {id: 'maple', label: 'Maple'}, {id: 'birch', label: 'Birch'}, {id: 'beech', label: 'Beech'}] },
              { id: 'coniferous', label: 'Coniferous', children: [{id: 'pine', label: 'Pine'}, {id: 'spruce', label: 'Spruce'}, {id: 'fir', label: 'Fir'}, {id: 'redwood', label: 'Sequoia'}] }
            ]
          },
          {
            id: 'understory',
            label: 'Understory',
            children: [
              { id: 'shrubs', label: 'Shrubs', children: [{id: 'ferns', label: 'Ferns'}, {id: 'berries', label: 'Berry Bushes'}] },
              { id: 'flowers', label: 'Wildflowers', children: [{id: 'orchids', label: 'Orchids'}, {id: 'trillium', label: 'Trillium'}] }
            ]
          },
          {
            id: 'fungi',
            label: 'Fungi & Moss',
            children: [
              { id: 'mushrooms', label: 'Mushrooms', children: [{id: 'edible', label: 'Chanterelles'}, {id: 'poison', label: 'Amanita'}] },
              { id: 'lichen', label: 'Lichen', children: [{id: 'symbiosis', label: 'Algae+Fungus'}] },
              { id: 'moss', label: 'Mosses', children: [{id: 'peat', label: 'Peat Moss'}, {id: 'sphagnum', label: 'Sphagnum'}] }
            ]
          }
        ]
      },
      {
        id: 'climate',
        label: 'Climate Zones',
        icon: 'Globe',
        color: '#3b82f6',
        children: [
          {
            id: 'tropical',
            label: 'Tropical',
            children: [
              { id: 'rainforest', label: 'Rainforest', children: [{id: 'amazon', label: 'Amazonian'}, {id: 'congo', label: 'Congo'}] },
              { id: 'monsoon', label: 'Seasonal Monsoon'}
            ]
          },
          {
            id: 'temperate',
            label: 'Temperate',
            children: [
              { id: 'deciduous_forest', label: 'Deciduous Forest' },
              { id: 'mediterranean', label: 'Mediterranean / Chaparral' }
            ]
          },
          {
            id: 'boreal',
            label: 'Boreal (Taiga)',
            children: [
              { id: 'subarctic', label: 'Subarctic' },
              { id: 'tundra_edge', label: 'Tundra Edge' }
            ]
          },
          {
            id: 'weather',
            label: 'Weather Events',
            children: [
              { id: 'rain', label: 'Precipitation' },
              { id: 'fog', label: 'Mist/Fog' },
              { id: 'snow', label: 'Snowpack' }
            ]
          }
        ]
      },
      {
        id: 'hunting',
        label: 'Hunting & Survival',
        icon: 'Crosshair',
        color: '#d97706',
        children: [
          {
            id: 'methods',
            label: 'Methods',
            children: [
              { id: 'bow', label: 'Bow Hunting' },
              { id: 'rifle', label: 'Rifle/Firearm' },
              { id: 'trapping', label: 'Trapping' },
              { id: 'tracking', label: 'Tracking Skills' }
            ]
          },
          {
            id: 'game',
            label: 'Game Types',
            children: [
              { id: 'big_game', label: 'Big Game' },
              { id: 'small_game', label: 'Small Game' },
              { id: 'waterfowl', label: 'Waterfowl' }
            ]
          },
          {
            id: 'survival',
            label: 'Bushcraft',
            children: [
              { id: 'shelter', label: 'Shelter Building' },
              { id: 'fire', label: 'Fire Starting' },
              { id: 'foraging', label: 'Foraging' },
              { id: 'water', label: 'Water Purification' }
            ]
          },
          {
            id: 'ethics',
            label: 'Ethics',
            children: [
              { id: 'conservation', label: 'Population Control' },
              { id: 'tags', label: 'Tags & Seasons' },
              { id: 'waste', label: 'No Waste' }
            ]
          }
        ]
      },
      {
        id: 'recreation',
        label: 'Recreation & Travel',
        icon: 'Tent',
        color: '#a855f7',
        children: [
          {
            id: 'active',
            label: 'Active',
            children: [
              { id: 'hiking', label: 'Hiking/Trekking' },
              { id: 'climbing', label: 'Rock Climbing' },
              { id: 'biking', label: 'Mountain Biking' },
              { id: 'running', label: 'Trail Running' }
            ]
          },
          {
            id: 'leisure',
            label: 'Leisure',
            children: [
              { id: 'camping', label: 'Camping' },
              { id: 'birding', label: 'Bird Watching' },
              { id: 'photography', label: 'Photography' },
              { id: 'shinrin', label: 'Forest Bathing' }
            ]
          },
          {
            id: 'infrastructure',
            label: 'Infrastructure',
            children: [
              { id: 'national_parks', label: 'National Parks' },
              { id: 'trails', label: 'Trail Markers' },
              { id: 'lodges', label: 'Lodges & Cabins' }
            ]
          }
        ]
      },
      {
        id: 'colors',
        label: 'Colors & Aesthetics',
        icon: 'Palette',
        color: '#ec4899',
        children: [
          {
            id: 'seasonal',
            label: 'Seasonal',
            children: [
              { id: 'autumn', label: 'Autumn', children: [{id: 'rust', label: 'Russet'}, {id: 'gold', label: 'Gold'}, {id: 'orange', label: 'Burnt Orange'}] },
              { id: 'spring', label: 'Spring', children: [{id: 'fresh_green', label: 'Fresh Green'}, {id: 'buds', label: 'Pink/White Buds'}] },
              { id: 'winter', label: 'Winter', children: [{id: 'white', label: 'Snow White'}, {id: 'grey', label: 'Slate Grey'}, {id: 'evergreen', label: 'Deep Green'}] }
            ]
          },
          {
            id: 'textures',
            label: 'Textures',
            children: [
              { id: 'bark', label: 'Rough Bark' },
              { id: 'moss_tex', label: 'Velvet Moss' },
              { id: 'canopy', label: 'Dappled Light' }
            ]
          }
        ]
      },
      {
        id: 'ecology',
        label: 'Ecology & Science',
        icon: 'Sprout',
        color: '#06b6d4',
        children: [
          {
            id: 'cycles',
            label: 'Cycles',
            children: [
              { id: 'carbon', label: 'Carbon Sink' },
              { id: 'water_cycle', label: 'Water Retention' },
              { id: 'nutrient', label: 'Nutrient Cycling' }
            ]
          },
          {
            id: 'layers',
            label: 'Forest Layers',
            children: [
              { id: 'floor', label: 'Forest Floor' },
              { id: 'understory_layer', label: 'Understory' },
              { id: 'canopy_layer', label: 'Canopy' },
              { id: 'emergent', label: 'Emergent Layer' }
            ]
          },
          {
            id: 'soil',
            label: 'Soil Health',
            children: [
              { id: 'mycelium', label: 'Mycelium Network' },
              { id: 'humus', label: 'Humus' }
            ]
          }
        ]
      }
    ]
  };
};

const fullData = generateForestData();

const countLeaves = (node, collapsedIds) => {
  if (collapsedIds.has(node.id) || !node.children || node.children.length === 0) {
    return 1;
  }
  return node.children.reduce((acc, child) => acc + countLeaves(child, collapsedIds), 0);
};

const calculateLayout = (node, startAngle, endAngle, depth, collapsedIds, coords = {}) => {
  const radius = depth * 180;
  const midAngle = startAngle + (endAngle - startAngle) / 2;
  const rad = (midAngle - 90) * (Math.PI / 180);
  const x = Math.cos(rad) * radius;
  const y = Math.sin(rad) * radius;

  coords[node.id] = { x, y, angle: midAngle };

  if (collapsedIds.has(node.id) || !node.children) return coords;

  const totalLeaves = countLeaves(node, collapsedIds);
  let currentStartAngle = startAngle;

  node.children.forEach(child => {
    const childLeaves = countLeaves(child, collapsedIds);
    const childWedge = (childLeaves / totalLeaves) * (endAngle - startAngle);
    
    calculateLayout(child, currentStartAngle, currentStartAngle + childWedge, depth + 1, collapsedIds, coords);
    currentStartAngle += childWedge;
  });

  return coords;
};

const Node = ({ data, x, y, color, isCollapsed, onToggle, isRoot }) => {
  const Icon = data.icon ? ({
    TreeDeciduous, Tent, Palette, PawPrint, Crosshair, Globe, Leaf, Sprout
  }[data.icon] || Leaf) : null;

  return (
    <div
      className="absolute transform -translate-x-1/2 -translate-y-1/2 transition-all duration-500 ease-in-out cursor-pointer group"
      style={{ left: x, top: y, zIndex: isRoot ? 50 : 10 }}
      onClick={(e) => {
        e.stopPropagation();
        onToggle(data.id);
      }}
    >
      <div 
        className={`flex items-center justify-center rounded-full shadow-xl border-2 transition-all duration-300 ${isRoot ? 'w-24 h-24' : 'w-12 h-12'} hover:scale-110`}
        style={{ 
          backgroundColor: isRoot ? '#064e3b' : '#1f2937',
          borderColor: color,
          boxShadow: `0 0 15px ${color}40`
        }}
      >
        {Icon ? (
          <Icon size={isRoot ? 40 : 20} style={{ color }} />
        ) : (
          <div className="w-3 h-3 rounded-full" style={{ backgroundColor: color }} />
        )}
      </div>

      <div 
        className={`absolute left-1/2 -translate-x-1/2 mt-2 px-3 py-1 rounded-full text-sm font-semibold whitespace-nowrap text-white pointer-events-none transition-opacity
          ${isRoot ? 'text-xl bg-green-900/80' : 'bg-gray-900/80 text-xs'}
        `}
        style={{ top: '100%' }}
      >
        {data.label}
        {data.children && data.children.length > 0 && (
           <span className="ml-1 opacity-60 text-[10px]">{isCollapsed ? '+' : '-'}</span>
        )}
      </div>
    </div>
  );
};

const Connection = ({ start, end, color }) => {
  const dist = Math.sqrt(Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2));
  const angle = Math.atan2(end.y - start.y, end.x - start.x);
  
  return (
    <path
      d={`M ${start.x} ${start.y} L ${end.x} ${end.y}`}
      stroke={color}
      strokeWidth="2"
      strokeOpacity="0.4"
      fill="none"
      className="transition-all duration-500"
    />
  );
};

export default function ForestMindMap() {
  const [collapsed, setCollapsed] = useState(new Set());
  const [transform, setTransform] = useState({ x: 0, y: 0, scale: 0.8 });
  const [isDragging, setIsDragging] = useState(false);
  const [lastMouse, setLastMouse] = useState({ x: 0, y: 0 });
  const [dimensions, setDimensions] = useState({ w: 1000, h: 800 });
  const containerRef = useRef(null);

  useEffect(() => {
    const initialCollapsed = new Set();
    const traverse = (node, depth) => {
      if (depth >= 1 && node.children) {
        initialCollapsed.add(node.id);
      }
      if (node.children) node.children.forEach(c => traverse(c, depth + 1));
    };
    traverse(fullData, 0);
    setCollapsed(initialCollapsed);
    
    if (containerRef.current) {
        setDimensions({
            w: containerRef.current.clientWidth,
            h: containerRef.current.clientHeight
        });
    }
  }, []);

  const layout = useMemo(() => {
    return calculateLayout(fullData, 0, 360, 0, collapsed);
  }, [collapsed]);

  const toggleNode = (id) => {
    const newCollapsed = new Set(collapsed);
    if (newCollapsed.has(id)) {
      newCollapsed.delete(id);
    } else {
      newCollapsed.add(id);
    }
    setCollapsed(newCollapsed);
  };

  const handleWheel = (e) => {
    e.preventDefault();
    const scaleAmount = -e.deltaY * 0.001;
    const newScale = Math.min(Math.max(0.1, transform.scale + scaleAmount), 3);
    setTransform(prev => ({ ...prev, scale: newScale }));
  };

  const handleMouseDown = (e) => {
    setIsDragging(true);
    setLastMouse({ x: e.clientX, y: e.clientY });
  };

  const handleMouseMove = (e) => {
    if (!isDragging) return;
    const dx = e.clientX - lastMouse.x;
    const dy = e.clientY - lastMouse.y;
    setTransform(prev => ({ ...prev, x: prev.x + dx, y: prev.y + dy }));
    setLastMouse({ x: e.clientX, y: e.clientY });
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  const renderLinks = (node, parentColor) => {
    if (collapsed.has(node.id) || !node.children) return null;
    
    const effectiveColor = node.color || parentColor || '#9ca3af';

    return node.children.map(child => {
      const start = layout[node.id];
      const end = layout[child.id];
      if (!start || !end) return null;
      
      const childColor = child.color || effectiveColor;

      return (
        <React.Fragment key={child.id}>
          <Connection start={start} end={end} color={childColor} />
          {renderLinks(child, effectiveColor)}
        </React.Fragment>
      );
    });
  };

  const renderNodes = (node, parentColor) => {
    const pos = layout[node.id];
    if (!pos) return null;

    const effectiveColor = node.color || parentColor || '#9ca3af';

    const childrenNodes = (!collapsed.has(node.id) && node.children) 
      ? node.children.map(child => renderNodes(child, effectiveColor))
      : null;

    return (
      <React.Fragment key={node.id}>
        {childrenNodes}
        <Node 
          data={node} 
          x={pos.x} 
          y={pos.y} 
          color={effectiveColor}
          isCollapsed={collapsed.has(node.id)}
          onToggle={toggleNode}
          isRoot={node.id === 'root'}
        />
      </React.Fragment>
    );
  };

  return (
    <div className="w-full h-screen bg-slate-900 overflow-hidden relative font-sans text-slate-200 select-none">
      
      <div className="absolute inset-0 opacity-5 pointer-events-none" 
           style={{ 
             backgroundImage: 'radial-gradient(circle at 2px 2px, white 1px, transparent 0)', 
             backgroundSize: '40px 40px' 
           }} 
      />

      <div className="absolute top-6 right-6 z-50 flex flex-col gap-2 bg-slate-800/90 p-2 rounded-xl backdrop-blur-sm border border-slate-700 shadow-2xl">
        <button className="p-2 hover:bg-slate-700 rounded-lg text-green-400 transition-colors" title="Zoom In" onClick={() => setTransform(t => ({...t, scale: t.scale * 1.2}))}>
          <ZoomIn size={20} />
        </button>
        <button className="p-2 hover:bg-slate-700 rounded-lg text-green-400 transition-colors" title="Zoom Out" onClick={() => setTransform(t => ({...t, scale: t.scale / 1.2}))}>
          <ZoomOut size={20} />
        </button>
        <button className="p-2 hover:bg-slate-700 rounded-lg text-blue-400 transition-colors" title="Reset View" onClick={() => setTransform({ x: 0, y: 0, scale: 0.8 })}>
          <RefreshCw size={20} />
        </button>
        <div className="h-px bg-slate-700 my-1" />
        <div className="text-[10px] text-center text-slate-400 font-mono">
           {Math.round(transform.scale * 100)}%
        </div>
      </div>

      <div className="absolute top-6 left-6 z-50 bg-slate-800/90 p-4 rounded-xl backdrop-blur-sm border border-slate-700 shadow-2xl max-w-xs">
        <h1 className="text-xl font-bold text-green-400 mb-1 flex items-center gap-2">
          <TreeDeciduous /> The Forest
        </h1>
        <p className="text-xs text-slate-400 mb-3">
          Explore the digital ecosystem. Drag to pan, scroll to zoom. Click nodes to expand branches.
        </p>
        <div className="space-y-2 text-xs">
          <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-red-500"></div> Fauna (Animals)</div>
          <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-lime-500"></div> Flora (Plants)</div>
          <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-blue-500"></div> Climate</div>
          <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-amber-500"></div> Hunting & Survival</div>
          <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-purple-500"></div> Recreation</div>
          <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-pink-500"></div> Aesthetics</div>
        </div>
      </div>

      <div 
        ref={containerRef}
        className="w-full h-full cursor-grab active:cursor-grabbing"
        onMouseDown={handleMouseDown}
        onMouseMove={handleMouseMove}
        onMouseUp={handleMouseUp}
        onMouseLeave={handleMouseUp}
        onWheel={handleWheel}
      >
        <div 
          style={{ 
            transform: `translate(${transform.x + dimensions.w/2}px, ${transform.y + dimensions.h/2}px) scale(${transform.scale})`,
            transformOrigin: '0 0',
            transition: isDragging ? 'none' : 'transform 0.1s ease-out'
          }}
          className="relative w-0 h-0"
        >
          <svg className="absolute top-[-2000px] left-[-2000px] w-[4000px] h-[4000px] pointer-events-none overflow-visible">
            <g transform="translate(2000, 2000)">
               {renderLinks(fullData, null)}
            </g>
          </svg>

          <div className="absolute top-0 left-0 w-0 h-0">
            {renderNodes(fullData, null)}
          </div>
        </div>
      </div>
    </div>
  );
}