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 AlertsFeed from '@/components/dashboard/AlertsFeed';
import Watchlist from '@/components/dashboard/Watchlist';
import PerformanceTrackingPanel from '@/components/dashboard/PerformanceTrackingPanel';
import ReversalAlerts from '@/components/alerts/ReversalAlerts';
import ConvergenceAlerts from '@/components/alerts/ConvergenceAlerts';
import MarketScreenerPanel from '@/components/dashboard/MarketScreenerPanel';
import StockDetailPanel from '@/components/dashboard/StockDetailPanel';
import NewsFeedPanel from '@/components/dashboard/NewsFeedPanel';

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

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100">
      <ConvergenceAlerts />
      <ReversalAlerts />
      {/* Header */}
      <header className="border-b border-slate-800 bg-slate-900/50 backdrop-blur">
        <div className="container mx-auto px-4 py-4">
          <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">
                🚀 Institutional Flow Platform
              </h1>
              <p className="text-sm text-slate-400 mt-1">
                Real-time options flow · Tape analysis · Pro-grade signals
              </p>
            </div>
            <div className="flex items-center gap-4">
              <div className="text-right">
                <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 */}
      <div className="container mx-auto px-4 py-6">
        <div className="grid grid-cols-12 gap-6">
          {/* Left: Main Panels */}
          <div className="col-span-9">
            <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 onSelectSymbol={setSelectedSymbol} />
                {selectedSymbol && (
                  <StockDetailPanel
                    symbol={selectedSymbol}
                    onClose={() => 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>

          {/* Right: News, Watchlist & Alerts Feed */}
          <div className="col-span-3 space-y-6">
            <NewsFeedPanel />
            <Watchlist />
            <AlertsFeed />
          </div>
        </div>

        {/* Bottom: Performance Tracking */}
        <div className="mt-6">
          <PerformanceTrackingPanel />
        </div>
      </div>
    </div>
  );
}
