import type { Metadata } from "next";
import { Bell, Gift, LogIn } from "lucide-react";
import Link from "next/link";
import { auth } from "@/auth";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/feedback/empty-state";
import { ProfileCard } from "@/components/ui/profile-card";
import { prisma } from "@/lib/db/prisma";
import { SignOutButton } from "@/features/auth/components/sign-out-button";
import { InstallAppButton } from "@/features/pwa/components/install-app-button";

export const metadata: Metadata = { title: "Settings" };
export const dynamic = "force-dynamic";

export default async function CustomerSettingsPage() {
  const session = await auth();

  if (!session?.user) {
    return (
      <div className="mx-auto max-w-2xl px-6 pt-12">
        <h1 className="mb-6 text-2xl font-bold tracking-tight">Settings</h1>
        <EmptyState
          icon={LogIn}
          title="Sign in to manage your account"
          description="Save your details, track loyalty rewards, and manage your bookings."
          action={
            <Button asChild>
              <Link href="/sign-in?callbackUrl=/settings">Sign In</Link>
            </Button>
          }
        />
      </div>
    );
  }

  const customerProfile = await prisma.customerProfile.findUnique({
    where: { userId: session.user.id },
  });

  return (
    <div className="mx-auto max-w-2xl space-y-6 px-6 pt-12">
      <h1 className="text-2xl font-bold tracking-tight">Settings</h1>
      <ProfileCard
        name={
          customerProfile
            ? `${customerProfile.firstName} ${customerProfile.lastName}`
            : (session.user.name ?? "Signed-in customer")
        }
        meta={customerProfile?.email ?? session.user.email}
        avatarUrl={session.user.image ?? undefined}
      />
      <div className="space-y-2">
        <Link
          href="/loyalty"
          className="border-line flex items-center gap-3 rounded-xl border bg-white px-4 py-3 text-sm font-bold"
        >
          <Gift className="h-4 w-4" aria-hidden="true" /> Loyalty card
        </Link>
        <Link
          href="/settings/notifications"
          className="border-line flex items-center gap-3 rounded-xl border bg-white px-4 py-3 text-sm font-bold"
        >
          <Bell className="h-4 w-4" aria-hidden="true" /> Notifications
        </Link>
      </div>
      <div className="border-line rounded-jumbo border bg-white p-5">
        <p className="mb-3 text-sm font-bold">Get the app</p>
        <InstallAppButton />
      </div>
      <SignOutButton />
    </div>
  );
}