'use client';

import React, { useState } from 'react';
import SandboxDemo from '@/components/modules/sandbox/SandboxDemo';
import ScannerDemo from '@/components/modules/scanner/ScannerDemo';
import InsiderDemo from '@/components/modules/insider/InsiderDemo';
import CryptoDemo from '@/components/modules/crypto/CryptoDemo';
import EventsDemo from '@/components/modules/events/EventsDemo';
import MacroIndicatorsDemo from '@/components/modules/macro/MacroIndicatorsDemo';
import AiSpecialSilo from '@/components/modules/tech/AiSpecialSilo';
import WhaleScreener from '@/components/modules/whale/WhaleScreener';
import { BarChart3, TrendingUp, ShieldAlert, Radio, Landmark, RefreshCw, Activity, Cpu, Compass } from 'lucide-react';

export default function Home() {
  const [activeTab, setActiveTab] = useState<'sandbox' | 'scanner' | 'smart-money' | 'crypto' | 'events' | 'macro' | 'tech'>('sandbox');
  const [smartMoneySubTab, setSmartMoneySubTab] = useState<'flows' | 'screener'>('flows');

  return (
    <div className="min-h-screen bg-[#070b13] text-slate-100 flex flex-col font-sans selection:bg-teal-500/30 selection:text-teal-200">
      {/* Background Decorative Blur Gradients */}
      <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-blue-900/20 rounded-full blur-[140px] pointer-events-none -z-10" />
      <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-teal-900/20 rounded-full blur-[140px] pointer-events-none -z-10" />

      {/* Main Header / Navigation */}
      <header className="border-b border-slate-900 bg-slate-950/80 backdrop-blur-md sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-teal-500 to-indigo-600 flex items-center justify-center shadow-lg shadow-teal-500/20">
              <TrendingUp className="w-6 h-6 text-slate-950 stroke-[2.5]" />
            </div>
            <div>
              <h1 className="text-xl font-bold bg-gradient-to-r from-teal-400 via-sky-300 to-indigo-400 bg-clip-text text-transparent">
                QuantSandbox Econometrics
              </h1>
              <p className="text-[10px] text-slate-400 uppercase tracking-widest font-mono">AI-Powered Investment Sandbox</p>
            </div>
          </div>

          <div className="hidden md:flex items-center gap-6 text-xs text-slate-400">
            <div className="flex items-center gap-2 border-r border-slate-800 pr-4">
              <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
              <span>Connection Active</span>
            </div>
            <div className="flex items-center gap-1.5 font-mono">
              <span className="text-slate-500">Workspace:</span>
              <span className="text-slate-300 font-bold bg-slate-900 px-2 py-0.5 rounded border border-slate-800">investment-sandbox</span>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Banner Section */}
      <section className="bg-slate-950/40 border-b border-slate-900 py-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
            <div className="space-y-2 max-w-2xl">
              <span className="px-2.5 py-1 rounded-full text-[10px] font-bold bg-teal-500/10 text-teal-400 border border-teal-500/20 uppercase tracking-widest">
                Scaffolding Version 1.0.0
              </span>
              <h2 className="text-3xl font-extrabold text-white tracking-tight sm:text-4xl">
                Statistical Investment Analysis & Sandbox
              </h2>
              <p className="text-slate-400 text-sm leading-relaxed">
                This modular architecture pools advanced econometric models &ndash; from EWMA and GJR-GARCH volatility forecasts to Bayesian on-chain learning, survival analysis, and LMM panel regressions.
              </p>
            </div>

            <div className="flex flex-wrap gap-2 bg-slate-950/90 p-1.5 rounded-2xl border border-slate-800/80 w-full lg:w-auto">
              <button
                onClick={() => setActiveTab('sandbox')}
                className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'sandbox' ? 'bg-gradient-to-r from-teal-500 to-emerald-500 text-slate-950 font-bold shadow-lg shadow-teal-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
              >
                <TrendingUp className="w-4 h-4" /> Sandbox
              </button>
              <button
                onClick={() => setActiveTab('scanner')}
                className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'scanner' ? 'bg-gradient-to-r from-amber-500 to-orange-500 text-slate-950 font-bold shadow-lg shadow-amber-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
              >
                <ShieldAlert className="w-4 h-4" /> Scanner
              </button>
              <button
                onClick={() => setActiveTab('smart-money')}
                className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'smart-money' ? 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white font-bold shadow-lg shadow-purple-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
              >
                <Radio className="w-4 h-4" /> Smart Money
              </button>
              <button
                onClick={() => setActiveTab('crypto')}
                className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'crypto' ? 'bg-gradient-to-r from-cyan-500 to-sky-500 text-slate-950 font-bold shadow-lg shadow-cyan-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
              >
                <BarChart3 className="w-4 h-4" /> Crypto Bayes
              </button>
              <button
                onClick={() => setActiveTab('events')}
                className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'events' ? 'bg-gradient-to-r from-rose-500 to-pink-500 text-slate-950 font-bold shadow-lg shadow-rose-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
              >
                <Landmark className="w-4 h-4" /> Econometrics
              </button>
              <button
                onClick={() => setActiveTab('macro')}
                className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'macro' ? 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white font-bold shadow-lg shadow-purple-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
              >
                <Activity className="w-4 h-4" /> Eco Indicators
              </button>
              <button
                onClick={() => setActiveTab('tech')}
                className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'tech' ? 'bg-gradient-to-r from-teal-500 to-indigo-500 text-white font-bold shadow-lg shadow-teal-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
              >
                <Cpu className="w-4 h-4" /> ⚡ AI Special Silo
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Main Content Area */}
      <main className="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 w-full">
        {/* Active Module Rendering */}
        <div className="transition-all duration-300 transform opacity-100 translate-y-0">
          {activeTab === 'sandbox' && <SandboxDemo />}
          {activeTab === 'scanner' && <ScannerDemo />}
          {activeTab === 'smart-money' && (
            <div className="space-y-6">
              <div className="flex bg-slate-950/80 p-1.5 rounded-xl border border-slate-800/80 max-w-lg mx-auto">
                <button
                  onClick={() => setSmartMoneySubTab('flows')}
                  className={`flex-1 py-2 rounded-lg text-xs font-semibold font-sans transition-all flex items-center justify-center gap-1.5 ${smartMoneySubTab === 'flows' ? 'bg-purple-500 text-white font-bold shadow-lg shadow-purple-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
                >
                  <Radio className="w-3.5 h-3.5" /> Broad Insider &amp; Congressional Flows
                </button>
                <button
                  onClick={() => setSmartMoneySubTab('screener')}
                  className={`flex-1 py-2 rounded-lg text-xs font-semibold font-sans transition-all flex items-center justify-center gap-1.5 ${smartMoneySubTab === 'screener' ? 'bg-purple-500 text-white font-bold shadow-lg shadow-purple-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
                >
                  <Compass className="w-3.5 h-3.5" /> Whale Conviction Screener (VoC)
                </button>
              </div>
              {smartMoneySubTab === 'flows' ? <InsiderDemo /> : <WhaleScreener />}
            </div>
          )}
          {activeTab === 'crypto' && <CryptoDemo />}
          {activeTab === 'events' && <EventsDemo />}
          {activeTab === 'macro' && <MacroIndicatorsDemo />}
          {activeTab === 'tech' && <AiSpecialSilo />}
        </div>
      </main>

      {/* Footer */}
      <footer className="border-t border-slate-900 bg-slate-950/60 py-6 text-center text-xs text-slate-500 mt-auto">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center gap-4">
          <p>&copy; 2026 QuantSandbox Inc. All rights reserved.</p>
          <div className="flex items-center gap-4">
            <span className="flex items-center gap-1"><RefreshCw className="w-3.5 h-3.5 text-teal-400 animate-spin-slow" /> Zustand State Engine</span>
            <span>|</span>
            <span>Next.js App Router (TypeScript + Tailwind v4)</span>
          </div>
        </div>
      </footer>
    </div>
  );
}