'use client';

import { AppShell } from '@/components/ui/layout/AppShell';
import { BottomNav, useCustomerNavItems } from '@/components/ui/layout/BottomNav';
import { Container } from '@/components/ui/layout/Container';
import { AdminLinkBadge } from '@/components/ui/domain/AdminLinkBadge';
import { GlobalCartDrawer } from '@/components/ui/domain/cart/GlobalCartDrawer';
import { AuthGateModal } from '@/features/auth-flow/AuthGateModal';
import { CheckoutModal } from '@/features/checkout-modal/CheckoutModal';
import { SiteNav } from '@/components/ui/layout/SiteNav';
import { useT } from '@/lib/i18n/react';
import { PageRenderer } from '@/server/page-layout/renderer/PageRenderer';
import type { LoadedPage } from '@/server/page-layout/loader';
import { ClubHero } from '@/components/ui/domain/ClubHero';
import { EmptyState } from '@/components/ui/feedback/EmptyState';
import { NoDeals } from '@/components/ui/feedback/EmptyState/illustrations';
import { Button } from '@/components/ui/primitives/Button';
import { ClubGuestView } from './ClubGuestView';

export interface PageOrganizedClubProps {
  page: LoadedPage;
  isAdmin?: boolean;
  isGuest?: boolean;
  isVendor?: boolean;
  userName?: string;
  /** Server-resolved locale — forwarded to HydratedIsland so SSR and hydration agree. */
  locale?: 'he' | 'en';
}

function Inner({
  page,
  isAdmin = false,
  isGuest = false,
  isVendor = false,
  userName,
}: PageOrganizedClubProps) {
  const t = useT('club');
  const nav = useCustomerNavItems('/club', { isGuest });
  const isEmpty = page.mobile.length === 0 && page.desktop.length === 0;

  return (
    <AppShell
      mode="customer"
      desktopTopBar={
        <SiteNav
          variant="desktop"
          currentPath="/club"
          isGuest={isGuest}
          isAdmin={isAdmin}
          isVendor={isVendor}
          userName={userName}
        />
      }
      topBar={
        <SiteNav
          variant="mobile"
          title={t('title')}
          currentPath="/club"
          isGuest={isGuest}
          isAdmin={isAdmin}
          isVendor={isVendor}
          endExtra={<AdminLinkBadge isAdmin={isAdmin} />}
        />
      }
      bottomNav={<BottomNav mode="customer" items={nav} />}
      pageOverlays={
        <>
          <GlobalCartDrawer />
          <AuthGateModal />
          <CheckoutModal />
        </>
      }
    >
      <div className="pb-4">
        <ClubHero />
        <Container maxWidth="4xl" px="0" className="lg:px-8">
          {isGuest ? (
            <ClubGuestView />
          ) : isEmpty ? (
            <EmptyState
              illustration={<NoDeals />}
              title={t('page_empty_title')}
              description={t('page_empty_desc')}
              action={
                <Button variant="primary" asChild>
                  <a href="/stores">{t('page_empty_cta')}</a>
                </Button>
              }
            />
          ) : (
            <>
              <div className="lg:hidden">
                <PageRenderer modules={page.mobile} />
              </div>
              <div className="hidden lg:block">
                <PageRenderer modules={page.desktop} />
              </div>
            </>
          )}
        </Container>
      </div>
    </AppShell>
  );
}

import { HydratedIsland } from '@/components/HydratedIsland';
import type { DehydratedState } from '@tanstack/react-query';

export function PageOrganizedClub(
  props: PageOrganizedClubProps & { dehydratedState?: DehydratedState },
) {
  const { dehydratedState, locale, ...rest } = props;
  return (
    <HydratedIsland dehydratedState={dehydratedState} locale={locale}>
      <Inner {...rest} />
    </HydratedIsland>
  );
}