'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import MetricObserver from './MetricObserver';
import { ExternalLink } from 'lucide-react';

export default function TopBanner({ initialBanners, rotationSeconds }: { initialBanners: any[], rotationSeconds: number }) {
   const [currentIndex, setCurrentIndex] = useState(0);

   useEffect(() => {
       if (!initialBanners || initialBanners.length <= 1) return;
       
       const interval = setInterval(() => {
           setCurrentIndex(prev => (prev + 1) % initialBanners.length);
       }, rotationSeconds * 1000);

       return () => clearInterval(interval);
   }, [initialBanners, rotationSeconds]);

   if (!initialBanners || initialBanners.length === 0) return null;

   const activeBanner = initialBanners[currentIndex];
   
   if (!activeBanner.imagen_destacada_id) return null;

   const ENDPOINT = process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || 'https://appwrite.almeira.com.co/v1';
   const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '69b84df5003bd8957c5c';
   
   let imgUrl = activeBanner.og_image_url || null;
   
   if (activeBanner.imagen_destacada_id) {
       if (typeof activeBanner.imagen_destacada_id === 'object' && activeBanner.imagen_destacada_id.bucket_id) {
           imgUrl = `${ENDPOINT}/storage/buckets/${activeBanner.imagen_destacada_id.bucket_id}/files/${activeBanner.imagen_destacada_id.file_id}/view?project=${PROJECT_ID}`;
       } else if (typeof activeBanner.imagen_destacada_id === 'string') {
           // Fallback to 'media' bucket if we only have the ID
           imgUrl = `${ENDPOINT}/storage/buckets/media/files/${activeBanner.imagen_destacada_id}/view?project=${PROJECT_ID}`;
       }
   }

   if (!imgUrl) return null;

   const recordClickAndGo = () => {
       fetch('/api/metrics', {
            method: 'POST',
            body: JSON.stringify({ postId: activeBanner.$id, tipo: 'click' })
       });
       if (activeBanner.url_destino) {
           window.open(activeBanner.url_destino, '_blank');
       }
   };

   return (
       <div className="w-full relative h-[120px] md:h-[180px] lg:h-[220px] bg-slate-900 border-b border-cyan-500/30 overflow-hidden group">
           
           {/* Metric Impression Observer resets key on change to fire new impression */}
           <MetricObserver key={activeBanner.$id} postId={activeBanner.$id} />

           <div onClick={recordClickAndGo} className={`w-full h-full ${activeBanner.url_destino ? 'cursor-pointer' : ''}`}>
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img 
                   src={imgUrl} 
                   alt={activeBanner.titulo} 
                   className="w-full h-full object-cover animate-fade-in" 
               />
               
               {activeBanner.url_destino && (
                   <div className="absolute top-4 right-4 bg-black/50 backdrop-blur-md p-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">
                       <ExternalLink className="text-cyan-400" size={20} />
                   </div>
               )}
           </div>

           {/* Indicadores */}
           {initialBanners.length > 1 && (
               <div className="absolute bottom-2 left-0 right-0 flex justify-center gap-2">
                   {initialBanners.map((_: any, idx: number) => (
                       <div key={idx} className={`h-1.5 rounded-full transition-all ${idx === currentIndex ? 'w-6 bg-cyan-400' : 'w-2 bg-slate-400/50'}`}></div>
                   ))}
               </div>
           )}
       </div>
   );
}