'use client';

import React, { useEffect, useState } from 'react';

// Isometric grid configuration - true 2:1 isometric projection
const CELL_WIDTH = 120;
const CELL_HEIGHT = 60; // Half of width for 2:1 isometric

// Convert grid coordinates to isometric screen coordinates
function gridToScreen(col: number, row: number): { x: number; y: number } {
  return {
    x: (col - row) * (CELL_WIDTH / 2),
    y: (col + row) * (CELL_HEIGHT / 2),
  };
}

// Grid layout (10 columns x 8 rows)
const GRID = {
  cols: 10,
  rows: 8,
};

// Infrastructure positions
const INFRASTRUCTURE = {
  solar: [
    { col: 0, row: 5 },
    { col: 1, row: 5 },
    { col: 0, row: 6 },
    { col: 1, row: 6 },
    { col: 2, row: 7 },
    { col: 3, row: 7 },
    { col: 2, row: 8 },
    { col: 3, row: 8 },
  ],
  wind: [
    { col: 0, row: 1 },
    { col: 1, row: 2 },
    { col: 2, row: 1 },
    { col: 3, row: 0 },
    { col: 4, row: 1 },
    { col: 5, row: 0 },
  ],
  substations: [
    { col: 3, row: 3, type: 'collection' },
    { col: 6, row: 4, type: 'distribution' },
    { col: 5, row: 7, type: 'distribution' },
  ],
  towers: [
    { col: 4, row: 3 },
    { col: 5, row: 4 },
    { col: 4, row: 5 },
    { col: 5, row: 6 },
  ],
  city: [
    { col: 8, row: 3, type: 'tall' },
    { col: 9, row: 4, type: 'medium' },
    { col: 8, row: 5, type: 'small' },
    { col: 9, row: 5, type: 'medium' },
  ],
  city2: [
    { col: 6, row: 8, type: 'medium' },
    { col: 7, row: 7, type: 'tall' },
    { col: 7, row: 8, type: 'small' },
  ],
  trees: [
    { col: 0, row: 3 },
    { col: 2, row: 6 },
    { col: 3, row: 1 },
    { col: 6, row: 2 },
    { col: 6, row: 6 },
  ],
};

const POWER_LINES = [
  { from: { col: 0, row: 1 }, to: { col: 1, row: 1 } },
  { from: { col: 1, row: 2 }, to: { col: 1, row: 1 } },
  { from: { col: 2, row: 1 }, to: { col: 1, row: 1 } },
  { from: { col: 1, row: 1 }, to: { col: 1, row: 3 } },
  { from: { col: 1, row: 3 }, to: { col: 3, row: 3 } },
  { from: { col: 3, row: 0 }, to: { col: 4, row: 0 } },
  { from: { col: 4, row: 0 }, to: { col: 4, row: 1 } },
  { from: { col: 5, row: 0 }, to: { col: 5, row: 1 } },
  { from: { col: 5, row: 1 }, to: { col: 4, row: 1 } },
  { from: { col: 4, row: 1 }, to: { col: 4, row: 3 } },
  { from: { col: 4, row: 3 }, to: { col: 3, row: 3 } },
  { from: { col: 0, row: 5 }, to: { col: 1, row: 5 } },
  { from: { col: 0, row: 6 }, to: { col: 0, row: 5 } },
  { from: { col: 1, row: 6 }, to: { col: 1, row: 5 } },
  { from: { col: 1, row: 5 }, to: { col: 1, row: 3 } },
  { from: { col: 2, row: 7 }, to: { col: 3, row: 7 } },
  { from: { col: 2, row: 8 }, to: { col: 2, row: 7 } },
  { from: { col: 3, row: 8 }, to: { col: 3, row: 7 } },
  { from: { col: 3, row: 7 }, to: { col: 3, row: 5 } },
  { from: { col: 3, row: 5 }, to: { col: 3, row: 3 } },
  { from: { col: 3, row: 3 }, to: { col: 4, row: 3 } },
  { from: { col: 4, row: 3 }, to: { col: 5, row: 3 } },
  { from: { col: 5, row: 3 }, to: { col: 5, row: 4 } },
  { from: { col: 5, row: 4 }, to: { col: 6, row: 4 } },
  { from: { col: 6, row: 4 }, to: { col: 7, row: 4 } },
  { from: { col: 7, row: 4 }, to: { col: 8, row: 4 } },
  { from: { col: 8, row: 4 }, to: { col: 8, row: 3 } },
  { from: { col: 8, row: 4 }, to: { col: 8, row: 5 } },
  { from: { col: 8, row: 3 }, to: { col: 9, row: 3 } },
  { from: { col: 9, row: 3 }, to: { col: 9, row: 4 } },
  { from: { col: 8, row: 5 }, to: { col: 9, row: 5 } },
  { from: { col: 3, row: 3 }, to: { col: 3, row: 5 } },
  { from: { col: 3, row: 5 }, to: { col: 4, row: 5 } },
  { from: { col: 4, row: 5 }, to: { col: 5, row: 5 } },
  { from: { col: 5, row: 5 }, to: { col: 5, row: 6 } },
  { from: { col: 5, row: 6 }, to: { col: 5, row: 7 } },
  { from: { col: 5, row: 7 }, to: { col: 6, row: 7 } },
  { from: { col: 6, row: 7 }, to: { col: 6, row: 8 } },
  { from: { col: 6, row: 7 }, to: { col: 7, row: 7 } },
  { from: { col: 7, row: 7 }, to: { col: 7, row: 8 } },
];

export default function HeroIllustration() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth < 768);
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  const viewBox = isMobile ? '400 0 1000 1100' : '-400 -200 1800 1100';
  // Increase scale slightly and opacity significantly on mobile to fix the "thin" appearance
  const scale = isMobile ? 1.6 : 1;
  const opacity = isMobile ? 0.9 : 0.85;

  return (
    <div className="absolute inset-0 z-0 overflow-visible bg-primary w-full h-full">
      <svg
        viewBox={viewBox}
        className="w-full h-full transition-all duration-700"
        style={{ opacity, transform: `scale(${scale})` }}
        preserveAspectRatio="xMidYMid meet"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
      >
        <defs>
          <linearGradient id="energy-pulse" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#82ed20" stopOpacity="0" />
            <stop offset="30%" stopColor="#82ed20" stopOpacity="0.6" />
            <stop offset="50%" stopColor="#9bf14d" stopOpacity="1" />
            <stop offset="70%" stopColor="#82ed20" stopOpacity="0.6" />
            <stop offset="100%" stopColor="#82ed20" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="wind-flow" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="white" stopOpacity="0" />
            <stop offset="30%" stopColor="white" stopOpacity="0.4" />
            <stop offset="50%" stopColor="white" stopOpacity="0.6" />
            <stop offset="70%" stopColor="white" stopOpacity="0.4" />
            <stop offset="100%" stopColor="white" stopOpacity="0" />
          </linearGradient>
          <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="3" result="blur" />
            <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
          <filter id="soft-glow" x="-100%" y="-100%" width="300%" height="300%">
            <feGaussianBlur stdDeviation="2" result="blur" />
            <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>

        <g transform="translate(900, 100)">
          {/* ISOMETRIC GRID */}
          <g opacity="0.1">
            {[...Array(GRID.rows + 1)].map((_, row) => {
              const start = gridToScreen(0, row);
              const end = gridToScreen(GRID.cols, row);
              return (
                <line
                  key={`h-${row}`}
                  x1={start.x}
                  y1={start.y}
                  x2={end.x}
                  y2={end.y}
                  stroke="white"
                  strokeWidth="1"
                />
              );
            })}
            {[...Array(GRID.cols + 1)].map((_, col) => {
              const start = gridToScreen(col, 0);
              const end = gridToScreen(col, GRID.rows);
              return (
                <line
                  key={`v-${col}`}
                  x1={start.x}
                  y1={start.y}
                  x2={end.x}
                  y2={end.y}
                  stroke="white"
                  strokeWidth="1"
                />
              );
            })}
          </g>

          {/* POWER LINES */}
          <g stroke="white" strokeWidth="2" strokeOpacity="0.2">
            {POWER_LINES.map((line, i) => {
              const from = gridToScreen(line.from.col, line.from.row);
              const to = gridToScreen(line.to.col, line.to.row);
              return <line key={`cable-${i}`} x1={from.x} y1={from.y} x2={to.x} y2={to.y} />;
            })}
          </g>

          {/* ANIMATED ENERGY FLOW */}
          <g filter="url(#glow)">
            {POWER_LINES.map((line, i) => {
              // Only animate a subset of lines to reduce main-thread work
              if (i % 2 !== 0) return null;
              const from = gridToScreen(line.from.col, line.from.row);
              const to = gridToScreen(line.to.col, line.to.row);
              const length = Math.sqrt(Math.pow(to.x - from.x, 2) + Math.pow(to.y - from.y, 2));
              return (
                <line
                  key={`flow-${i}`}
                  x1={from.x}
                  y1={from.y}
                  x2={to.x}
                  y2={to.y}
                  stroke="url(#energy-pulse)"
                  strokeWidth="3"
                  strokeLinecap="round"
                  strokeDasharray={`${length * 0.2} ${length * 0.8}`}
                >
                  <animate
                    attributeName="stroke-dashoffset"
                    from={length}
                    to={0}
                    dur={`${1.5 + (i % 3) * 0.5}s`}
                    repeatCount="indefinite"
                  />
                </line>
              );
            })}
          </g>

          {/* SOLAR PANELS */}
          {INFRASTRUCTURE.solar.map((panel, i) => {
            const pos = gridToScreen(panel.col, panel.row);
            return (
              <g key={`solar-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
                <path
                  d="M -20 0 L 0 -10 L 20 0 L 0 10 Z"
                  fill="white"
                  fillOpacity="0.05"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.2"
                />
                <path
                  d="M -15 -5 L 0 -15 L 15 -5 L 0 5 Z"
                  fill="white"
                  fillOpacity="0.1"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.3"
                />
                <circle r="3" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
                  <animate
                    attributeName="fillOpacity"
                    values="0.2;0.5;0.2"
                    dur="2s"
                    repeatCount="indefinite"
                  />
                </circle>
              </g>
            );
          })}

          {/* WIND TURBINES */}
          {INFRASTRUCTURE.wind.map((turbine, i) => {
            const pos = gridToScreen(turbine.col, turbine.row);
            return (
              <g key={`wind-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
                <line
                  x1="0"
                  y1="0"
                  x2="0"
                  y2="-60"
                  stroke="white"
                  strokeWidth="2"
                  strokeOpacity="0.3"
                />
                <g transform="translate(0, -60)">
                  {[0, 120, 240].map((angle, j) => (
                    <line
                      key={`blade-${i}-${j}`}
                      x1="0"
                      y1="0"
                      x2="0"
                      y2="-30"
                      stroke="white"
                      strokeWidth="1.5"
                      strokeOpacity="0.4"
                      transform={`rotate(${angle})`}
                    >
                      <animateTransform
                        attributeName="transform"
                        type="rotate"
                        from={`${angle} 0 0`}
                        to={`${angle + 360} 0 0`}
                        dur={`${3 + i}s`}
                        repeatCount="indefinite"
                      />
                    </line>
                  ))}
                </g>
              </g>
            );
          })}

          {/* SUBSTATIONS */}
          {INFRASTRUCTURE.substations.map((sub, i) => {
            const pos = gridToScreen(sub.col, sub.row);
            const isCollection = sub.type === 'collection';
            return (
              <g key={`substation-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
                <path
                  d="M -25 0 L 0 -12 L 25 0 L 0 12 Z"
                  fill="white"
                  fillOpacity="0.05"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.2"
                />
                <path
                  d={
                    isCollection
                      ? 'M -18 0 L -18 -20 L 0 -32 L 18 -20 L 18 0'
                      : 'M -22 0 L -22 -25 L 0 -37 L 22 -25 L 22 0'
                  }
                  fill="white"
                  fillOpacity="0.08"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.3"
                />
              </g>
            );
          })}

          {/* TRANSMISSION TOWERS */}
          {INFRASTRUCTURE.towers.map((tower, i) => {
            const pos = gridToScreen(tower.col, tower.row);
            return (
              <g key={`tower-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
                <path
                  d="M -6 0 L -3 -45 M 6 0 L 3 -45"
                  stroke="white"
                  strokeWidth="1.5"
                  strokeOpacity="0.3"
                />
                <line
                  x1="-12"
                  y1="-40"
                  x2="12"
                  y2="-40"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.2"
                />
              </g>
            );
          })}

          {/* CITY BUILDINGS */}
          {[...INFRASTRUCTURE.city, ...INFRASTRUCTURE.city2].map((building, i) => {
            const pos = gridToScreen(building.col, building.row);
            const heights = { tall: 70, medium: 45, small: 30 };
            const height = heights[building.type as keyof typeof heights] || 45;
            return (
              <g key={`building-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
                <path
                  d={`M -12 0 L -12 -${height} L 0 -${height + 6} L 0 -6 Z`}
                  fill="white"
                  fillOpacity="0.08"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.2"
                />
                <path
                  d={`M 0 -6 L 0 -${height + 6} L 12 -${height} L 12 0 Z`}
                  fill="white"
                  fillOpacity="0.05"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.15"
                />
              </g>
            );
          })}
        </g>
      </svg>
      <div className="absolute inset-0 bg-gradient-to-b from-primary/10 via-transparent to-primary/9 pointer-events-none" />
    </div>
  );
}