"use client";

import React, { useState, useEffect, useCallback, useRef } from 'react';
import { marketService } from '@/services/marketService';
import { RefreshCw, Zap, TrendingUp, TrendingDown, Activity, Shield, Target, BarChart3, Globe, Radio } from 'lucide-react';
import PageBreadcrumb from "@/components/common/PageBreadCrumb";
import ComponentCard from "@/components/common/ComponentCard";
import Badge from "@/components/ui/badge/Badge";
import Button from "@/components/ui/button/Button";
import { Table, TableHeader, TableBody, TableRow, TableCell } from "@/components/ui/table";
import { useSocket } from '@/hooks/useSocket';

export default function CryptoTradingPage() {
  const [selectedSymbol, setSelectedSymbol] = useState('BTCUSDT');
  const [multiAnalysis, setMultiAnalysis] = useState<any[]>([]);
  const [detailedAnalysis, setDetailedAnalysis] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [lastUpdated, setLastUpdated] = useState('');
  const [aiChat, setAiChat] = useState<string>('');
  const [isAnalyzing, setIsAnalyzing] = useState(false);

  const fetchAllData = useCallback(async () => {
    setLoading(true);
    try {
      const [multi, detailed] = await Promise.all([
        marketService.getMultiCryptoAnalysis(),
        marketService.getCryptoAnalysis(selectedSymbol)
      ]);
      setMultiAnalysis(multi || []);
      setDetailedAnalysis(detailed);
      setLastUpdated(new Date().toLocaleTimeString());
    } catch (error) {
      console.error("Error fetching crypto data:", error);
    } finally {
      setLoading(false);
    }
  }, [selectedSymbol]);

  useEffect(() => {
    fetchAllData();
    const interval = setInterval(fetchAllData, 120000); 
    return () => clearInterval(interval);
  }, [fetchAllData]);

  const onSocketData = useCallback((payload: any) => {
    if (payload.type === 'CRYPTO_ANALYSIS' && payload.data) {
      const newData = payload.data;
      if (newData.symbol === selectedSymbol) {
        setDetailedAnalysis(newData);
      }
      setMultiAnalysis(prev => prev.map(item => item.symbol === newData.symbol ? newData : item));
      setLastUpdated(new Date().toLocaleTimeString());
    }
  }, [selectedSymbol]);

  useSocket(`crypto_data_${selectedSymbol}`, onSocketData);
  ['BTCUSDT', 'BTCUSD', 'ETHUSDT', 'SOLUSDT', 'BNBUSDT', 'XRPUSDT'].forEach(s => {
    useSocket(`crypto_data_${s}`, onSocketData);
  });

  const parseAIResponse = (text: string) => {
    if (!text) return '';
    let html = text;

    // Remove any thought blocks
    html = html.replace(/<think>[\s\S]*?<\/think>/g, '');

    // Ultra-Premium HUD Headers (Light/Dark Aware)
    html = html.replace(/^# (.*$)/gm, '<div class="relative overflow-hidden p-4 sm:p-6 rounded-2xl bg-gradient-to-br from-brand-50 to-white dark:from-[#0f172a] dark:to-[#1e293b] border border-brand-200 dark:border-brand-500/30 mb-10 shadow-sm dark:shadow-[0_0_30px_rgba(70,95,255,0.15)]"><div class="absolute -right-10 -top-10 w-48 h-48 bg-brand-500/10 dark:bg-brand-500/20 blur-3xl rounded-full"></div><div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5 relative z-10"><div class="p-3 sm:p-4 bg-white dark:bg-brand-500/20 rounded-2xl border border-brand-100 dark:border-brand-500/40 shadow-sm dark:shadow-[0_0_15px_rgba(70,95,255,0.5)]"><svg class="w-6 h-6 sm:w-8 sm:h-8 text-brand-500 dark:text-brand-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg></div><div><h1 class="text-2xl sm:text-3xl font-black text-gray-900 dark:text-white tracking-tighter uppercase dark:text-transparent dark:bg-clip-text dark:bg-gradient-to-r dark:from-white dark:to-gray-400 dark:drop-shadow-lg">$1</h1><p class="text-[9px] sm:text-[10px] font-black text-brand-600 dark:text-brand-400 uppercase tracking-[0.4em] mt-1.5 flex items-center gap-2"><span class="w-1.5 h-1.5 bg-brand-500 rounded-full animate-pulse"></span> ALGOSYNC PROTOCOL ENGAGED</p></div></div></div>');
    
    html = html.replace(/^## (.*$)/gm, '<div class="flex items-center gap-4 mt-12 mb-6"><div class="h-px bg-gradient-to-r from-brand-500/0 via-brand-500/30 dark:via-brand-500/50 to-brand-500/0 flex-1"></div><h2 class="text-lg font-black text-gray-900 dark:text-white uppercase tracking-[0.2em] px-4 py-1.5 rounded-lg bg-brand-50 dark:bg-brand-500/10 border border-brand-200 dark:border-brand-500/20 shadow-sm dark:shadow-[0_0_15px_rgba(70,95,255,0.1)]">$1</h2><div class="h-px bg-gradient-to-r from-brand-500/0 via-brand-500/30 dark:via-brand-500/50 to-brand-500/0 flex-1"></div></div>');
    
    html = html.replace(/^### (.*$)/gm, '<h3 class="text-sm font-bold text-gray-600 dark:text-gray-400 mt-8 mb-4 uppercase tracking-[0.2em] flex items-center gap-2"><span class="w-4 h-px bg-brand-500/50"></span>$1</h3>');

    // Bold text with neon glow
    html = html.replace(/\*\*(.*?)\*\*/g, '<strong class="font-bold text-gray-900 dark:text-white bg-brand-50 dark:bg-brand-500/10 px-2 py-0.5 rounded border border-brand-200 dark:border-brand-500/20 dark:shadow-[0_0_10px_rgba(70,95,255,0.1)]">$1</strong>');

    // Target/List Points
    html = html.replace(/^\-\s+(.*$)/gm, '<div class="flex items-start gap-4 mb-4 p-4 rounded-xl bg-gray-50 dark:bg-[#0f172a]/50 border border-gray-100 dark:border-white/5 hover:border-brand-300 dark:hover:border-brand-500/30 transition-all hover:bg-white dark:hover:bg-[#0f172a] hover:shadow-sm dark:hover:shadow-[0_0_20px_rgba(70,95,255,0.05)] group"><div class="mt-1.5 w-2 h-2 bg-gray-300 dark:bg-gray-600 rounded-sm transform rotate-45 group-hover:bg-brand-500 transition-colors dark:shadow-[0_0_10px_rgba(70,95,255,0)] dark:group-hover:shadow-[0_0_10px_rgba(70,95,255,0.8)] flex-shrink-0"></div><p class="text-gray-700 dark:text-gray-300 leading-relaxed text-[15px]">$1</p></div>');

    // Direction Signals
    html = html.replace(/Direction:\s*(🟢\s*LONG|🔴\s*SHORT|⚪\s*AVOID|⭕\s*EXIT|🔵\s*HOLD)/gi, (match, p1) => {
      const isLong = p1.includes('LONG');
      const isShort = p1.includes('SHORT');
      const isExit = p1.includes('EXIT');
      const isHold = p1.includes('HOLD');
      
      const colorClass = isLong ? 'bg-success-50 dark:bg-success-500/10 text-success-600 dark:text-success-400 border-success-200 dark:border-success-500/30 dark:shadow-[0_0_20px_rgba(18,183,106,0.2)]' 
                       : isShort ? 'bg-error-50 dark:bg-error-500/10 text-error-600 dark:text-error-400 border-error-200 dark:border-error-500/30 dark:shadow-[0_0_20px_rgba(240,68,56,0.2)]' 
                       : isExit ? 'bg-orange-50 dark:bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-200 dark:border-orange-500/30'
                       : isHold ? 'bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-200 dark:border-blue-500/30'
                       : 'bg-gray-100 dark:bg-gray-500/10 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-500/30';
      
      const glowDot = isLong ? 'bg-success-500' : isShort ? 'bg-error-500' : isExit ? 'bg-orange-500' : isHold ? 'bg-blue-500' : 'bg-gray-500';
      
      let label = 'AVOID';
      if (isLong) label = 'LONG';
      else if (isShort) label = 'SHORT';
      else if (isExit) label = 'EXIT PREVIOUS';
      else if (isHold) label = 'HOLD POSITION';

      return `<div class="inline-flex items-center gap-3 px-6 py-3 rounded-xl border ${colorClass} font-black text-[13px] tracking-[0.2em] uppercase mb-6 backdrop-blur-sm"><span class="relative flex h-2.5 w-2.5"><span class="animate-ping absolute inline-flex h-full w-full rounded-full ${glowDot} opacity-75"></span><span class="relative inline-flex rounded-full h-2.5 w-2.5 ${glowDot}"></span></span>DIRECTION: ${label}</div>`;
    });

    // Verdict Display (Compact & Premium)
    html = html.replace(/Verdict:\s*(✅\s*YES|❌\s*NO)/gi, (match, p1) => {
      const isYes = p1.includes('YES');
      const boxColor = isYes ? 'from-success-50 to-white dark:from-success-500/20 dark:to-[#0a0a0b] border-success-200 dark:border-success-500/40 dark:shadow-[0_0_30px_rgba(18,183,106,0.15)]' : 'from-error-50 to-white dark:from-error-500/20 dark:to-[#0a0a0b] border-error-200 dark:border-error-500/40 dark:shadow-[0_0_30px_rgba(240,68,56,0.15)]';
      const textColor = isYes ? 'text-success-600 dark:text-success-400' : 'text-error-600 dark:text-error-400';
      return `<div class="mt-2 mb-8 py-5 px-4 sm:px-8 rounded-2xl bg-gradient-to-b ${boxColor} flex flex-col items-center justify-center text-center border overflow-hidden relative"><div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-[0.03] dark:opacity-[0.03]"></div><span class="text-[9px] sm:text-[10px] font-black uppercase tracking-[0.4em] opacity-60 mb-1.5 relative z-10 text-gray-800 dark:text-white">System Verdict</span><span class="text-2xl sm:text-3xl font-black tracking-tight ${textColor} relative z-10 drop-shadow-sm dark:drop-shadow-lg">${isYes ? 'EXECUTION APPROVED' : 'EXECUTION DENIED'}</span></div>`;
    });

    // HUD Tables (Streaming Safe, Light/Dark Aware)
    if (html.includes('|')) {
      const lines = html.split('\n');
      let newLines = [];
      let inTable = false;
      let tableHtml = '';
      
      for (let i = 0; i < lines.length; i++) {
        const line = lines[i].trim();
        if (line.startsWith('|') && line.endsWith('|')) {
          if (!inTable) {
            inTable = true;
            tableHtml = '<div class="my-8 rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#0f172a]/80 dark:backdrop-blur-md overflow-x-auto shadow-sm dark:shadow-[0_0_30px_rgba(0,0,0,0.5)]"><div class="min-w-[500px]">';
          }
          if (line.includes('---')) continue;
          
          const cells = line.split('|').filter((_, idx, arr) => idx > 0 && idx < arr.length - 1).map(c => c.trim());
          const colCount = Math.min(cells.length, 4);
          const gridStyle = `grid-template-columns: repeat(${colCount}, minmax(0, 1fr))`;
          
          if (!tableHtml.includes('bg-brand-50')) {
             tableHtml += `<div class="grid bg-brand-50 dark:bg-brand-500/10 border-b border-brand-200 dark:border-brand-500/30 p-5 gap-4" style="${gridStyle}">`;
             cells.forEach(cell => {
                tableHtml += `<div class="text-xs font-black text-brand-600 dark:text-brand-400 uppercase tracking-[0.2em] dark:drop-shadow-[0_0_5px_rgba(70,95,255,0.8)] text-left">${cell}</div>`;
             });
             tableHtml += '</div>';
          } else {
             tableHtml += `<div class="grid p-5 border-b border-gray-100 dark:border-white/[0.05] hover:bg-gray-50 dark:hover:bg-brand-500/5 transition-colors items-center gap-4 group" style="${gridStyle}">`;
             cells.forEach((cell, idx) => {
                let formattedCell = cell;
                if (cell.toUpperCase().includes('BULL') || cell.toUpperCase().includes('LONG') || cell.toUpperCase() === 'YES') {
                  formattedCell = `<span class="inline-flex px-3 py-1 rounded bg-success-50 dark:bg-success-500/10 text-success-600 dark:text-success-400 font-black text-[11px] uppercase tracking-widest border border-success-200 dark:border-success-500/20 dark:shadow-[0_0_10px_rgba(18,183,106,0.2)]">${cell}</span>`;
                } else if (cell.toUpperCase().includes('BEAR') || cell.toUpperCase().includes('SHORT') || cell.toUpperCase() === 'NO') {
                  formattedCell = `<span class="inline-flex px-3 py-1 rounded bg-error-50 dark:bg-error-500/10 text-error-600 dark:text-error-400 font-black text-[11px] uppercase tracking-widest border border-error-200 dark:border-error-500/20 dark:shadow-[0_0_10px_rgba(240,68,56,0.2)]">${cell}</span>`;
                } else if (idx === 0) {
                  formattedCell = `<span class="text-gray-700 dark:text-gray-300 font-bold group-hover:text-gray-900 dark:group-hover:text-white transition-colors flex items-center gap-2"><span class="w-1.5 h-1.5 bg-gray-300 dark:bg-white/20 rounded-full group-hover:bg-brand-500 transition-colors"></span>${cell}</span>`;
                } else {
                  formattedCell = `<span class="text-gray-900 dark:text-white font-mono font-bold text-lg">${cell}</span>`;
                }
                tableHtml += `<div class="text-left">${formattedCell}</div>`;
             });
             tableHtml += '</div>';
          }
        } else {
          if (inTable) {
            tableHtml += '</div></div>';
            newLines.push(tableHtml);
            inTable = false;
            tableHtml = '';
          }
          newLines.push(line);
        }
      }
      if (inTable) {
        tableHtml += '</div></div>';
        newLines.push(tableHtml);
      }
      html = newLines.join('\n');
    }

    // Paragraphs
    html = html.split('\n').map(line => {
      const trimmed = line.trim();
      if (!trimmed || trimmed.startsWith('<div') || trimmed.startsWith('<h') || trimmed.startsWith('<hr')) return line;
      // Hide the <DATA> tags from UI
      if (trimmed.startsWith('<DATA>') || trimmed.startsWith('</DATA>') || trimmed.startsWith('{') || (trimmed.includes('"direction"') && trimmed.includes(':'))) return '';
      return `<p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-5 text-[15px] dark:opacity-90">${line}</p>`;
    }).join('');

    return html;
  };

  const runAIAnalysis = async () => {
    if (!detailedAnalysis) return;
    setIsAnalyzing(true);
    setAiChat("");
    
    const context = JSON.stringify(detailedAnalysis);
    const systemPrompt = `You are CR LEGEND — an elite crypto quant strategist. 
    Analyze the provided SMC and TA data for ${selectedSymbol}. 
    
    CRITICAL: You are managing a continuous trade lifecycle. 
    If a previous trade is active, you must decide to HOLD, EXIT, or TRAIL SL.
    If you recommend a NEW trade while an old one is active, EXPLICITLY state "EXIT PREVIOUS TRADE" in reasoning.

    STABILITY RULE: To prevent flip-flopping, you MUST output AVOID if the Market Structure is CHOP or if the indicators give mixed signals. Do NOT switch between LONG and SHORT rapidly. Require strong conviction to issue a LONG or SHORT. If algorithmic "recommended" bias is AVOID, respect it unless there is overwhelming evidence.

    Structure your response EXACTLY like this:
    # 🏦 CR LEGEND SIGNAL
    Direction: 🟢 LONG or 🔴 SHORT or ⚪ AVOID or ⭕ EXIT or 🔵 HOLD
    Verdict: ✅ YES or ❌ NO
    
    ## 📊 KEY QUANT METRICS
    | Metric | Value | Institutional Bias |
    |:---|:---|:---|
    | Market Structure | [val] | [bias] |
    | RSI (14) | [val] | [bias] |
    | VSA Volume | [val] | [bias] |
    | Volatility (ATR) | [val] | [bias] |
    | DOM Bias | [val] | [bias] |
    | ADX Strength | [val] | [bias] |
    | Funding | [val] | [bias] |
    
    ## 🎯 EXECUTION TARGETS
    | Level | Price | Notes |
    |:---|:---|:---|
    | Entry POI | [val] | [note] |
    | Stop Loss | [val] | [note] |
    | Target 1 | [val] | [note] |
    | Target 2 | [val] | [note] |
    
    ## 🧠 STRATEGIC REASONING
    - Point 1
    - Point 2

    IMPORTANT: You MUST end your response with this exact JSON block inside tags:
    <DATA>
    {
      "direction": "LONG/SHORT/AVOID/EXIT/HOLD",
      "verdict": "YES/NO",
      "entry": 0.0,
      "sl": 0.0,
      "tp1": 0.0,
      "tp2": 0.0
    }
    </DATA>
    `;

    try {
      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/ai/chat/crypto`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          message: `Market Data: ${context}`, 
          system_prompt: systemPrompt,
          symbol: selectedSymbol 
        }),
        credentials: 'include'
      });
      if (!response.body) return;
      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let fullContent = "";
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        const chunk = decoder.decode(value);
        const lines = chunk.split('\n');
        for (const line of lines) {
          if (line.startsWith('data: ')) {
            try {
              const json = JSON.parse(line.substring(6));
              if (json.text) { 
                fullContent += json.text; 
                setAiChat(parseAIResponse(fullContent)); 
              }
            } catch (e) {}
          }
        }
      }
    } catch (error) {} finally { setIsAnalyzing(false); }
  };

  const formatPrice = (price: number) => price?.toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: price < 1 ? 4 : 2 });

  return (
    <div className="space-y-6 pb-12 bg-gray-50/30 dark:bg-transparent min-h-screen p-4 sm:p-6">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0 mb-4">
        <PageBreadcrumb pageTitle="Institutional Crypto Terminal" />
        <div className="flex items-center gap-2 bg-white dark:bg-gray-900 p-2 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm w-full sm:w-auto justify-center sm:justify-start">
           <div className="w-2 h-2 bg-success-500 rounded-full animate-pulse"></div>
           <span className="text-[10px] font-black text-gray-500 uppercase tracking-widest">Live Node: HQ-CR-01</span>
        </div>
      </div>

      {/* Market Overview Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
        {multiAnalysis.map((coin: any) => (
          <div 
            key={coin.symbol}
            onClick={() => setSelectedSymbol(coin.symbol)}
            className={`cursor-pointer transition-all p-5 rounded-3xl border-2 ${
              selectedSymbol === coin.symbol 
              ? 'bg-brand-500/10 border-brand-500 shadow-xl shadow-brand-500/10 scale-[1.02]' 
              : 'bg-white dark:bg-gray-900 border-white dark:border-gray-900 hover:border-brand-500/20'
            }`}
          >
            <div className="flex justify-between items-start mb-2">
              <span className="font-black text-gray-800 dark:text-white tracking-tighter text-lg">{coin.symbol.replace('USDT', '')}</span>
              <Badge color={coin.change24h >= 0 ? 'success' : 'error'} variant="light" size="sm">
                {coin.change24h > 0 ? '+' : ''}{coin.change24h.toFixed(2)}%
              </Badge>
            </div>
            <div className="text-2xl font-black text-gray-900 dark:text-white mb-2 font-mono">
              {formatPrice(coin.price)}
            </div>
            <div className="flex items-center gap-2">
               <div className="h-1.5 flex-1 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                 <div className={`h-full ${coin.change24h >= 0 ? 'bg-success-500' : 'bg-error-500'}`} style={{ width: Math.min(100, Math.abs(coin.change24h) * 10) + '%' }}></div>
               </div>
            </div>
          </div>
        ))}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <div className="lg:col-span-8 space-y-6">
          <ComponentCard title={`Advanced Market Intelligence: ${selectedSymbol}`}>
             <div className="flex flex-col xl:flex-row items-start xl:items-center justify-between gap-6 mb-8">
                <div className="flex flex-row items-center gap-4 sm:gap-6">
                   <div>
                      <p className="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em] mb-1">Live Asset Value</p>
                      <p className="text-2xl sm:text-5xl font-black text-gray-900 dark:text-white font-mono tracking-tighter">{detailedAnalysis ? formatPrice(detailedAnalysis.price) : '0.00'}</p>
                   </div>
                   <div className="h-8 sm:h-12 w-px bg-gray-200 dark:bg-gray-800"></div>
                   <div>
                      <p className="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em] mb-1">Volatility Offset</p>
                      <p className={`text-base sm:text-xl font-black ${detailedAnalysis?.change24h >= 0 ? 'text-success-500' : 'text-error-500'}`}>
                        {detailedAnalysis ? `${detailedAnalysis.change24h > 0 ? '+' : ''}${detailedAnalysis.change24h.toFixed(2)}%` : '--'}
                      </p>
                   </div>
                </div>
                <div className="flex flex-row items-center gap-2 sm:gap-3 xl:w-auto">
                  <Button onClick={fetchAllData} variant="outline" size="sm" className="xl:flex-none justify-center whitespace-nowrap" startIcon={<RefreshCw size={16} className={loading ? 'animate-spin' : ''} />}>Sync Feed</Button>
                  <Button onClick={runAIAnalysis} variant="primary" size="sm" className="xl:flex-none px-4 sm:px-8 shadow-xl shadow-brand-500/30 justify-center whitespace-nowrap" startIcon={<Zap size={18} fill="currentColor" />}>DECODE MARKET FLOW</Button>
                </div>
             </div>

             <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-8">
                <MetricBox label="RSI CORE" value={detailedAnalysis?.indicators?.rsi?.toFixed(2) || '0.00'} sub={detailedAnalysis?.indicators?.rsi > 70 ? 'OVERBOUGHT' : detailedAnalysis?.indicators?.rsi < 30 ? 'OVERSOLD' : 'NEUTRAL'} />
                <MetricBox label="STRUCTURE" value={detailedAnalysis?.smc?.structure?.trend || 'CHOP'} sub={detailedAnalysis?.smc?.structure?.label || 'DETECTING...'} />
                <MetricBox label="VOL (ATR)" value={detailedAnalysis?.indicators?.atr?.toFixed(4) || '0.0000'} sub="MARKET RANGE" />
                <MetricBox label="VSA BIAS" value={detailedAnalysis?.smc?.vsa || 'NEUTRAL'} sub="VOLUME FLOW" />
                <MetricBox label="ADX TREND" value={detailedAnalysis?.indicators?.adx?.adx?.toFixed(2) || '0.00'} sub={detailedAnalysis?.indicators?.adx?.strength || 'DETECTING...'} />
                <MetricBox label="DOM FLOW" value={detailedAnalysis?.orderBook?.obRatio || '1.00'} sub={detailedAnalysis?.orderBook?.obBias || 'BALANCED'} />
             </div>

             <div className="space-y-4">
                <h4 className="text-sm font-black text-gray-800 dark:text-white flex items-center gap-2 uppercase tracking-[0.3em]">
                  <Target size={18} className="text-brand-500" /> SMC Algo Signatures
                </h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <PatternCard label="FVG Gap Recognition" value={detailedAnalysis?.smc?.fvg || 'None Detected'} icon={<Activity size={20} />} color="info" />
                   <PatternCard label="Candle Pattern ID" value={detailedAnalysis?.smc?.candlePattern || 'Neutral'} icon={<Globe size={20} />} color="warning" />
                </div>
             </div>
          </ComponentCard>

          <ComponentCard title="Institutional Quant Intelligence (V8.2)">
             <div className={`min-h-[600px] relative ${isAnalyzing ? 'opacity-80' : ''}`}>
                {/* Tactical Scanline Effect */}
                <div className="absolute inset-0 pointer-events-none opacity-[0.03] overflow-hidden z-10">
                   <div className="w-full h-1 bg-brand-500 absolute top-0 animate-[scan_4s_linear_infinite]"></div>
                </div>

                {isAnalyzing && (
                  <div className="absolute top-0 right-0 z-20 flex items-center gap-2 bg-brand-500 text-white px-3 py-1 rounded-bl-xl text-[9px] font-black tracking-widest animate-pulse">
                     <Radio size={10} /> SYSTEM: DECIPHERING FLOW...
                  </div>
                )}

                {aiChat ? (
                  <div className="grid grid-cols-1 gap-8 relative z-0">
                    <div className="ai-detailed-response" dangerouslySetInnerHTML={{ __html: aiChat }} />
                  </div>
                ) : (
                  <div className="flex flex-col items-center justify-center h-full py-32 text-center space-y-8">
                    <div className="relative">
                       <div className="absolute inset-0 bg-brand-500/20 blur-3xl rounded-full"></div>
                       <div className="relative p-8 bg-white dark:bg-gray-900 rounded-full border border-gray-100 dark:border-gray-800 shadow-2xl">
                          <Zap size={64} className="text-brand-500 animate-pulse" fill="currentColor" />
                       </div>
                    </div>
                    <div className="max-w-md mx-auto">
                       <h3 className="text-2xl font-black text-gray-800 dark:text-white uppercase tracking-tighter mb-2">Quant Terminal Idle</h3>
                       <p className="text-gray-500 font-medium">Click "DECODE MARKET FLOW" to initiate institutional-grade signal detection.</p>
                    </div>
                  </div>
                )}
             </div>
          </ComponentCard>
        </div>

        <div className="lg:col-span-4 space-y-6">
          <ComponentCard title="Dynamic Sentiment Gauge">
             <div className="space-y-8">
                <div className="flex flex-col gap-3">
                   <span className="text-[10px] font-black text-gray-400 uppercase tracking-[0.3em]">Institutional Bias</span>
                   <div className="flex">
                     <Badge color="primary" variant="solid" size="sm" className="px-3">BULLISH ACCUMULATION</Badge>
                   </div>
                </div>
                <div className="space-y-4">
                   <div className="flex justify-between text-xs font-black">
                      <span className="text-success-500">BULL POWER (72%)</span>
                      <span className="text-error-500">BEAR POWER (28%)</span>
                   </div>
                   <div className="h-4 w-full bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden flex shadow-inner p-1">
                      <div className="h-full bg-success-500 rounded-full transition-all duration-1000 shadow-[0_0_20px_rgba(18,183,106,0.6)]" style={{ width: '72%' }}></div>
                   </div>
                </div>
                <div className="pt-8 border-t border-gray-100 dark:border-gray-800 space-y-4">
                   <div className="flex items-center gap-4 text-xs font-black text-gray-600 dark:text-gray-400 uppercase tracking-widest">
                      <Shield size={20} className="text-success-500" />
                      Protocol: Risk Managed
                   </div>
                   <div className="flex items-center gap-4 text-xs font-black text-gray-600 dark:text-gray-400 uppercase tracking-widest">
                      <BarChart3 size={20} className="text-brand-500" />
                      Edge: institutional Edge V2
                   </div>
                </div>
             </div>
          </ComponentCard>

          <ComponentCard title="Liquidity Heatmap Levels">
             <div className="space-y-4">
                <div className="p-5 bg-success-500/5 rounded-3xl border border-success-500/10 flex justify-between items-center">
                   <div>
                      <p className="text-[10px] font-black text-success-600 uppercase tracking-widest mb-1">Buy Side Liquidity</p>
                      <p className="text-xl font-black text-gray-800 dark:text-white font-mono">{formatPrice(detailedAnalysis?.liquidity?.bsl)}</p>
                   </div>
                   <div className="p-2 bg-success-500/20 rounded-xl text-success-600"><TrendingUp size={24} /></div>
                </div>
                <div className="p-5 bg-error-500/5 rounded-3xl border border-error-500/10 flex justify-between items-center">
                   <div>
                      <p className="text-[10px] font-black text-error-600 uppercase tracking-widest mb-1">Sell Side Liquidity</p>
                      <p className="text-xl font-black text-gray-800 dark:text-white font-mono">{formatPrice(detailedAnalysis?.liquidity?.ssl)}</p>
                   </div>
                   <div className="p-2 bg-error-500/20 rounded-xl text-error-600"><TrendingDown size={24} /></div>
                </div>
             </div>
         </ComponentCard>

          <ComponentCard title="Algorithmic Execution Targets">
             <div className="space-y-4">
                {detailedAnalysis?.targets?.recommended === 'LONG' ? (
                  <div className="p-4 sm:p-5 bg-success-500/5 rounded-2xl border border-success-500/20 relative overflow-hidden">
                     <div className="absolute top-0 right-0 bg-success-500 text-white text-[9px] font-black px-3 py-1 rounded-bl-xl uppercase tracking-widest shadow-lg">System Bias: Long</div>
                     <p className="text-[10px] sm:text-xs font-black text-success-600 uppercase tracking-[0.2em] mb-5 mt-2 flex items-center gap-2"><span className="w-2 h-2 rounded-full bg-success-500 animate-pulse"></span> RECOMMENDED LONG SCENARIO</p>
                     <div className="grid grid-cols-2 gap-4 sm:gap-6">
                        <div className="bg-white/50 dark:bg-gray-900/50 p-3 rounded-xl border border-gray-100 dark:border-gray-800">
                           <p className="text-[9px] sm:text-[10px] text-gray-500 font-bold uppercase mb-1">Entry POI</p>
                           <p className="font-mono font-black text-lg sm:text-xl text-gray-900 dark:text-white break-words">{formatPrice(detailedAnalysis?.targets?.long?.entry)}</p>
                        </div>
                        <div className="bg-white/50 dark:bg-gray-900/50 p-3 rounded-xl border border-gray-100 dark:border-gray-800">
                           <p className="text-[9px] sm:text-[10px] text-gray-500 font-bold uppercase mb-1">Stop Loss</p>
                           <p className="font-mono font-black text-lg sm:text-xl text-error-500 break-words">{formatPrice(detailedAnalysis?.targets?.long?.sl)}</p>
                        </div>
                        <div className="bg-white/50 dark:bg-gray-900/50 p-3 rounded-xl border border-gray-100 dark:border-gray-800">
                           <p className="text-[9px] sm:text-[10px] text-gray-500 font-bold uppercase mb-1">Target 1</p>
                           <p className="font-mono font-black text-lg sm:text-xl text-success-500 break-words">{formatPrice(detailedAnalysis?.targets?.long?.tp1)}</p>
                        </div>
                        <div className="bg-white/50 dark:bg-gray-900/50 p-3 rounded-xl border border-gray-100 dark:border-gray-800">
                           <p className="text-[9px] sm:text-[10px] text-gray-500 font-bold uppercase mb-1">Target 2</p>
                           <p className="font-mono font-black text-lg sm:text-xl text-success-500 break-words">{formatPrice(detailedAnalysis?.targets?.long?.tp2)}</p>
                        </div>
                     </div>
                  </div>
                ) : (
                  <div className="p-4 sm:p-5 bg-error-500/5 rounded-2xl border border-error-500/20 relative overflow-hidden">
                     <div className="absolute top-0 right-0 bg-error-500 text-white text-[9px] font-black px-3 py-1 rounded-bl-xl uppercase tracking-widest shadow-lg">System Bias: Short</div>
                     <p className="text-[10px] sm:text-xs font-black text-error-600 uppercase tracking-[0.2em] mb-5 mt-2 flex items-center gap-2"><span className="w-2 h-2 rounded-full bg-error-500 animate-pulse"></span> RECOMMENDED SHORT SCENARIO</p>
                     <div className="grid grid-cols-2 gap-4 sm:gap-6">
                        <div className="bg-white/50 dark:bg-gray-900/50 p-3 rounded-xl border border-gray-100 dark:border-gray-800">
                           <p className="text-[9px] sm:text-[10px] text-gray-500 font-bold uppercase mb-1">Entry POI</p>
                           <p className="font-mono font-black text-lg sm:text-xl text-gray-900 dark:text-white break-words">{formatPrice(detailedAnalysis?.targets?.short?.entry)}</p>
                        </div>
                        <div className="bg-white/50 dark:bg-gray-900/50 p-3 rounded-xl border border-gray-100 dark:border-gray-800">
                           <p className="text-[9px] sm:text-[10px] text-gray-500 font-bold uppercase mb-1">Stop Loss</p>
                           <p className="font-mono font-black text-lg sm:text-xl text-success-500 break-words">{formatPrice(detailedAnalysis?.targets?.short?.sl)}</p>
                        </div>
                        <div className="bg-white/50 dark:bg-gray-900/50 p-3 rounded-xl border border-gray-100 dark:border-gray-800">
                           <p className="text-[9px] sm:text-[10px] text-gray-500 font-bold uppercase mb-1">Target 1</p>
                           <p className="font-mono font-black text-lg sm:text-xl text-error-500 break-words">{formatPrice(detailedAnalysis?.targets?.short?.tp1)}</p>
                        </div>
                        <div className="bg-white/50 dark:bg-gray-900/50 p-3 rounded-xl border border-gray-100 dark:border-gray-800">
                           <p className="text-[9px] sm:text-[10px] text-gray-500 font-bold uppercase mb-1">Target 2</p>
                           <p className="font-mono font-black text-lg sm:text-xl text-error-500 break-words">{formatPrice(detailedAnalysis?.targets?.short?.tp2)}</p>
                        </div>
                     </div>
                  </div>
                )}
             </div>
          </ComponentCard>
        </div>
      </div>
    </div>
  );
}

function MetricBox({ label, value, sub }: any) {
  return (
    <div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6 flex flex-col justify-between overflow-hidden group hover:border-brand-500/50 transition-colors">
      <p className="text-[10px] font-bold text-gray-500 dark:text-gray-400 uppercase tracking-widest mb-3 line-clamp-1 group-hover:text-brand-500 transition-colors">{label}</p>
      <p className="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white/90 leading-tight font-mono break-all sm:break-words">{value}</p>
      <div className="mt-3">
        <Badge color="light" size="sm" className="max-w-full">
           <span className="truncate">{sub}</span>
        </Badge>
      </div>
    </div>
  );
}

function PatternCard({ label, value, icon, color }: any) {
  const colorMap: any = {
    success: 'text-success-500 bg-success-500/10 border-success-500/20',
    error: 'text-error-500 bg-error-500/10 border-error-500/20',
    info: 'text-info-500 bg-info-500/10 border-info-500/20',
    warning: 'text-warning-500 bg-warning-500/10 border-warning-500/20'
  };

  return (
    <div className={`p-5 rounded-3xl border-2 flex items-center gap-5 transition-all hover:scale-[1.02] ${colorMap[color] || 'bg-gray-50'}`}>
      <div className="p-3 rounded-2xl bg-white dark:bg-gray-900 shadow-theme-sm">
        {icon}
      </div>
      <div>
        <p className="text-[10px] font-black uppercase tracking-widest opacity-60 mb-1">{label}</p>
        <p className="text-sm font-black truncate max-w-[150px]">{value}</p>
      </div>
    </div>
  );
}