import { Menu, Search, Flame, Mail, ChevronRight, PlayCircle, Share2, Globe, Instagram } from 'lucide-react';

const DICT: Record<string, any> = {
  pt: {
    back: '← Voltar à Capa',
    sections: 'SEÇÕES',
    subscribe: 'Assinar',
    live: 'AO VIVO: APPLE REVELA NOVA LINHA DE MACBOOKS M5',
    trending: 'Em Alta',
    latestNews: 'Feed Global',
    sidebarAd: 'ANÚNCIO',
    stayConnected: 'Siga-nos',
    popular: 'Populares',
    reviewsCategory: 'REVIEWS E HARDWARE',
    softwareCategory: 'SISTEMAS & IA',
    loadMore: 'Carregar Mais',
    subscribeBtn: 'Inscrever-se',
    newsletterTitle: 'Newsletter Oficial',
    breakingNews: { 
      category: 'Exclusivo'
    }
  }
};

export default function MagazineTheme({ 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...',
    category: p.data.category || 'Tech',
    author: p.data.author || 'Redação',
    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 || '',
    category: currentArticle.data.category || 'Tech',
    author: currentArticle.data.author || 'Redação',
    date: currentArticle.data.date ? new Date(currentArticle.data.date).toLocaleDateString('pt-BR') : 'Hoje'
  } : articlesToRender[0];

  return (
    <div className="magazine-scroll-container bg-[#f5f5f5] text-gray-900 min-h-full font-sans overflow-y-auto selection:bg-orange-500 selection:text-white pb-32">
      
      {/* Top Banner Alert */}
      <div className="bg-black text-white text-xs font-bold uppercase tracking-widest px-6 py-2 flex items-center justify-between">
         <div className="flex items-center gap-2 cursor-pointer text-orange-500 hover:text-white transition-colors">
           <Flame className="w-4 h-4" /> <span className="hidden sm:inline">{ui.live}</span>
         </div>
         <div className="flex items-center gap-4 text-[10px]">
            <span>{new Date().toLocaleDateString()}</span>
            <div className="hidden sm:flex gap-3">
               <Globe className="w-3 h-3 hover:text-blue-500 cursor-pointer"/>
               <Share2 className="w-3 h-3 hover:text-blue-400 cursor-pointer"/>
               <Mail className="w-3 h-3 hover:text-red-500 cursor-pointer"/>
            </div>
         </div>
      </div>

      {/* Header */}
      <header className="bg-white border-b-2 border-gray-200 sticky top-0 z-40 shadow-sm">
        <div className="max-w-[1400px] mx-auto">
            {/* Logo Row */}
            <div className="h-24 px-6 flex items-center justify-between">
              <button className="flex items-center gap-2 font-black uppercase text-xs hover:text-orange-600 transition-colors">
                <Menu className="w-6 h-6" /> <span className="hidden sm:block">{ui.sections}</span>
              </button>
              
              <a href="/" className="text-4xl md:text-5xl font-black tracking-tighter uppercase cursor-pointer flex flex-col items-center">
                <div>THE<span className="text-orange-600">WIRED</span>MAG</div>
              </a>

              <div className="flex items-center gap-4">
                <button className="hover:text-orange-600 transition-colors"><Search className="w-6 h-6" /></button>
              </div>
            </div>

            {/* Navigation Row */}
            <nav className="h-14 px-6 flex items-center justify-center gap-8 text-xs font-black uppercase tracking-widest overflow-x-auto whitespace-nowrap bg-gray-50 border-t border-gray-200">
               <a href="/" className="hover:text-orange-600 border-b-2 border-transparent hover:border-orange-600 h-full flex items-center">Tecnologia</a>
               <a href="/" className="hover:text-orange-600 border-b-2 border-transparent hover:border-orange-600 h-full flex items-center">Reviews</a>
               <a href="/" className="hover:text-orange-600 border-b-2 border-transparent hover:border-orange-600 h-full flex items-center">Games</a>
               <a href="/login" className="text-gray-500 hover:text-black flex items-center gap-1"><PlayCircle className="w-4 h-4"/> AUTH_PORTAL</a>
            </nav>
        </div>
      </header>

      {activeView === 'home' ? (
        <main className="max-w-[1400px] mx-auto px-6 py-8">
          
          {/* Ad Space Top Leaderboard */}
          <div className="w-full max-w-[970px] h-[90px] bg-gray-200 mx-auto mb-10 flex flex-col items-center justify-center border border-gray-300 text-gray-400 group cursor-pointer">
             <span className="text-[10px] font-bold uppercase tracking-widest mb-1">{ui.sidebarAd} 970x90</span>
             <span className="text-xs group-hover:text-blue-500 font-bold uppercase">Publicidade Premium</span>
          </div>

          {/* JNews Style Masonry Bento Hero */}
          <section className="grid lg:grid-cols-4 lg:grid-rows-2 gap-4 mb-14 h-auto lg:h-[600px]">
             
             {/* Huge Left Panel */}
             <article className="lg:col-span-2 lg:row-span-2 relative group overflow-hidden cursor-pointer">
                <a href={`/${articlesToRender[0]?.id}`} className="block w-full h-full">
                  <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" alt="Chip"/>
                  <div className="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent flex flex-col justify-end p-8">
                    <div className="mb-2"><span className="bg-orange-600 text-white text-[10px] font-black uppercase tracking-widest px-2 py-1">{ui.breakingNews.category}</span></div>
                    <h2 className="text-3xl sm:text-4xl lg:text-5xl font-black text-white leading-tight mt-2 drop-shadow-lg group-hover:text-orange-500 transition-colors">{articlesToRender[0]?.title}</h2>
                    <div className="mt-4 flex items-center gap-3 text-xs font-bold text-gray-300 uppercase tracking-widest">
                      <span>Por {articlesToRender[0]?.author}</span> <span>|</span> <span>{articlesToRender[0]?.date}</span>
                    </div>
                  </div>
                </a>
             </article>

             {/* Small Right Panels */}
             {articlesToRender.slice(1, 5).map((itm: any, idx: number) => (
                <article key={itm.id} className="relative group overflow-hidden cursor-pointer h-[250px] lg:h-auto">
                   <a href={`/${itm.id}`} className="block w-full h-full">
                    <img src={`https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80&w=400&random=${idx}`} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" alt={itm.title} />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent flex flex-col justify-end p-4 lg:p-6">
                        <div className="mb-2"><span className="bg-black/60 backdrop-blur-sm border border-white/20 text-white text-[9px] font-black uppercase tracking-widest px-2 py-0.5">{itm.category}</span></div>
                        <h3 className="text-lg lg:text-xl font-bold text-white leading-tight drop-shadow-md group-hover:text-orange-500 transition-colors">{itm.title}</h3>
                    </div>
                   </a>
                </article>
             ))}
          </section>

          {/* 70/30 Layout: Main Content + Sidebar */}
          <div className="grid lg:grid-cols-12 gap-10">
             
             {/* LEFT MAIN CONTENT (70%) */}
             <div className="lg:col-span-8 flex flex-col gap-12">
                
                <section>
                   <div className="flex items-center justify-between border-b-2 border-black pb-2 mb-6">
                      <h3 className="text-2xl font-black uppercase">{ui.latestNews}</h3>
                   </div>
                   
                   <div className="flex flex-col gap-6">
                      {articlesToRender.slice(5).map((post: any) => (
                        <article key={post.id} className="group cursor-pointer border-b border-gray-200 pb-6 last:border-0">
                           <a href={`/${post.id}`} className="flex flex-col sm:flex-row gap-6">
                            <div className="sm:w-64 h-40 shrink-0 overflow-hidden relative">
                                <img src={`https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=400&random=${post.id}`} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt={post.title}/>
                                <span className="absolute top-2 left-2 bg-orange-600 text-white text-[9px] font-black uppercase px-2 py-0.5">{post.category}</span>
                            </div>
                            <div className="flex flex-col justify-center flex-1">
                                <h4 className="text-2xl font-bold leading-tight mb-3 group-hover:text-orange-600 transition-colors">{post.title}</h4>
                                <p className="text-gray-500 text-sm mb-3">{post.excerpt}</p>
                                <div className="text-[10px] font-bold uppercase tracking-widest text-gray-400">
                                  {post.date}
                                </div>
                            </div>
                           </a>
                        </article>
                      ))}
                   </div>
                </section>

                {/* Inline Banner Main Ad */}
                <div className="w-full h-[150px] bg-gray-200 flex flex-col items-center justify-center border border-gray-300 text-gray-400 my-4 cursor-pointer">
                   <span className="text-[10px] font-bold uppercase tracking-widest mb-1">{ui.sidebarAd} 728x90</span>
                </div>

                {/* Category Block 2 (Grid View) */}
                <section>
                   <div className="flex items-center justify-between border-b-2 border-black pb-2 mb-6">
                      <h3 className="text-2xl font-black uppercase">{ui.reviewsCategory}</h3>
                   </div>
                   
                   <div className="grid sm:grid-cols-2 gap-8">
                       <article className="group cursor-pointer">
                          <a href="/" className="block">
                            <div className="w-full h-48 overflow-hidden mb-4"><img src="https://images.unsplash.com/photo-1605379399642-870262d3d051?auto=format&fit=crop&q=80&w=600" className="w-full h-full object-cover group-hover:scale-105 transition-transform" /></div>
                            <span className="text-orange-600 text-[10px] font-black uppercase tracking-widest block mb-2">Editor's Choice</span>
                            <h4 className="text-xl font-bold leading-tight group-hover:text-orange-600">Review: Novo Hardware B2B</h4>
                          </a>
                       </article>
                       <article className="group cursor-pointer">
                          <a href="/" className="block">
                            <div className="w-full h-48 overflow-hidden mb-4"><img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80&w=600" className="w-full h-full object-cover group-hover:scale-105 transition-transform" /></div>
                            <span className="text-blue-600 text-[10px] font-black uppercase tracking-widest block mb-2">Display</span>
                            <h4 className="text-xl font-bold leading-tight group-hover:text-blue-600">Testamos os Novos Monitores 8K</h4>
                          </a>
                       </article>
                   </div>
                </section>

             </div>

             {/* RIGHT SIDEBAR (30%) */}
             <aside className="lg:col-span-4 flex flex-col gap-10">
                
                {/* Stay Connected Widget */}
                <div className="bg-white p-6 border border-gray-200 shadow-sm">
                   <h4 className="text-lg font-black uppercase text-center mb-6 relative">
                     <span className="bg-white px-4 relative z-10">{ui.stayConnected}</span>
                     <div className="absolute top-1/2 left-0 w-full h-px bg-gray-200 z-0"></div>
                   </h4>
                   <div className="grid grid-cols-2 gap-4">
                      <div className="bg-[#1877F2]/10 text-[#1877F2] p-4 text-center cursor-pointer hover:bg-[#1877F2] hover:text-white transition-colors flex flex-col items-center gap-2">
                         <Globe className="w-6 h-6" /> <span className="font-bold text-sm">240.5k</span>
                      </div>
                      <div className="bg-[#1DA1F2]/10 text-[#1DA1F2] p-4 text-center cursor-pointer hover:bg-[#1DA1F2] hover:text-white transition-colors flex flex-col items-center gap-2">
                         <Share2 className="w-6 h-6" /> <span className="font-bold text-sm">82.1k</span>
                      </div>
                   </div>
                </div>

                {/* Popular Widget */}
                <div className="bg-white p-6 border border-gray-200 shadow-sm relative overflow-hidden">
                   <div className="absolute top-0 left-0 w-full h-1 bg-orange-600"></div>
                   <h4 className="text-xl font-black uppercase mb-6 flex items-center gap-2">
                     <Flame className="w-5 h-5 text-orange-600"/> {ui.popular}
                   </h4>
                   <div className="flex flex-col gap-5">
                      {articlesToRender.slice(0, 5).map((art, num) => (
                        <a href={`/${art.id}`} key={art.id} className="flex gap-4 items-center group">
                          <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 font-black text-xl group-hover:bg-orange-600 group-hover:text-white transition-colors shrink-0">{num+1}</div>
                          <h5 className="font-bold text-sm leading-tight group-hover:text-orange-600 transition-colors">{art.title}</h5>
                        </a>
                      ))}
                   </div>
                </div>

                {/* Newsletter Widget */}
                <div className="relative bg-black text-white p-6 border-b-4 border-orange-600 text-center">
                   <Mail className="w-10 h-10 text-orange-500 mx-auto mb-4" />
                   <h4 className="text-xl font-black uppercase mb-2">{ui.newsletterTitle}</h4>
                   <form className="flex flex-col gap-2">
                      <input type="email" placeholder="Email" className="w-full text-black px-4 py-3 font-bold outline-none text-center" required />
                      <button type="submit" className="w-full bg-orange-600 hover:bg-orange-500 text-white font-black uppercase py-3 transition-colors">{ui.subscribeBtn}</button>
                   </form>
                </div>
                
             </aside>
          </div>
        </main>
      ) : (
        /* --- ARTICLE VIEW --- */
        <article className="bg-[#f5f5f5]">
           <div className="max-w-4xl mx-auto px-6 py-12 bg-white shadow-lg my-12 border-t-8 border-black">
             <a href="/" className="mb-8 text-xs font-bold uppercase tracking-widest text-gray-500 hover:text-orange-600 inline-block">
               {ui.back}
             </a>
             
             <div className="text-center mb-10">
               <span className="bg-black text-white px-3 py-1 text-xs font-black uppercase tracking-widest">{displayArticle.category}</span>
               <h1 className="text-4xl md:text-6xl font-black tracking-tight leading-[1.05] mt-6 mb-6">{displayArticle.title}</h1>
               <p className="text-xl md:text-2xl text-gray-600 font-medium leading-relaxed max-w-3xl mx-auto">{displayArticle.excerpt}</p>
             </div>

             <div className="flex items-center justify-center gap-6 py-4 border-y border-gray-200 mb-10">
               <div className="flex items-center gap-3">
                 <div className="w-10 h-10 bg-gray-200 rounded-full"></div>
                 <div className="text-left font-sans">
                   <span className="block font-bold text-sm">Escrito por {displayArticle.author}</span>
                   <span className="block text-xs uppercase text-gray-500">{displayArticle.date}</span>
                 </div>
               </div>
             </div>

             <div className="flex gap-10">
               <div className="hidden lg:block w-[160px] shrink-0">
                   <div className="sticky top-32 w-full h-[400px] bg-gray-100 flex items-center justify-center border border-gray-200 text-gray-400 font-bold text-xs uppercase writing-vertical-rl text-center">
                     {ui.sidebarAd} 160x600
                   </div>
               </div>
               <div className="prose prose-lg max-w-none flex-1 prose-headings:font-black prose-a:text-orange-600 hover:prose-a:underline prose-p:text-gray-800">
                  {children}
               </div>
             </div>
           </div>
        </article>
      )}

      {/* Footer Mega */}
      <footer className="bg-black text-white pt-20 pb-10">
        <div className="max-w-[1400px] mx-auto px-6 grid md:grid-cols-4 gap-12 border-b border-gray-800 pb-16 mb-8 text-left">
           <div className="md:col-span-2">
             <div className="text-3xl font-black tracking-tighter uppercase mb-6">
                THE<span className="text-orange-600">WIRED</span>MAG
             </div>
             <p className="text-gray-400 mb-6 max-w-sm">A maior plataforma global para jornalismo de tecnologia independente.</p>
             <div className="flex gap-4">
                <a href="#" className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-orange-600 transition-colors"><Globe className="w-4 h-4"/></a>
                <a href="#" className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-orange-600 transition-colors"><Share2 className="w-4 h-4"/></a>
                <a href="#" className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-orange-600 transition-colors"><Instagram className="w-4 h-4"/></a>
             </div>
           </div>
           <div>
              <h4 className="font-black text-sm uppercase tracking-widest mb-6">Legal</h4>
              <ul className="space-y-4 text-sm font-bold text-gray-400">
                 <li><a href="/privacy" className="hover:text-orange-500">Privacidade</a></li>
                 <li><a href="/terms" className="hover:text-orange-500">Termos de Uso</a></li>
              </ul>
           </div>
        </div>
        <div className="max-w-[1400px] mx-auto px-6 text-center text-xs font-bold text-gray-600 uppercase tracking-widest">
           &copy; {new Date().getFullYear()} THE WIRED MAG
        </div>
      </footer>
    </div>
  );
}