import React, { useState, useEffect, useMemo } from 'react';
import { 
  LineChart, 
  Wallet, 
  Activity, 
  AlertTriangle, 
  CheckCircle, 
  XCircle, 
  Settings, 
  FileText, 
  Play, 
  Pause,
  RefreshCw,
  Bell,
  ArrowRight,
  TrendingUp,
  Download,
  ShieldAlert
} from 'lucide-react';

// --- Types & Interfaces ---

interface StockData {
  symbol: string;
  name: string;
  tier: 'A' | 'B' | 'C';
  price: number;
  sma200: number;
  ema50: number;
  rsi: number;
  active: boolean;
  prevDayHigh: number;
  lastUpdated: string;
}

interface TradeOrder {
  id: string;
  symbol: string;
  entryPrice: number;
  stopLoss: number;
  target: number;
  quantity: number;
  riskAmount: number;
  status: 'PENDING_CONFIRMATION' | 'OPEN' | 'CLOSED' | 'REJECTED';
  dateCreated: string;
  exitPrice?: number;
  pnl?: number;
  notes?: string;
  rulesFollowed?: boolean;
}

interface AppSettings {
  capital: number;
  riskPerTradePercent: number;
  maxTradesPerWeek: number;
  stopTradingTrigger: number; // consecutive losses
}

// --- Mock Initial Data (Indian Market Context) ---

// Helper to generate mock data for the 50 stocks
const generateMockStock = (symbol: string, name: string, tier: 'A' | 'B' | 'C') => {
  const basePrice = Math.random() * 3000 + 500;
  // Randomize conditions to create a mix of eligible/ineligible for demo
  const isEligibleCandidate = Math.random() > 0.7; 
  
  const sma200 = basePrice;
  const price = isEligibleCandidate 
    ? basePrice * (1 + (Math.random() * 0.015)) // 0-1.5% above SMA200 (Eligible condition)
    : basePrice * (1 + (Math.random() * 0.1 - 0.05)); // Random +/- 5%
    
  const rsi = isEligibleCandidate 
    ? 40 + Math.random() * 5 // 40-45 (Eligible condition)
    : 30 + Math.random() * 40; // 30-70

  return {
    symbol,
    name,
    tier,
    price: parseFloat(price.toFixed(2)),
    sma200: parseFloat(sma200.toFixed(2)),
    ema50: parseFloat((price * 0.98).toFixed(2)),
    rsi: parseFloat(rsi.toFixed(1)),
    active: Math.random() > 0.5,
    prevDayHigh: parseFloat((price * 1.01).toFixed(2)),
    lastUpdated: new Date().toISOString()
  };
};

const INITIAL_STOCKS: StockData[] = [
  generateMockStock('ADANIENT', 'Adani Enterprises', 'B'),
  generateMockStock('ADANIPORTS', 'Adani Ports', 'B'),
  generateMockStock('APOLLOHOSP', 'Apollo Hospitals', 'C'),
  generateMockStock('ASIANPAINT', 'Asian Paints', 'A'),
  generateMockStock('AXISBANK', 'Axis Bank', 'A'),
  generateMockStock('BAJAJ-AUTO', 'Bajaj Auto', 'B'),
  generateMockStock('BAJFINANCE', 'Bajaj Finance', 'A'),
  generateMockStock('BAJAJFINSV', 'Bajaj Finserv', 'B'),
  generateMockStock('BEL', 'Bharat Electronics', 'B'),
  generateMockStock('BPCL', 'BPCL', 'C'),
  generateMockStock('BHARTIARTL', 'Bharti Airtel', 'A'),
  generateMockStock('BRITANNIA', 'Britannia', 'C'),
  generateMockStock('CIPLA', 'Cipla', 'B'),
  generateMockStock('COALINDIA', 'Coal India', 'C'),
  generateMockStock('DIVISLAB', 'Divis Labs', 'C'),
  generateMockStock('DRREDDY', 'Dr Reddys Labs', 'B'),
  generateMockStock('EICHERMOT', 'Eicher Motors', 'B'),
  generateMockStock('GRASIM', 'Grasim Industries', 'B'),
  generateMockStock('HCLTECH', 'HCL Technologies', 'A'),
  generateMockStock('HDFCBANK', 'HDFC Bank', 'A'),
  generateMockStock('HDFCLIFE', 'HDFC Life', 'B'),
  generateMockStock('HEROMOTOCO', 'Hero MotoCorp', 'B'),
  generateMockStock('HINDALCO', 'Hindalco', 'C'),
  generateMockStock('HINDUNILVR', 'Hindustan Unilever', 'A'),
  generateMockStock('ICICIBANK', 'ICICI Bank', 'A'),
  generateMockStock('INDUSINDBK', 'IndusInd Bank', 'B'),
  generateMockStock('INFY', 'Infosys', 'A'),
  generateMockStock('ITC', 'ITC Ltd', 'A'),
  generateMockStock('JSWSTEEL', 'JSW Steel', 'B'),
  generateMockStock('KOTAKBANK', 'Kotak Mahindra Bank', 'A'),
  generateMockStock('LT', 'Larsen & Toubro', 'A'),
  generateMockStock('LTIM', 'LTIMindtree', 'B'),
  generateMockStock('M&M', 'Mahindra & Mahindra', 'A'),
  generateMockStock('MARUTI', 'Maruti Suzuki', 'A'),
  generateMockStock('NESTLEIND', 'Nestle India', 'B'),
  generateMockStock('NTPC', 'NTPC', 'B'),
  generateMockStock('ONGC', 'ONGC', 'C'),
  generateMockStock('POWERGRID', 'Power Grid Corp', 'C'),
  generateMockStock('RELIANCE', 'Reliance Industries', 'A'),
  generateMockStock('SBILIFE', 'SBI Life Insurance', 'B'),
  generateMockStock('SBIN', 'SBI', 'A'),
  generateMockStock('SHRIRAMFIN', 'Shriram Finance', 'C'),
  generateMockStock('SUNPHARMA', 'Sun Pharma', 'B'),
  generateMockStock('TATACONSUM', 'Tata Consumer', 'B'),
  generateMockStock('TATAMOTORS', 'Tata Motors', 'A'),
  generateMockStock('TATASTEEL', 'Tata Steel', 'B'),
  generateMockStock('TCS', 'TCS', 'A'),
  generateMockStock('TECHM', 'Tech Mahindra', 'B'),
  generateMockStock('TITAN', 'Titan Company', 'A'),
  generateMockStock('TRENT', 'Trent', 'B'),
  generateMockStock('ULTRACEMCO', 'UltraTech Cement', 'A'),
  generateMockStock('WIPRO', 'Wipro', 'B'),
];

const INITIAL_SETTINGS: AppSettings = {
  capital: 1500000,
  riskPerTradePercent: 0.6,
  maxTradesPerWeek: 2,
  stopTradingTrigger: 2
};

// --- Helper Functions ---

const calculateEligibility = (stock: StockData): { eligible: boolean; reasons: string[] } => {
  const reasons: string[] = [];
  
  if (!stock.active) reasons.push("Not Active this week");
  
  // 1. Price > SMA 200
  if (stock.price <= stock.sma200) reasons.push("Price below SMA200");
  
  // 2. Distance from SMA200 <= 2%
  const dist = Math.abs((stock.price - stock.sma200) / stock.sma200 * 100);
  if (dist > 2) reasons.push(`SMA200 Distance > 2% (${dist.toFixed(2)}%)`);
  
  // 3. RSI between 40 and 45
  if (stock.rsi < 40 || stock.rsi > 45) reasons.push(`RSI out of range (${stock.rsi.toFixed(1)})`);

  return { eligible: reasons.length === 0, reasons };
};

const formatCurrency = (amount: number) => {
  return new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR', maximumFractionDigits: 0 }).format(amount);
};

// --- Components ---

const Badge = ({ children, color }: { children: React.ReactNode, color: string }) => (
  <span className={`px-2 py-1 rounded-full text-xs font-semibold ${color}`}>
    {children}
  </span>
);

export default function SwingTraderApp() {
  const [view, setView] = useState<'dashboard' | 'universe' | 'journal' | 'settings'>('dashboard');
  const [stocks, setStocks] = useState<StockData[]>(INITIAL_STOCKS);
  const [orders, setOrders] = useState<TradeOrder[]>([]);
  const [settings, setSettings] = useState<AppSettings>(INITIAL_SETTINGS);
  const [pendingAlert, setPendingAlert] = useState<TradeOrder | null>(null);
  const [emergencyStop, setEmergencyStop] = useState(false);

  // --- Derived State ---
  
  const eligibleStocks = useMemo(() => {
    return stocks.filter(s => calculateEligibility(s).eligible);
  }, [stocks]);

  const activeTradesCount = orders.filter(o => o.status === 'OPEN').length;
  const closedTradesThisWeek = orders.filter(o => o.status === 'CLOSED').length; // Simplified weekly check
  const lossCount = orders.filter(o => o.status === 'CLOSED' && (o.pnl || 0) < 0).length;

  // --- Actions ---

  const toggleActive = (symbol: string) => {
    setStocks(prev => prev.map(s => s.symbol === symbol ? { ...s, active: !s.active } : s));
  };

  const simulateDataUpdate = () => {
    // Simulates a daily data fetch update
    const updated = stocks.map(s => ({
      ...s,
      price: s.price * (1 + (Math.random() * 0.04 - 0.02)), // +/- 2% move
      rsi: Math.max(30, Math.min(70, s.rsi + (Math.random() * 10 - 5))), // Random RSI shift
      lastUpdated: new Date().toISOString()
    }));
    setStocks(updated);
  };

  const simulateWebhookAlert = () => {
    if (emergencyStop) {
      alert("Trading is HALTED. Cannot process alerts.");
      return;
    }
    if (eligibleStocks.length === 0) {
      alert("No stocks are currently eligible to generate an alert.");
      return;
    }

    // Pick a random eligible stock
    const stock = eligibleStocks[Math.floor(Math.random() * eligibleStocks.length)];
    
    // Calculate Position Sizing
    const riskAmount = settings.capital * (settings.riskPerTradePercent / 100);
    const entryPrice = stock.price; // Simulating entry at current price
    const stopLoss = entryPrice * 0.992; // 0.8% SL default
    const target = entryPrice * 1.015; // 1.5% Target default
    const lossPerShare = entryPrice - stopLoss;
    const quantity = Math.floor(riskAmount / lossPerShare);

    const newOrder: TradeOrder = {
      id: `ORD-${Date.now()}`,
      symbol: stock.symbol,
      entryPrice,
      stopLoss,
      target,
      quantity,
      riskAmount,
      status: 'PENDING_CONFIRMATION',
      dateCreated: new Date().toISOString()
    };
    
    setPendingAlert(newOrder);
  };

  const confirmOrder = (order: TradeOrder) => {
    setOrders(prev => [order, ...prev]);
    setPendingAlert(null);
    // In a real app, this would trigger the broker API or display the copy-paste format
  };

  const closeTrade = (id: string, exitPrice: number) => {
    setOrders(prev => prev.map(o => {
      if (o.id === id) {
        const pnl = (exitPrice - o.entryPrice) * o.quantity;
        return { ...o, status: 'CLOSED', exitPrice, pnl };
      }
      return o;
    }));
  };

  // --- Views ---

  const Dashboard = () => (
    <div className="space-y-6">
      {/* Top Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div className="bg-white p-4 rounded-lg shadow-sm border border-slate-200">
          <div className="text-slate-500 text-sm font-medium">Weekly Trades</div>
          <div className="text-2xl font-bold text-slate-800">
            {activeTradesCount + closedTradesThisWeek} <span className="text-slate-400 text-lg">/ {settings.maxTradesPerWeek}</span>
          </div>
        </div>
        <div className="bg-white p-4 rounded-lg shadow-sm border border-slate-200">
          <div className="text-slate-500 text-sm font-medium">Eligible Candidates</div>
          <div className="text-2xl font-bold text-emerald-600">{eligibleStocks.length}</div>
        </div>
        <div className="bg-white p-4 rounded-lg shadow-sm border border-slate-200">
          <div className="text-slate-500 text-sm font-medium">Market Filter (Nifty)</div>
          <div className="text-2xl font-bold text-emerald-600 flex items-center gap-2">
            <TrendingUp size={20} /> Bullish
          </div>
          <div className="text-xs text-slate-400">Index &gt; 200 SMA</div>
        </div>
        <div className={`p-4 rounded-lg shadow-sm border ${lossCount >= settings.stopTradingTrigger ? 'bg-red-50 border-red-200' : 'bg-white border-slate-200'}`}>
          <div className="text-slate-500 text-sm font-medium">Stop Trading Check</div>
          <div className="flex items-center justify-between">
             <span className={`font-bold ${lossCount >= settings.stopTradingTrigger ? 'text-red-600' : 'text-slate-800'}`}>
               {lossCount} SL Hits
             </span>
             {lossCount >= settings.stopTradingTrigger && <ShieldAlert className="text-red-600" />}
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Trade Eligible List */}
        <div className="lg:col-span-2 bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
          <div className="p-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
            <h2 className="font-semibold text-slate-800 flex items-center gap-2">
              <CheckCircle size={18} className="text-emerald-500"/> Ready for Entry (Eligible)
            </h2>
            <button onClick={simulateDataUpdate} className="text-xs flex items-center gap-1 text-slate-500 hover:text-blue-600">
              <RefreshCw size={12} /> Refresh Data
            </button>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full text-sm text-left">
              <thead className="text-xs text-slate-500 uppercase bg-slate-50">
                <tr>
                  <th className="px-4 py-3">Symbol</th>
                  <th className="px-4 py-3">Price</th>
                  <th className="px-4 py-3">RSI</th>
                  <th className="px-4 py-3">% SMA Dist</th>
                  <th className="px-4 py-3">Prev High</th>
                  <th className="px-4 py-3 text-right">Action</th>
                </tr>
              </thead>
              <tbody>
                {eligibleStocks.length === 0 ? (
                  <tr>
                    <td colSpan={6} className="px-4 py-8 text-center text-slate-400 italic">
                      No stocks meet the criteria right now (Price &gt; SMA200, Dist &lt; 2%, RSI 40-45).
                    </td>
                  </tr>
                ) : (
                  eligibleStocks.map(stock => {
                     const dist = ((stock.price - stock.sma200) / stock.sma200 * 100).toFixed(2);
                     return (
                      <tr key={stock.symbol} className="border-b border-slate-100 hover:bg-emerald-50/30">
                        <td className="px-4 py-3 font-medium text-slate-800">
                          {stock.symbol} <span className="text-xs text-slate-400">({stock.tier})</span>
                        </td>
                        <td className="px-4 py-3">₹{stock.price.toFixed(1)}</td>
                        <td className="px-4 py-3 font-bold text-emerald-600">{stock.rsi.toFixed(1)}</td>
                        <td className="px-4 py-3">{dist}%</td>
                        <td className="px-4 py-3">₹{stock.prevDayHigh}</td>
                        <td className="px-4 py-3 text-right">
                          <button 
                             onClick={() => alert(`In a real app, this would open TradingView for ${stock.symbol} and set an alert at ${stock.prevDayHigh}`)}
                             className="text-blue-600 hover:text-blue-800 font-medium text-xs border border-blue-200 px-2 py-1 rounded">
                             Set Alert
                          </button>
                        </td>
                      </tr>
                    );
                  })
                )}
              </tbody>
            </table>
          </div>
        </div>

        {/* Weekly Checklist & Active Trades */}
        <div className="space-y-6">
           <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-4">
              <h3 className="font-semibold text-slate-800 mb-3 text-sm">Active Positions</h3>
              {orders.filter(o => o.status === 'OPEN').length === 0 ? (
                <div className="text-sm text-slate-400 py-2">No active trades.</div>
              ) : (
                orders.filter(o => o.status === 'OPEN').map(order => (
                  <div key={order.id} className="mb-3 p-3 bg-slate-50 rounded border border-slate-200">
                    <div className="flex justify-between font-medium">
                      <span>{order.symbol}</span>
                      <span className="text-emerald-600">Open</span>
                    </div>
                    <div className="text-xs text-slate-500 mt-1 flex justify-between">
                      <span>Qty: {order.quantity}</span>
                      <span>Entry: ₹{order.entryPrice.toFixed(1)}</span>
                    </div>
                    <div className="mt-2 flex gap-2">
                       <button 
                         onClick={() => closeTrade(order.id, order.target)}
                         className="flex-1 text-xs bg-emerald-100 text-emerald-700 py-1 rounded hover:bg-emerald-200">
                         Hit Target
                       </button>
                       <button 
                         onClick={() => closeTrade(order.id, order.stopLoss)}
                         className="flex-1 text-xs bg-red-100 text-red-700 py-1 rounded hover:bg-red-200">
                         Hit SL
                       </button>
                    </div>
                  </div>
                ))
              )}
           </div>

           <div className="bg-blue-50 rounded-lg border border-blue-100 p-4">
             <h3 className="font-semibold text-blue-900 mb-2 text-sm">Weekly Protocol</h3>
             <ul className="text-sm text-blue-800 space-y-2">
               <li className="flex items-center gap-2"><div className={`w-4 h-4 rounded border flex items-center justify-center ${activeTradesCount < settings.maxTradesPerWeek ? 'bg-white' : 'bg-blue-600'}`}>✓</div> Check Nifty &gt; 200 SMA</li>
               <li className="flex items-center gap-2"><div className="w-4 h-4 rounded border bg-white flex items-center justify-center"></div> Review Active Universe</li>
               <li className="flex items-center gap-2"><div className="w-4 h-4 rounded border bg-white flex items-center justify-center"></div> No Earnings this week</li>
             </ul>
           </div>
        </div>
      </div>
    </div>
  );

  const UniverseManager = () => (
    <div className="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
      <div className="p-4 border-b border-slate-100 flex justify-between items-center">
        <h2 className="font-semibold text-slate-800">Universe Manager ({stocks.length})</h2>
        <div className="text-xs text-slate-500">Toggle 'Active' to include in weekly plan</div>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-sm text-left">
          <thead className="text-xs text-slate-500 uppercase bg-slate-50">
            <tr>
              <th className="px-4 py-3">Symbol</th>
              <th className="px-4 py-3">Tier</th>
              <th className="px-4 py-3">Price</th>
              <th className="px-4 py-3">Indicators</th>
              <th className="px-4 py-3 text-center">Active This Week</th>
              <th className="px-4 py-3">Status</th>
            </tr>
          </thead>
          <tbody>
            {stocks.map(stock => {
              const { eligible, reasons } = calculateEligibility(stock);
              return (
                <tr key={stock.symbol} className="border-b border-slate-100 hover:bg-slate-50">
                  <td className="px-4 py-3 font-medium">{stock.symbol}</td>
                  <td className="px-4 py-3"><Badge color={stock.tier === 'A' ? 'bg-purple-100 text-purple-700' : 'bg-slate-100 text-slate-600'}>{stock.tier}</Badge></td>
                  <td className="px-4 py-3">₹{stock.price.toFixed(1)}</td>
                  <td className="px-4 py-3 text-xs text-slate-500">
                    <div>RSI: {stock.rsi.toFixed(1)}</div>
                    <div>SMA: {stock.sma200.toFixed(0)}</div>
                  </td>
                  <td className="px-4 py-3 text-center">
                    <button 
                      onClick={() => toggleActive(stock.symbol)}
                      className={`w-10 h-6 rounded-full transition-colors relative ${stock.active ? 'bg-emerald-500' : 'bg-slate-300'}`}
                    >
                      <div className={`w-4 h-4 bg-white rounded-full absolute top-1 transition-all ${stock.active ? 'left-5' : 'left-1'}`} />
                    </button>
                  </td>
                  <td className="px-4 py-3">
                    {eligible ? (
                      <span className="text-xs text-emerald-600 font-medium flex items-center gap-1"><CheckCircle size={12} /> Eligible</span>
                    ) : (
                      <span className="text-xs text-slate-400 group relative cursor-help">
                        Ineligible
                        <div className="absolute hidden group-hover:block bottom-full left-0 w-48 bg-slate-800 text-white p-2 rounded z-10 mb-1">
                          {reasons.map(r => <div key={r}>• {r}</div>)}
                        </div>
                      </span>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );

  const Journal = () => (
    <div className="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
      <div className="p-4 border-b border-slate-100 flex justify-between items-center">
        <h2 className="font-semibold text-slate-800">Trade Journal & Performance</h2>
        <button 
            onClick={() => window.print()}
            className="text-xs flex items-center gap-1 text-slate-500 border border-slate-200 px-3 py-1.5 rounded hover:bg-slate-50">
            <Download size={12} /> Export PDF
        </button>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-sm text-left">
          <thead className="text-xs text-slate-500 uppercase bg-slate-50">
            <tr>
              <th className="px-4 py-3">Date</th>
              <th className="px-4 py-3">Symbol</th>
              <th className="px-4 py-3">Entry / Exit</th>
              <th className="px-4 py-3">Qty</th>
              <th className="px-4 py-3">P/L</th>
              <th className="px-4 py-3">Status</th>
            </tr>
          </thead>
          <tbody>
            {orders.length === 0 ? (
               <tr><td colSpan={6} className="px-4 py-8 text-center text-slate-400">No trades recorded yet.</td></tr>
            ) : (
              orders.map(order => (
                <tr key={order.id} className="border-b border-slate-100">
                  <td className="px-4 py-3 text-slate-500">{new Date(order.dateCreated).toLocaleDateString()}</td>
                  <td className="px-4 py-3 font-medium">{order.symbol}</td>
                  <td className="px-4 py-3 text-xs">
                    <div>Ent: ₹{order.entryPrice.toFixed(1)}</div>
                    {order.exitPrice && <div>Ext: ₹{order.exitPrice.toFixed(1)}</div>}
                  </td>
                  <td className="px-4 py-3">{order.quantity}</td>
                  <td className={`px-4 py-3 font-bold ${(order.pnl || 0) >= 0 ? 'text-emerald-600' : 'text-red-600'}`}>
                    {order.pnl ? formatCurrency(order.pnl) : '-'}
                  </td>
                  <td className="px-4 py-3">
                     <Badge color={order.status === 'OPEN' ? 'bg-blue-100 text-blue-700' : (order.pnl || 0) > 0 ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700'}>
                       {order.status}
                     </Badge>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans">
      {/* Top Navigation */}
      <header className="bg-white border-b border-slate-200 px-6 py-4 flex justify-between items-center sticky top-0 z-20">
        <div className="flex items-center gap-3">
          <div className="bg-emerald-600 text-white p-2 rounded-lg">
            <Activity size={20} />
          </div>
          <div>
            <h1 className="font-bold text-lg leading-tight">SwingTrader Pro</h1>
            <p className="text-xs text-slate-500">1% Weekly Low-Risk Strategy</p>
          </div>
        </div>
        
        {/* Global Controls */}
        <div className="flex items-center gap-4">
          <button 
            onClick={() => setEmergencyStop(!emergencyStop)}
            className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold border ${emergencyStop ? 'bg-red-600 text-white border-red-600 animate-pulse' : 'bg-white text-slate-600 border-slate-300'}`}
          >
            {emergencyStop ? <Pause size={12} /> : <Play size={12} />}
            {emergencyStop ? 'TRADING STOPPED' : 'Trading Active'}
          </button>
          
          <button onClick={simulateWebhookAlert} className="hidden md:flex items-center gap-2 px-3 py-1.5 rounded-md bg-indigo-50 text-indigo-700 text-xs font-medium border border-indigo-100 hover:bg-indigo-100">
             <Bell size={12} /> Test Webhook Alert
          </button>
        </div>
      </header>

      <div className="flex">
        {/* Sidebar */}
        <aside className="w-64 bg-slate-900 min-h-[calc(100vh-73px)] hidden md:block text-slate-300 p-4">
          <nav className="space-y-2">
            {[
              { id: 'dashboard', label: 'Dashboard', icon: LineChart },
              { id: 'universe', label: 'Universe Manager', icon: Wallet },
              { id: 'journal', label: 'Journal', icon: FileText },
              { id: 'settings', label: 'Settings', icon: Settings },
            ].map((item) => (
              <button
                key={item.id}
                onClick={() => setView(item.id as any)}
                className={`flex items-center gap-3 w-full px-4 py-3 rounded-lg text-sm font-medium transition-colors ${view === item.id ? 'bg-emerald-600 text-white' : 'hover:bg-slate-800'}`}
              >
                <item.icon size={18} />
                {item.label}
              </button>
            ))}
          </nav>
          
          <div className="mt-10 p-4 bg-slate-800 rounded-lg text-xs">
            <h4 className="font-semibold text-slate-200 mb-2">Portfolio Snapshot</h4>
            <div className="flex justify-between mb-1">
              <span>Capital</span>
              <span>{formatCurrency(settings.capital)}</span>
            </div>
            <div className="flex justify-between">
              <span>Risk/Trade</span>
              <span>{settings.riskPerTradePercent}%</span>
            </div>
          </div>
        </aside>

        {/* Main Content */}
        <main className="flex-1 p-6">
          {view === 'dashboard' && <Dashboard />}
          {view === 'universe' && <UniverseManager />}
          {view === 'journal' && <Journal />}
          {view === 'settings' && (
            <div className="max-w-md bg-white p-6 rounded-lg shadow-sm border border-slate-200">
               <h2 className="font-bold text-lg mb-4">Risk & Strategy Settings</h2>
               <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Total Capital (₹)</label>
                    <input type="number" className="w-full border border-slate-300 rounded p-2" value={settings.capital} onChange={(e) => setSettings({...settings, capital: Number(e.target.value)})} />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Risk Per Trade (%)</label>
                    <input type="number" step="0.1" className="w-full border border-slate-300 rounded p-2" value={settings.riskPerTradePercent} onChange={(e) => setSettings({...settings, riskPerTradePercent: Number(e.target.value)})} />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Max Trades Per Week</label>
                    <input type="number" className="w-full border border-slate-300 rounded p-2" value={settings.maxTradesPerWeek} onChange={(e) => setSettings({...settings, maxTradesPerWeek: Number(e.target.value)})} />
                  </div>
               </div>
            </div>
          )}
        </main>
      </div>

      {/* Alert / Order Modal */}
      {pendingAlert && (
        <div className="fixed inset-0 bg-slate-900/70 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-2xl max-w-lg w-full overflow-hidden">
            <div className="bg-emerald-600 px-6 py-4 flex justify-between items-center text-white">
              <h3 className="font-bold flex items-center gap-2"><Bell size={18} /> Entry Signal Detected</h3>
              <button onClick={() => setPendingAlert(null)}><XCircle size={24} className="opacity-80 hover:opacity-100" /></button>
            </div>
            
            <div className="p-6">
               <div className="flex justify-between items-start mb-6">
                 <div>
                   <div className="text-2xl font-bold text-slate-800">{pendingAlert.symbol}</div>
                   <div className="text-sm text-slate-500">Tier A • Alerted at {new Date(pendingAlert.dateCreated).toLocaleTimeString()}</div>
                 </div>
                 <div className="text-right">
                   <div className="text-sm font-medium text-slate-500">Current Price</div>
                   <div className="text-xl font-bold text-slate-800">₹{pendingAlert.entryPrice.toFixed(2)}</div>
                 </div>
               </div>

               <div className="bg-slate-50 p-4 rounded-lg border border-slate-200 mb-6 space-y-3">
                  <div className="flex justify-between items-center">
                    <span className="text-sm font-medium text-slate-600">Quantity</span>
                    <span className="text-lg font-bold text-blue-700 bg-blue-50 px-3 py-0.5 rounded border border-blue-100">{pendingAlert.quantity}</span>
                  </div>
                  <div className="flex justify-between items-center text-sm">
                    <span className="text-slate-500">Risk Amount ({(pendingAlert.riskAmount).toFixed(0)})</span>
                    <span className="font-mono">₹{formatCurrency(pendingAlert.quantity * (pendingAlert.entryPrice - pendingAlert.stopLoss))}</span>
                  </div>
                  
                  <hr className="border-slate-200" />
                  
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs text-slate-500 mb-1">Stop Loss</label>
                      <input 
                        type="number" 
                        value={pendingAlert.stopLoss.toFixed(2)} 
                        onChange={(e) => setPendingAlert({...pendingAlert, stopLoss: Number(e.target.value), quantity: Math.floor(pendingAlert.riskAmount / (pendingAlert.entryPrice - Number(e.target.value))) })}
                        className="w-full text-sm border-red-300 border rounded p-1.5 text-red-700 bg-red-50 font-semibold" 
                      />
                    </div>
                    <div>
                      <label className="block text-xs text-slate-500 mb-1">Target</label>
                      <input 
                        type="number" 
                        value={pendingAlert.target.toFixed(2)} 
                        onChange={(e) => setPendingAlert({...pendingAlert, target: Number(e.target.value)})}
                        className="w-full text-sm border-emerald-300 border rounded p-1.5 text-emerald-700 bg-emerald-50 font-semibold" 
                      />
                    </div>
                  </div>
               </div>

               <div className="flex gap-3">
                 <button 
                   onClick={() => setPendingAlert(null)}
                   className="flex-1 py-3 text-sm font-medium text-slate-600 bg-white border border-slate-300 rounded-lg hover:bg-slate-50">
                   Reject / Ignore
                 </button>
                 <button 
                   onClick={() => {
                     const updatedOrder = { ...pendingAlert, status: 'OPEN' as const };
                     confirmOrder(updatedOrder);
                   }}
                   className="flex-1 py-3 text-sm font-bold text-white bg-emerald-600 rounded-lg hover:bg-emerald-700 flex justify-center items-center gap-2 shadow-lg shadow-emerald-200">
                   Confirm & Log Order <ArrowRight size={16} />
                 </button>
               </div>
               
               <p className="mt-4 text-xs text-center text-slate-400">
                 By clicking Confirm, you acknowledge this trade adheres to the 1% strategy rules.
                 <br />No order is sent to broker automatically.
               </p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}