import { APPWRITE_ALMEIRA_CONFIG } from '@/lib/appwrite';
import { createAdminClient } from '@/lib/appwrite.server';
import { Query } from 'node-appwrite';
import { NewsCard } from '@/components/NewsCard';
import { GlobalSidebar, hasSidebarContent } from '@/components/AdWrappers';
import { Calendar } from 'lucide-react';
import { Settings } from '@/types/settings';
import { Post, MediaItem } from '@/types/publications';

async function fetchEventosData() {
    try {
        const client = await createAdminClient();
        
        // 1. Settings
        const settingsRes = await client.databases.listDocuments(APPWRITE_ALMEIRA_CONFIG.databaseId, 'settings', []);
        const settings = (settingsRes.documents.length > 0 ? settingsRes.documents[0] : {
            ticker_count: 10,
            rotation_seconds: 5,
            feed_news_count: 12,
            show_news_date: true
        }) as Settings;
        
        const postsCount = settings.feed_news_count || 12;
        const cardSettings = {
            showCategory: settings.news_card_show_category ?? false,
            showFooterDate: String(settings.show_news_date) === 'true',
            showFooterButton: settings.news_card_show_footer_button ?? true,
            footerText: settings.news_card_footer_text || ""
        };

        // 2. Get EVENTO type ID
        const typeRes = await client.databases.listDocuments(APPWRITE_ALMEIRA_CONFIG.databaseId, 'publication_types', [
            Query.equal('codigo', 'EVENTO')
        ]);
        
        let posts: Post[] = [];
        if (typeRes.documents.length > 0) {
            const firstType = typeRes.documents[0];
            const typeId = firstType?.$id;
            if (!typeId) return { posts: [], cardSettings };
            const postsRes = await client.databases.listDocuments(APPWRITE_ALMEIRA_CONFIG.databaseId, 'posts', [
                Query.equal('tipo_publicacion_id', typeId),
                Query.equal('estado', 'Publicado'),
                Query.orderDesc('fecha_publicacion'),
                Query.limit(postsCount)
            ]);
            posts = postsRes.documents as unknown as Post[];

            // 3. Resolve Media
            const mediaIds = posts.map(p => p.imagen_destacada_id).filter(id => id && typeof id === 'string') as string[];
            if (mediaIds.length > 0) {
                const mediaRes = await client.databases.listDocuments(APPWRITE_ALMEIRA_CONFIG.databaseId, 'media', [
                    Query.equal('$id', mediaIds)
                ]);
                const mediaMap = new Map<string, MediaItem>(mediaRes.documents.map(m => [m.$id, m as unknown as MediaItem]));
                posts = posts.map(p => ({ 
                    ...p, 
                    resolved_media: mediaMap.get(p.imagen_destacada_id as string) 
                }));
            }
        }

        return { posts, cardSettings };
    } catch (e) {
        console.error("Eventos fetch error", e);
        return { posts: [], cardSettings: { showCategory: false, showFooterDate: true, showFooterButton: true, footerText: "" } };
    }
}

export default async function EventosPage() {
  const { posts, cardSettings } = await fetchEventosData();
  const hasSidebar = await hasSidebarContent();

  return (
    <main className="animate-fade-in relative min-h-screen">
      {/* Sci-Fi Hero Section */}
      <section className="relative flex flex-col items-center justify-center min-h-[60vh] text-center px-4 overflow-hidden mesh-bg">
        <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-cyan-500/10 rounded-full blur-[120px] mix-blend-screen pointer-events-none"></div>
        
        <div className="relative z-10 flex flex-col items-center max-w-4xl mx-auto">
          <h1 className="text-5xl md:text-7xl font-outfit font-black tracking-tighter mb-6 leading-tight">
            EVENTOS EN TU<br/>
            <span className="holographic-text block mt-2">REGIÓN</span>
          </h1>
          
          <p className="text-lg text-slate-400 max-w-2xl mb-10 font-medium">
            El primer portal transaccional de medios impulsado por inteligencia artificial.
            Los mejores eventos artísticos, culturales y sociales en un solo lugar.
          </p>
          
          <a
            href="#noticias"
            className="group relative inline-flex items-center justify-center gap-3 px-8 py-3 rounded-full font-bold text-white overflow-hidden transition-all hover:scale-105"
          >
            <div className="absolute inset-0 bg-gradient-to-r from-cyan-500 to-blue-600 opacity-90 group-hover:opacity-100 transition-opacity"></div>
            <span className="relative z-10 tracking-widest uppercase text-sm">Explorar Agenda</span>
          </a>
        </div>
      </section>

      <section id="noticias" className="container mx-auto px-4 py-20 relative z-10 w-full">
        <div className="flex flex-col lg:flex-row gap-8 w-full items-start">
            <div className="flex-1 w-full relative">
                <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
                   <div>
                      <div className="flex items-center gap-3 mb-2">
                         <div className="w-12 h-1 bg-gradient-to-r from-cyan-400 to-blue-600 rounded-full"></div>
                         <span className="text-cyan-400 font-bold tracking-widest uppercase text-sm">Próximos</span>
                      </div>
                      <h2 className="text-4xl font-outfit font-black text-white">Agenda de <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-500">Eventos</span></h2>
                   </div>
                </div>

                {posts.length === 0 ? (
                     <div className="w-full py-20 flex flex-col items-center justify-center border border-white/5 rounded-3xl glass-panel relative overflow-hidden">
                        <div className="p-6 rounded-full bg-slate-800/80 mb-6 border border-white/10 relative z-10">
                           <Calendar size={48} className="text-cyan-500" />
                        </div>
                        <h3 className="text-2xl font-black font-outfit text-white mb-2 relative z-10">Sin Eventos Próximos</h3>
                        <p className="text-slate-400 relative z-10">El portal se encuentra a la espera de nuevas programaciones en la región.</p>
                     </div>
                ) : (
                     <div className={`grid grid-cols-1 md:grid-cols-2 ${hasSidebar ? 'lg:grid-cols-2 xl:grid-cols-3' : 'lg:grid-cols-3 xl:grid-cols-4'} gap-6`}>
                       {posts.map((post) => {
                         const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '69b84df5003bd8957c5c';
                         const ENDPOINT = process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || 'https://appwrite.almeira.com.co/v1';
                         let imagenUrl = post.og_image_url || null;

                         if (post.resolved_media) {
                            imagenUrl = `${ENDPOINT}/storage/buckets/${post.resolved_media.bucket_id}/files/${post.resolved_media.file_id}/preview?project=${PROJECT_ID}&width=800&height=500&quality=85`;
                         }

                         return (
                            <NewsCard 
                                key={post.$id}
                                id={post.$id}
                                slug={post.slug || post.$id}
                                titulo={post.titulo}
                                resumen={post.resumen_redes || post.contenido?.replace(/<[^>]*>?/gm, '').substring(0, 150) + '...'}
                                tipo="Evento"
                                fecha={post.fecha_publicacion || post.$createdAt}
                                imagenUrl={imagenUrl}
                                showCategory={cardSettings.showCategory}
                                showFooterDate={cardSettings.showFooterDate}
                                showFooterButton={cardSettings.showFooterButton}
                                footerText={cardSettings.footerText}
                            />
                         )
                       })}
                     </div>
                )}
            </div>

            {hasSidebar && (
                <aside className="w-full lg:w-[320px] xl:w-[360px] shrink-0 mt-8 lg:mt-0 sticky top-24">
                    <GlobalSidebar />
                </aside>
            )}
        </div>
      </section>
    </main>
  );
}