import React, { useState, useEffect } from 'react';
import './DeploymentMap.css';

// Mock data for demonstration purposes
const mockDeploymentData = {
  phases: [
    {
      id: 1,
      name: "Phase 1",
      timeline: "Q3 2025 - Q1 2026",
      status: "planning",
      locations: [
        { id: 101, name: "Springfield Downtown", lat: 39.801, lng: -89.644, status: "planned", type: "urban", capacity: 12 },
        { id: 102, name: "Champaign-Urbana Hub", lat: 40.116, lng: -88.243, status: "planned", type: "urban", capacity: 8 },
        { id: 103, name: "Bloomington-Normal", lat: 40.484, lng: -88.993, status: "planned", type: "urban", capacity: 8 },
        { id: 104, name: "Peoria Central", lat: 40.694, lng: -89.589, status: "planned", type: "urban", capacity: 8 }
      ]
    },
    {
      id: 2,
      name: "Phase 2",
      timeline: "Q2 2026 - Q4 2026",
      status: "future",
      locations: [
        { id: 201, name: "Rockford Hub", lat: 42.271, lng: -89.093, status: "future", type: "urban", capacity: 8 },
        { id: 202, name: "Quad Cities", lat: 41.512, lng: -90.578, status: "future", type: "urban", capacity: 8 },
        { id: 203, name: "Carbondale", lat: 37.727, lng: -89.216, status: "future", type: "urban", capacity: 6 },
        { id: 204, name: "Quincy", lat: 39.936, lng: -91.410, status: "future", type: "urban", capacity: 6 },
        { id: 205, name: "I-55 Corridor North", lat: 41.097, lng: -88.841, status: "future", type: "corridor", capacity: 4 },
        { id: 206, name: "I-55 Corridor South", lat: 39.144, lng: -89.479, status: "future", type: "corridor", capacity: 4 }
      ]
    },
    {
      id: 3,
      name: "Phase 3",
      timeline: "Q1 2027 - Q3 2027",
      status: "future",
      locations: [
        { id: 301, name: "Decatur", lat: 39.840, lng: -88.954, status: "future", type: "urban", capacity: 6 },
        { id: 302, name: "Danville", lat: 40.124, lng: -87.630, status: "future", type: "urban", capacity: 6 },
        { id: 303, name: "Galesburg", lat: 40.947, lng: -90.371, status: "future", type: "urban", capacity: 4 },
        { id: 304, name: "Mt. Vernon", lat: 38.317, lng: -88.903, status: "future", type: "urban", capacity: 4 },
        { id: 305, name: "I-57 Corridor North", lat: 41.201, lng: -87.866, status: "future", type: "corridor", capacity: 4 },
        { id: 306, name: "I-57 Corridor South", lat: 38.729, lng: -88.978, status: "future", type: "corridor", capacity: 4 },
        { id: 307, name: "I-70 Corridor", lat: 39.123, lng: -88.542, status: "future", type: "corridor", capacity: 4 },
        { id: 308, name: "I-74 Corridor", lat: 40.681, lng: -89.893, status: "future", type: "corridor", capacity: 4 }
      ]
    }
  ],
  demographics: {
    population: [
      { county: "Cook", population: 5150233, evAdoption: 2.8, chargingStations: 487 },
      { county: "DuPage", population: 922921, evAdoption: 3.2, chargingStations: 112 },
      { county: "Lake", population: 696535, evAdoption: 2.9, chargingStations: 78 },
      { county: "Will", population: 677560, evAdoption: 2.1, chargingStations: 54 },
      { county: "Kane", population: 532403, evAdoption: 2.3, chargingStations: 42 },
      { county: "McHenry", population: 307774, evAdoption: 1.9, chargingStations: 28 },
      { county: "Winnebago", population: 285350, evAdoption: 1.2, chargingStations: 18 },
      { county: "Madison", population: 264461, evAdoption: 0.9, chargingStations: 14 },
      { county: "St. Clair", population: 259686, evAdoption: 0.7, chargingStations: 12 },
      { county: "Champaign", population: 205865, evAdoption: 1.8, chargingStations: 22 }
    ],
    evProjections: [
      { year: 2025, percentage: 3.5 },
      { year: 2026, percentage: 5.2 },
      { year: 2027, percentage: 7.8 },
      { year: 2028, percentage: 11.5 },
      { year: 2029, percentage: 16.3 },
      { year: 2030, percentage: 22.0 }
    ]
  },
  impactMetrics: {
    economic: {
      jobsCreated: 450,
      localBusinessImpact: 28,
      taxRevenue: 3.2
    },
    environmental: {
      co2Reduction: 12500,
      gasDisplaced: 1.4,
      renewableIntegration: 65
    },
    social: {
      underservedCommunities: 14,
      accessibilityScore: 72,
      publicTransportIntegration: 8
    }
  }
};

function DeploymentMap() {
  const [activeTab, setActiveTab] = useState('map');
  const [loading, setLoading] = useState(true);
  const [selectedPhase, setSelectedPhase] = useState(1);
  const [mapView, setMapView] = useState('phases');
  const [selectedLocation, setSelectedLocation] = useState(null);
  const [mapZoom, setMapZoom] = useState(1);

  useEffect(() => {
    // Simulate loading
    const timer = setTimeout(() => {
      setLoading(false);
    }, 1500);
    
    return () => clearTimeout(timer);
  }, []);

  const handlePhaseChange = (phaseId) => {
    setSelectedPhase(phaseId);
    setSelectedLocation(null);
  };

  const handleMapViewChange = (view) => {
    setMapView(view);
    setSelectedLocation(null);
  };

  const handleLocationSelect = (location) => {
    setSelectedLocation(location);
    setMapZoom(2);
  };

  const handleZoomChange = (zoom) => {
    setMapZoom(zoom);
    if (zoom === 1) {
      setSelectedLocation(null);
    }
  };

  // Helper function to render the Illinois map with deployment locations
  const renderMap = () => {
    const currentPhase = mockDeploymentData.phases.find(phase => phase.id === selectedPhase);
    const allLocations = mockDeploymentData.phases.flatMap(phase => phase.locations);
    const displayLocations = mapView === 'phases' ? currentPhase.locations : allLocations;
    
    return (
      <div className="map-container">
        <div className="illinois-map">
          <img src="/images/illinois_map.png" alt="Illinois Map" className="map-image" />
          
          {displayLocations.map(location => (
            <div 
              key={location.id}
              className={`map-marker ${location.status} ${location.type} ${selectedLocation && selectedLocation.id === location.id ? 'selected' : ''}`}
              style={{ 
                top: `${(1 - (location.lat - 37) / 6) * 100}%`, 
                left: `${((location.lng + 91.5) / 4) * 100}%` 
              }}
              onClick={() => handleLocationSelect(location)}
            >
              <div className="marker-pulse"></div>
              {mapZoom > 1 && (
                <div className="marker-label">{location.name}</div>
              )}
            </div>
          ))}
          
          {selectedLocation && (
            <div 
              className="location-detail-popup"
              style={{ 
                top: `${(1 - (selectedLocation.lat - 37) / 6) * 100}%`, 
                left: `${((selectedLocation.lng + 91.5) / 4) * 100}%` 
              }}
            >
              <h4>{selectedLocation.name}</h4>
              <div className="detail-item">
                <span className="detail-label">Status:</span>
                <span className={`detail-value ${selectedLocation.status}`}>
                  {selectedLocation.status.charAt(0).toUpperCase() + selectedLocation.status.slice(1)}
                </span>
              </div>
              <div className="detail-item">
                <span className="detail-label">Type:</span>
                <span className="detail-value">
                  {selectedLocation.type === 'urban' ? 'Urban Hub' : 'Corridor Station'}
                </span>
              </div>
              <div className="detail-item">
                <span className="detail-label">Capacity:</span>
                <span className="detail-value">{selectedLocation.capacity} Chargers</span>
              </div>
              <div className="detail-item">
                <span className="detail-label">Phase:</span>
                <span className="detail-value">
                  {mockDeploymentData.phases.find(phase => 
                    phase.locations.some(loc => loc.id === selectedLocation.id)
                  ).name}
                </span>
              </div>
              <button className="close-popup" onClick={() => setSelectedLocation(null)}>×</button>
            </div>
          )}
        </div>
        
        <div className="map-controls">
          <div className="zoom-controls">
            <button 
              className={`zoom-button ${mapZoom === 1 ? 'active' : ''}`}
              onClick={() => handleZoomChange(1)}
            >
              State View
            </button>
            <button 
              className={`zoom-button ${mapZoom === 2 ? 'active' : ''}`}
              onClick={() => handleZoomChange(2)}
            >
              Detailed View
            </button>
          </div>
          
          <div className="view-controls">
            <button 
              className={`view-button ${mapView === 'phases' ? 'active' : ''}`}
              onClick={() => handleMapViewChange('phases')}
            >
              Phase View
            </button>
            <button 
              className={`view-button ${mapView === 'all' ? 'active' : ''}`}
              onClick={() => handleMapViewChange('all')}
            >
              All Locations
            </button>
          </div>
        </div>
        
        <div className="map-legend">
          <h4>Map Legend</h4>
          <div className="legend-items">
            <div className="legend-item">
              <div className="legend-marker planned"></div>
              <span>Planned (Phase 1)</span>
            </div>
            <div className="legend-item">
              <div className="legend-marker future"></div>
              <span>Future Phases</span>
            </div>
            <div className="legend-item">
              <div className="legend-marker urban"></div>
              <span>Urban Hub</span>
            </div>
            <div className="legend-item">
              <div className="legend-marker corridor"></div>
              <span>Corridor Station</span>
            </div>
          </div>
        </div>
      </div>
    );
  };

  // Helper function to render the deployment phases
  const renderPhases = () => {
    return (
      <div className="deployment-phases">
        <div className="phase-tabs">
          {mockDeploymentData.phases.map(phase => (
            <button 
              key={phase.id}
              className={`phase-tab ${selectedPhase === phase.id ? 'active' : ''} ${phase.status}`}
              onClick={() => handlePhaseChange(phase.id)}
            >
              {phase.name}
            </button>
          ))}
        </div>
        
        {mockDeploymentData.phases.map(phase => (
          phase.id === selectedPhase && (
            <div key={phase.id} className="phase-details">
              <div className="phase-header">
                <h3>{phase.name}</h3>
                <div className="phase-timeline">{phase.timeline}</div>
                <div className={`phase-status ${phase.status}`}>
                  {phase.status.charAt(0).toUpperCase() + phase.status.slice(1)}
                </div>
              </div>
              
              <div className="phase-metrics">
                <div className="metric-card">
                  <div className="metric-value">{phase.locations.length}</div>
                  <div className="metric-label">Charging Locations</div>
                </div>
                <div className="metric-card">
                  <div className="metric-value">
                    {phase.locations.reduce((sum, location) => sum + location.capacity, 0)}
                  </div>
                  <div className="metric-label">Total Chargers</div>
                </div>
                <div className="metric-card">
                  <div className="metric-value">
                    {phase.locations.filter(location => location.type === 'urban').length}
                  </div>
                  <div className="metric-label">Urban Hubs</div>
                </div>
                <div className="metric-card">
                  <div className="metric-value">
                    {phase.locations.filter(location => location.type === 'corridor').length}
                  </div>
                  <div className="metric-label">Corridor Stations</div>
                </div>
              </div>
              
              <div className="location-list">
                <h4>Deployment Locations</h4>
                <div className="location-grid">
                  {phase.locations.map(location => (
                    <div 
                      key={location.id} 
                      className={`location-card ${selectedLocation && selectedLocation.id === location.id ? 'selected' : ''}`}
                      onClick={() => handleLocationSelect(location)}
                    >
                      <div className="location-name">{location.name}</div>
                      <div className="location-type">
                        {location.type === 'urban' ? 'Urban Hub' : 'Corridor Station'}
                      </div>
                      <div className="location-capacity">{location.capacity} Chargers</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )
        ))}
      </div>
    );
  };

  // Helper function to render the demographics tab
  const renderDemographics = () => {
    return (
      <div className="demographics-tab">
        <div className="demographics-section">
          <h3>Population & EV Adoption by County</h3>
          <div className="county-chart">
            <div className="chart-header">
              <div className="chart-column county">County</div>
              <div className="chart-column population">Population</div>
              <div className="chart-column adoption">EV Adoption %</div>
              <div className="chart-column stations">Charging Stations</div>
            </div>
            {mockDeploymentData.demographics.population.map((county, index) => (
              <div key={index} className="chart-row">
                <div className="chart-column county">{county.county}</div>
                <div className="chart-column population">{county.population.toLocaleString()}</div>
                <div className="chart-column adoption">
                  <div className="adoption-bar-container">
                    <div 
                      className="adoption-bar"
                      style={{ width: `${county.evAdoption * 10}%` }}
                    ></div>
                    <span className="adoption-value">{county.evAdoption}%</span>
                  </div>
                </div>
                <div className="chart-column stations">{county.chargingStations}</div>
              </div>
            ))}
          </div>
        </div>
        
        <div className="demographics-section">
          <h3>EV Adoption Projections</h3>
          <div className="projection-chart">
            <div className="projection-bars">
              {mockDeploymentData.demographics.evProjections.map((projection, index) => (
                <div key={index} className="projection-bar-container">
                  <div className="projection-year">{projection.year}</div>
                  <div className="projection-bar-wrapper">
                    <div 
                      className="projection-bar"
                      style={{ height: `${projection.percentage * 3}%` }}
                    ></div>
                  </div>
                  <div className="projection-value">{projection.percentage}%</div>
                </div>
              ))}
            </div>
            <div className="projection-axis">
              <div className="axis-label">Projected EV Adoption Rate (%)</div>
            </div>
          </div>
          
          <div className="projection-notes">
            <p>Projections based on current adoption trends, state incentives, and manufacturer production forecasts.</p>
            <p>The Link deployment strategy is designed to stay ahead of projected adoption curves to ensure adequate charging infrastructure.</p>
          </div>
        </div>
      </div>
    );
  };

  // Helper function to render the impact metrics tab
  const renderImpactMetrics = () => {
    const { economic, environmental, social } = mockDeploymentData.impactMetrics;
    
    return (
      <div className="impact-metrics-tab">
        <div className="impact-section economic">
          <h3>Economic Impact</h3>
          <div className="impact-metrics">
            <div className="impact-metric">
              <div className="impact-icon">💼</div>
              <div className="impact-value">{economic.jobsCreated}</div>
              <div className="impact-label">Jobs Created</div>
              <div className="impact-description">
                Direct and indirect employment opportunities across all deployment phases
              </div>
            </div>
            <div className="impact-metric">
              <div className="impact-icon">🏪</div>
              <div className="impact-value">{economic.localBusinessImpact}%</div>
              <div className="impact-label">Local Business Growth</div>
              <div className="impact-description">
                Projected increase in revenue for businesses near charging hubs
              </div>
            </div>
            <div className="impact-metric">
              <div className="impact-icon">💰</div>
              <div className="impact-value">${economic.taxRevenue}M</div>
              <div className="impact-label">Annual Tax Revenue</div>
              <div className="impact-description">
                Estimated additional tax revenue for state and local governments
              </div>
            </div>
          </div>
        </div>
        
        <div className="impact-section environmental">
          <h3>Environmental Impact</h3>
          <div className="impact-metrics">
            <div className="impact-metric">
              <div className="impact-icon">🌱</div>
              <div className="impact-value">{environmental.co2Reduction}</div>
              <div className="impact-label">Tons CO₂ Reduced</div>
              <div className="impact-description">
                Annual carbon emissions reduction from EV adoption enabled by The Link
              </div>
            </div>
            <div className="impact-metric">
              <div className="impact-icon">⛽</div>
              <div className="impact-value">{environmental.gasDisplaced}M</div>
              <div className="impact-label">Gallons Gas Displaced</div>
              <div className="impact-description">
                Annual reduction in gasoline consumption
              </div>
            </div>
            <div className="impact-metric">
              <div className="impact-icon">☀️</div>
              <div className="impact-value">{environmental.renewableIntegration}%</div>
              <div className="impact-label">Renewable Energy</div>
              <div className="impact-description">
                Percentage of charging energy from renewable sources
              </div>
            </div>
          </div>
        </div>
        
        <div className="impact-section social">
          <h3>Social Impact</h3>
          <div className="impact-metrics">
            <div className="impact-metric">
              <div className="impact-icon">🏘️</div>
              <div className="impact-value">{social.underservedCommunities}</div>
              <div className="impact-label">Underserved Communities</div>
              <div className="impact-description">
                Number of underserved communities with improved EV access
              </div>
            </div>
            <div className="impact-metric">
              <div className="impact-icon">♿</div>
              <div className="impact-value">{social.accessibilityScore}/100</div>
              <div className="impact-label">Accessibility Score</div>
              <div className="impact-description">
                Rating of charging infrastructure accessibility for all users
              </div>
            </div>
            <div className="impact-metric">
              <div className="impact-icon">🚌</div>
              <div className="impact-value">{social.publicTransportIntegration}</div>
              <div className="impact-label">Transit Connections</div>
              <div className="impact-description">
                Number of charging hubs with public transportation connections
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };

  if (loading) {
    return (
      <div className="deployment-map loading">
        <div className="loading-logo">
          <img src="/images/unity_fleet_logo.png" alt="Unity Fleet" />
          <div className="loading-pulse"></div>
        </div>
        <p>Loading Deployment Map...</p>
      </div>
    );
  }

  return (
    <div className="deployment-map">
      <header className="map-header">
        <div className="map-title">
          <h1>Deployment Map</h1>
          <span className="map-subtitle">The Link Charging Network</span>
        </div>
      </header>
      
      <div className="map-navigation">
        <button 
          className={`nav-button ${activeTab === 'map' ? 'active' : ''}`}
          onClick={() => setActiveTab('map')}
        >
          Interactive Map
        </button>
        <button 
          className={`nav-button ${activeTab === 'phases' ? 'active' : ''}`}
          onClick={() => setActiveTab('phases')}
        >
          Deployment Phases
        </button>
        <button 
          className={`nav-button ${activeTab === 'demographics' ? 'active' : ''}`}
          onClick={() => setActiveTab('demographics')}
        >
          Demographics
        </button>
        <button 
          className={`nav-button ${activeTab === 'impact' ? 'active' : ''}`}
          onClick={() => setActiveTab('impact')}
        >
          Impact Metrics
        </button>
      </div>
      
      <main className="map-content">
        {activeTab === 'map' && renderMap()}
        {activeTab === 'phases' && renderPhases()}
        {activeTab === 'demographics' && renderDemographics()}
        {activeTab === 'impact' && renderImpactMetrics()}
      </main>
      
      <footer className="map-footer">
        <div className="footer-info">
          <span>Unity Fleet Deployment Strategy</span>
          <span>Powered by Atlas Intelligence</span>
        </div>
        <div className="footer-actions">
          <button className="footer-button">Download Map Data</button>
          <button className="footer-button">Share Deployment Plan</button>
        </div>
      </footer>
    </div>
  );
}

export default DeploymentMap;