feat: implement dynamic position calculator with leverage slider

- Added comprehensive PositionCalculator component with real-time PnL calculations
- Implemented dynamic leverage adjustment with slider (1x to 100x)
- Added investment amount input for position sizing
- Integrated liquidation price calculations based on leverage and maintenance margin
- Added real-time price fetching from multiple sources (CoinGecko, CoinCap, Binance)
- Implemented automatic stop loss and take profit extraction from AI analysis
- Added risk/reward ratio calculations and position metrics
- Included trading fee calculations and net investment display
- Added position type selection (Long/Short) with dynamic PnL calculation
- Integrated high leverage warning system for risk management
- Added advanced settings for customizable trading fees and maintenance margins
- Automatically updates calculations when analysis parameters change
- Supports both manual price input and real-time market data
- Fully responsive design with gradient styling matching app theme

components/AIAnalysisPanel.tsx

@@ -2,6 +2,8 @@
 import React, { useState, useEffect } from 'react'
 import TradeModal from './TradeModal'
 import ScreenshotGallery from './ScreenshotGallery'
+import PositionCalculator from './PositionCalculator'
+import PriceFetcher from '../lib/price-fetcher'
 
 const layouts = (process.env.NEXT_PUBLIC_TRADINGVIEW_LAYOUTS || 'ai,Diy module').split(',').map(l => l.trim())
 const timeframes = [
@@ -65,6 +67,7 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
   const [enlargedScreenshot, setEnlargedScreenshot] = useState<string | null>(null)
   const [tradeModalOpen, setTradeModalOpen] = useState(false)
   const [tradeModalData, setTradeModalData] = useState<any>(null)
+  const [currentPrice, setCurrentPrice] = useState<number>(0)
 
   // Helper function to safely render any value
   const safeRender = (value: any): string => {
@@ -118,6 +121,25 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
     }
   }, [eventSource])
 
+  // Fetch current price when symbol changes
+  React.useEffect(() => {
+    const fetchPrice = async () => {
+      try {
+        const price = await PriceFetcher.getCurrentPrice(symbol)
+        setCurrentPrice(price)
+      } catch (error) {
+        console.error('Error fetching price:', error)
+      }
+    }
+
+    fetchPrice()
+    
+    // Set up periodic price updates every 30 seconds
+    const interval = setInterval(fetchPrice, 30000)
+    
+    return () => clearInterval(interval)
+  }, [symbol])
+
   const toggleLayout = (layout: string) => {
     setSelectedLayouts(prev => 
       prev.includes(layout) 
@@ -1375,6 +1397,26 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
         </div>
       )}
 
+      {/* Position Calculator */}
+      {result && result.analysis && (
+        <div className="mt-6">
+          <PositionCalculator
+            analysis={result.analysis}
+            currentPrice={
+              result.analysis.entry?.price || 
+              result.analysis.entry || 
+              (typeof result.analysis.entry === 'string' ? parseFloat(result.analysis.entry.replace(/[^0-9.-]+/g, '')) : 0) ||
+              currentPrice ||
+              0
+            }
+            symbol={symbol}
+            onPositionChange={(position) => {
+              console.log('Position calculation updated:', position)
+            }}
+          />
+        </div>
+      )}
+
       {result && !result.analysis && result.screenshots && (
         <div className="mt-6 p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
           <h3 className="text-lg font-bold text-yellow-400 mb-2">Screenshots Captured</h3>