import React, { useState, useEffect, useRef } from 'react';
import MapboxView from './components/MapboxView';
import Header from './components/Header';
import Footer from './components/Footer';
import { fetchEvents } from './api/events';
import './styles/glassmorphism.css';
import './styles/animations.css';
import './styles/mapbox-theme.css';

function App() {
  const [events, setEvents] = useState([]);
  const [selectedEvent, setSelectedEvent] = useState(null);
  const [loading, setLoading] = useState(true);
  const [sentimentFilter, setSentimentFilter] = useState(null);
  const mapRef = useRef(null);

  useEffect(() => {
    loadEvents();
  }, []);

  const loadEvents = async () => {
    try {
      setLoading(true);
      const data = await fetchEvents();

      // Data now comes with real sentiment scores from backend
      setEvents(data);
    } catch (error) {
      console.error('Error loading events:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleEventClick = (event) => {
    console.log('=== Event clicked ===');
    console.log('Full event object:', event);
    console.log('Event title:', event.title);
    console.log('Event link:', event.link);
    console.log('Event location:', event.location);
    console.log('Has location?:', !!event.location);
    setSelectedEvent(event);
  };

  const handleClosePopup = () => {
    setSelectedEvent(null);
  };

  const handleSentimentFilter = (sentiment) => {
    setSentimentFilter(sentimentFilter === sentiment ? null : sentiment);
  };

  return (
    <div className="app" style={{
      width: '100vw',
      height: '100vh',
      overflow: 'hidden',
      background: '#0a1929'
    }}>
      <Header
        sentimentFilter={sentimentFilter}
        onSentimentFilter={handleSentimentFilter}
      />

      <div style={{
        width: '100%',
        height: 'calc(100vh - 60px)', // Account for header
        position: 'relative'
      }}>
        <MapboxView
          ref={mapRef}
          events={events}
          sentimentFilter={sentimentFilter}
          selectedEvent={selectedEvent}
          onEventClick={handleEventClick}
          onClosePopup={handleClosePopup}
          loading={loading}
        />
      </div>

      <Footer />
    </div>
  );
}

export default App;