// App.jsx — entry / route switch + tweaks panel.

const App = () => {
  const [route, setRoute] = useState(() => {
    const h = window.location.hash.replace('#', '');
    return h || 'prep';
  });

  useEffect(() => {
    const onHash = () => setRoute(window.location.hash.replace('#', '') || 'prep');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // Broadcasts data + Supabase subscription live at App level so the
  // realtime channel survives page navigation (otherwise the WS tears down
  // mid-handshake every time the user leaves the Broadcasts page).
  const [broadcasts, setBroadcasts] = useState([]);
  useEffect(() => {
    if (!window.supa) return;
    let cancelled = false;
    window.supa
      .from('broadcasts')
      .select('*')
      .eq('restaurant_id', window.RESTAURANT_ID)
      .order('created_at', { ascending: false })
      .limit(100)
      .then(({ data, error }) => {
        if (cancelled || error || !data) return;
        setBroadcasts(data.map(rowToBroadcast));
      });
    const channel = window.supa
      .channel('portal-broadcasts:' + window.RESTAURANT_ID)
      .on('postgres_changes', {
        event: '*',
        schema: 'public',
        table: 'broadcasts',
        filter: 'restaurant_id=eq.' + window.RESTAURANT_ID,
      }, (payload) => {
        if (payload.eventType === 'INSERT') {
          const bc = rowToBroadcast(payload.new);
          setBroadcasts(prev => prev.some(b => b.id === bc.id) ? prev : [bc, ...prev]);
        } else if (payload.eventType === 'DELETE') {
          setBroadcasts(prev => prev.filter(b => b.id !== payload.old.id));
        }
      })
      .subscribe();
    return () => { cancelled = true; window.supa.removeChannel(channel); };
  }, []);

  const sendBroadcast = async (body) => {
    if (!window.supa) return { error: { message: 'Supabase not loaded' } };
    return window.supa.from('broadcasts').insert({
      restaurant_id: window.RESTAURANT_ID,
      body,
      sender_name: 'Ryan (Manager)',
    });
  };
  const deleteBroadcast = async (id) => {
    if (!window.supa) return { error: { message: 'Supabase not loaded' } };
    return window.supa.from('broadcasts').delete().eq('id', id);
  };

  const navigate = (id) => {
    window.location.hash = id;
    setRoute(id);
  };

  const tweakDefaults = /*EDITMODE-BEGIN*/{
    "sidebarStyle": "dark",
    "density": "comfortable"
  }/*EDITMODE-END*/;
  const [tweaks, setTweak] = useTweaks(tweakDefaults);

  let page;
  switch (route) {
    case 'dashboard':  page = <Dashboard onNavigate={navigate} />; break;
    case 'prep':
    case 'prep-catalog':
      page = <DailyPrepShell route={route} onNavigate={navigate} density={tweaks.density} />;
      break;
    case 'broadcasts': page = <Broadcasts items={broadcasts} onSend={sendBroadcast} onDelete={deleteBroadcast} />; break;
    case 'devices':    page = <Devices />; break;
    case 'staff':      page = <Staff />; break;
    case 'training':   page = <Training />; break;
    case 'truckorder': page = <TruckOrders />; break;
    case 'inventory':  page = <Inventory />; break;
    case 'history':    page = <History />; break;
    case 'settings':   page = <Settings />; break;
    default:           page = <DailyPrepShell route="prep" onNavigate={navigate} density={tweaks.density} />;
  }

  return (
    <>
      <Shell activeRoute={route} onNavigate={navigate} sidebarStyle={tweaks.sidebarStyle} density={tweaks.density}>
        {page}
      </Shell>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Switch view">
          <TweakButton label="Open iPad app →" onClick={() => { window.open('https://ops.snap-a-box.com/', '_blank', 'noopener'); }} />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio label="Sidebar" value={tweaks.sidebarStyle} onChange={v => setTweak('sidebarStyle', v)} options={[
            { value: 'dark', label: 'Dark' },
            { value: 'light', label: 'Light' },
          ]} />
          <TweakRadio label="Density" value={tweaks.density} onChange={v => setTweak('density', v)} options={[
            { value: 'comfortable', label: 'Comfortable' },
            { value: 'dense', label: 'Dense' },
          ]} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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