import type { Metadata } from "next";
import { Layers } from "lucide-react";
import { db } from "@/lib/db";
import { getOptionalUser } from "@/lib/guards";
import { money } from "@/lib/serialize";
import { servicesTexts as tx } from "@/lib/i18n/services";
import { PageHeader } from "@/components/shared/page-header";
import { PanelShell } from "@/components/panel/shell";
import { PublicNavbar } from "@/components/public/navbar";
import { loadCatalog } from "@/components/panel/services/queries";
import { ServicesCatalog } from "@/components/panel/services/services-catalog";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Services",
  description: tx.servicesPublicSubtitle,
};

export default async function ServicesPage() {
  const user = await getOptionalUser();
  const catalog = await loadCatalog(user?.id ?? null);

  if (!user) {
    return (
      <div className="min-h-screen bg-background">
        <PublicNavbar />
        <main className="mx-auto w-full max-w-6xl px-5 py-10 sm:px-8 sm:py-14">
          <div className="mb-8 max-w-2xl space-y-2">
            <span className="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary">
              <Layers className="size-3.5" />
              {tx.categoryCount(catalog.categories.length)} ·{" "}
              {tx.serviceCount(catalog.totalServices)}
            </span>
            <h1 className="font-display text-3xl font-semibold tracking-tight sm:text-4xl">
              {tx.servicesPublicTitle}
            </h1>
            <p className="text-sm text-muted-foreground sm:text-base">
              {tx.servicesPublicSubtitle}
            </p>
          </div>

          <ServicesCatalog catalog={catalog} signedIn={false} />
        </main>
      </div>
    );
  }

  const row = await db.user.findUnique({
    where: { id: user.id },
    select: { balance: true },
  });

  return (
    <PanelShell
      user={{
        id: user.id,
        username: user.username,
        role: user.role,
        balance: money(row?.balance ?? 0),
        impersonated: Boolean(user.impersonatedBy),
        name: user.name,
        email: user.email,
        status: user.status,
      }}
    >
      <PageHeader
        title={tx.servicesTitle}
        description={tx.servicesSubtitle}
        icon={Layers}
      />
      <ServicesCatalog catalog={catalog} signedIn />
    </PanelShell>
  );
}