'use client';

import { useEffect } from 'react';
import { createPortal } from 'react-dom';
import { X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { ManageUsersContent } from './ManageUsersContent';
import Image from 'next/image';
import Link from 'next/link';
import UserMenu from '@/components/UserMenu';

interface ManageUsersPageClientProps {
  onClose?: () => void;
}

export function ManageUsersPageClient({ onClose }: ManageUsersPageClientProps) {
  const handleClose = () => {
    if (onClose) {
      onClose();
    }
  };

  useEffect(() => {
    // Prevent body scroll when overlay is open
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = 'unset';
    };
  }, []);

  const overlayContent = (
    <div className="fixed inset-0 z-[100] bg-background overflow-y-auto">
      <div className="w-full px-4 py-8">
        {/* Close button */}
        <div className="mb-4 flex items-center justify-end">
          <Button
            variant="ghost"
            size="icon"
            onClick={handleClose}
            className="h-9 w-9"
            aria-label="Close manage users"
          >
            <X className="h-5 w-5" />
          </Button>
        </div>

        {/* Header */}
        <div className="sticky top-0 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 pb-4 mb-4 border-b">
          <div className="mb-4 flex items-center justify-between">
            <Link href="/" aria-label="Home">
              <Image
                src="/logo.png"
                alt="PunimTag"
                width={300}
                height={80}
                className="h-20 w-auto cursor-pointer hover:opacity-80 transition-opacity"
                priority
              />
            </Link>
            <div className="flex items-center gap-2">
              <UserMenu />
            </div>
          </div>
          <p className="text-lg font-medium text-orange-600 dark:text-orange-500 tracking-wide">
            Browse our photo collection
          </p>
        </div>

        {/* Manage Users content */}
        <div className="mt-8">
          <ManageUsersContent />
        </div>
      </div>
    </div>
  );

  // Render in portal to ensure it's above everything
  if (typeof window === 'undefined') {
    return null;
  }

  return createPortal(overlayContent, document.body);
}

