import { notFound } from "next/navigation";
import { UserCircle2 } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { requireUser } from "@/lib/session";
import { getMyProfile } from "@/server/queries/perfil";
import { PerfilDashboard } from "@/components/perfil/perfil-dashboard";
import { ThemeToggle } from "@/components/theme/theme-toggle";

export const dynamic = "force-dynamic";

export default async function PerfilPage() {
  const session = await requireUser();
  const profile = await getMyProfile(session.id);
  if (!profile) notFound();

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3">
        <div className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1 text-xs font-medium text-muted-foreground shadow-sm">
          <UserCircle2 className="h-3.5 w-3.5" />
          Mi perfil
        </div>
        <h2 className="text-2xl font-semibold tracking-tight">Perfil de usuario</h2>
        <p className="max-w-3xl text-sm text-muted-foreground">
          Revisa tus datos de cuenta, actualiza tu información básica y cambia tu contraseña desde este espacio.
        </p>
      </div>

      <Card className="border-border shadow-sm">
        <CardContent className="flex flex-col gap-4 p-4 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
          <div>
            <p className="font-medium text-foreground">Preferencia de tema</p>
            <p>Activa claro, oscuro o sistema desde este espacio.</p>
          </div>
          <ThemeToggle />
        </CardContent>
      </Card>

      <Card className="border-border shadow-sm">
        <CardContent className="p-4 text-sm text-muted-foreground">
          Solo puedes modificar tu nombre y correo. El rol y el estado se administran desde el módulo de usuarios.
        </CardContent>
      </Card>

      <PerfilDashboard profile={profile} />
    </div>
  );
}