import { redirect } from "next/navigation";
import { getSession } from "@/lib/auth-utils";
import { TwoFactorSetup } from "@/components/settings/two-factor-setup";
import { ActiveSessions } from "@/components/settings/active-sessions";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { PageHeader } from "@/components/navigation/page-header";

export default async function SecuritySettingsPage() {
  const session = await getSession();

  if (!session) {
    redirect("/auth/sign-in");
  }

  return (
    <>
      <PageHeader
        title="Security"
        description="Manage your security preferences"
        breadcrumbs={[
          { label: "Settings", href: "/settings" },
          { label: "Security" },
        ]}
        accent
      />
      <div className="container mx-auto px-6 py-6 max-w-2xl space-y-6">
        <Card>
          <CardHeader>
            <CardTitle>Two-factor authentication</CardTitle>
            <CardDescription>Add an extra layer of security to your account.</CardDescription>
          </CardHeader>
          <CardContent>
            <TwoFactorSetup />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Active sessions</CardTitle>
            <CardDescription>Manage your active sessions across devices.</CardDescription>
          </CardHeader>
          <CardContent>
            <ActiveSessions userId={session.user.id} />
          </CardContent>
        </Card>
      </div>
    </>
  );
}