import { FormEvent } from 'react';
import { Search, Menu, TrendingUp, TrendingDown, ChevronRight, Activity, Zap, Box, Hexagon, BarChart2, Globe, Share2, Instagram } from 'lucide-react';

const DICT: Record<string, any> = {
  pt: {
    back: 'Voltar ao Tracker',
    live: 'DADOS AO VIVO',
    trending: 'EM ALTA',
    readTime: 'MIN',
    articles: [
      { id: '1', title: 'Bitcoin Rompe Barreira dos $70k com ETF Spot', excerpt: 'Entrada massiva de capital institucional acelera a escassez on-chain antes do halving.', category: 'Bitcoin', time: '4', img: 'https://images.unsplash.com/photo-1518544801976-3e159e50e5bb?auto=format&fit=crop&q=80&w=800' },
      { id: '2', title: 'Ethereum 2.0: O Impacto do Sharding na Escalabilidade', excerpt: 'Como a nova atualização promete reduzir as taxas de gas em até 90% para usuários finais.', category: 'Ethereum', time: '7', img: 'https://images.unsplash.com/photo-1622737133809-d95047b90223?auto=format&fit=crop&q=80&w=800' },
      { id: '3', title: 'Regulação de Cripto na UE: O que Muda com a MiCA', excerpt: 'As novas diretrizes europeias que podem servir de modelo para o resto do mundo financeiro.', category: 'Regulação', time: '10', img: 'https://images.unsplash.com/photo-1639762681485-074b7f938ba0?auto=format&fit=crop&q=80&w=800' }
    ]
  }
};

export default function CryptoTheme({ 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 || 'CRYPTO',
    title: p.title,
    excerpt: p.excerpt,
    time: '4',
    rating: '4.9',
    img: p.image || `https://images.unsplash.com/photo-1518544801976-3e159e50e5bb?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 || 'CRYPTO',
    time: '4',
    rating: '4.9',
    img: currentArticle.image || `https://images.unsplash.com/photo-1518544801976-3e159e50e5bb?auto=format&fit=crop&q=80&w=800`
  } : articlesToRender[0];

  const COIN_DATA = [
    { rank: 1, name: 'Bitcoin', symbol: 'BTC', price: '$68,432.12', h24: -1.2, d7: +5.4, cap: '$1,342B', vol: '$42B', color: '#F7931A' },
    { rank: 2, name: 'Ethereum', symbol: 'ETH', price: '$3,842.50', h24: +2.1, d7: +1.2, cap: '$462B', vol: '$18B', color: '#627EEA' },
    { rank: 3, name: 'Tether', symbol: 'USDT', price: '$1.00', h24: 0.0, d7: 0.0, cap: '$110B', vol: '$65B', color: '#26A17B' },
    { rank: 4, name: 'Solana', symbol: 'SOL', price: '$145.22', h24: -4.5, d7: +12.8, cap: '$64B', vol: '$4.2B', color: '#14F195' },
    { rank: 5, name: 'BNB', symbol: 'BNB', price: '$588.40', h24: +0.8, d7: -2.3, cap: '$88B', vol: '$1.2B', color: '#F3BA2F' },
  ];

  return (
    <div className="crypto-terminal bg-[#0B0E14] text-[#EAECEF] min-h-screen font-sans selection:bg-[#FCD535] selection:text-black">
      
      {/* Crypto Header - Terminal Style */}
      <header className="bg-[#181A20] border-b border-[#2B3139] sticky top-0 z-50 shadow-2xl">
        <div className="max-w-[1440px] mx-auto px-6 h-[72px] flex justify-between items-center">
           <a href="/" className="flex items-center gap-3 cursor-pointer group">
              <div className="w-8 h-8 bg-[#FCD535] rounded-md flex items-center justify-center text-[#181A20] group-hover:rotate-45 transition-transform">
                 <Hexagon className="w-5 h-5 fill-[#181A20]"/>
              </div>
              <span className="text-xl font-black text-[#EAECEF] tracking-tighter uppercase">COIN<span className="text-[#FCD535]">RADAR</span></span>
           </a>

           <div className="hidden lg:flex gap-8 text-[11px] font-black uppercase tracking-widest text-[#848E9C]">
              <a href="/category/mercado" className="hover:text-white transition-colors">Mercado</a>
              <a href="/category/bitcoin" className="hover:text-white transition-colors">Bitcoin</a>
              <a href="/category/ethereum" className="hover:text-white transition-colors">Ethereum</a>
              <a href="/swap" className="hover:text-[#FCD535] transition-colors">Swap Beta</a>
           </div>

           <div className="flex items-center gap-6">
              <div className="hidden sm:flex items-center bg-[#2B3139] rounded-lg px-4 py-2 border border-transparent focus-within:border-[#FCD535] transition-all">
                 <Search className="w-4 h-4 text-[#848E9C]"/>
                 <input type="text" placeholder="Buscar ativo..." className="bg-transparent border-none outline-none pl-3 text-[11px] font-bold text-white w-32"/>
              </div>
              <button className="bg-[#FCD535] text-[#181A20] text-[10px] font-black uppercase tracking-widest px-6 py-2.5 rounded hover:bg-white transition-colors">Connect</button>
           </div>
        </div>
      </header>

      {activeView === 'home' ? (
        <main className="max-w-[1440px] mx-auto px-6 py-10 pb-32">
          
          <div className="grid lg:grid-cols-12 gap-8 mb-12">
             {/* Main Hero News Area */}
             <div className="lg:col-span-8 flex flex-col gap-6">
                <a href={`/${articlesToRender[0].id}`} className="w-full bg-gradient-to-br from-[#181A20] to-[#2B3139] rounded-2xl border border-[#2B3139] p-8 lg:p-12 group cursor-pointer relative overflow-hidden shadow-2xl block">
                   <div className="absolute -right-20 -bottom-20 opacity-5 group-hover:scale-110 transition-transform duration-1000">
                      <Hexagon className="w-96 h-96 text-[#FCD535]"/>
                   </div>
                   <div className="relative z-10">
                      <span className="bg-[#FCD535] text-[#181A20] px-3 py-1 rounded text-[10px] font-black uppercase tracking-widest mb-6 inline-block">{ui.live}</span>
                      <h1 className="text-4xl sm:text-6xl font-black text-white leading-[1.1] tracking-tighter mb-8 group-hover:text-[#FCD535] transition-colors">{articlesToRender[0].title}</h1>
                      <p className="text-[#848E9C] text-lg font-medium leading-relaxed max-w-2xl">{articlesToRender[0].excerpt}</p>
                   </div>
                </a>

                <div className="grid sm:grid-cols-2 gap-6">
                   {[articlesToRender[1], articlesToRender[2]].map((art: any, i: number) => (
                      <a href={`/${art.id}`} key={art.id + i} className="bg-[#181A20] rounded-2xl border border-[#2B3139] p-6 cursor-pointer hover:border-[#FCD535]/50 transition-colors group flex flex-col h-full shadow-lg block">
                         <div className="w-full aspect-video rounded-xl overflow-hidden mb-6 bg-[#0B0E14]">
                            <img src={art.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" alt={art.title}/>
                         </div>
                         <h3 className="text-xl font-black text-white leading-tight mb-4">{art.title}</h3>
                         <div className="mt-auto flex items-center gap-2 text-[10px] font-bold text-[#848E9C] uppercase tracking-widest">
                            <Activity className="w-3 h-3 text-[#0ECB81]"/> {art.category} • {art.time} {ui.readTime}
                         </div>
                      </a>
                   ))}
                </div>
             </div>

             {/* Live Trending Sidebar */}
             <div className="lg:col-span-4 flex flex-col gap-8">
                <div className="bg-[#181A20] rounded-2xl border border-[#2B3139] p-6 shadow-2xl">
                   <div className="flex items-center justify-between mb-8 pb-4 border-b border-[#2B3139]">
                      <h2 className="text-white font-black text-lg flex items-center gap-2"><Zap className="w-5 h-5 text-[#FCD535] fill-current"/> {ui.trending}</h2>
                      <button className="text-[10px] font-black text-[#FCD535] uppercase hover:underline">View All</button>
                   </div>
                   <div className="flex flex-col gap-6">
                      {COIN_DATA.map((coin) => (
                         <div key={coin.symbol} className="flex items-center justify-between group cursor-pointer">
                            <div className="flex items-center gap-4">
                               <div className="w-10 h-10 rounded-full flex items-center justify-center font-black text-sm text-white border border-[#2B3139]" style={{backgroundColor: `${coin.color}20`, borderColor: `${coin.color}40`}}>
                                  {coin.symbol[0]}
                               </div>
                               <div>
                                  <h4 className="text-sm font-black text-white">{coin.name}</h4>
                                  <p className="text-[10px] font-bold text-[#848E9C]">{coin.symbol}</p>
                               </div>
                            </div>
                            <div className="text-right">
                               <div className="text-sm font-black text-white">{coin.price}</div>
                               <div className={`text-[10px] font-bold ${coin.h24 >= 0 ? 'text-[#0ECB81]' : 'text-[#F6465D]'}`}>
                                  {coin.h24 >= 0 ? '+' : ''}{coin.h24}%
                               </div>
                            </div>
                         </div>
                      ))}
                   </div>
                </div>

                {/* Sidebar Banner Ad */}
                <div className="w-full bg-[#FCD535] rounded-2xl p-8 text-center group cursor-pointer hover:bg-white transition-colors shadow-2xl">
                   <Box className="w-16 h-16 text-[#181A20] mx-auto mb-6 group-hover:scale-110 transition-transform"/>
                   <h3 className="text-2xl font-black text-[#181A20] tracking-tighter uppercase mb-4 leading-none">Cold Wallet Hub.</h3>
                   <p className="text-[#181A20]/70 text-xs font-bold mb-6">Proteja suas chaves privadas com a melhor custódia do mercado.</p>
                   <button className="bg-[#181A20] text-white w-full py-3 rounded-lg font-black uppercase text-[10px] tracking-widest shadow-xl">Comprar Agora</button>
                </div>
             </div>
          </div>

          {/* Crypto Stats Table Row */}
          <div className="bg-[#181A20] rounded-2xl border border-[#2B3139] shadow-2xl overflow-hidden">
             <div className="p-6 border-b border-[#2B3139] flex items-center justify-between">
                <h2 className="text-white font-black text-lg">Top Market Capitalization</h2>
             </div>
             <div className="overflow-x-auto">
                <table className="w-full text-left">
                   <thead className="bg-[#0B0E14]/50 text-[#848E9C] text-[10px] font-black uppercase tracking-widest">
                      <tr>
                         <th className="px-6 py-4">Rank</th>
                         <th className="px-6 py-4">Name</th>
                         <th className="px-6 py-4 text-right">Price</th>
                         <th className="px-6 py-4 text-right">24h %</th>
                         <th className="px-6 py-4 text-right hidden md:table-cell">Market Cap</th>
                         <th className="px-6 py-4 text-right hidden lg:table-cell">Volume (24h)</th>
                      </tr>
                   </thead>
                   <tbody className="divide-y divide-[#2B3139]">
                      {COIN_DATA.map((coin) => (
                         <tr key={coin.rank} className="hover:bg-[#2B3139]/30 transition-colors cursor-pointer group">
                            <td className="px-6 py-4 text-[#848E9C] font-bold">{coin.rank}</td>
                            <td className="px-6 py-4 flex items-center gap-3">
                               <span className="font-black text-white">{coin.name}</span>
                               <span className="text-[#848E9C] font-bold">{coin.symbol}</span>
                            </td>
                            <td className="px-6 py-4 text-right font-black text-white">{coin.price}</td>
                            <td className={`px-6 py-4 text-right font-black ${coin.h24 >= 0 ? 'text-[#0ECB81]' : 'text-[#F6465D]'}`}>
                               {coin.h24 >= 0 ? '+' : ''}{coin.h24}%
                            </td>
                            <td className="px-6 py-4 text-right font-bold text-[#B7BDC6] hidden md:table-cell">{coin.cap}</td>
                            <td className="px-6 py-4 text-right font-bold text-[#B7BDC6] hidden lg:table-cell">{coin.vol}</td>
                         </tr>
                      ))}
                   </tbody>
                </table>
             </div>
          </div>

        </main>
      ) : (
        /* --- ARTICLE VIEW --- */
        <article className="max-w-[1000px] mx-auto px-6 py-16 pb-32 bg-[#0B0E14]">
           <div className="max-w-[800px] mx-auto">
              <a href="/" className="text-[10px] font-black uppercase tracking-widest text-[#848E9C] hover:text-[#FCD535] transition-colors block mb-12">
                 ← {ui.back}
              </a>
              
              <header className="mb-16">
                 <span className="bg-[#2B3139] text-[#FCD535] px-3 py-1 rounded text-[10px] font-black uppercase tracking-widest mb-6 inline-block border border-[#FCD535]/10">{displayArticle.category}</span>
                 <h1 className="text-4xl sm:text-6xl font-black leading-[1.1] tracking-tighter text-white mb-10 italic">
                    {displayArticle.title}
                 </h1>
                 <p className="text-xl text-[#848E9C] font-medium leading-relaxed border-l-4 border-[#FCD535] pl-8 my-10">
                    {displayArticle.excerpt} Cobertura on-chain completa por especialistas do terminal Radar.
                 </p>
                 <div className="flex items-center gap-8 py-8 border-y border-[#2B3139] text-[10px] font-black uppercase tracking-widest text-[#848E9C]">
                    <div className="flex items-center gap-2"><Zap className="w-4 h-4 text-[#FCD535]"/> Breaking News</div>
                    <div className="ml-auto flex items-center gap-6 hidden sm:flex">
                       <span className="flex items-center gap-2"><Activity className="w-4 h-4 text-[#0ECB81]"/> Live Feed</span>
                       <span className="flex items-center gap-2"><Clock className="w-4 h-4"/> {displayArticle.time} {ui.readTime}</span>
                    </div>
                 </div>
              </header>

              <div className="prose prose-lg prose-invert max-w-none text-[#B7BDC6] font-medium leading-[1.8] prose-headings:font-black prose-headings:uppercase prose-headings:tracking-tighter prose-headings:text-white prose-a:text-[#FCD535] prose-img:rounded-[2rem] prose-img:border prose-img:border-[#2B3139] prose-blockquote:border-[#FCD535] prose-blockquote:bg-[#181A20]">
                 {children}
              </div>
           </div>
        </article>
      )}

      {/* Crypto Terminal Footer */}
      <footer className="bg-[#181A20] text-[#EAECEF] pt-24 pb-12 font-sans border-t border-[#2B3139]">
         <div className="max-w-[1440px] mx-auto px-6 grid md:grid-cols-4 gap-16 border-b border-[#2B3139] pb-20 mb-12">
            
            <div className="md:col-span-2">
               <div className="flex items-center gap-3 mb-8">
                  <div className="w-10 h-10 bg-[#FCD535] rounded-lg flex items-center justify-center text-[#181A20]">
                     <Hexagon className="w-6 h-6 fill-[#181A20]"/>
                  </div>
                  <span className="text-2xl font-black tracking-tighter uppercase text-white">COIN<span className="text-[#FCD535]">RADAR</span></span>
               </div>
               <p className="text-[#848E9C] text-sm font-medium leading-relaxed max-w-sm mb-8">Terminal de dados e inteligência de mercado. Focado em densidade de informação e ferramentas para traders de alta frequência.</p>
               <div className="flex gap-4">
                  <a href="#" className="w-10 h-10 rounded-lg bg-[#2B3139] flex items-center justify-center hover:bg-[#FCD535] hover:text-black transition-colors"><Instagram className="w-5 h-5"/></a>
                  <a href="#" className="w-10 h-10 rounded-lg bg-[#2B3139] flex items-center justify-center hover:bg-[#FCD535] hover:text-black transition-colors"><Globe className="w-5 h-5"/></a>
                  <a href="#" className="w-10 h-10 rounded-lg bg-[#2B3139] flex items-center justify-center hover:bg-[#FCD535] hover:text-black transition-colors"><Share2 className="w-5 h-5"/></a>
               </div>
            </div>
            
            <div>
               <h4 className="font-black uppercase tracking-widest text-[10px] text-[#444] mb-8">Políticas</h4>
               <ul className="space-y-4 text-sm font-bold text-[#848E9C]">
                  <li><a href="/privacy" className="hover:text-white transition-colors">Privacidade</a></li>
                  <li><a href="/terms" className="hover:text-white transition-colors">Termos de Uso</a></li>
                  <li><a href="/disclaimer" className="hover:text-white transition-colors">Aviso Legal</a></li>
               </ul>
            </div>
            
            <div>
               <h4 className="font-black uppercase tracking-widest text-[10px] text-[#444] mb-8">Produtos</h4>
               <ul className="space-y-4 text-sm font-bold text-[#848E9C]">
                  <li><a href="/search" className="hover:text-white transition-colors">Market Cap</a></li>
                  <li><a href="/search" className="hover:text-white transition-colors">Novas Listagens</a></li>
                  <li><a href="/swap" className="hover:text-white transition-colors">Exchange Hub</a></li>
               </ul>
            </div>

         </div>
         
         <div className="text-center font-black uppercase tracking-[0.4em] text-[8px] text-[#2B3139]">
            © {new Date().getFullYear()} CoinRadar Terminal Hub. Built by Autoblog.
         </div>
      </footer>
    </div>
  );
}