import TimelineSlider from '../Timeline/TimelineSlider';
import './Topbar.css';

const ISLANDS = [
  { key: 'saint-martin', label: 'St-Martin',    center: [-63.07, 18.07], zoom: 11 },
  { key: 'guadeloupe',   label: 'Guadeloupe',   center: [-61.55, 16.25], zoom: 9  },
  { key: 'dominique',    label: 'Dominique',    center: [-61.37, 15.41], zoom: 10 },
  { key: 'martinique',   label: 'Martinique',   center: [-61.02, 14.65], zoom: 9  },
  { key: 'sainte-lucie', label: 'Ste-Lucie',    center: [-60.98, 13.90], zoom: 10 },
  { key: 'barbade',      label: 'Barbade',      center: [-59.55, 13.18], zoom: 10 },
];

export default function Topbar({ activeStep, onStepChange, onIslandSelect }) {
  return (
    <header className="topbar">
      <div className="topbar__brand">
        <svg className="topbar__brand-icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
          <circle cx="16" cy="16" r="15" fill="#1a1a2e" stroke="#2563eb" strokeWidth="1.5"/>
          <circle cx="16" cy="16" r="5"  fill="none" stroke="#2563eb" strokeWidth="0.8" opacity="0.6"/>
          <circle cx="16" cy="16" r="9"  fill="none" stroke="#2563eb" strokeWidth="0.8" opacity="0.5"/>
          <circle cx="16" cy="16" r="13" fill="none" stroke="#2563eb" strokeWidth="0.8" opacity="0.4"/>
          <line x1="16" y1="3"  x2="16" y2="29" stroke="#2563eb" strokeWidth="0.5" opacity="0.3"/>
          <line x1="3"  y1="16" x2="29" y2="16" stroke="#2563eb" strokeWidth="0.5" opacity="0.3"/>
          <path d="M16 16 L25 7 A13 13 0 0 0 16 3 Z" fill="#60a5fa" opacity="0.18"/>
          <line x1="16" y1="16" x2="25" y2="7" stroke="#60a5fa" strokeWidth="1.5" strokeLinecap="round"/>
          <circle cx="22" cy="10" r="1.5" fill="#60a5fa" opacity="0.9"/>
          <circle cx="16" cy="16" r="1.5" fill="#fff"/>
        </svg>
        <span className="topbar__brand-name">Radar Sargasses Caraïbes</span>
      </div>

      <nav className="topbar__islands" aria-label="Navigation par île">
        {ISLANDS.map(island => (
          <button
            key={island.key}
            className="topbar__island-btn"
            onClick={() => onIslandSelect({ center: island.center, zoom: island.zoom, _t: Date.now() })}
          >
            {island.label}
          </button>
        ))}
      </nav>

      <div className="topbar__timeline">
        <TimelineSlider activeStep={activeStep} onChange={onStepChange} />
      </div>
    </header>
  );
}
