import { FormEvent } from 'react';
import { Settings, BarChart2, TrendingUp, TrendingDown, Clock, Crosshair, ChevronDown, ListFilter, PlayCircle, Minimize2, ExternalLink, Share2, Instagram, Globe } from 'lucide-react';

const DICT: Record<string, any> = {
  pt: {
    back: 'Voltar ao Gráfico',
    signals: 'SINAIS AO VIVO',
    education: 'FORMAÇÃO TRADER',
    readTime: 'MIN',
    articles: [
      { id: '1', title: 'Price Action: Rompimento de Suporte no Par EUR/USD', excerpt: 'Análise técnica detalhada sobre o comportamento do par após a divulgação dos dados de emprego.', category: 'Forex', time: '8', img: 'https://images.unsplash.com/photo-1611974789855-9c2a0a223690?auto=format&fit=crop&q=80&w=800' },
      { id: '2', title: 'Psicologia do Trader: Como Lidar com o Drawdown', excerpt: 'Estratégias mentais para manter a disciplina operacional durante sequências de perdas inevitáveis.', category: 'Mindset', time: '15', img: 'https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&q=80&w=800' },
      { id: '3', title: 'Guia de Indicadores: RSI vs MACD', excerpt: 'Entenda qual indicador de momentum se adapta melhor ao seu estilo de operacional (Scalp vs Swing).', category: 'Técnico', time: '10', img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800' }
    ]
  }
};

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

  return (
    <div className="trading-terminal bg-[#131722] text-[#D1D4DC] min-h-screen font-sans selection:bg-[#2962FF] selection:text-white">
      
      {/* Trading Header - Dark & Technical */}
      <header className="bg-[#1E222D] border-b border-[#2B3139] sticky top-0 z-50">
        <div className="max-w-[1440px] mx-auto px-6 h-[60px] flex justify-between items-center">
           <a href="/" className="flex items-center gap-3 cursor-pointer group">
              <div className="w-8 h-8 bg-[#2962FF] rounded flex items-center justify-center text-white shadow-[0_0_15px_rgba(41,98,255,0.4)]">
                 <BarChart2 className="w-5 h-5"/>
              </div>
              <span className="text-lg font-black text-white tracking-tighter uppercase">PRO<span className="text-[#2962FF]">TRADE</span></span>
           </a>

           <nav className="hidden lg:flex gap-8 text-[11px] font-black uppercase tracking-widest text-[#848E9C]">
              <a href="/category/analise" className="hover:text-white transition-colors">Análise Técnica</a>
              <a href="/category/sinais" className="hover:text-white transition-colors text-[#2962FF]">Sinais VIP</a>
              <a href="/category/mentoria" className="hover:text-white transition-colors">Mentoria</a>
              <a href="/terminal" className="hover:text-white transition-colors flex items-center gap-2 border border-[#2B3139] px-3 py-1 rounded">Gráficos</a>
           </nav>

           <div className="flex items-center gap-4">
              <div className="hidden md:flex items-center bg-[#131722] rounded border border-[#2B3139] px-3 py-1.5 focus-within:border-[#2962FF] transition-all">
                 <Search className="w-4 h-4 text-[#848E9C]"/>
                 <input type="text" placeholder="Ativo ou Script..." className="bg-transparent border-none outline-none pl-3 text-[11px] font-bold text-white w-24 focus:w-40 transition-all"/>
              </div>
              <button className="bg-[#2962FF] text-white text-[10px] font-black uppercase tracking-widest px-6 py-2 rounded hover:bg-[#1E222D] transition-all shadow-lg shadow-[#2962FF]/20">Login</button>
           </div>
        </div>
      </header>

      {activeView === 'home' ? (
        <main className="max-w-[1440px] mx-auto px-6 py-8 pb-32">
          
          <div className="grid lg:grid-cols-12 gap-6 mb-8">
             {/* Main Chart/News Hero Area */}
             <div className="lg:col-span-9 flex flex-col gap-6">
                <a href={`/${articlesToRender[0].id}`} className="w-full bg-[#1E222D] rounded-xl border border-[#2B3139] p-8 lg:p-12 group cursor-pointer relative overflow-hidden block">
                   <div className="absolute right-0 top-0 w-1/2 h-full opacity-10 pointer-events-none">
                      <TrendingUp className="w-full h-full text-[#089981]"/>
                   </div>
                   <div className="relative z-10">
                      <span className="text-[#2962FF] font-black text-[10px] uppercase tracking-widest mb-6 block flex items-center gap-2"><div className="w-2 h-2 bg-[#2962FF] rounded-full animate-pulse"></div>{ui.signals}</span>
                      <h1 className="text-4xl sm:text-6xl font-black text-white leading-[1.1] tracking-tighter mb-8 group-hover:text-[#2962FF] transition-colors">{articlesToRender[0].title}</h1>
                      <p className="text-[#848E9C] text-lg font-medium leading-relaxed max-w-2xl mb-10">{articlesToRender[0].excerpt}</p>
                      <div className="flex items-center gap-6 text-[11px] font-black uppercase tracking-widest text-white/50">
                         <span className="flex items-center gap-2"><Clock className="w-4 h-4"/> Publicado agora</span>
                         <span className="flex items-center gap-2"><ListFilter className="w-4 h-4"/> Alta Probabilidade</span>
                      </div>
                   </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-[#1E222D] rounded-xl border border-[#2B3139] p-6 cursor-pointer hover:border-[#2962FF]/50 transition-colors group flex flex-col h-full block">
                         <div className="w-full aspect-video rounded-lg overflow-hidden mb-6 bg-[#131722] relative">
                            <img src={art.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-60" alt={art.title}/>
                            <div className="absolute inset-0 bg-gradient-to-t from-[#131722] via-transparent to-transparent"></div>
                         </div>
                         <h3 className="text-xl font-black text-white leading-tight mb-4">{art.title}</h3>
                         <div className="mt-auto flex items-center justify-between text-[10px] font-black uppercase tracking-widest text-[#848E9C]">
                            <span className="flex items-center gap-2"><PlayCircle className="w-4 h-4 text-[#2962FF]"/> {art.category}</span>
                            <span>{art.time} {ui.readTime}</span>
                         </div>
                      </a>
                   ))}
                </div>
             </div>

             {/* Live Orderbook / Watchlist Sidebar */}
             <div className="lg:col-span-3 flex flex-col gap-6">
                <div className="bg-[#1E222D] rounded-xl border border-[#2B3139] p-5 shadow-xl h-fit">
                   <div className="flex items-center justify-between mb-6 pb-3 border-b border-[#2B3139]">
                      <h2 className="text-white font-black text-xs uppercase tracking-widest flex items-center gap-2"><Settings className="w-4 h-4 text-[#848E9C]"/> Watchlist</h2>
                      <button className="text-[10px] font-black text-[#2962FF] uppercase">Edit</button>
                   </div>
                   <div className="flex flex-col gap-4">
                      {[
                         { sym: 'EURUSD', price: '1.08420', chg: '+0.05%', color: '#089981' },
                         { sym: 'GBPUSD', price: '1.26540', chg: '-0.12%', color: '#F23645' },
                         { sym: 'USDJPY', price: '151.240', chg: '+0.34%', color: '#089981' },
                         { sym: 'XAUUSD', price: '2,175.40', chg: '-0.02%', color: '#F23645' },
                         { sym: 'US30', price: '39,475.0', chg: '+0.15%', color: '#089981' },
                      ].map((item) => (
                         <div key={item.sym} className="flex items-center justify-between text-[11px] font-bold group cursor-pointer hover:bg-[#2B3139] p-2 rounded transition-colors">
                            <span className="text-white group-hover:text-[#2962FF]">{item.sym}</span>
                            <div className="text-right">
                               <div className="text-white">{item.price}</div>
                               <div style={{color: item.color}}>{item.chg}</div>
                            </div>
                         </div>
                      ))}
                   </div>
                </div>

                {/* Broker Affiliate Banner */}
                <div className="w-full bg-[#2962FF] rounded-xl p-8 text-center group cursor-pointer hover:bg-white transition-all shadow-2xl relative overflow-hidden">
                   <div className="absolute inset-0 bg-[#2962FF] group-hover:opacity-0 transition-opacity"></div>
                   <div className="relative z-10">
                      <Crosshair className="w-12 h-12 text-white group-hover:text-[#2962FF] mx-auto mb-6 group-hover:scale-110 transition-transform"/>
                      <h3 className="text-2xl font-black text-white group-hover:text-[#2962FF] tracking-tighter uppercase mb-4 leading-none italic">Conta ECN Real.</h3>
                      <p className="text-white/70 group-hover:text-[#848E9C] text-[10px] font-bold mb-6">Spreads a partir de 0.0 pips. Execução STP imediata.</p>
                      <button className="bg-white text-[#2962FF] group-hover:bg-[#1E222D] group-hover:text-white w-full py-3 rounded font-black uppercase text-[10px] tracking-widest shadow-xl">Abrir Conta</button>
                   </div>
                </div>
             </div>
          </div>

        </main>
      ) : (
        /* --- ARTICLE VIEW --- */
        <article className="max-w-[1200px] mx-auto px-6 py-12 pb-32">
           <div className="max-w-[800px] mx-auto">
              <a href="/" className="text-[10px] font-black uppercase tracking-widest text-[#848E9C] hover:text-[#2962FF] transition-colors block mb-12 flex items-center gap-2">
                 ← {ui.back}
              </a>
              
              <header className="mb-16">
                 <div className="flex items-center gap-3 mb-6">
                    <span className="bg-[#2962FF] text-white px-3 py-1 rounded text-[9px] font-black uppercase tracking-widest">{displayArticle.category}</span>
                    <span className="text-[#089981] font-black text-[9px] uppercase tracking-widest flex items-center gap-1"><div className="w-1.5 h-1.5 bg-[#089981] rounded-full"></div> LIVE SIGNAL</span>
                 </div>
                 
                 <h1 className="text-4xl sm:text-6xl font-black leading-[1.1] tracking-tighter text-white mb-10 italic">
                    {displayArticle.title}
                 </h1>

                 <div className="flex items-center gap-6 py-6 border-y border-[#2B3139] text-[10px] font-black uppercase tracking-widest text-[#848E9C]">
                    <div className="flex items-center gap-2"><Minimize2 className="w-4 h-4 text-[#2962FF]"/> Full Screen Analysis</div>
                    <div className="ml-auto hidden sm:flex items-center gap-8">
                       <span className="flex items-center gap-2"><Clock className="w-4 h-4"/> {displayArticle.time} {ui.readTime}</span>
                       <span className="flex items-center gap-2 text-white"><ExternalLink className="w-4 h-4"/> Ver no TradingView</span>
                    </div>
                 </div>
              </header>

              <div className="prose prose-lg prose-invert max-w-none text-[#D1D4DC] font-medium leading-[1.8] prose-headings:font-black prose-headings:uppercase prose-headings:tracking-tighter prose-headings:text-white prose-a:text-[#2962FF] prose-img:rounded-xl prose-img:border prose-img:border-[#2B3139] prose-blockquote:border-[#2962FF] prose-blockquote:bg-[#1E222D]">
                 {children}
              </div>
           </div>
        </article>
      )}

      {/* Trading Professional Footer */}
      <footer className="bg-[#1E222D] text-[#848E9C] pt-20 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-8 h-8 bg-[#2962FF] rounded flex items-center justify-center text-white">
                     <BarChart2 className="w-5 h-5"/>
                  </div>
                  <span className="text-xl font-black tracking-tighter uppercase text-white">PRO<span className="text-[#2962FF]">TRADE</span></span>
               </div>
               <p className="text-[#848E9C] text-sm font-medium leading-relaxed max-w-sm mb-8">Terminal analítico para traders profissionais. Focado em análise técnica pura e sinais operacionais de alta fidelidade.</p>
               <div className="flex gap-4">
                  <a href="#" className="w-10 h-10 rounded-lg bg-[#131722] flex items-center justify-center hover:bg-[#2962FF] hover:text-white transition-all border border-[#2B3139]"><Instagram className="w-5 h-5"/></a>
                  <a href="#" className="w-10 h-10 rounded-lg bg-[#131722] flex items-center justify-center hover:bg-[#2962FF] hover:text-white transition-all border border-[#2B3139]"><Globe className="w-5 h-5"/></a>
                  <a href="#" className="w-10 h-10 rounded-lg bg-[#131722] flex items-center justify-center hover:bg-[#2962FF] hover:text-white transition-all border border-[#2B3139]"><Share2 className="w-5 h-5"/></a>
               </div>
            </div>
            
            <div>
               <h4 className="font-black uppercase tracking-widest text-[10px] text-white 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">Disclaimer Financeiro</a></li>
               </ul>
            </div>
            
            <div>
               <h4 className="font-black uppercase tracking-widest text-[10px] text-white mb-8">Terminal</h4>
               <ul className="space-y-4 text-sm font-bold text-[#848E9C]">
                  <li><a href="/terminal" className="hover:text-white transition-colors">Gráficos Ativos</a></li>
                  <li><a href="/search" className="hover:text-white transition-colors">Sinais do Dia</a></li>
                  <li><a href="/login" className="hover:text-white transition-colors">Painel VIP</a></li>
               </ul>
            </div>

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