import Link from "next/link";
import { notFound } from "next/navigation";
import { Plus, Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { getUsers } from "@/server/queries/users";
import { requireUser } from "@/lib/session";
import { can } from "@/lib/permissions";
import { roleOptions } from "@/lib/user-roles";
import { UsersTable } from "@/components/users/users-table";

export const dynamic = "force-dynamic";

export default async function UsuariosPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; role?: string; page?: string }>;
}) {
  const user = await requireUser();
  if (!can(user.role, "usuario:manage")) notFound();

  const params = await searchParams;
  const role = roleOptions.find((option) => option.value === params.role)?.value;
  const result = await getUsers({
    q: params.q,
    role,
    page: params.page,
  });

  const buildHref = (nextPage: number) => {
    const sp = new URLSearchParams();
    if (params.q) sp.set("q", params.q);
    if (role) sp.set("role", role);
    sp.set("page", String(nextPage));
    const query = sp.toString();
    return query ? `/usuarios?${query}` : "/usuarios";
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <h2 className="text-2xl font-semibold tracking-tight">Usuarios</h2>
          <p className="text-sm text-muted-foreground">Administración de usuarios, roles y acceso al sistema.</p>
        </div>
        <Button asChild className="self-start">
          <Link href="/usuarios/nuevo">
            <Plus className="h-4 w-4" />
            Nuevo usuario
          </Link>
        </Button>
      </div>

      <Card className="border-border shadow-sm">
        <CardContent className="p-4">
          <form className="grid gap-3 md:grid-cols-[1.4fr_0.7fr_auto]">
            <div className="relative">
              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input name="q" defaultValue={params.q ?? ""} placeholder="Buscar por nombre, correo o rol" className="pl-9" />
            </div>
            <select
              name="role"
              defaultValue={role ?? ""}
              className="h-10 rounded-md border border-input bg-background px-3 text-sm text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-ring"
            >
              <option value="">Todos los roles</option>
              {roleOptions.map((option) => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
            <Button type="submit" className="justify-self-start">
              Filtrar
            </Button>
          </form>
        </CardContent>
      </Card>

      <UsersTable result={result} currentUserId={user.id} currentUserRole={user.role} />

      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <p className="text-sm text-muted-foreground">
          Mostrando {(result.page - 1) * result.pageSize + 1}-{Math.min(result.page * result.pageSize, result.total)} de {result.total} usuarios · Página {result.page} de {result.pageCount}
        </p>
        <div className="flex gap-2">
          <Button asChild variant="outline" size="sm" disabled={result.page <= 1}>
            <Link href={buildHref(Math.max(result.page - 1, 1))}>Anterior</Link>
          </Button>
          <Button asChild variant="outline" size="sm" disabled={result.page >= result.pageCount}>
            <Link href={buildHref(Math.min(result.page + 1, result.pageCount))}>Siguiente</Link>
          </Button>
        </div>
      </div>
    </div>
  );
}