import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft, History, User } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { UserForm } from "@/components/users/user-form";
import { UserPasswordForm } from "@/components/users/user-password-form";
import { getUserById } from "@/server/queries/users";
import { updateUserAction, resetUserPasswordAction } from "@/server/actions/users";
import { requireUser } from "@/lib/session";
import { can } from "@/lib/permissions";
import { formatDateTimeCL } from "@/lib/date-format";
import { labelRole, roleBadgeClass, userStateBadgeClass } from "@/lib/user-roles";

export const dynamic = "force-dynamic";

export default async function UsuarioDetallePage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const currentUser = await requireUser();
  if (!can(currentUser.role, "usuario:manage")) notFound();

  const user = await getUserById(id);
  if (!user) notFound();

  const summary = [
    { label: "Usuarios creados", value: user._count.createdFichas },
    { label: "Documentos subidos", value: user._count.uploadedDocuments },
    { label: "Documentos validados", value: user._count.validatedDocuments },
    { label: "Comentarios", value: user._count.comentarios },
  ];

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div className="space-y-2">
          <Button asChild variant="ghost" size="sm" className="px-0">
            <Link href="/usuarios">
              <ArrowLeft className="h-4 w-4" />
              Volver a usuarios
            </Link>
          </Button>
          <div className="flex flex-wrap items-center gap-2">
            <h2 className="text-2xl font-semibold tracking-tight">{user.name}</h2>
            <Badge className={roleBadgeClass(user.role.name)}>
              {labelRole(user.role.name)}
            </Badge>
            <Badge className={userStateBadgeClass(user.isActive)}>
              {user.isActive ? "Activo" : "Inactivo"}
            </Badge>
          </div>
          <p className="text-sm text-muted-foreground">
            Correo {user.email} · Creado el {formatDateTimeCL(user.createdAt)}
            {user.lastLoginAt ? ` · Último acceso ${formatDateTimeCL(user.lastLoginAt)}` : ""}
          </p>
        </div>
        <Button asChild variant="outline" className="self-start">
          <Link href={`/fichas?usuario=${user.id}`}>
            <History className="h-4 w-4" />
            Ver actividad relacionada
          </Link>
        </Button>
      </div>

      <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {summary.map((item) => (
          <Card key={item.label} className="border-border shadow-sm">
            <CardContent className="flex items-center gap-4 p-5">
              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
                <User className="h-5 w-5" />
              </div>
              <div>
                <p className="text-sm font-medium text-muted-foreground">{item.label}</p>
                <p className="text-2xl font-semibold text-foreground">{item.value}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </section>

      <UserForm
        title="Editar usuario"
        description="Actualiza nombre, correo, rol y estado del usuario."
        action={updateUserAction.bind(null, user.id)}
        submitLabel="Guardar cambios"
        initialValues={{
          name: user.name,
          email: user.email,
          role: user.role.name,
          isActive: user.isActive,
        }}
      />

      <UserPasswordForm action={resetUserPasswordAction.bind(null, user.id)} />
    </div>
  );
}