"use client";

import { useAuth } from "@/hooks/useAuth";
import { Navbar } from "@/components/navbar";
import { usePasswordChange } from "@/hooks/usePasswordChange";
import { useProfileSettings } from "@/hooks/useProfileSettings";
import { useTotpSettings } from "@/hooks/useTotpSettings";
import { useSystemInfo } from "@/hooks/useSystemInfo";
import { PasswordSection } from "@/components/settings/PasswordSection";
import { ProfileSection } from "@/components/settings/ProfileSection";
import { DisplaySection } from "@/components/settings/DisplaySection";
import { TotpSection } from "@/components/settings/TotpSection";
import { ImapSection } from "@/components/settings/ImapSection";

export default function SettingsPage() {
  const { user, loading, refresh } = useAuth();

  const password = usePasswordChange();
  const profile = useProfileSettings(user, refresh);
  const totp = useTotpSettings();
  const { systemInfo, systemInfoLoading } = useSystemInfo();

  if (loading) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <p className="text-muted-foreground">Laden...</p>
      </div>
    );
  }

  if (!user) {
    return null;
  }

  return (
    <div className="min-h-screen bg-background">
      <Navbar username={user.username} role={user.role} />

      <main className="mx-auto max-w-2xl px-4 py-8 space-y-6">
        <h1 className="text-2xl font-bold tracking-tight">
          Profil &amp; Einstellungen
        </h1>

        <PasswordSection {...password} />
        <ProfileSection {...profile} />
        <DisplaySection {...profile} />
        <TotpSection {...totp} />
        <ImapSection
          systemInfo={systemInfo}
          systemInfoLoading={systemInfoLoading}
          username={user.username}
        />
      </main>
    </div>
  );
}
