// app.jsx — Main router + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#C8622A",
  "greenColor": "#4A7340",
  "fontStyle": "Playfair Display",
  "cardRadius": 12,
  "showFeaturedBadge": true,
  "heroStyle": "dark"
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks to CSS vars
  React.useEffect(() => {
    document.documentElement.style.setProperty('--orange', tweaks.accentColor);
    document.documentElement.style.setProperty('--orange-light', tweaks.accentColor + 'CC');
    document.documentElement.style.setProperty('--green', tweaks.greenColor);
  }, [tweaks.accentColor, tweaks.greenColor]);

  // Simple router state
  const [page, setPage] = React.useState(
    window.location.hash === '#admin' ? 'admin' : 'home'
  );
  const [pageParams, setPageParams] = React.useState({});
  // Bumped whenever listing data changes so pages re-read window.LISTINGS_DATA.
  const [dataVersion, setDataVersion] = React.useState(0);

  const navigate = React.useCallback((target, params = {}) => {
    setPage(target);
    setPageParams(params);
    if (target === 'admin') {
      if (window.location.hash !== '#admin') window.location.hash = 'admin';
    } else if (window.location.hash === '#admin') {
      history.replaceState(null, '', window.location.pathname + window.location.search);
    }
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, []);

  // Let listing edits in the admin panel refresh the public pages.
  const handleDataChange = React.useCallback(() => setDataVersion((v) => v + 1), []);

  // Respond to direct #admin navigation (e.g. bookmark / manual hash change).
  React.useEffect(() => {
    const onHash = () => {
      if (window.location.hash === '#admin') setPage('admin');
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // Restore scroll on page change
  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, [page]);

  const renderPage = () => {
    switch (page) {
      case 'home':
        return <HomePage navigate={navigate} />;
      case 'browse':
        return <BrowsePage navigate={navigate} initialParams={pageParams} />;
      case 'listing':
        return <ListingPage navigate={navigate} listingId={pageParams.id} />;
      case 'about':
        return <AboutPage navigate={navigate} />;
      case 'admin':
        return <AdminPage navigate={navigate} onDataChange={handleDataChange} />;
      default:
        return <HomePage navigate={navigate} />;
    }
  };

  return (
    <div>
      <Nav currentPage={page} navigate={navigate} />
      {/* Public pages remount on data changes (to re-read window.LISTINGS_DATA);
          the admin page owns its own state, so it must NOT be keyed by dataVersion
          or its refresh effect would loop. */}
      <main
        style={{ animation: 'fadeIn 0.3s ease' }}
        key={page === 'admin' ? 'admin' : page + ':' + dataVersion}
      >
        {renderPage()}
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Colors">
          <TweakColor label="Accent (Orange)" tweakKey="accentColor" />
          <TweakColor label="Green" tweakKey="greenColor" />
        </TweakSection>
        <TweakSection label="Cards">
          <TweakSlider label="Card Corner Radius" tweakKey="cardRadius" min={0} max={24} step={2} />
          <TweakToggle label="Show Featured Badges" tweakKey="showFeaturedBadge" />
        </TweakSection>
        <TweakSection label="Typography">
          <TweakRadio label="Heading Font" tweakKey="fontStyle"
            options={[
              { label: 'Playfair', value: 'Playfair Display' },
              { label: 'Serif', value: 'Georgia' },
              { label: 'Libre', value: 'Libre Baskerville' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

// Bootstrap: load live listings from the API before first render so the
// public site reflects admin edits. Falls back to the static seed data
// (data/listings.js) if the backend isn't reachable.
async function bootstrap() {
  try {
    if (window.API) {
      const listings = await window.API.listings();
      if (Array.isArray(listings) && listings.length) {
        window.LISTINGS_DATA = listings;
        if (window.recomputeCategoryCounts) window.recomputeCategoryCounts();
      }
    }
  } catch (err) {
    console.warn('Falling back to bundled listings (API unavailable):', err.message);
  }
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
}

bootstrap();