import { format } from "date-fns";
import { es } from "date-fns/locale";
import type { ReactNode } from "react";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { PerfilAccountForm } from "@/components/perfil/perfil-account-form";
import { PerfilPasswordForm } from "@/components/perfil/perfil-password-form";
import { semanticSurfaceClass } from "@/lib/badge-variants";
import { badgeClassForActiveState } from "@/lib/state-variants";
import { getMyProfile } from "@/server/queries/perfil";

type ProfileData = Awaited<ReturnType<typeof getMyProfile>>;

function formatDate(value: Date | null | undefined) {
  return value ? format(value, "dd-MM-yyyy HH:mm", { locale: es }) : "-";
}

export function PerfilDashboard({ profile }: { profile: NonNullable<ProfileData> }) {
  return (
    <div className="space-y-6">
      <section className="grid gap-4 xl:grid-cols-3">
        <Card className="border-border shadow-sm xl:col-span-2">
          <CardHeader>
            <CardTitle>Información de cuenta</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2">
              <Field label="Nombre" value={profile.name} />
              <Field label="Correo" value={profile.email} />
              <Field label="Rol" value={profile.role.name} />
              <Field
                label="Estado"
                value={
                  <Badge className={badgeClassForActiveState(profile.isActive)}>
                    {profile.isActive ? "Activo" : "Inactivo"}
                  </Badge>
                }
              />
              <Field label="Fecha creación" value={formatDate(profile.createdAt)} />
              <Field label="Último acceso" value={formatDate(profile.lastLoginAt)} />
            </div>
          </CardContent>
        </Card>

        <Card className="border-border shadow-sm">
          <CardHeader>
            <CardTitle>Seguridad</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3 text-sm text-muted-foreground">
            <p>Desde aquí puedes actualizar tus datos básicos y cambiar tu contraseña.</p>
            <p>No es posible modificar el rol ni ver credenciales internas.</p>
            <p>Los cambios quedan registrados en auditoría.</p>
          </CardContent>
        </Card>
      </section>

      <PerfilAccountForm profile={profile} />
      <PerfilPasswordForm />
    </div>
  );
}

function Field({ label, value }: { label: string; value: ReactNode }) {
  return (
    <div className={semanticSurfaceClass("neutral", { padding: "md" })}>
      <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{label}</p>
      <div className="mt-2 text-sm font-medium text-foreground">{value}</div>
    </div>
  );
}