import { FormEvent } from 'react';
import { Search, ChevronRight, Clock, Star, Heart, Menu, User, BookOpen, ShieldCheck, CheckCircle2, Globe, Share2, Instagram } from 'lucide-react';

const DICT: Record<string, any> = {
  pt: {
    back: 'Voltar ao Guia',
    exclusive: 'CONTEÚDO EXCLUSIVO',
    compare: 'COMPARAR CARTÕES',
    readTime: 'MIN',
    articles: [
      { id: '1', title: 'Melhores Cartões de Crédito com Cashback em 2026', excerpt: 'Analisamos 15 cartões para descobrir qual deles realmente coloca dinheiro de volta no seu bolso em cada compra.', category: 'Cartões', time: '8', rating: '4.9', img: 'https://images.unsplash.com/photo-1556742111-a301076d9d18?auto=format&fit=crop&q=80&w=800' },
      { id: '2', title: 'Como Sair do Vermelho: O Guia de 5 Passos', excerpt: 'Dicas práticas para renegociar dívidas e organizar seu orçamento mensal sem sofrimento.', category: 'Educação', time: '12', rating: '4.8', img: 'https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&q=80&w=800' },
      { id: '3', title: 'Investindo em CDB: Vale a pena com a taxa SELIC atual?', excerpt: 'Entenda como a variação dos juros afeta seus rendimentos em renda fixa e quando diversificar.', category: 'Investimentos', time: '10', rating: '5.0', img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800' }
    ]
  }
};

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

  const articlesToRender = posts && posts.length > 0 ? posts.map((p, i) => ({
    id: p.slug || p.id,
    category: p.category_name || 'FINANÇAS',
    title: p.title,
    excerpt: p.excerpt,
    time: '8',
    rating: '4.9',
    img: p.image || `https://images.unsplash.com/photo-1556742111-a301076d9d18?auto=format&fit=crop&q=80&w=800&random=${i}`,
    content: p.content,
    date: new Date(p.created_at || Date.now()).toLocaleDateString('pt-BR')
  })) : ui.articles;

  const displayArticle = currentArticle ? {
    ...currentArticle,
    id: currentArticle.slug || currentArticle.id,
    category: currentArticle.category_name || 'FINANÇAS',
    time: '8',
    rating: '4.9',
    img: currentArticle.image || `https://images.unsplash.com/photo-1556742111-a301076d9d18?auto=format&fit=crop&q=80&w=800`
  } : articlesToRender[0];

  return (
    <div className="finance-portal bg-[#F5F8FA] text-[#0A2540] min-h-screen font-sans selection:bg-[#00CC88] selection:text-white">
      
      {/* Header - Trust & Professional */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm">
        <div className="max-w-[1280px] mx-auto px-6 h-[80px] flex justify-between items-center">
           <a href="/" className="flex items-center gap-2 cursor-pointer group">
              <div className="w-10 h-10 bg-[#00CC88] rounded-xl flex items-center justify-center transform -rotate-6 group-hover:rotate-0 transition-transform">
                 <ShieldCheck className="w-6 h-6 text-white"/>
              </div>
              <span className="text-2xl font-black text-[#0A2540] tracking-tighter">SMART<span className="text-[#00CC88]">WALLET</span></span>
           </a>

           <nav className="hidden lg:flex gap-10 text-xs font-black uppercase tracking-widest text-gray-500">
              <a href="/category/cartoes" className="hover:text-[#00CC88] transition-colors">Cartões</a>
              <a href="/category/investimentos" className="hover:text-[#00CC88] transition-colors">Investimentos</a>
              <a href="/category/emprestimos" className="hover:text-[#00CC88] transition-colors">Empréstimos</a>
              <a href="/ferramentas" className="hover:text-[#00CC88] transition-colors">Ferramentas</a>
           </nav>

           <div className="flex items-center gap-6">
              <Search className="w-6 h-6 text-gray-400 cursor-pointer hover:text-[#00CC88] transition-colors" />
              <button className="bg-[#0A2540] text-white text-[11px] font-black uppercase tracking-widest px-6 py-3 rounded-xl hover:bg-[#00CC88] transition-colors hidden sm:block">Entrar</button>
           </div>
        </div>
      </header>

      {activeView === 'home' ? (
        <main className="max-w-[1280px] mx-auto px-6 py-12">
          
          {/* Featured Hero Box */}
          <a href={`/${articlesToRender[0].id}`} className="bg-white rounded-[3rem] shadow-xl border border-gray-100 overflow-hidden mb-20 flex flex-col lg:flex-row group cursor-pointer block">
             <div className="lg:w-1/2 relative overflow-hidden">
                <img src={articlesToRender[0].img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" alt="Hero"/>
                <div className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent"></div>
             </div>
             <div className="lg:w-1/2 p-10 sm:p-16 flex flex-col justify-center">
                <span className="text-[#00CC88] font-black text-[10px] uppercase tracking-widest mb-6 block border border-[#00CC88]/20 w-fit px-3 py-1 rounded-full">{ui.exclusive}</span>
                <h1 className="text-4xl sm:text-5xl font-black leading-[1.05] tracking-tighter text-[#0A2540] mb-8 group-hover:text-[#00CC88] transition-colors">{articlesToRender[0].title}</h1>
                <p className="text-lg text-[#425466] font-medium leading-relaxed mb-10">{articlesToRender[0].excerpt}</p>
                <div className="flex items-center gap-6">
                   <div className="flex items-center gap-2 text-xs font-bold text-gray-400 uppercase tracking-widest"><Clock className="w-4 h-4"/> {articlesToRender[0].time} {ui.readTime}</div>
                   <div className="w-px h-4 bg-gray-200"></div>
                   <div className="flex items-center gap-1 text-xs font-bold text-[#0A2540]"><Star className="w-4 h-4 text-[#00CC88] fill-current"/> {articlesToRender[0].rating}</div>
                </div>
             </div>
          </a>

          {/* Info Grid */}
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-10">
             {articlesToRender.slice(1, 4).map((art: any, i: number) => (
                <a href={`/${art.id}`} key={art.id + i} className="bg-white p-8 rounded-[2rem] border border-gray-100 shadow-sm hover:shadow-xl transition-all group cursor-pointer flex flex-col">
                   <div className="w-full aspect-video rounded-2xl overflow-hidden mb-8 relative">
                      <img src={art.img} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" alt={art.title}/>
                   </div>
                   <span className="text-[10px] font-black uppercase text-[#00CC88] tracking-widest mb-3 block">{art.category}</span>
                   <h3 className="text-2xl font-black tracking-tight text-[#0A2540] leading-tight mb-6 group-hover:underline decoration-2 underline-offset-4">{art.title}</h3>
                   <div className="mt-auto flex items-center justify-between border-t border-gray-100 pt-6">
                      <div className="flex items-center gap-2 text-[10px] font-bold text-gray-400 uppercase tracking-widest"><Clock className="w-4 h-4"/> {art.time} {ui.readTime}</div>
                      <ChevronRight className="w-5 h-5 text-gray-300 group-hover:text-[#00CC88] group-hover:translate-x-1 transition-all"/>
                   </div>
                </a>
             ))}
          </div>

          {/* Trust Banner Ad */}
          <div className="mt-24 w-full bg-[#0A2540] text-white p-12 sm:p-20 rounded-[3rem] text-center relative overflow-hidden group shadow-2xl">
             <ShieldCheck className="w-64 h-64 absolute -right-20 -bottom-20 text-white/5 pointer-events-none group-hover:rotate-12 transition-transform duration-1000"/>
             <span className="text-[10px] font-black uppercase tracking-[0.4em] text-[#00CC88] mb-8 block">Parceiro Certificado SmartWallet</span>
             <h3 className="text-4xl sm:text-5xl font-black uppercase tracking-tighter mb-6 leading-none">Proteja seu patrimônio digital.</h3>
             <p className="text-lg text-[#ADBDCC] font-medium max-w-xl mx-auto mb-10 leading-relaxed">Nossa tecnologia de criptografia militar garante que suas simulações de investimento nunca saiam do seu navegador.</p>
             <button className="bg-[#00CC88] text-[#0A2540] px-12 py-4 text-xs font-black uppercase tracking-widest rounded-xl hover:bg-green-400 transition-colors shadow-lg">Começar Agora</button>
          </div>

        </main>
      ) : (
        /* --- ARTICLE VIEW --- */
        <article className="max-w-[1280px] mx-auto px-6 py-20">
           <div className="max-w-[800px] mx-auto">
              <a href="/" className="text-[10px] font-black uppercase tracking-widest text-[#00CC88] hover:text-[#0A2540] transition-colors block mb-12 flex items-center gap-2">
                 ← {ui.back}
              </a>
              
              <header className="mb-16">
                 <span className="text-xs font-black uppercase tracking-widest text-gray-400 block mb-6">{displayArticle.category}</span>
                 <h1 className="text-5xl sm:text-7xl font-black leading-[1.05] tracking-tighter text-[#0A2540] mb-10">
                    {displayArticle.title}
                 </h1>
                 <div className="flex items-center gap-4 py-8 border-y border-gray-100 text-xs font-black uppercase tracking-widest text-[#425466]">
                    <div className="flex items-center gap-2"><CheckCircle2 className="w-5 h-5 text-[#00CC88]"/> Conteúdo Verificado</div>
                    <div className="ml-auto flex items-center gap-6 hidden sm:flex">
                       <span className="flex items-center gap-2"><Clock className="w-4 h-4"/> {displayArticle.time} {ui.readTime}</span>
                       <span className="flex items-center gap-1 text-[#0A2540]"><Star className="w-4 h-4 text-[#00CC88] fill-current"/> {displayArticle.rating}</span>
                    </div>
                 </div>
              </header>

              <div className="prose prose-lg max-w-none text-[#425466] font-medium leading-[1.8] prose-headings:font-black prose-headings:text-[#0A2540] prose-headings:tracking-tighter prose-a:text-[#00CC88] prose-img:rounded-[2rem] prose-img:shadow-2xl">
                 {children}
              </div>
           </div>
        </article>
      )}

      {/* Trust Footer */}
      <footer className="bg-white border-t border-gray-200 pt-24 pb-12 font-sans">
         <div className="max-w-[1280px] mx-auto px-6 grid md:grid-cols-4 gap-16 border-b border-gray-100 pb-20 mb-12">
            
            <div className="md:col-span-2">
               <div className="flex items-center gap-2 mb-6">
                  <div className="w-10 h-10 bg-[#00CC88] rounded-xl flex items-center justify-center transform -rotate-6">
                     <ShieldCheck className="w-6 h-6 text-white"/>
                  </div>
                  <span className="text-2xl font-black text-[#0A2540] tracking-tighter uppercase">SMART<span className="text-[#00CC88]">WALLET</span></span>
               </div>
               <p className="text-gray-500 text-sm font-medium leading-relaxed max-w-sm mb-8">Arquitetura de portal financeiro focada em autoridade e confiança. Design premium inspirado nos maiores portais de investimento do mundo.</p>
               <div className="flex gap-4">
                  <a href="#" className="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center hover:bg-[#00CC88] hover:text-white transition-colors border border-gray-100"><Instagram className="w-5 h-5"/></a>
                  <a href="#" className="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center hover:bg-[#00CC88] hover:text-white transition-colors border border-gray-100"><Globe className="w-5 h-5"/></a>
                  <a href="#" className="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center hover:bg-[#00CC88] hover:text-white transition-colors border border-gray-100"><Share2 className="w-5 h-5"/></a>
               </div>
            </div>
            
            <div>
               <h4 className="font-black text-[#0A2540] uppercase tracking-widest text-xs mb-6">Políticas</h4>
               <ul className="space-y-4 text-sm font-bold text-gray-500">
                  <li><a href="/privacy" className="hover:text-[#00CC88] transition-colors">Privacidade</a></li>
                  <li><a href="/terms" className="hover:text-[#00CC88] transition-colors">Termos de Uso</a></li>
                  <li><a href="/contact" className="hover:text-[#00CC88] transition-colors">Contato</a></li>
               </ul>
            </div>
            
            <div>
               <h4 className="font-black text-[#0A2540] uppercase tracking-widest text-xs mb-6">Produtos</h4>
               <ul className="space-y-4 text-sm font-bold text-gray-500">
                  <li><a href="/search" className="hover:text-[#00CC88] transition-colors">Cartões</a></li>
                  <li><a href="/search" className="hover:text-[#00CC88] transition-colors">Investimentos</a></li>
                  <li><a href="/search" className="hover:text-[#00CC88] transition-colors">Simuladores</a></li>
               </ul>
            </div>

         </div>
         
         <div className="text-center font-black uppercase tracking-[0.4em] text-[9px] text-gray-400">
            © {new Date().getFullYear()} SmartWallet Group. Built by Autoblog.
         </div>
      </footer>
    </div>
  );
}