"use client";

// SCRUM-282: "Entreprises" and "Utilisateurs" are one page with two tabs.
// /users redirects here with ?tab=utilisateurs. Each tab is gated by its own
// permission; the sidebar entry shows when the user holds either one.

import { Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Building2, Moon, Users } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/presentation/components/ui/tabs";
import { useT } from "@/shared/i18n/client";
import { useAuth } from "@/presentation/hooks/use-auth";
import { usePageHeader } from "@/presentation/hooks/use-page-header";
import CompaniesPanel from "@/presentation/components/companies/companies-panel";
import UsersPanel from "@/presentation/components/users/users-panel";
import { DormantAccountsTab } from "@/presentation/components/companies/dormant-accounts-tab";

const TAB_COMPANIES = "entreprises";
const TAB_USERS = "utilisateurs";
// Freemium spec 6.4: the free accounts closed after a long idle time, restored from here.
const TAB_DORMANT = "dormants";

function CompaniesAndUsersPage() {
  const t = useT();
  const router = useRouter();
  const params = useSearchParams();
  const { hasPermission } = useAuth();

  const canCompanies = hasPermission("companies.manage");
  const canUsers = hasPermission("users.manage");
  const tab = params.get("tab");
  const requested = tab === TAB_USERS ? TAB_USERS : tab === TAB_DORMANT ? TAB_DORMANT : TAB_COMPANIES;
  const active =
    requested === TAB_USERS
      ? canUsers
        ? TAB_USERS
        : TAB_COMPANIES
      : canCompanies
        ? requested
        : TAB_USERS;

  const header = active === TAB_USERS ? t.pages.users : t.pages.companies;
  usePageHeader(header.title, header.subtitle);

  const onTabChange = (value: string) => {
    router.replace(value === TAB_COMPANIES ? "/companies" : "/companies?tab=" + value);
  };

  return (
    <div className="p-6">
      <Tabs value={active} onValueChange={onTabChange} className="w-full">
        <TabsList className="bg-transparent h-auto p-0 gap-6 border-b border-border w-full justify-start rounded-none mb-4">
          {canCompanies && (
            <TabsTrigger value={TAB_COMPANIES} className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-blue-600 rounded-none px-2 py-3 gap-2">
              <Building2 className="w-4 h-4" />
              {t.nav.companies}
            </TabsTrigger>
          )}
          {canUsers && (
            <TabsTrigger value={TAB_USERS} className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-blue-600 rounded-none px-2 py-3 gap-2">
              <Users className="w-4 h-4" />
              {t.nav.users}
            </TabsTrigger>
          )}
          {canCompanies && (
            <TabsTrigger value={TAB_DORMANT} className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-blue-600 rounded-none px-2 py-3 gap-2">
              <Moon className="w-4 h-4" />
              {t.nav.dormantAccounts}
            </TabsTrigger>
          )}
        </TabsList>
        {canCompanies && (
          <TabsContent value={TAB_COMPANIES}>
            <CompaniesPanel />
          </TabsContent>
        )}
        {canUsers && (
          <TabsContent value={TAB_USERS}>
            <UsersPanel />
          </TabsContent>
        )}
        {canCompanies && (
          <TabsContent value={TAB_DORMANT}>
            <DormantAccountsTab />
          </TabsContent>
        )}
      </Tabs>
    </div>
  );
}

export default function CompaniesPage() {
  return (
    <Suspense fallback={null}>
      <CompaniesAndUsersPage />
    </Suspense>
  );
}