'use client';

import { useRouter } from 'next/navigation';
import { X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { UploadContent } from './UploadContent';
import Image from 'next/image';
import Link from 'next/link';
import UserMenu from '@/components/UserMenu';

export function UploadPageClient() {
  const router = useRouter();

  const handleClose = () => {
    router.push('/');
  };

  return (
    <div className="fixed inset-0 z-50 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 upload"
          >
            <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>

        {/* Upload content */}
        <div className="mt-8">
          <div className="mb-8">
            <h1 className="text-4xl font-bold text-secondary dark:text-gray-50">
              Upload Photos & Videos
            </h1>
            <p className="mt-2 text-gray-600 dark:text-gray-400">
              Upload your photos and videos for admin review. Once approved, they will be added to the collection.
            </p>
          </div>
          <UploadContent />
        </div>
      </div>
    </div>
  );
}

