"use client";

import { ReactNode, useEffect, useState } from "react";
import SidebarTenant from "@/src/components/app/SidebarTenant";
import TenantTopbar from "@/src/components/app/TenantTopbar";
import { fetchMe, type Me } from "@/src/lib/api/me";
import { SessionExpiryBanner } from "@/src/components/app/SessionExpiryBanner";
import { SubscriptionGate } from "@/src/components/app/SubscriptionGate";
import { NavigationHistoryProvider } from "@/src/lib/app/navigation-history";
import { CountryProvider } from "@/src/contexts/CountryContext";
import { MailBadgeProvider } from "@/src/contexts/MailBadgeContext";

type Props = {
  locale: string;
  children: ReactNode;
};

function computeIsTenantAdmin(me: Me | null) {
  const m = me?.active_membership;
  if (!m) return false;
  // owner OU role ADMIN(4) OU APPROVER(3)
  return m.is_owner || m.role_ids.includes(4) || m.role_ids.includes(3);
}

export default function TenantShell({ locale, children }: Props) {
  const [me, setMe] = useState<Me | null>(null);
  const [ready, setReady] = useState(false);

  useEffect(() => {
    let mounted = true;
    (async () => {
      try {
        const data = await fetchMe();
        if (mounted) setMe(data);
      } finally {
        if (mounted) setReady(true);
      }
    })();
    return () => {
      mounted = false;
    };
  }, []);

  const tenantName = me?.active_tenant?.name ?? "—";
  const roleIds = me?.active_membership?.role_ids ?? [];
  const isTenantAdmin = computeIsTenantAdmin(me);

  return (
    <NavigationHistoryProvider>
      <MailBadgeProvider>
      <CountryProvider me={me}>
        <div className="h-screen overflow-hidden flex" data-theme="tenant">
          <SidebarTenant
            locale={locale}
            isTenantAdmin={isTenantAdmin}
            roleIds={roleIds}
            tenantName={tenantName}
          />

          <div className="flex-1 min-w-0 flex flex-col overflow-hidden">
            <TenantTopbar locale={locale} />

            <main className="flex-1 min-h-0 p-6 flex flex-col overflow-y-auto">
              {!ready ? (
                <div className="text-sm text-neutral-500">Chargement…</div>
              ) : (
                children
              )}
            </main>
          </div>

          {/* Bannière de surveillance de session */}
          <SessionExpiryBanner />
        </div>
      </CountryProvider>
      </MailBadgeProvider>

      {/* Gate abonnement expiré — monte sur 402 */}
      <SubscriptionGate />
    </NavigationHistoryProvider>
  );
}