/* AIWine CRM — app composition & mount */
function App() {
  const store = window.UI.useStore();
  const route = window.useRoute();
  const [country, setCountryRaw] = React.useState(() => localStorage.getItem('aiwine-crm:country') || 'ALL');
  const setCountry = (c) => { setCountryRaw(c); localStorage.setItem('aiwine-crm:country', c); };
  const [ready, setReady] = React.useState(false);

  React.useEffect(() => { window.CRMStore.init().then(() => setReady(true)); }, []);

  // App-wide guard: a file dropped ANYWHERE in the CRM must never fall through
  // to the browser (which would "open"/download it). Always on.
  React.useEffect(() => {
    const stop = (e) => { e.preventDefault(); };
    window.addEventListener('dragover', stop);
    window.addEventListener('drop', stop);
    return () => { window.removeEventListener('dragover', stop); window.removeEventListener('drop', stop); };
  }, []);

  if (!ready) {
    return (
      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 12 }}>
        <div className="serif" style={{ fontSize: 28, fontStyle: 'italic', color: 'var(--claret)' }}>AIWine</div>
        <div className="label">Opening the cellar book…</div>
      </div>
    );
  }
  if (!store.user) return <window.Login />;

  let page;
  switch (route.page) {
    case 'wineries': page = route.id ? <window.WineryProfile id={route.id} /> : <window.Wineries country={country} />; break;
    case 'contacts': page = <window.Contacts country={country} />; break;
    case 'consumers': page = <window.Consumers country={country} focusId={route.id} />; break;
    case 'campaigns': page = <window.Campaigns country={country} />; break;
    case 'memberships': page = <window.Memberships country={country} />; break;
    case 'wines': page = <window.Wines country={country} />; break;
    case 'uploads': page = <window.Uploads country={country} />; break;
    case 'support': page = <window.Support country={country} focusId={route.id} />; break;
    case 'tasks': page = <window.Tasks />; break;
    case 'analytics': page = <window.Analytics country={country} />; break;
    case 'admin': page = <window.Admin />; break;
    default: page = <window.Dashboard country={country} />;
  }

  return (
    <div className="crm">
      <window.Sidebar route={route} />
      <div className="main">
        <window.Topbar country={country} setCountry={setCountry} />
        {store.truncated && store.truncated.length > 0 && (
          <div style={{ background: 'var(--claret)', color: 'var(--bone)', padding: '9px 28px', fontSize: 12.5, fontWeight: 600 }}>
            ⚠ Showing only the first 5,000 rows of: {store.truncated.join(', ')}. Counts and search are incomplete — server-side pagination is now required (see the readiness review).
          </div>
        )}
        <main className="content" data-screen-label={'CRM · ' + route.page}>{page}</main>
      </div>
    </div>
  );
}

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