import type { Metadata } from "next";
import type { ReactNode } from "react";
import { Monitor, Palette, Shield } from "lucide-react";

import { PasswordForm, ProfileForm } from "@/components/account/settings-forms";
import { PlaybackSettingsForm } from "@/components/account/playback-settings-form";
import { requireSession } from "@/lib/require-session";
import { listStreamingDescriptors } from "@/services/providers/registry";
import { listDownloadDescriptors } from "@/services/providers/downloads";
import { formatDateLong } from "@/lib/utils";
import type { PublicUser } from "@/components/layout/session-provider";

export const metadata: Metadata = {
  title: "Settings",
  description: "Manage your FlixTV profile, preferences and password.",
  robots: { index: false, follow: false },
};

export const dynamic = "force-dynamic";

/**
 * /settings
 *
 * Grouped into three cards. The provider selects are driven by the *enabled*
 * registry, so an operator who disables a server here immediately sees it
 * disappear from their preferences rather than keeping a dead value.
 */
export default async function SettingsPage() {
  const session = await requireSession("/settings");

  const user: PublicUser = {
    id: session.user.id,
    username: session.user.username,
    email: session.user.email,
    displayName: session.user.displayName,
    avatarPath: session.user.avatarPath,
    role: session.user.role,
  };

  return (
    <main className="pb-24">
      <header className="border-b border-line pb-8 pt-8 md:pt-10">
        <div className="mx-auto w-full max-w-4xl px-4 sm:px-6">
          <h1 className="font-display text-3xl font-extrabold tracking-[-0.03em] text-ink md:text-4xl">
            Settings
          </h1>
          <p className="mt-2.5 text-[15px] text-ink-muted">
            Signed in as {user.username} · member since {formatDateLong(session.user.createdAt)}
          </p>
        </div>
      </header>

      <div className="mx-auto w-full max-w-4xl space-y-6 px-4 py-9 sm:px-6">
        <Card
          icon={<Monitor className="size-4" />}
          title="Playback & appearance"
          description="Defaults applied whenever you open a watch page."
        >
          <PlaybackSettingsForm
            providers={listStreamingDescriptors("movie")}
            downloadProviders={listDownloadDescriptors("movie")}
          />
        </Card>

        <Card
          icon={<Palette className="size-4" />}
          title="Profile"
          description="How you appear across FlixTV."
        >
          <ProfileForm user={user} />
        </Card>

        <Card
          icon={<Shield className="size-4" />}
          title="Security"
          description="Password and active sessions."
        >
          <PasswordForm />
        </Card>
      </div>
    </main>
  );
}

function Card({
  icon,
  title,
  description,
  children,
}: {
  icon: ReactNode;
  title: string;
  description: string;
  children: ReactNode;
}) {
  return (
    <section className="rounded-xl border border-line bg-surface-2/40 p-5 sm:p-7">
      <header className="mb-6 flex items-start gap-3.5">
        <span className="mt-0.5 grid size-9 shrink-0 place-items-center rounded-lg bg-brand-500/12 text-brand-400 ring-1 ring-brand-500/20">
          {icon}
        </span>
        <div className="min-w-0">
          <h2 className="font-display text-lg font-bold tracking-[-0.02em] text-ink">{title}</h2>
          <p className="mt-0.5 text-[13px] text-ink-muted">{description}</p>
        </div>
      </header>
      {children}
    </section>
  );
}