import type { Metadata } from "next";

import { ActivePlansPanel } from "@/components/dashboard/active-plans-panel";
import { OnboardingBanner } from "@/components/dashboard/onboarding-banner";
import { QuickActions } from "@/components/dashboard/quick-actions";
import { PageShell } from "@/components/layout/page-shell";
import { SupportActions } from "@/components/layout/support-actions";
import { GlassCard } from "@/components/shared/glass-card";
import { ButtonLink } from "@/components/ui/button-link";
import { products } from "@/lib/data/catalog";
import { getSession } from "@/lib/auth/session";
import { findUser, getEntitlements } from "@/lib/db/store";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Dashboard",
  description: "Access your purchased Big Boyz Body programs and coaching.",
  robots: { index: false, follow: false },
};

type Props = {
  searchParams: Promise<{ order?: string; paid?: string; welcome?: string }>;
};

export default async function DashboardPage({ searchParams }: Props) {
  const session = await getSession();
  const params = await searchParams;
  const justPaid = params.paid === "1";
  const showWelcome = params.welcome === "1";

  const email = session?.email ?? "";
  const dbUser = email ? await findUser(email) : undefined;
  const ids = email ? await getEntitlements(email) : [];
  const owned = products.filter((p) => ids.includes(p.id));

  const showOnboarding =
    showWelcome || (dbUser && !dbUser.onboardingCompleted && owned.length > 0);

  return (
    <PageShell
      variant="app"
      title="Overview"
      description={`Welcome back${session?.name ? `, ${session.name}` : ""}. Plans, orders, and member support live here.`}
      breadcrumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Overview" }]}
      actions={<SupportActions size="sm" unlock={justPaid} />}
    >
      {justPaid ? (
        <GlassCard className="border-primary/25 bg-primary/8 mb-8 p-6 sm:p-8">
          <p className="text-primary text-sm font-semibold uppercase tracking-wider">
            Payment received
          </p>
          <p className="font-display mt-2 text-xl font-semibold tracking-tight">
            You are in — check your inbox
          </p>
          <p className="text-muted-foreground mt-2 text-sm leading-relaxed">
            We sent a confirmation email with your plan summary, dashboard link, and
            WhatsApp support.
          </p>
          <div className="mt-6">
            <SupportActions unlock />
          </div>
        </GlassCard>
      ) : null}

      <OnboardingBanner show={Boolean(showOnboarding)} />

      <section className="mt-2">
        <div className="flex flex-wrap items-end justify-between gap-4">
          <div>
            <h2 className="font-display text-lg font-semibold tracking-tight sm:text-xl">
              Active plans
            </h2>
            <p className="text-muted-foreground mt-1 text-sm">
              {owned.length} plan{owned.length === 1 ? "" : "s"} on this account
            </p>
          </div>
          {owned.length > 0 ? (
            <ButtonLink href="/dashboard/plans" variant="outline" size="sm" className="rounded-lg">
              View all
            </ButtonLink>
          ) : null}
        </div>
        <div className="mt-6">
          <ActivePlansPanel plans={owned.slice(0, 2)} compact />
        </div>
      </section>

      <div className="mt-14">
        <QuickActions />
      </div>
    </PageShell>
  );
}