import { useState } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import OptionsFlowPanel from '@/components/dashboard/OptionsFlowPanel';
import ScannerPanel from '@/components/dashboard/ScannerPanel';
import BacktestPanel from '@/components/dashboard/BacktestPanel';
import MethodologyModal from '@/components/modals/MethodologyModal';
import ReversalAlerts from '@/components/alerts/ReversalAlerts';
import ConvergenceAlerts from '@/components/alerts/ConvergenceAlerts';
import MarketScreenerPanel from '@/components/dashboard/MarketScreenerPanel';
import StockDetailPanel from '@/components/dashboard/StockDetailPanel';

export default function App() {
  const [selectedSymbol, setSelectedSymbol] = useState(null);
  const [isMethodologyOpen, setIsMethodologyOpen] = useState(false);

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100">
      <ConvergenceAlerts />
      <ReversalAlerts />
      <MethodologyModal isOpen={isMethodologyOpen} onClose={() => setIsMethodologyOpen(false)} />

      {/* Header */}
      <header className="border-b border-slate-800 bg-slate-900/50 backdrop-blur sticky top-0 z-40">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                FactorLab: Transparent Market Research
              </h1>
              <p className="text-xs text-slate-400 mt-0.5">
                We show you the facts fast — and we tell you what we've tested and what we haven't.
              </p>
            </div>
            <div className="flex items-center gap-4">
              <button 
                onClick={() => setIsMethodologyOpen(true)}
                className="text-xs font-semibold text-blue-400 hover:text-blue-300 transition-colors border border-blue-400/30 px-3 py-1.5 rounded bg-blue-500/10"
              >
                Methodology & Disclaimers
              </button>
              <div className="text-right border-l border-slate-700 pl-4 ml-2">
                <div className="text-xs text-slate-400">Market Status</div>
                <div className="text-sm font-semibold text-green-400">RTH • LIVE</div>
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content — full width */}
      <div className="container mx-auto px-4 py-6">
        <Tabs defaultValue="market" className="w-full">
          <TabsList className="bg-slate-900 border border-slate-800">
            <TabsTrigger value="market" className="data-[state=active]:bg-slate-800">
              📊 Market Analysis
            </TabsTrigger>
            <TabsTrigger value="flow" className="data-[state=active]:bg-slate-800">
              🎯 Options Flow
            </TabsTrigger>
            <TabsTrigger value="scanner" className="data-[state=active]:bg-slate-800">
              🔍 Multi-Signal Scanner
            </TabsTrigger>
            <TabsTrigger value="backtest" className="data-[state=active]:bg-slate-800">
              📊 Backtests
            </TabsTrigger>
          </TabsList>

          <TabsContent value="market" className="mt-6 space-y-6">
            <MarketScreenerPanel 
              selectedSymbol={selectedSymbol}
              onSelectSymbol={setSelectedSymbol} 
              onCloseSymbol={() => setSelectedSymbol(null)}
            />
          </TabsContent>

          <TabsContent value="flow" className="mt-6">
            <OptionsFlowPanel />
          </TabsContent>

          <TabsContent value="scanner" className="mt-6">
            <ScannerPanel />
          </TabsContent>

          <TabsContent value="backtest" className="mt-6">
            <BacktestPanel />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}