import { Hexagon, Send, Layers, Zap, MessageCircle, BarChart3, ChevronRight, Flame, Share2, Globe, Instagram } from 'lucide-react';

const DICT: Record<string, any> = {
  pt: {
    back: '← Voltar ao Hub',
    login: 'Conectar',
    subscribeBtn: 'Inscrever',
    sidebarAd: 'ESPAÇO PATROCINADO',
    popularData: 'DADOS ON-CHAIN',
    trending: 'EM ALTA:',
    picks: 'ESCOLHA DOS EDITORES',
    feedTitle: 'FLUXO DE DADOS PRINCIPAL',
    categoryWeb3: 'WEB 3.0 & DAOS',
    categoryAI: 'IA & COMPUTAÇÃO'
  }
};

export default function NeonTheme({ posts, activeView = 'home', currentArticle, children }: { posts: any[], activeView?: 'home' | 'article', currentArticle?: any, children?: React.ReactNode }) {
  const ui = DICT['pt'];

  const articlesToRender = posts.map(p => ({
    id: p.slug,
    title: p.data.title || p.slug,
    excerpt: p.data.excerpt || 'Resumo do artigo...',
    tag: p.data.category || 'NeuroTech',
    date: p.data.date ? new Date(p.data.date).toLocaleDateString('pt-BR') : 'Hoje'
  }));

  const displayArticle = currentArticle ? {
    id: currentArticle.slug,
    title: currentArticle.data.title || currentArticle.slug,
    excerpt: currentArticle.data.excerpt || '',
    tag: currentArticle.data.category || 'NeuroTech',
    date: currentArticle.data.date ? new Date(currentArticle.data.date).toLocaleDateString('pt-BR') : 'Hoje'
  } : articlesToRender[0];

  const trendTags = ['Polkadot', 'Stable Diffusion 5', 'AGI timelines', 'Bitcoin $120k', 'Neuralink Trial'];

  return (
    <div className="neon-scroll-container bg-[#080314] text-white min-h-full font-sans overflow-y-auto selection:bg-pink-500 selection:text-white relative">
      <div className="pointer-events-none fixed inset-0 z-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10" />
      <div className="pointer-events-none fixed top-[-20%] left-[-10%] w-[50%] h-[50%] bg-pink-600 rounded-full blur-[150px] opacity-20 mix-blend-screen" />
      <div className="pointer-events-none fixed top-[20%] right-[-10%] w-[50%] h-[50%] bg-cyan-600 rounded-full blur-[150px] opacity-20 mix-blend-screen" />

      {/* Ticker / Topbar */}
      <div className="relative z-50 h-10 border-b border-white/10 bg-black/80 flex items-center overflow-hidden whitespace-nowrap">
        <div className="flex animate-[pulse_10s_ease-in-out_infinite] px-6 text-[10px] font-mono font-bold text-cyan-400 uppercase tracking-widest items-center gap-6">
           <span className="text-white opacity-50 px-2 bg-pink-500">{ui.trending}</span>
           {trendTags.map((t, i) => (
              <span key={i} className="hover:text-white transition-colors">// {t}</span>
           ))}
        </div>
      </div>

      <header className="sticky top-0 z-40 bg-[#080314]/80 backdrop-blur-xl border-b border-white/10">
        <div className="max-w-[1400px] mx-auto px-6 h-20 flex items-center justify-between">
          <a href="/" className="flex items-center gap-3 cursor-pointer group">
            <Hexagon className="w-8 h-8 text-pink-500 group-hover:rotate-90 transition-transform duration-500" />
            <span className="text-3xl font-black tracking-tighter uppercase blur-[0.5px]">NEXUS</span>
          </a>

          <nav className="hidden lg:flex gap-8 text-xs font-bold uppercase tracking-widest">
             <a href="/" className="text-cyan-400 border-b-2 border-cyan-400 h-[80px] flex items-center drop-shadow-[0_0_8px_rgba(34,211,238,0.8)]">Metaverse</a>
             <a href="/" className="hover:text-pink-400 h-[80px] flex items-center transition-colors">Protocols</a>
             <a href="/login" className="hover:text-pink-400 h-[80px] flex items-center transition-colors">AUTH_NODE</a>
          </nav>

          <div className="flex items-center gap-6">
             <button className="hidden sm:inline-block border border-cyan-500/50 bg-cyan-500/10 hover:bg-cyan-500/30 text-cyan-400 text-xs font-bold uppercase tracking-widest px-4 py-2 hover:shadow-[0_0_15px_rgba(34,211,238,0.5)] transition-all">
               {ui.login}
             </button>
          </div>
        </div>
      </header>

      {activeView === 'home' ? (
        <main className="relative z-10 max-w-[1400px] mx-auto px-6 py-8">
          
          {/* Ad Space Leaderboard */}
          <div className="w-full h-[90px] bg-black/50 border border-pink-500/30 flex items-center justify-center mb-10 overflow-hidden relative group cursor-pointer">
             <div className="absolute inset-0 bg-gradient-to-r from-pink-500/20 to-cyan-500/20 blur-md"></div>
             <span className="relative z-10 text-[10px] uppercase font-bold text-pink-400 tracking-widest">{ui.sidebarAd} // ADS_MATRIX</span>
          </div>

          {/* Densified Hero */}
          <section className="grid lg:grid-cols-12 gap-6 mb-12">
            
            {/* Main Big Article */}
            <article className="lg:col-span-6 relative aspect-square sm:aspect-video lg:aspect-auto group cursor-pointer border border-white/10 rounded-xl overflow-hidden shadow-[0_0_30px_rgba(236,72,153,0.1)]">
               <a href={`/${articlesToRender[0]?.id}`} className="block w-full h-full">
                <img src="https://images.unsplash.com/photo-1614729939124-032f0b56c9ce?auto=format&fit=crop&q=80&w=1200" alt="Space" className="w-full h-full object-cover mix-blend-screen opacity-70 group-hover:scale-105 transition-transform duration-700"/>
                <div className="absolute inset-0 bg-gradient-to-t from-[#080314] via-[#080314]/60 to-transparent flex flex-col justify-end p-8">
                    <span className="bg-pink-500 text-white text-[10px] font-black uppercase tracking-widest px-3 py-1 w-fit mb-4">{articlesToRender[0]?.tag}</span>
                    <h2 className="text-3xl sm:text-4xl lg:text-5xl font-black leading-tight text-white mb-2 group-hover:text-cyan-300 transition-colors">{articlesToRender[0]?.title}</h2>
                    <p className="text-cyan-100/60 line-clamp-2 mb-4">{articlesToRender[0]?.excerpt}</p>
                    <div className="flex items-center gap-3 text-[10px] uppercase font-bold tracking-widest text-pink-400">
                      <Zap className="w-3 h-3"/> <span>{articlesToRender[0]?.date}</span>
                    </div>
                </div>
               </a>
            </article>

            {/* 2 Smaller Articles Top/Bottom */}
            <div className="lg:col-span-4 flex flex-col gap-6">
               {articlesToRender.slice(1, 3).map((art: any) => (
                  <article key={art.id} className="flex-1 relative group cursor-pointer border border-white/10 rounded-xl overflow-hidden bg-black/40 hover:bg-white/5 transition-all">
                     <a href={`/${art.id}`} className="block h-full p-6">
                        <span className="text-cyan-400 text-[10px] font-black uppercase tracking-widest mb-2 border border-cyan-400/30 w-fit px-2 py-0.5 rounded">{art.tag}</span>
                        <h3 className="text-xl font-black leading-tight text-white mb-2 group-hover:text-pink-400 transition-colors">{art.title}</h3>
                        <p className="text-white/50 text-xs line-clamp-2">{art.excerpt}</p>
                     </a>
                  </article>
               ))}
            </div>

            {/* Tech Specs / Tokens Widget */}
            <aside className="lg:col-span-2 hidden lg:flex flex-col gap-6">
               <div className="flex-1 bg-black/60 border border-white/10 rounded-xl p-4 flex flex-col">
                  <h4 className="text-[10px] text-white/40 uppercase font-black tracking-widest mb-4 border-b border-white/10 pb-2 flex items-center gap-2"><BarChart3 className="w-3 h-3"/> {ui.popularData}</h4>
                  <div className="flex flex-col gap-3 flex-1 justify-center">
                     <div className="flex justify-between items-center text-xs font-mono">
                        <span className="text-white">ETH</span> <span className="text-green-400">+4.2%</span>
                     </div>
                     <div className="flex justify-between items-center text-xs font-mono">
                        <span className="text-white">SOL</span> <span className="text-red-400">-1.8%</span>
                     </div>
                  </div>
               </div>
            </aside>
          </section>

          {/* 70/30 Split layout Feed / Sidebar */}
          <div className="grid lg:grid-cols-12 gap-10">
             
             {/* MAIN COLUMN (70%) */}
             <div className="lg:col-span-8 flex flex-col gap-16">
                
                <section>
                   <div className="flex items-center gap-3 mb-6 border-b border-pink-500/30 pb-2">
                     <Layers className="w-5 h-5 text-pink-500" />
                     <h3 className="text-xl font-black uppercase tracking-tight text-white">{ui.categoryWeb3}</h3>
                   </div>
                   
                   <div className="grid sm:grid-cols-2 gap-6">
                      {articlesToRender.slice(3, 5).map((art: any) => (
                        <article key={art.id} className="group cursor-pointer bg-white/[0.02] border border-white/5 rounded-xl overflow-hidden hover:bg-white/[0.05] hover:border-pink-500/50 transition-all">
                           <a href={`/${art.id}`} className="block">
                            <div className="h-40 overflow-hidden relative">
                                <img src={`https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80&w=600&random=${art.id}`} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 opacity-60 mix-blend-screen" alt={art.title}/>
                                <div className="absolute inset-0 bg-gradient-to-t from-[#080314] to-transparent"></div>
                            </div>
                            <div className="p-6 -mt-8 relative z-10">
                              <h4 className="text-lg font-black leading-tight text-white mb-2 group-hover:text-pink-400 transition-colors drop-shadow-md">{art.title}</h4>
                              <p className="text-white/40 text-xs mb-4 line-clamp-2">{art.excerpt}</p>
                            </div>
                           </a>
                        </article>
                      ))}
                   </div>
                </section>

                {/* Cyber Banner Inline Ad */}
                <div className="w-full h-[150px] bg-black border border-cyan-500/30 rounded-xl flex items-center justify-center relative overflow-hidden group cursor-pointer">
                   <div className="relative z-10 flex flex-col items-center">
                     <span className="bg-cyan-500 text-black px-2 text-[9px] font-black uppercase tracking-widest mb-2">{ui.sidebarAd} // 728x90</span>
                     <span className="text-cyan-400 blur-[0.5px] font-black tracking-widest text-lg group-hover:blur-none transition-all">HARDWARE_NODE_OFF 50%</span>
                   </div>
                </div>

                <section>
                   <div className="flex items-center gap-3 mb-6 border-b border-cyan-500/30 pb-2">
                     <Zap className="w-5 h-5 text-cyan-400" />
                     <h3 className="text-xl font-black uppercase tracking-tight text-white">{ui.categoryAI}</h3>
                   </div>
                   
                   <div className="flex flex-col gap-4">
                      {articlesToRender.slice(5).map((art: any, i: number) => (
                        <article key={art.id} className="group cursor-pointer pb-4 border-b border-white/5 last:border-0 items-center hover:bg-white/[0.02] p-2 rounded-lg transition-colors">
                           <a href={`/${art.id}`} className="flex gap-6">
                            <div className="w-24 h-24 sm:w-32 sm:h-24 rounded-lg overflow-hidden shrink-0 border border-white/10 relative">
                                <img src={`https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=400&random=${i}`} className="w-full h-full object-cover group-hover:scale-105 transition-transform opacity-70" alt="Thumb"/>
                            </div>
                            <div className="flex-1">
                                <span className="text-[9px] uppercase tracking-widest text-cyan-400 font-bold mb-1 block">{art.tag}</span>
                                <h4 className="text-md sm:text-lg font-black leading-tight text-white group-hover:text-cyan-300 transition-colors">{art.title}</h4>
                            </div>
                           </a>
                        </article>
                      ))}
                   </div>
                </section>
                
             </div>

             {/* CYBER SIDEBAR (30%) */}
             <aside className="lg:col-span-4 flex flex-col gap-8">
                
                {/* Popular Widget */}
                <div className="bg-gradient-to-b from-white/[0.05] to-transparent p-6 border border-t-cyan-400 border-x-white/5 border-b-white/5 rounded-xl">
                   <h4 className="text-sm font-black uppercase tracking-widest mb-6 text-cyan-400 flex items-center gap-2"><Flame className="w-4 h-4"/> {ui.picks}</h4>
                   <div className="flex flex-col gap-6">
                      {articlesToRender.slice(0, 3).map((art: any, idx: number) => (
                        <a href={`/${art.id}`} key={art.id} className="flex gap-4 group cursor-pointer">
                          <div className="w-10 h-10 rounded-full bg-cyan-500/10 border border-cyan-500/30 flex items-center justify-center text-cyan-400 font-black text-lg group-hover:bg-cyan-400 group-hover:text-black transition-colors shrink-0">0{idx+1}</div>
                          <div>
                            <h5 className="font-bold text-sm leading-tight text-white group-hover:text-cyan-300 transition-colors">{art.title}</h5>
                          </div>
                        </a>
                      ))}
                   </div>
                </div>

                {/* Newsletter Sci-Fi Box */}
                <div className="bg-black/60 border border-pink-500/50 p-6 rounded-xl relative overflow-hidden">
                   <Send className="w-8 h-8 text-pink-400 mb-4" />
                   <h4 className="text-lg font-black uppercase mb-2">Protocol Sync</h4>
                   <form className="flex flex-col gap-3 relative z-10">
                      <input type="email" placeholder="jack@grid.net" className="w-full bg-black/80 border border-white/20 rounded-lg px-4 py-3 text-white font-mono text-sm outline-none focus:border-pink-500/50" required/>
                      <button type="submit" className="w-full bg-pink-500 hover:bg-pink-400 text-white font-black uppercase text-xs tracking-widest p-3 rounded-lg transition-colors">SYNC</button>
                   </form>
                </div>
                
             </aside>
          </div>
        </main>
      ) : (
        /* --- ARTICLE VIEW --- */
        <article className="relative z-10 bg-[#080314]">
          <div className="max-w-4xl mx-auto px-6 py-12">
            <a href="/" className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-cyan-400 hover:text-white mb-12 transition-colors inline-block">
               {ui.back}
            </a>

            <header className="mb-12 text-center md:text-left">
              <span className="inline-block px-3 py-1 bg-cyan-500/20 text-cyan-400 border border-cyan-500/30 rounded-lg text-[10px] font-black uppercase tracking-widest mb-6">
                Deep Dive // {displayArticle.tag}
              </span>
              <h1 className="text-4xl md:text-6xl font-black leading-tight mb-6 drop-shadow-[0_0_20px_rgba(34,211,238,0.3)] text-white">
                {displayArticle.title}
              </h1>
            </header>

            <div className="flex gap-10">
               <div className="hidden lg:block w-[160px] shrink-0">
                   <div className="sticky top-32 w-full h-[400px] bg-black/50 border border-pink-500/30 rounded-xl flex items-center justify-center flex-col cursor-pointer">
                      <span className="text-pink-500 px-2 text-[9px] font-black uppercase tracking-widest mb-2 writing-vertical-rl">{ui.sidebarAd}</span>
                   </div>
               </div>
               <div className="prose prose-invert prose-lg max-w-none flex-1 prose-headings:font-black prose-headings:text-white prose-p:text-violet-100/90 prose-p:leading-relaxed prose-a:text-cyan-400 hover:prose-a:text-pink-400 transition-colors">
                  {children}
               </div>
            </div>
          </div>
        </article>
      )}

      {/* Cyber Footer */}
      <footer className="relative z-10 border-t border-white/10 bg-black/60 mt-10 pt-16 pb-8">
         <div className="max-w-[1400px] mx-auto px-6 grid md:grid-cols-4 gap-12 mb-12 text-left">
            <div className="md:col-span-2">
               <div className="flex items-center gap-3 mb-6">
                  <Hexagon className="w-6 h-6 text-pink-500" />
                  <span className="text-2xl font-black tracking-tighter uppercase blur-[0.5px]">NEXUS</span>
               </div>
               <p className="text-white/40 max-w-sm mb-6 text-sm">Emitting protocols since 2026.</p>
            </div>
            <div>
               <h4 className="font-bold text-xs uppercase tracking-widest mb-4 text-cyan-400">Legal</h4>
               <ul className="space-y-3 text-sm text-white/50 font-mono">
                  <li><a href="/privacy" className="hover:text-pink-400 transition-colors">Privacidade</a></li>
                  <li><a href="/terms" className="hover:text-pink-400 transition-colors">Termos</a></li>
               </ul>
            </div>
            <div>
               <h4 className="font-bold text-xs uppercase tracking-widest mb-4 text-cyan-400">Social</h4>
               <div className="flex gap-4">
                  <a href="#" className="hover:text-pink-400 transition-colors"><Globe className="w-5 h-5"/></a>
                  <a href="#" className="hover:text-pink-400 transition-colors"><Share2 className="w-5 h-5"/></a>
                  <a href="#" className="hover:text-pink-400 transition-colors"><Instagram className="w-5 h-5"/></a>
               </div>
            </div>
         </div>
      </footer>
    </div>
  );
}