import { getSessionUser, canMutate, isCustomerOwner } from "@/lib/session";
import { getTranslations } from "next-intl/server";
import { redirect } from "next/navigation";
import { getOrgMembers } from "@/lib/team";
import { Card } from "@/components/ui/card";
import { BackLink } from "@/components/ui/back-link";
import { TeamList } from "@/components/team/team-list";
import { InviteForm } from "@/components/team/invite-form";
import { AccessOverview } from "@/components/team/access-overview";

/**
 * /team — manage org members.
 *
 * Visible to owners and platform users only (`canMutate`). User-role
 * members are redirected away — they shouldn't browse the roster.
 *
 * The page loads members server-side for the initial render. The
 * `<TeamList>` and `<InviteForm>` client components handle live
 * updates after invites and refreshes.
 */
export async function generateMetadata() {
  const t = await getTranslations("common");
  return { title: t("team") };
}

export default async function TeamPage() {
  const user = await getSessionUser();
  if (!user) redirect("/login");
  if (!canMutate(user)) redirect("/dashboard");
  // Bug 8: personal accounts have no team to manage. The page is
  // structurally meaningless and the invite form would create extra
  // ZITADEL users in a single-user org. Redirect cleanly. The matching
  // API guards in `/api/team` and `/api/team/invite` enforce the same
  // rule on direct calls.
  if (user.isPersonal) redirect("/dashboard");

  const t = await getTranslations("team");
  const tDashboard = await getTranslations("dashboard");

  const members = await getOrgMembers(user.orgId);

  return (
    <div>
      <div className="mb-8 animate-in">
        <BackLink href="/dashboard" label={tDashboard("title")} />
        <h1 className="font-display text-2xl font-semibold accent-rule mb-2">
          {t("title")}
        </h1>
        <p className="text-text-secondary text-sm mt-4">{t("description")}</p>
      </div>

      <section className="mb-8 animate-in animate-in-delay-1">
        <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
          {t("inviteSectionTitle")}
        </h2>
        <Card>
          <InviteForm />
        </Card>
      </section>

      <section className="animate-in animate-in-delay-2">
        <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
          {t("membersSectionTitle")}{" "}
          <span className="text-text-muted/60 tabular-nums">
            ({members.length})
          </span>
        </h2>
        <TeamList
          initialMembers={members}
          currentUserId={user.id}
          canEditRoles={isCustomerOwner(user)}
        />
      </section>

      {/* Access overview — single place to see which member can reach
          which assistant, instead of checking each tenant page. */}
      <section className="mt-8 animate-in animate-in-delay-3">
        <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-1">
          {t("accessTitle")}
        </h2>
        <p className="text-xs text-text-muted mb-3">{t("accessDescription")}</p>
        <AccessOverview />
      </section>
    </div>
  );
}