import {
  AppShell,
  AuthProvider,
  DefaultSidebar,
  SidebarGroup,
  SidebarItem,
  SidebarLayout,
} from "@tailor-platform/app-shell";
import { ActiveUserGuard } from "@/components/active-user-guard";
import { AuthGuard } from "@/components/auth-guard";
import { LanguageSwitcher } from "@/components/composed/language-switcher";
import { UserProfileMenu } from "@/components/composed/user-profile-menu";
import { useT } from "@/i18n/labels";
import { LocaleProvider, useAppLocale } from "@/i18n/locale";
import { authClient } from "./lib/auth-client";
import { AuthFetchContext } from "./lib/auth-fetch";
import { GraphQLProvider } from "./providers/graphql-provider";

const RouteShell = () => {
  // RouteShell renders inside <AppShell>, so useT() resolves against the active
  // locale. Sidebar item/group `title` props take a plain string (unlike a
  // page's `meta.title`, which takes the LocalizedString `labels.t(...)`).
  const t = useT();
  return (
    <SidebarLayout
      sidebar={
        <DefaultSidebar
          footer={
            <div className="space-y-2">
              <LanguageSwitcher />
              <UserProfileMenu />
            </div>
          }
        >
          <SidebarGroup title={t("nav.group.procurement")}>
            <SidebarItem to="/procurement/purchase-order" title={t("nav.item.purchaseOrders")} />
            <SidebarItem
              to="/procurement/inbound-shipment"
              title={t("nav.item.inboundShipments")}
            />
            <SidebarItem to="/procurement/invoice" title={t("nav.item.invoices")} />
            <SidebarItem to="/procurement/payment" title={t("nav.item.payments")} />
          </SidebarGroup>
          <SidebarGroup title={t("nav.group.sales")}>
            <SidebarItem to="/sales/sales-order" title={t("nav.item.salesOrders")} />
            <SidebarItem to="/sales/outbound-shipment" title={t("nav.item.outboundShipments")} />
            <SidebarItem to="/sales/invoice" title={t("nav.item.receivableInvoices")} />
            <SidebarItem to="/sales/receipt" title={t("nav.item.receipts")} />
          </SidebarGroup>
          <SidebarGroup title={t("nav.group.inventory")}>
            <SidebarItem to="/inventory/stock-level" title={t("nav.item.stockLevels")} />
            <SidebarItem to="/inventory/transfer-order" title={t("nav.item.transferOrders")} />
            <SidebarItem to="/inventory/stock-adjustment" title={t("nav.item.stockAdjustments")} />
          </SidebarGroup>
          <SidebarGroup title={t("nav.group.generalLedger")}>
            <SidebarItem to="/general-ledger/journal-entry" title={t("nav.item.journalEntries")} />
            <SidebarItem to="/general-ledger/fiscal-year" title={t("nav.item.fiscalYears")} />
            <SidebarItem
              to="/general-ledger/accounting-period"
              title={t("nav.item.accountingPeriods")}
            />
            <SidebarItem to="/general-ledger/trial-balance" title={t("nav.item.trialBalance")} />
          </SidebarGroup>
          <SidebarGroup title={t("nav.group.masterData")}>
            <SidebarItem to="/master-data/company" title={t("nav.item.companies")} />
            <SidebarItem to="/master-data/site" title={t("nav.item.sites")} />
            <SidebarItem to="/master-data/business-partner" title={t("bp.partners")} />
            <SidebarItem to="/master-data/product" title={t("nav.item.products")} />
            <SidebarItem
              to="/master-data/product-attribute"
              title={t("nav.item.productAttributes")}
            />
            <SidebarItem to="/master-data/item" title={t("nav.item.items")} />
            <SidebarItem to="/master-data/account" title={t("nav.item.chartOfAccounts")} />
          </SidebarGroup>
          <SidebarGroup title={t("nav.group.userManagement")}>
            <SidebarItem to="/user-management/user" title={t("nav.item.users")} />
            <SidebarItem to="/user-management/role" title={t("nav.item.roles")} />
          </SidebarGroup>
        </DefaultSidebar>
      }
    />
  );
};

const AppShellWithLocale = () => {
  const { locale } = useAppLocale();
  return (
    <AppShell title="template-app" locale={locale}>
      <RouteShell />
    </AppShell>
  );
};

const App = () => {
  return (
    <LocaleProvider>
      <AuthProvider client={authClient} guardComponent={AuthGuard}>
        <AuthFetchContext value={authClient.fetch}>
          <GraphQLProvider authClient={authClient}>
            <ActiveUserGuard>
              <AppShellWithLocale />
            </ActiveUserGuard>
          </GraphQLProvider>
        </AuthFetchContext>
      </AuthProvider>
    </LocaleProvider>
  );
};

export default App;