import { auth, signOut } from "@/lib/auth"
import { db } from "@/lib/db"
import { redirect } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { ChangePasswordForm } from "@/components/account/change-password-form"

export const metadata = { title: "Profil" }

export default async function ProfilePage() {
  const session = await auth()
  if (!session?.user) redirect("/login")

  const user = await db.user.findUnique({
    where: { id: session.user.id },
  })

  return (
    <div>
      <h1 className="text-3xl font-heading font-bold uppercase tracking-tight text-[var(--text)] mb-12">
        Profil
      </h1>

      <div className="border border-[var(--border)] bg-[var(--surface)] divide-y divide-[var(--border)] max-w-lg">
        <div className="flex justify-between px-6 py-5">
          <span className="font-mono text-xs uppercase tracking-widest text-[var(--text-muted)]">Nom</span>
          <span className="text-sm text-[var(--text)]">{user?.name ?? "—"}</span>
        </div>
        <div className="flex justify-between px-6 py-5">
          <span className="font-mono text-xs uppercase tracking-widest text-[var(--text-muted)]">Email</span>
          <span className="text-sm text-[var(--text)]">{user?.email}</span>
        </div>
        <div className="flex justify-between px-6 py-5">
          <span className="font-mono text-xs uppercase tracking-widest text-[var(--text-muted)]">Membre depuis</span>
          <span className="text-sm text-[var(--text)]">
            {user && new Date(user.createdAt).toLocaleDateString("fr-BE", {
              month: "long",
              year: "numeric",
            })}
          </span>
        </div>
      </div>

      <div className="mt-8 border border-[var(--border)] bg-[var(--surface)] p-6 max-w-lg">
        <p className="font-mono text-xs uppercase tracking-widest text-[var(--text-muted)] mb-4">
          {user?.password ? "Changer le mot de passe" : "Définir un mot de passe"}
        </p>
        <ChangePasswordForm hasPassword={!!user?.password} />
      </div>

      {session.user.role === "ADMIN" && (
        <div className="mt-8 border border-[var(--border)] bg-[var(--surface)] p-6 max-w-lg">
          <p className="font-mono text-xs uppercase tracking-widest text-[var(--accent)] mb-2">
            Administration
          </p>
          <p className="text-sm text-[var(--text-secondary)] mb-4">
            Ton compte a les droits admin. Accède au tableau de bord de configuration du site.
          </p>
          <Button asChild size="sm">
            <Link href="/admin">Dashboard admin</Link>
          </Button>
        </div>
      )}

      <form
        action={async () => {
          "use server"
          await signOut({ redirectTo: "/" })
        }}
        className="mt-8"
      >
        <Button variant="outline" type="submit">
          Se déconnecter
        </Button>
      </form>
    </div>
  )
}