'use client';

import React, { useEffect, useRef, useState } from 'react';
import Navbar from '@/layout/client/Navbar';
import BackgroundParticles from '@/components/Background';
import { ArrowUp } from 'lucide-react';

export default function CatalogoLayout({ children }: { children: React.ReactNode }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [scrollProgress, setScrollProgress] = useState(0);
  const [showScrollTop, setShowScrollTop] = useState(false);

  const handleScroll = () => {
    const element = containerRef.current;
    if (!element) return;
    
    const totalHeight = element.scrollHeight - element.clientHeight;
    if (totalHeight > 0) {
      const progress = (element.scrollTop / totalHeight) * 100;
      setScrollProgress(progress);
    }

    if (element.scrollTop > 300) {
      setShowScrollTop(true);
    } else {
      setShowScrollTop(false);
    }
  };

  const scrollToTop = () => {
    containerRef.current?.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  };

  return (
    <div className="flex-grow flex flex-col h-screen overflow-hidden relative">
      {/* FONDO CON GRADILLAS Y NEON PINK */}
      <div className="background-container absolute inset-0 pointer-events-none z-0">
        {/* Fondo base */}
        <div className="background-base" />
        
        {/* Óvalos neon */}
        <div className="oval-container">
          <div className="oval oval-1" />
          <div className="oval oval-2" />
          <div className="oval oval-3" />
          <div className="oval oval-4" />
        </div>

        {/* Scanlines */}
        <div className="scanlines" />
        
        {/* Partículas existentes */}
        <BackgroundParticles />

        {/* CAPA DE BRILLITOS FIJOS/ANIMADOS */}
        <div className="sparkles-overlay" />

        {/* Gradientes de borde */}
        <div className="gradient-bottom" />
        <div className="gradient-top" />
      </div>

      {/* Efectos HUD */}
      <div className="hud-effect hud-effect-1" />
      <div className="hud-effect hud-effect-2" />

      {/* Content wrapper */}
      <div className="flex-grow flex flex-col h-screen overflow-hidden relative z-10">
        <div className="px-0 md:px-20 bg-white shadow-sm relative">
          <Navbar />
          
          {/* Barra de progreso de lectura (scroll) */}
          <div className="absolute bottom-0 left-0 h-1 bg-gradient-to-r from-pink-500 via-[#ff2a5f] to-rose-500 transition-all duration-100 z-50" 
               style={{ width: `${scrollProgress}%` }} />
        </div>
        
        <main 
          ref={containerRef}
          onScroll={handleScroll}
          className="flex-grow overflow-y-auto custom-scrollbar relative"
        >
          <div className="w-full flex flex-col gap-0">
            {children}
          </div>

          {/* Botón flotante para volver arriba */}
          {showScrollTop && (
            <button
              onClick={scrollToTop}
              className="fixed bottom-6 right-6 z-[99] p-3 rounded-full bg-[#ff2a5f] hover:bg-[#e0194a] text-white shadow-lg shadow-[#ff2a5f]/30 hover:shadow-[#ff2a5f]/50 hover:-translate-y-1 transition-all duration-300 active:scale-95 flex items-center justify-center animate-bounce-subtle"
              title="Volver al inicio"
            >
              <ArrowUp size={20} strokeWidth={2.5} />
            </button>
          )}
        </main>
      </div>

      <style jsx global>{`
        @keyframes bounce-subtle {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-4px); }
        }
        .animate-bounce-subtle {
          animation: bounce-subtle 2s infinite ease-in-out;
        }
      `}</style>
    </div>
  );
}