import { useEffect } from 'react'
import { Link, NavLink, Route, Routes, useLocation } from 'react-router-dom'
import BottomNav from './components/BottomNav'
import SearchBar from './components/SearchBar'
import About from './pages/About'
import Catalog from './pages/Catalog'
import Home from './pages/Home'
import NotFound from './pages/NotFound'
import ProductDetail from './pages/ProductDetail'
import Stats from './pages/Stats'
import StoreDetail from './pages/StoreDetail'
import Stores from './pages/Stores'

const HEADER_SEARCH_ID = 'header-search-input'

function Header() {
  const location = useLocation()

  // "/" focuses the desktop header search.
  useEffect(() => {
    function onKey(e: KeyboardEvent) {
      if (e.key !== '/' || e.metaKey || e.ctrlKey || e.altKey) return
      const target = e.target as HTMLElement | null
      const tag = target?.tagName ?? ''
      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
      if (target?.isContentEditable) return
      const input = document.getElementById(HEADER_SEARCH_ID)
      if (input instanceof HTMLInputElement) {
        e.preventDefault()
        input.focus()
        input.select()
      }
    }
    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
  }, [])

  return (
    <header className="site-header">
      <div className="site-header-inner">
        <Link to="/" className="logo" aria-label="Fabri-Ka — Accueil">
          Fabri<span className="logo-dot">·</span>Ka
        </Link>
        <nav className="site-nav" aria-label="Navigation principale">
          <NavLink to="/produits">Produits</NavLink>
          <NavLink to="/boutiques">Boutiques</NavLink>
          <NavLink to="/stats">Stats</NavLink>
          <NavLink to="/a-propos">À propos</NavLink>
        </nav>
        <div className="site-header-search">
          {/* remount on navigation so the field reflects the current query */}
          <SearchBar
            compact
            shortcutHint
            inputId={HEADER_SEARCH_ID}
            key={location.pathname + location.search}
            initialValue={
              location.pathname === '/produits'
                ? new URLSearchParams(location.search).get('q') ?? ''
                : ''
            }
            placeholder="Rechercher…"
          />
        </div>
      </div>
    </header>
  )
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="site-footer-inner">
        <div className="footer-brand">
          <span className="logo logo-footer">
            Fabri<span className="logo-dot">·</span>Ka
          </span>
          <p>Tous les produits québécois. Un seul endroit.</p>
        </div>
        <nav className="footer-col" aria-label="Explorer">
          <span className="footer-col-title">Explorer</span>
          <Link to="/produits">Produits</Link>
          <Link to="/boutiques">Boutiques</Link>
          <Link to="/produits?sort=recent">Nouveautés</Link>
          <Link to="/stats">Stats</Link>
        </nav>
        <nav className="footer-col" aria-label="Fabri-Ka">
          <span className="footer-col-title">Fabri-Ka</span>
          <Link to="/a-propos">À propos</Link>
          <a href="mailto:contact@spboucher.ai">Contact</a>
        </nav>
      </div>
      <p className="footer-legal">
        © 2026 Simon-Pierre Boucher — Fabri-Ka agrège des catalogues publics;
        les prix et disponibilités appartiennent aux boutiques sources.
      </p>
    </footer>
  )
}

export default function App() {
  return (
    <div className="app">
      <Header />
      <main className="site-main">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/produits" element={<Catalog />} />
          <Route path="/produits/:uid" element={<ProductDetail />} />
          <Route path="/boutiques" element={<Stores />} />
          <Route path="/boutiques/:id" element={<StoreDetail />} />
          <Route path="/stats" element={<Stats />} />
          <Route path="/a-propos" element={<About />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </main>
      <Footer />
      <BottomNav />
    </div>
  )
}
