// ============================================================================
// Restaurateur Pro - Main App
// ============================================================================

function App() {
  const [authenticated, setAuthenticated] = useState(RchAPI.isAuthenticated());
  const [restaurant, setRestaurant] = useState(() => {
    const s = RchAPI.getSession();
    return s?.restaurant || null;
  });
  const [view, setView] = useState('dashboard');
  const [pendingCount, setPendingCount] = useState(0);
  const [refreshKey, setRefreshKey] = useState(0);
  const notify = useNotifications();

  // Refresh pending count for nav badge
  useEffect(() => {
    if (!authenticated) return;
    let timer;
    const update = async () => {
      try {
        const res = await RchAPI.getBookings({ status: 'pending' });
        setPendingCount((res.bookings || []).length);
      } catch {}
    };
    update();
    timer = setInterval(update, 60000);
    return () => clearInterval(timer);
  }, [authenticated, refreshKey]);

  // Refresh restaurant info on login
  useEffect(() => {
    if (!authenticated) return;
    (async () => {
      try {
        const res = await RchAPI.getRestaurantInfo();
        if (res?.restaurant) {
          setRestaurant(res.restaurant);
          const s = RchAPI.getSession();
          if (s) {
            RchAPI.saveSession({
              ...s,
              restaurant: { ...s.restaurant, ...res.restaurant },
            });
          }
        }
      } catch {}
    })();
  }, [authenticated]);

  function handleLoggedIn() {
    const s = RchAPI.getSession();
    if (s?.restaurant) setRestaurant(s.restaurant);
    setAuthenticated(true);
    setView('dashboard');
  }

  function handleLogout() {
    RchAPI.logout();
    setAuthenticated(false);
    setRestaurant(null);
    setView('dashboard');
  }

  function handleUpdateRestaurant(updated) {
    setRestaurant(updated);
    const s = RchAPI.getSession();
    if (s) RchAPI.saveSession({ ...s, restaurant: { ...s.restaurant, ...updated } });
  }

  const triggerRefresh = () => setRefreshKey(k => k + 1);

  if (!authenticated) {
    return <LoginView onLoggedIn={handleLoggedIn} />;
  }

  const titles = {
    dashboard: 'Accueil',
    bookings: 'Réservations',
    calendar: 'Horaires',
    profile: 'Mon profil',
  };

  const renderView = () => {
    switch (view) {
      case 'dashboard':
        return <DashboardView restaurant={restaurant} onNavigate={setView} refreshKey={refreshKey} />;
      case 'bookings':
        return <BookingsView restaurant={restaurant} refreshKey={refreshKey} />;
      case 'calendar':
        return <CalendarView refreshKey={refreshKey} />;
      case 'profile':
        return <ProfileView restaurant={restaurant} onLogout={handleLogout} onUpdate={handleUpdateRestaurant} />;
      default:
        return <DashboardView restaurant={restaurant} onNavigate={setView} refreshKey={refreshKey} />;
    }
  };

  return (
    <div className="app-container">
      {view !== 'dashboard' && (
        <AppHeader
          title={titles[view]}
          subtitle={restaurant?.name}
          action={
            <button className="btn-icon" onClick={triggerRefresh} aria-label="Actualiser">
              <Icons.Refresh size={18} />
            </button>
          }
        />
      )}
      {view === 'dashboard' && (
        <header className="app-header">
          <div className="flex items-center gap-2 flex-1">
            <div className="w-9 h-9 rounded-xl flex items-center justify-center text-white font-bold text-sm"
              style={{ background: restaurant?.primary_color || '#14B8A6' }}>
              {(restaurant?.name || '?').charAt(0).toUpperCase()}
            </div>
            <div className="flex-1 min-w-0">
              <div className="app-header-title text-base truncate">{restaurant?.name}</div>
            </div>
          </div>
          <button className="btn-icon" onClick={triggerRefresh} aria-label="Actualiser">
            <Icons.Refresh size={18} />
          </button>
        </header>
      )}

      <main className="app-main" key={view}>
        {renderView()}
      </main>

      <BottomNav current={view} onChange={setView} pendingCount={pendingCount} />
    </div>
  );
}

function mountApp() {
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mountApp);
} else {
  mountApp();
}