import { useCollection, useIdentity } from '@deplixo/sdk';
import Home from './components/Home.jsx';
import Tours from './components/Tours.jsx';
import Bookings from './components/Bookings.jsx';
import Contact from './components/Contact.jsx';

const TABS = [
  { id: 'home', label: 'Home' },
  { id: 'tours', label: 'Tours' },
  { id: 'bookings', label: 'Bookings' },
  { id: 'contact', label: 'Contact' },
];

function App() {
  const [tab, setTab] = useState('home');
  const [selectedTour, setSelectedTour] = useState(null);
  const { user } = useIdentity();
  const bookings = useCollection('bookings');
  const inquiries = useCollection('inquiries');

  const goToBooking = (tour) => {
    setSelectedTour(tour);
    setTab('bookings');
  };

  return (
    <div className="app">
      <header className="site-header">
        <div className="brand">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M12 2L4 7v10l8 5 8-5V7l-8-5z" stroke="var(--primary)" strokeWidth="2" strokeLinejoin="round"/>
            <path d="M12 12l8-5M12 12v10M12 12L4 7" stroke="var(--primary)" strokeWidth="2" strokeLinejoin="round"/>
          </svg>
          <div>
            <h1>Setta Trips N Tours</h1>
            <p className="tagline">Journeys made unforgettable</p>
          </div>
        </div>
        <nav className="tabs" aria-label="Primary">
          {TABS.map((t) => (
            <button
              key={t.id}
              className={tab === t.id ? 'tab tab-active' : 'tab'}
              aria-current={tab === t.id ? 'page' : undefined}
              onClick={() => setTab(t.id)}
              data-testid={`tab-${t.id}`}
            >
              {t.label}
            </button>
          ))}
        </nav>
      </header>

      <main className="site-main">
        {tab === 'home' && <Home onExplore={() => setTab('tours')} onBookTour={goToBooking} />}
        {tab === 'tours' && <Tours onBookTour={goToBooking} />}
        {tab === 'bookings' && (
          <Bookings
            selectedTour={selectedTour}
            clearSelection={() => setSelectedTour(null)}
            bookings={bookings}
            user={user}
          />
        )}
        {tab === 'contact' && <Contact inquiries={inquiries} user={user} />}
      </main>

      <footer className="site-footer">
        <p>© {new Date().getFullYear()} Setta Trips N Tours · Explore. Discover. Return home changed.</p>
      </footer>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);