import type { Metadata } from "next";
import Link from "next/link";
import { Bell, Building2, CalendarClock, ClipboardList, Crown, ScissorsSquare } from "lucide-react";
import { redirect } from "next/navigation";
import { auth } from "@/auth";
import { ProfileCard } from "@/components/ui/profile-card";
import { SignOutButton } from "@/features/auth/components/sign-out-button";
import { hasPermission } from "@/lib/auth/permissions";
import { Permission } from "@/generated/prisma/enums";
import { getBranding } from "@/lib/business/branding";
import { InstallAppButton } from "@/features/pwa/components/install-app-button";

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

const SETTINGS_LINKS = [
  { href: "/owner/settings/business", label: "Business Details", icon: Building2 },
  { href: "/owner/settings/hours", label: "Opening Hours", icon: CalendarClock },
  { href: "/owner/settings/booking-rules", label: "Booking Rules", icon: ClipboardList },
  { href: "/owner/settings/loyalty", label: "Loyalty Programme", icon: Crown },
  { href: "/staff/settings/notifications", label: "Notifications", icon: Bell },
] as const;

export default async function OwnerSettingsPage() {
  const session = await auth();
  if (!session?.user) redirect("/sign-in");

  const canManage = await hasPermission(session.user.id, Permission.MANAGE_STAFF);
  if (!canManage) redirect("/staff");
  const branding = await getBranding();

  return (
    <div className="space-y-6 px-6 pt-12 pb-12">
      <h1 className="text-2xl font-bold tracking-tight">Owner Settings</h1>
      <ProfileCard name={session.user.name ?? "Owner"} meta={session.user.email} avatarUrl={session.user.image ?? undefined} />

      <Link
        href="/staff/settings"
        className="rounded-jumbo border-line flex items-center gap-3 border bg-white p-5 text-sm font-bold hover:bg-stone"
      >
        <ScissorsSquare className="text-accent h-5 w-5" aria-hidden="true" />
        Switch to Barber Tools
      </Link>

      <ul className="divide-line rounded-jumbo border-line divide-y border bg-white">
        {SETTINGS_LINKS.map(({ href, label, icon: Icon }) => (
          <li key={href}>
            <Link href={href} className="hover:bg-stone flex items-center gap-3 px-5 py-4 text-sm font-bold">
              <Icon className="text-muted h-5 w-5" aria-hidden="true" />
              {label}
            </Link>
          </li>
        ))}
      </ul>

      <div className="rounded-jumbo border-line border bg-white p-5">
        <p className="mb-3 text-sm font-bold">Get the app</p>
        <InstallAppButton businessName={branding.name} />
      </div>

      <SignOutButton />
    </div>
  );
}