import { useState } from 'react';
import SargassesMap from './components/Map/SargassesMap';
import SpotPanel from './components/SpotPanel/SpotPanel';
import Topbar from './components/Topbar/Topbar';
import Legend from './components/Legend/Legend';
import ReportModal from './components/ReportModal/ReportModal';
import ChangelogModal from './components/ChangelogModal/ChangelogModal';
import './App.css';

export default function App() {
  const [selectedSpot,   setSelectedSpot]   = useState(null);
  const [activeStep,     setActiveStep]     = useState('now');
  const [flyToTarget,    setFlyToTarget]    = useState(null);
  const [showReport,     setShowReport]     = useState(false);
  const [showChangelog,  setShowChangelog]  = useState(false);

  return (
    <div className="app">
      <Topbar
        activeStep={activeStep}
        onStepChange={setActiveStep}
        onIslandSelect={setFlyToTarget}
      />

      <div className="app__wave-overlay" aria-hidden="true" />

      <SargassesMap
        onSpotSelect={setSelectedSpot}
        selectedSpotId={selectedSpot?.id}
        activeStep={activeStep}
        flyToTarget={flyToTarget}
      />

      <Legend />

      {/* Boutons flottants bas-gauche */}
      <div className="app__actions">
        <button
          className="app__action-btn app__action-btn--info"
          onClick={() => setShowChangelog(true)}
          title="À propos / changelog"
          aria-label="À propos"
        >
          ?
        </button>
        <button
          className="app__action-btn app__action-btn--report"
          onClick={() => setShowReport(true)}
          title="Signaler un bug ou soumettre une idée"
          aria-label="Signalement"
        >
          ✉
        </button>
      </div>

      <SpotPanel
        spot={selectedSpot}
        activeStep={activeStep}
        onClose={() => setSelectedSpot(null)}
      />

      {showReport    && <ReportModal    onClose={() => setShowReport(false)} />}
      {showChangelog && <ChangelogModal onClose={() => setShowChangelog(false)} />}
    </div>
  );
}