import config from "@payload-config";
import { getPayload } from "payload";
import { headers as nextHeaders } from "next/headers";
import { redirect } from "next/navigation";
import { UserCogIcon } from "lucide-react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { AccountProfileForm } from "@/components/frontend/account/AccountProfileForm";
import { ChangePasswordForm } from "@/components/frontend/account/ChangePasswordForm";
import { DiscordUsernameRequestForm } from "@/components/frontend/account/DiscordUsernameRequestForm";
import { PreferencesForm } from "@/components/frontend/account/PreferencesForm";

export const metadata = {
  title: "Account — Polaris Task Force",
};

export default async function AccountPage() {
  const payload = await getPayload({ config });
  const { user } = await payload.auth({
    headers: await nextHeaders(),
    canSetHeaders: false,
  });

  if (!user) {
    redirect("/");
  }

  const fullUser = await payload.findByID({
    collection: "users",
    id: user.id,
    depth: 0,
    overrideAccess: true,
  });

  const notifications = fullUser.preferences?.notifications;
  const discord = fullUser.preferences?.discord;

  return (
    <div className="p-5 flex flex-col gap-6">
      <div className="flex flex-col gap-1">
        <div className="flex items-center gap-2">
          <UserCogIcon className="size-5 text-muted-foreground" />
          <h1 className="text-lg font-semibold">Account</h1>
        </div>
        <p className="text-sm text-muted-foreground">
          Manage your profile, password, and notification preferences.
        </p>
      </div>

      <div className="flex max-w-2xl flex-col gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Profile</CardTitle>
            <CardDescription>How your name appears across the platform.</CardDescription>
          </CardHeader>
          <CardContent>
            <AccountProfileForm displayName={fullUser.displayName ?? ""} />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Password</CardTitle>
            <CardDescription>
              Change your password. You will stay logged in on this device.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <ChangePasswordForm />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Discord Username</CardTitle>
            <CardDescription>
              Your Discord username is managed by leadership. Request a change here.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <DiscordUsernameRequestForm currentDiscordUsername={fullUser.discordUsername ?? ""} />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Preferences</CardTitle>
            <CardDescription>Control in-app notifications and display options.</CardDescription>
          </CardHeader>
          <CardContent>
            <PreferencesForm
              mutedAll={notifications?.mutedAll ?? false}
              mutedTypes={notifications?.mutedTypes ?? []}
              showCallsign={fullUser.preferences?.display?.showCallsign ?? false}
              showVersionOverlay={fullUser.preferences?.display?.showVersionOverlay ?? true}
              showBackgroundTexture={fullUser.preferences?.display?.showBackgroundTexture ?? true}
              leadOrActual={fullUser.preferences?.display?.leadOrActual ?? "lead"}
              discordEnabled={discord?.enabled ?? false}
              discordMutedTypes={discord?.mutedTypes ?? []}
              xpDisplayMini={fullUser.preferences?.display?.xpDisplayMini ?? false}
            />
          </CardContent>
        </Card>
      </div>
    </div>
  );
}