"use client";

import { useSession } from "next-auth/react";
import Link from "next/link";
import {
  LuFileText,
  LuPlus,
  LuUserPlus,
  LuUsers,
  LuChevronLeft,
  LuFolderOpen,
} from "react-icons/lu";
import { UserNav } from "../dashboard/components/UserNav";
import { ThemeToggle } from "@/components/ui/ThemeToggle";
type AppHeaderProps = {
  backHref?: string;
  showUploadButton?: boolean;
  showCreateUser?: boolean;
  showUser?: boolean;
  showCategories?: boolean;
};

// UserNav mock removed; using the real UserNav imported above.

export function AppHeader({
  backHref,
  showUploadButton = false,
  showCreateUser = false,
  showUser = false,
  showCategories = false,
}: AppHeaderProps) {
  // Mock de la sesión para previsualización
  const { data: session } = useSession() || {
    data: {
      user: {
        name: "Admin User",
        email: "admin@example.com",
        role: "ADMIN",
      },
    },
  };

  return (
    <header className="sticky top-0 z-40 w-full border-b border-border-subtle bg-background">
      <div className="container mx-auto flex h-16 items-center justify-between px-4 sm:px-8">
        <div className="flex items-center gap-4">
          {backHref && (
            <Link
              href={backHref}
              className="flex items-center gap-1 text-sm text-text-muted hover:text-text"
            >
              <LuChevronLeft className="h-4 w-4" />
              dashboard
            </Link>
          )}

          {(backHref || showUploadButton || showCreateUser || showUser) && (
            <span className="h-6 w-px bg-border-subtle"></span>
          )}

          <div className="flex items-center gap-2">
            <div className="p-2 bg-primary rounded-lg">
              <LuFileText className="h-5 w-5 text-primary-foreground" />
            </div>
            <span className="text-lg font-bold text-text">OCR Pro</span>
          </div>
        </div>

        <div className="flex items-center gap-4">
          {/* BOTÓN ESTANDARIZADO */}
          {showUploadButton && (
            <Link
              href="/upload"
              className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
            >
              <LuPlus className="h-4 w-4" />
              Escanear Documento
            </Link>
          )}

          {/* BOTÓN ESTANDARIZADO */}
          {showCreateUser && session?.user.role === "ADMIN" && (
            <Link
              href="/register"
              className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
            >
              <LuUserPlus className="h-4 w-4" />
              <span>Registrar Usuario</span>
            </Link>
          )}

          {/* BOTÓN ESTANDARIZADO */}
          {showUser && session?.user.role === "ADMIN" && (
            <Link
              href="/employees"
              className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
            >
              <LuUsers className="h-4 w-4" />
              <span>Usuarios</span>
            </Link>
          )}

          {/* BOTÓN CATEGORÍAS - Solo Admin */}
          {showCategories && session?.user.role === "ADMIN" && (
            <Link
              href="/categories"
              className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
            >
              <LuFolderOpen className="h-4 w-4" />
              <span>Categorías</span>
            </Link>
          )}

          <ThemeToggle />
          <UserNav />
        </div>
      </div>
    </header>
  );
}