// app.jsx — root: nav, view routing, tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "warm",
  "density": "generous",
  "layout": "split",
  "dark": false
}/*EDITMODE-END*/;

const App = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // ?spec=pt&q=marchetti — used by the quiz to deep-link into a filtered directory.
  const urlParams = (() => {
    try { return new URLSearchParams(window.location.search); } catch { return new URLSearchParams(); }
  })();
  const urlSpec = urlParams.get('spec') || '';
  const urlQuery = urlParams.get('q') || '';
  const initialView = (() => {
    const h = (window.location.hash || '').replace('#', '');
    if (urlSpec || urlQuery) return 'results';
    if (h === 'find' || h === 'results') return 'results';
    if (h === 'provider-login' || h === 'providerLogin') return 'providerLogin';
    return 'landing';
  })();
  const [view, setView] = React.useState(initialView); // 'landing' | 'results' | 'providerLogin'
  const [filters, setFilters] = React.useState((urlSpec || urlQuery) ? { spec: urlSpec || undefined, query: urlQuery || undefined } : {});
  const [claimTarget, setClaimTarget] = React.useState('');
  const [dataVersion, setDataVersion] = React.useState(0);
  const [dataLoading, setDataLoading] = React.useState(true);
  const [menuOpen, setMenuOpen] = React.useState(false);

  // Load providers from Supabase on mount, then trigger a re-render
  React.useEffect(() => {
    let cancelled = false;
    if (typeof window.loadProviders === 'function') {
      window.loadProviders().then(() => {
        if (!cancelled) {
          setDataVersion(v => v + 1);
          setDataLoading(false);
        }
      });
    } else {
      setDataLoading(false);
    }
    return () => { cancelled = true; };
  }, []);

  // Auth: if a provider session exists (or appears via magic-link callback),
  // route them to the provider login view (which auto-renders the dashboard).
  React.useEffect(() => {
    let cancelled = false;
    if (typeof window.getSession === 'function') {
      window.getSession().then(s => {
        if (!cancelled && s) setView('providerLogin');
      });
    }
    const unsub = typeof window.onAuthChange === 'function'
      ? window.onAuthChange(s => { if (!cancelled && s) setView('providerLogin'); })
      : () => {};
    return () => { cancelled = true; unsub(); };
  }, []);

  const handleSearch = (f={}) => {
    setFilters(f);
    setView('results');
    window.scrollTo({top:0,behavior:'instant'});
  };

  const handleClaimListing = (id) => {
    setClaimTarget(id);
    setView('providerLogin');
  };

  const themeClass =
    t.dark ? 'theme-dark' :
    t.theme === 'clinical' ? 'theme-clinical' :
    t.theme === 'wellness' ? 'theme-wellness' : '';

  const rootClass = [
    themeClass,
    `density-${t.density}`,
    `layout-${t.layout}`,
    `pair-dmserif`
  ].join(' ');

  React.useEffect(() => {
    document.body.className = rootClass;
    return () => { document.body.className = ''; };
  }, [rootClass]);

  const viewLabel = view === 'landing' ? '01 Directory' : view === 'results' ? '02 Results' : '03 Provider Login';

  return (
    <div data-screen-label={viewLabel}>
      <a href="#main-content" className="skip-link">Skip to main content</a>
      {/* PILL NAV */}
      <header className="ed-nav">
        <button className="ed-brand" onClick={()=>setView('landing')} aria-label="TMJDirectory home">
          <img src="tmjd-logo.png" alt="TMJDirectory" className="ed-brand-logo"/>
        </button>
        <nav className="ed-pill">
          <a className={`ed-pill-link ${view==='results'?'active':''}`} onClick={()=>handleSearch({})}>Directory</a>
          <a className="ed-pill-link" href="quiz.html">Quiz</a>

          <div className="ed-pill-group">
            <a className="ed-pill-link" href="facts.html">FACTS <span className="ed-caret">▾</span></a>
            <div className="ed-pill-dropdown">
              <a className="ed-pill-dropdown-link" href="resources.html">Resources</a>
              <a className="ed-pill-dropdown-link" href="glossary.html">Glossary</a>
            </div>
          </div>

          <div className="ed-pill-group">
            <a className="ed-pill-link" href="about.html">About <span className="ed-caret">▾</span></a>
            <div className="ed-pill-dropdown">
              <a className="ed-pill-dropdown-link" href="contact.html">Contact</a>
            </div>
          </div>

          <div className="ed-pill-group">
            <a className={`ed-pill-link ${view==='providerLogin'?'active':''}`} onClick={()=>setView('providerLogin')}>Provider Login <span className="ed-caret">▾</span></a>
            <div className="ed-pill-dropdown">
              <a className="ed-pill-dropdown-link" href="#">Provider Training</a>
            </div>
          </div>
        </nav>
        <div className="ed-nav-right">
          <button className="ed-icon-btn" title="Search providers" aria-label="Search providers" onClick={()=>handleSearch({})}><Icon name="search" size={14}/></button>
          <button className="btn btn-dark" onClick={()=>handleSearch({nearMe:true})}>
            Near me <span style={{opacity:.6}}>↗</span>
          </button>
          <button className="ed-burger" aria-label="Open menu" aria-expanded={menuOpen} onClick={()=>setMenuOpen(true)}>
            <span/><span/><span/>
          </button>
        </div>
      </header>

      {menuOpen && (
        <div className="ed-mobile-menu" onClick={()=>setMenuOpen(false)}>
          <nav className="ed-mobile-menu-inner" onClick={e=>e.stopPropagation()} aria-label="Menu">
            <button className="ed-mobile-menu-close" aria-label="Close menu" onClick={()=>setMenuOpen(false)}>×</button>
            <a onClick={()=>{ handleSearch({}); setMenuOpen(false); }}>Directory</a>
            <a href="quiz.html">Quiz</a>
            <a href="facts.html">Facts</a>
            <a href="glossary.html">Glossary</a>
            <a href="resources.html">Resources</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
            <a onClick={()=>{ setView('providerLogin'); setMenuOpen(false); }}>Provider Login</a>
            <a href="#">Provider Training</a>
          </nav>
        </div>
      )}

      {view === 'landing' && <main id="main-content"><Landing onSearch={handleSearch}/></main>}
      {view === 'results' && <main id="main-content"><Results filters={filters} onBack={()=>setView('landing')} onClaim={handleClaimListing}/></main>}
      {view === 'providerLogin' && <main id="main-content"><ProviderLogin onBack={()=>setView('landing')} claimTarget={claimTarget}/></main>}

      {/* TWEAKS */}
      <TweaksPanel>
        <TweakSection label="Theme"/>
        <TweakRadio
          label="Color"
          value={t.theme}
          options={[
            {value:'warm',     label:'Warm'},
            {value:'clinical', label:'Clinical'},
            {value:'wellness', label:'Wellness'},
          ]}
          onChange={v=>setTweak('theme', v)}
        />
        <TweakToggle label="Dark mode" value={t.dark} onChange={v=>setTweak('dark', v)}/>

        <TweakSection label="Results"/>
        <TweakRadio
          label="Card density"
          value={t.density}
          options={[
            {value:'compact',  label:'Compact'},
            {value:'medium',   label:'Medium'},
            {value:'generous', label:'Generous'},
          ]}
          onChange={v=>setTweak('density', v)}
        />
        <TweakRadio
          label="Map vs list"
          value={t.layout}
          options={[
            {value:'list-heavy', label:'List'},
            {value:'split',      label:'Split'},
            {value:'map-heavy',  label:'Map'},
          ]}
          onChange={v=>setTweak('layout', v)}
        />

        <TweakSection label="View"/>
        <TweakRadio
          label="Page"
          value={view}
          options={[
            {value:'landing', label:'Directory'},
            {value:'results', label:'Results'},
          ]}
          onChange={v=>setView(v)}
        />
      </TweaksPanel>
    </div>
  );
};

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