import { auth } from "@/auth";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { getInitials } from "@/lib/utils";
import { ChangePasswordForm } from "@/components/settings/ChangePasswordForm";

export const metadata = { title: "Settings" };

export default async function SettingsPage() {
  const session = await auth();
  if (!session?.user) return null;

  return (
    <div className="p-6 space-y-6 max-w-2xl mx-auto">
      <h1 className="text-2xl font-bold">Account Settings</h1>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Your Profile</CardTitle>
        </CardHeader>
        <CardContent className="flex items-center gap-4">
          <Avatar className="h-14 w-14">
            {session.user.image && <AvatarImage src={session.user.image} />}
            <AvatarFallback className="text-lg">
              {getInitials(session.user.name)}
            </AvatarFallback>
          </Avatar>
          <div>
            <p className="font-semibold">{session.user.name ?? "—"}</p>
            <p className="text-sm text-muted-foreground">{session.user.email}</p>
            <p className="text-xs text-muted-foreground mt-0.5 capitalize">
              {session.user.role?.toLowerCase()}
            </p>
          </div>
        </CardContent>
      </Card>

      <ChangePasswordForm mustChangePassword={session.user.mustChangePassword ?? false} />
    </div>
  );
}