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";
import { HetznerConfigForm } from "@/components/settings/HetznerConfigForm";
import { SketchTemplatesSection } from "@/components/settings/SketchTemplatesSection";
import { HideArchivedToggle } from "@/components/settings/HideArchivedToggle";
import { getHetznerConfig } from "@/actions/settings";

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

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

  const isAdmin = session.user.role === "ADMIN";
  const canManageTemplates = ["ADMIN", "PRODUCER", "SUPERVISOR"].includes(session.user.role ?? "");
  const hetznerConfig = isAdmin ? await getHetznerConfig() : 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>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Display Preferences</CardTitle>
        </CardHeader>
        <CardContent>
          <HideArchivedToggle />
        </CardContent>
      </Card>

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

      {isAdmin && hetznerConfig && (
        <div className="space-y-2">
          <h2 className="text-lg font-semibold">Admin — Storage Configuration</h2>
          <HetznerConfigForm initialConfig={hetznerConfig} />
        </div>
      )}

      {canManageTemplates && (
        <Card>
          <CardContent className="pt-6">
            <SketchTemplatesSection />
          </CardContent>
        </Card>
      )}
    </div>
  );
}