import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { 
  ArrowUp, ArrowDown, Activity, Clock, Zap, TrendingUp, TrendingDown, 
  RefreshCw, Wifi, WifiOff, Layers, Box, AlertTriangle, BookOpen, Info, 
  Flame, Globe, BarChart2, Battery, BatteryCharging, Gauge, HelpCircle, Target, Skull
} from 'lucide-react';

// --- AYARLAR ---
const SYMBOL = 'BTCUSDT';
const API_BASE = 'https://api.binance.com/api/v3';

// --- YARDIMCI FONKSİYONLAR ---

const formatCurrency = (value) => {
  if (!value) return '---';
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2
  }).format(value);
};

const calculateDistance = (current, target) => {
  if (!current || !target) return 0;
  const diff = Math.abs(current - target);
  return (diff / current) * 100;
};

// EMA Hesaplama
const calculateEMA = (closes, period) => {
  if (closes.length < period) return null;
  const k = 2 / (period + 1);
  let ema = closes.slice(0, period).reduce((a, b) => a + b, 0) / period;
  for (let i = period; i < closes.length; i++) {
    ema = (closes[i] * k) + (ema * (1 - k));
  }
  return ema;
};

// ATR (Average True Range)
const calculateATR = (candles, period = 14) => {
  if (candles.length <= period) return 0;
  let trs = [];
  for(let i = 1; i < candles.length; i++) {
    const high = parseFloat(candles[i][2]);
    const low = parseFloat(candles[i][3]);
    const prevClose = parseFloat(candles[i-1][4]);
    const tr = Math.max(high - low, Math.abs(high - prevClose), Math.abs(low - prevClose));
    trs.push(tr);
  }
  const last14TR = trs.slice(-period);
  return last14TR.reduce((a, b) => a + b, 0) / period;
};

const getActiveSession = () => {
  const hour = new Date().getUTCHours();
  if (hour >= 0 && hour < 8) return { name: 'ASIA SESSION', color: 'text-yellow-500', desc: 'Genelde range (yatay) oluşur. Likidite avı (Sweep) yaygındır.' };
  if (hour >= 8 && hour < 13) return { name: 'LONDON OPEN', color: 'text-blue-400', desc: 'Hacim artışı ile gerçek trendin başlama olasılığı artar.' };
  if (hour >= 13 && hour < 16) return { name: 'NY & LONDON OVERLAP', color: 'text-purple-400', desc: 'Volatilite zirve yapar. Gün içi ana hareketler genellikle burada gerçekleşir.' };
  if (hour >= 16 && hour < 21) return { name: 'NY SESSION (PM)', color: 'text-emerald-400', desc: 'Trend devamı veya gün sonu pozisyon kapama hareketleri.' };
  return { name: 'MARKET CLOSE/THIN', color: 'text-neutral-500', desc: 'Düşük likidite nedeniyle spread açılabilir, dikkat.' };
};

// --- STİL MANTIĞI ---
const getStatusStyles = (distance, type, isConfluence) => {
  let styles = {
    rowBorder: 'border-l-2 border-transparent hover:bg-neutral-900/30',
    badge: 'text-neutral-600 font-normal',
    text: 'text-neutral-500',
    label: 'IDLE',
    barColor: 'bg-neutral-800'
  };

  if (isConfluence) {
    styles.text = 'text-amber-200 font-bold'; 
    styles.confluenceBadge = 'bg-purple-900/50 text-purple-200 border border-purple-500/30 px-1.5 rounded text-[9px] ml-2 animate-pulse';
  } else if (type.includes('resistance')) {
    styles.text = 'text-red-400';
  } else if (type.includes('support')) {
    styles.text = 'text-emerald-400';
  } else if (type.includes('trap')) {
    styles.text = 'text-orange-400'; // Trap zone rengi farklı olsun
  } else {
    styles.text = 'text-indigo-400'; // Trend target rengi
  }

  if (distance < 0.35) {
    return {
      ...styles,
      rowBorder: 'border-l-2 border-amber-500 bg-amber-500/10',
      badge: 'bg-amber-500 text-black animate-pulse shadow-[0_0_10px_rgba(245,158,11,0.5)]',
      label: '⚡ BÖLGEDE',
      barColor: 'bg-amber-500'
    };
  } else if (distance < 1.5) {
    return {
      ...styles,
      rowBorder: 'border-l-2 border-neutral-700 bg-neutral-900/50',
      badge: 'bg-neutral-800 text-amber-200 border border-amber-500/30',
      label: '👁️ İZLEMEDE',
      barColor: 'bg-amber-500/50'
    };
  } 
  
  return styles;
};

export default function BarbarDashboard() {
  const [price, setPrice] = useState(null);
  const [levels, setLevels] = useState([]);
  const [yearlyOpen, setYearlyOpen] = useState(null);
  const [lastTouch, setLastTouch] = useState({});
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [tooltips, setTooltips] = useState({ yearly: false, trend: false, vitals: false });
  const [session, setSession] = useState(getActiveSession());
  const [trend, setTrend] = useState({ ema200: null, bias: 'NEUTRAL' });
  const [vitals, setVitals] = useState({ atr: 0, dailyRange: 0, rangePercent: 0, rvol: 0 });

  const toggleTooltip = (key, state) => setTooltips(prev => ({ ...prev, [key]: state }));

  // --- API VERİ ÇEKME ---
  const fetchMarketData = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);

      const [weeklyRes, monthlyRes, yearlyRes, dailyRes, fourHourRes] = await Promise.all([
        fetch(`${API_BASE}/klines?symbol=${SYMBOL}&interval=1w&limit=2`),
        fetch(`${API_BASE}/klines?symbol=${SYMBOL}&interval=1M&limit=2`),
        fetch(`${API_BASE}/klines?symbol=${SYMBOL}&interval=1M&limit=12`),
        fetch(`${API_BASE}/klines?symbol=${SYMBOL}&interval=1d&limit=30`),
        fetch(`${API_BASE}/klines?symbol=${SYMBOL}&interval=4h&limit=250`)
      ]);

      const weeklyData = await weeklyRes.json();
      const monthlyData = await monthlyRes.json();
      const yearlyData = await yearlyRes.json();
      const dailyData = await dailyRes.json();
      const fourHourData = await fourHourRes.json();

      if (!Array.isArray(weeklyData)) throw new Error("API Error");

      // 1. High/Low
      const prevWeek = weeklyData[weeklyData.length - 2]; 
      const prevMonth = monthlyData[monthlyData.length - 2];
      
      // 2. Yearly Open
      const currentYear = new Date().getFullYear();
      const januaryCandle = yearlyData.find(k => new Date(k[0]).getFullYear() === currentYear && new Date(k[0]).getMonth() === 0);
      const yOpen = januaryCandle ? parseFloat(januaryCandle[1]) : parseFloat(yearlyData[0][1]);
      setYearlyOpen(yOpen);

      // 3. Monday Range
      let mondayHigh = null;
      let mondayLow = null;
      for (let i = dailyData.length - 1; i >= 0; i--) {
        const d = new Date(dailyData[i][0]);
        if (d.getDay() === 1) { 
          mondayHigh = parseFloat(dailyData[i][2]);
          mondayLow = parseFloat(dailyData[i][3]);
          break; 
        }
      }

      // 4. Trend (4H EMA 200)
      const closes4h = fourHourData.map(c => parseFloat(c[4]));
      const ema200 = calculateEMA(closes4h, 200);
      const lastPrice = parseFloat(fourHourData[fourHourData.length - 1][4]);
      let trendBias = 'NÖTR';
      if (ema200) trendBias = lastPrice > ema200 ? 'YÜKSELİŞ (BULL)' : 'DÜŞÜŞ (BEAR)';
      setTrend({ ema200, bias: trendBias });

      // 5. Vitals (ATR)
      const atrValue = calculateATR(dailyData, 14);
      const currentDailyCandle = dailyData[dailyData.length - 1];
      const currentHigh = parseFloat(currentDailyCandle[2]);
      const currentLow = parseFloat(currentDailyCandle[3]);
      const currentRange = currentHigh - currentLow;
      const rangeUsagePercent = (currentRange / atrValue) * 100;

      // 6. RVOL
      const currentVol = parseFloat(currentDailyCandle[5]);
      const avgVol = dailyData.slice(dailyData.length - 11, dailyData.length - 1)
                             .reduce((acc, c) => acc + parseFloat(c[5]), 0) / 10;
      const rvol = currentVol / avgVol;

      setVitals({
        atr: atrValue,
        dailyRange: currentRange,
        rangePercent: rangeUsagePercent,
        rvol: rvol
      });

      // --- SEVİYE HESAPLAMALARI ---
      const pwh = parseFloat(prevWeek[2]);
      const pwl = parseFloat(prevWeek[3]);
      const wRange = pwh - pwl;

      const pmh = parseFloat(prevMonth[2]);
      const pml = parseFloat(prevMonth[3]);
      const mRange = pmh - pml;

      // --- SECRET SAUCE COEFFICIENTS ---
      // Gizli Katsayılar: 0.13 (Trap/Sweep) ve 0.618 (Trend/Target)
      const COEFF_TRAP = 0.13;
      const COEFF_TREND = 0.618;

      let rawLevels = [
        // Weekly Levels
        { id: 'w_ext_trend_res', label: 'EXT. II (TREND)', price: pwh + (wRange * COEFF_TREND), type: 'extension_trend_res', group: 'Weekly' },
        { id: 'w_ext_trap_res', label: 'EXT. I (TRAP)', price: pwh + (wRange * COEFF_TRAP), type: 'extension_trap_res', group: 'Weekly' },
        { id: 'pwh', label: 'PWH (HIGH)', price: pwh, type: 'resistance', group: 'Weekly' },
        { id: 'pwl', label: 'PWL (LOW)', price: pwl, type: 'support', group: 'Weekly' },
        { id: 'w_ext_trap_sup', label: 'EXT. I (TRAP)', price: pwl - (wRange * COEFF_TRAP), type: 'extension_trap_sup', group: 'Weekly' },
        { id: 'w_ext_trend_sup', label: 'EXT. II (TREND)', price: pwl - (wRange * COEFF_TREND), type: 'extension_trend_sup', group: 'Weekly' },
        
        // Monthly Levels
        { id: 'm_ext_trend_res', label: 'EXT. II (TREND)', price: pmh + (mRange * COEFF_TREND), type: 'extension_trend_res', group: 'Monthly' },
        { id: 'm_ext_trap_res', label: 'EXT. I (TRAP)', price: pmh + (mRange * COEFF_TRAP), type: 'extension_trap_res', group: 'Monthly' },
        { id: 'pmh', label: 'PMH (HIGH)', price: pmh, type: 'resistance', group: 'Monthly' },
        { id: 'pml', label: 'PML (LOW)', price: pml, type: 'support', group: 'Monthly' },
        { id: 'm_ext_trap_sup', label: 'EXT. I (TRAP)', price: pml - (mRange * COEFF_TRAP), type: 'extension_trap_sup', group: 'Monthly' },
        { id: 'm_ext_trend_sup', label: 'EXT. II (TREND)', price: pml - (mRange * COEFF_TREND), type: 'extension_trend_sup', group: 'Monthly' },
      ];

      if (mondayHigh) {
        rawLevels.push(
          { id: 'mon_high', label: 'MONDAY HIGH', price: mondayHigh, type: 'resistance', group: 'Weekly' },
          { id: 'mon_low', label: 'MONDAY LOW', price: mondayLow, type: 'support', group: 'Weekly' }
        );
      }

      const levelsWithConfluence = rawLevels.map(lvl => {
        const isConfluence = rawLevels.some(other => 
          other.id !== lvl.id && 
          Math.abs((lvl.price - other.price) / lvl.price) < 0.003 
        );
        return { ...lvl, isConfluence };
      });

      setLevels(levelsWithConfluence.sort((a, b) => b.price - a.price));
      setLoading(false);

    } catch (err) {
      console.error(err);
      setError("Veri Akışı Kesildi. API Bağlantısı Yok.");
      setLoading(false);
    }
  }, []);

  // --- POLLING ---
  useEffect(() => {
    fetchMarketData();
    const interval = setInterval(async () => {
      setSession(getActiveSession());
      try {
        const res = await fetch(`${API_BASE}/ticker/price?symbol=${SYMBOL}`);
        const data = await res.json();
        if (data?.price) setPrice(parseFloat(data.price));
      } catch (e) {}
    }, 3000);
    return () => clearInterval(interval);
  }, [fetchMarketData]);

  // Last Touch Logic
  useEffect(() => {
    if (!price || levels.length === 0) return;
    const now = new Date();
    levels.forEach(lvl => {
      if (calculateDistance(price, lvl.price) < 0.05) {
        setLastTouch(prev => ({ ...prev, [lvl.id]: now }));
      }
    });
  }, [price, levels]);

  const yearlyStatus = useMemo(() => {
    if (!price || !yearlyOpen) return {};
    const isBullish = price > yearlyOpen;
    return {
      isBullish,
      color: isBullish ? 'text-emerald-500' : 'text-red-500',
      text: isBullish ? 'BULLISH BIAS' : 'BEARISH BIAS',
      bg: isBullish ? 'bg-emerald-500/10 border-emerald-500/20' : 'bg-red-500/10 border-red-500/20',
    };
  }, [price, yearlyOpen]);

  // --- RENDER ---
  const renderTableSection = (title, groupLevels, icon) => (
    <div className="bg-neutral-950 border border-neutral-800 rounded-lg overflow-hidden shadow-2xl h-full flex flex-col">
      <div className="bg-black/50 p-4 border-b border-neutral-800 flex items-center justify-between">
        <h2 className="text-amber-500 font-bold tracking-wider flex items-center gap-2 text-sm md:text-base">
          {icon} {title.toUpperCase()} PLAN
        </h2>
        <span className="text-[10px] text-neutral-500 font-mono">FRAME: {title === 'Weekly' ? 'WEEKLY' : 'MONTHLY'}</span>
      </div>
      
      <div className="flex-1 overflow-x-auto">
        <table className="w-full text-left border-collapse">
          <thead>
            <tr className="text-neutral-600 text-[10px] uppercase tracking-widest border-b border-neutral-900">
              <th className="p-3 font-medium">Level</th>
              <th className="p-3 font-medium text-right">Price</th>
              <th className="p-3 font-medium text-center">Dist.</th>
              <th className="p-3 font-medium text-right">Status</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-neutral-900">
            {groupLevels.map((lvl) => {
              const distance = calculateDistance(price, lvl.price);
              const status = getStatusStyles(distance, lvl.type, lvl.isConfluence);
              const isMainLevel = lvl.id.includes('pwh') || lvl.id.includes('pwl') || lvl.id.includes('pmh') || lvl.id.includes('pml') || lvl.id.includes('mon_');
              
              return (
                <tr key={lvl.id} className={`transition-all duration-300 ${status.rowBorder}`}>
                  <td className="p-3">
                    <div className="flex flex-col">
                      <div className="flex items-center gap-2">
                        <span className={`font-bold text-sm ${status.text}`}>
                          {lvl.label}
                        </span>
                        {lvl.type.includes('trap') && <Skull size={10} className="text-orange-500 opacity-70"/>}
                        {lvl.type.includes('trend') && <Target size={10} className="text-indigo-500 opacity-70"/>}
                        
                        {lvl.isConfluence && (
                          <span className={status.confluenceBadge}>
                            <Flame size={8} />
                          </span>
                        )}
                      </div>
                      
                      {isMainLevel && (
                        <span className="text-[9px] text-neutral-600 tracking-tight mt-0.5">
                          {lvl.id.includes('mon') ? 'WEEKLY PIVOT' : 'LIQUIDITY POOL'}
                        </span>
                      )}
                    </div>
                  </td>
                  <td className="p-3 text-right">
                    <span className={`font-mono text-sm ${lvl.isConfluence ? 'text-white' : 'text-neutral-300'}`}>
                      {formatCurrency(lvl.price)}
                    </span>
                  </td>
                  <td className="p-3">
                    <div className="flex flex-col items-center justify-center gap-1">
                      <div className="w-16 h-1 bg-neutral-800 rounded-full overflow-hidden">
                        <div 
                          className={`h-full ${status.barColor}`} 
                          style={{ width: `${Math.max(0, 100 - distance * 10)}%` }}
                        ></div>
                      </div>
                      <span className="text-[10px] font-mono text-neutral-500">%{distance.toFixed(2)}</span>
                    </div>
                  </td>
                  <td className="p-3 text-right">
                    <span className={`inline-block px-2 py-0.5 rounded text-[10px] font-bold tracking-wide ${status.badge}`}>
                      {status.label}
                    </span>
                    {lastTouch[lvl.id] && <div className="text-[9px] text-amber-500 mt-1 flex justify-end items-center gap-1"><Clock size={8}/> TOUCHED</div>}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );

  const renderProtocol = () => (
    <div className="mt-6 bg-amber-500/5 border border-amber-500/20 rounded-lg p-4 flex items-start gap-4">
      <div className="bg-amber-500/10 p-2 rounded-full mt-1">
        <AlertTriangle className="w-5 h-5 text-amber-500" />
      </div>
      <div>
        <h3 className="text-amber-500 font-bold text-sm tracking-widest mb-1">EXECUTION PROTOCOL: ORDERFLOW CONFIRMATION</h3>
        <p className="text-neutral-400 text-sm leading-relaxed">
          Seviye testi sırasında kör emir atma. <span className="text-neutral-200 font-medium">CVD Uyumsuzluklarını (Absorption)</span> ve 
          <span className="text-neutral-200 font-medium"> Open Interest (OI)</span> değişimini mutlaka kontrol et. 
          <br/>
          <span className="text-amber-500/80 text-xs mt-1 block">ÖNEMLİ: 🔥 İşaretli seviyeler (Confluence) çakışma bölgesidir. Yüksek volatilite bekle.</span>
        </p>
      </div>
    </div>
  );

  const renderVitals = () => {
    // Vitals Color Logic
    const rangeColor = vitals.rangePercent > 100 ? 'text-red-500 animate-pulse' : vitals.rangePercent > 80 ? 'text-yellow-500' : 'text-emerald-500';
    const rvolColor = vitals.rvol > 1.5 ? 'text-amber-500' : 'text-neutral-500';

    return (
      <div className="bg-neutral-900/30 border border-neutral-800/50 rounded-lg p-4 flex flex-col items-center justify-center text-center relative group">
         <div 
             className="absolute top-2 right-2 cursor-help"
             onMouseEnter={() => toggleTooltip('vitals', true)}
             onMouseLeave={() => toggleTooltip('vitals', false)}
             onClick={() => toggleTooltip('vitals', !tooltips.vitals)}
         >
           <HelpCircle className="w-3 h-3 text-neutral-600 hover:text-amber-500" />
           {tooltips.vitals && (
             <div className="absolute bottom-full right-0 mb-2 w-64 bg-neutral-900 border border-neutral-700 rounded p-2 text-[10px] text-neutral-300 shadow-xl z-50 text-left">
               <strong className="text-amber-500 block mb-1">Menzil & Hacim (TR)</strong>
               Günlük menzil (ATR) %100'ü aştıysa hareketin "şiştiği" (overextended) anlamına gelebilir.
               Bu durumda trend tersine dönüş sinyalleri veya yatay konsolidasyon beklenebilir.
             </div>
           )}
         </div>

         <Gauge className="text-neutral-600 w-8 h-8 mb-2" />
         <div className="text-[10px] text-neutral-500 uppercase tracking-widest mb-1">MARKET VITALS</div>
         
         <div className="flex justify-between w-full px-2 mt-2 border-t border-neutral-800/50 pt-2">
           <div className="text-left">
             <div className="text-[9px] text-neutral-600">DAILY RANGE</div>
             <div className={`font-mono font-bold text-sm ${rangeColor}`}>
               %{vitals.rangePercent.toFixed(0)} <span className="text-[9px] text-neutral-600">/ ATR</span>
             </div>
           </div>
           
           <div className="text-right">
             <div className="text-[9px] text-neutral-600">RVOL</div>
             <div className={`font-mono font-bold text-sm ${rvolColor}`}>
               {vitals.rvol.toFixed(2)}x
             </div>
           </div>
         </div>
         
         <div className="mt-2 text-[9px] text-neutral-600 italic px-2">
           {vitals.rangePercent > 100 
             ? '⚠️ Range Extended. Confluence bölgesindeysen Uyumsuzluk (Divergence) ara.' 
             : 'Range Available. Hareket alanı mevcut.'}
         </div>
      </div>
    );
  };

  const renderBottomPanel = () => (
    <div className="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      {/* Glossary */}
      <div className="bg-neutral-900/50 border border-neutral-800 rounded-lg p-4">
        <div className="flex items-center gap-2 mb-3 text-neutral-500 border-b border-neutral-800 pb-2">
           <BookOpen size={14} />
           <span className="text-[10px] font-bold uppercase tracking-widest">GLOSSARY (TR)</span>
        </div>
        <div className="grid grid-cols-1 gap-2">
          {[
            { term: 'EXT. I (TRAP)', desc: 'Tuzak Bölgesi. Stop avı / SFP beklenir. (Dönüş)' },
            { term: 'EXT. II (TREND)', desc: 'Trend Genişlemesi. Fiyatın buraya akması beklenir.' },
            { term: 'Monday Range', desc: 'Haftalık Yön (Bias). Pivot.' },
            { term: 'Confluence (🔥)', desc: 'Kesişim. Yüksek Olasılık.' },
          ].map((item) => (
            <div key={item.term} className="flex justify-between items-center text-[11px]">
              <span className="text-amber-500 font-mono font-bold">{item.term}</span>
              <span className="text-neutral-500 text-right">{item.desc}</span>
            </div>
          ))}
        </div>
      </div>
      
      {/* Session Monitor */}
      <div className="bg-neutral-900/30 border border-neutral-800/50 rounded-lg p-4 flex flex-col items-center justify-center text-center">
         <Globe className="text-neutral-600 w-8 h-8 mb-2" />
         <div className="text-[10px] text-neutral-500 uppercase tracking-widest mb-1">ACTIVE SESSION</div>
         <div className={`text-sm font-bold font-mono tracking-wider ${session.color}`}>{session.name}</div>
         <div className="mt-2 text-[10px] text-neutral-600 italic px-4">
           {session.desc}
         </div>
      </div>

      {/* Trend Monitor */}
      <div className="bg-neutral-900/30 border border-neutral-800/50 rounded-lg p-4 flex flex-col items-center justify-center text-center relative group">
         <div 
             className="absolute top-2 right-2 cursor-help"
             onMouseEnter={() => toggleTooltip('trend', true)}
             onMouseLeave={() => toggleTooltip('trend', false)}
             onClick={() => toggleTooltip('trend', !tooltips.trend)}
         >
           <HelpCircle className="w-3 h-3 text-neutral-600 hover:text-amber-500" />
           {tooltips.trend && (
             <div className="absolute bottom-full right-0 mb-2 w-64 bg-neutral-900 border border-neutral-700 rounded p-2 text-[10px] text-neutral-300 shadow-xl z-50 text-left">
               <strong className="text-amber-500 block mb-1">Dinamik Trend (EMA 200)</strong>
               Fiyatın ortalamaya göre konumu, piyasanın "en az direnç yolunu" (path of least resistance) gösterir. 
               Trend yönünde işlem aramak momentum avantajı sağlar.
             </div>
           )}
         </div>

         <BarChart2 className="text-neutral-600 w-8 h-8 mb-2" />
         <div className="text-[10px] text-neutral-500 uppercase tracking-widest mb-1">4H TREND BIAS (EMA 200)</div>
         <div className={`text-xl font-bold font-mono tracking-wider ${trend.bias === 'YÜKSELİŞ (BULL)' ? 'text-emerald-500' : 'text-red-500'}`}>
            {trend.bias}
         </div>
         <div className="mt-2 text-[10px] text-neutral-600 font-mono">
            EMA 200: {trend.ema200 ? formatCurrency(trend.ema200) : 'HESAPLANIYOR...'}
         </div>
         <div className="text-[9px] text-neutral-600 mt-1 italic">
            Dinamik Trend Filtresi
         </div>
      </div>

      {/* Vitals Monitor (NEW) */}
      {renderVitals()}

    </div>
  );

  if (loading && !price) return (
    <div className="min-h-screen bg-black flex flex-col items-center justify-center text-amber-500 font-mono">
      <RefreshCw className="w-8 h-8 animate-spin mb-4" />
      <span className="animate-pulse tracking-widest">ALGORİTMALAR HESAPLANIYOR...</span>
    </div>
  );

  if (error) return (
    <div className="min-h-screen bg-black flex flex-col items-center justify-center text-red-500">
      <WifiOff className="w-10 h-10 mb-4" />
      <p className="font-mono">{error}</p>
      <button onClick={fetchMarketData} className="mt-4 px-6 py-2 border border-red-900 hover:bg-red-900/20 text-red-500 font-mono text-sm transition-colors">RECONNECT</button>
    </div>
  );

  const weeklyLevels = levels.filter(l => l.group === 'Weekly');
  const monthlyLevels = levels.filter(l => l.group === 'Monthly');

  return (
    <div className="min-h-screen bg-black text-neutral-400 font-sans pb-32 selection:bg-amber-500/30">
      
      {/* HEADER */}
      <header className="border-b border-neutral-800 bg-neutral-950/50 backdrop-blur sticky top-0 z-20">
        <div className="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center">
          <div className="flex items-center gap-3">
            <div className="bg-amber-500/10 p-2 rounded border border-amber-500/20">
              <Layers className="w-5 h-5 text-amber-500" />
            </div>
            <div>
              <h1 className="text-lg font-bold text-neutral-200 tracking-tight leading-none">BARBARIANS<span className="text-amber-500">.</span>PLAN</h1>
              <div className="flex items-center gap-2 mt-0.5">
                <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
                <span className="text-[10px] text-neutral-600 font-mono tracking-wider">LIVE FEED • {session.name}</span>
              </div>
            </div>
          </div>
          
          <div className="text-right">
            <div className="text-[10px] text-neutral-500 font-bold tracking-widest mb-0.5">{SYMBOL}</div>
            <div className={`text-2xl font-mono font-bold ${price > yearlyOpen ? 'text-neutral-100' : 'text-neutral-300'}`}>
              {formatCurrency(price)}
            </div>
          </div>
        </div>
      </header>

      {/* MAIN CONTENT */}
      <main className="max-w-7xl mx-auto px-4 py-6">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-auto">
          {renderTableSection('Weekly', weeklyLevels, <Zap size={16} />)}
          {renderTableSection('Monthly', monthlyLevels, <Box size={16} />)}
        </div>
        
        {renderProtocol()}
        {renderBottomPanel()}
      </main>

      {/* YEARLY OPEN STICKY FOOTER */}
      {yearlyOpen && (
        <div className="fixed bottom-0 left-0 right-0 bg-neutral-950 border-t border-neutral-800 z-50">
          <div className="max-w-7xl mx-auto px-4 h-12 flex justify-between items-center">
             
             {/* Left: Yearly Context */}
             <div className="flex items-center gap-4 relative">
                <div 
                  className="group cursor-help flex items-center h-full border-r border-neutral-800 pr-4"
                  onMouseEnter={() => toggleTooltip('yearly', true)}
                  onMouseLeave={() => toggleTooltip('yearly', false)}
                  onClick={() => toggleTooltip('yearly', !tooltips.yearly)}
                >
                  <span className="text-[10px] font-bold text-neutral-500 uppercase tracking-widest flex items-center gap-1">
                    YEARLY CONTEXT (TR) <Info size={10} />
                  </span>
                  
                  {tooltips.yearly && (
                    <div className="absolute bottom-10 left-0 w-72 bg-neutral-900 border border-neutral-700 rounded-lg p-3 shadow-2xl z-50 text-xs text-neutral-300">
                      <h4 className="text-amber-500 font-bold mb-1">Yıllık Açılış Önemi</h4>
                      <p>
                        Kurumsal pivot seviyesi. Üstü <span className="text-emerald-400">alıcı (Boğa)</span>, altı <span className="text-red-400">satıcı (Ayı)</span> kontrolü demektir.
                      </p>
                    </div>
                  )}
                </div>

                <div className="flex items-center gap-2">
                  <span className="font-mono text-amber-500 font-bold">{formatCurrency(yearlyOpen)}</span>
                  <span className={`text-[10px] px-2 py-0.5 rounded border ${yearlyStatus.bg} ${yearlyStatus.color} font-bold flex items-center gap-1`}>
                    {yearlyStatus.text}
                    {yearlyStatus.isBullish ? <TrendingUp size={10} /> : <TrendingDown size={10} />}
                  </span>
                </div>
             </div>
             
             {/* Right: Legend */}
             <div className="hidden md:flex items-center gap-6 text-[10px] font-mono text-neutral-600">
                <span className="flex items-center gap-1"><Flame size={10} className="text-purple-400"/> CONFLUENCE</span>
                <span>R: RESISTANCE</span>
                <span>S: SUPPORT</span>
             </div>
          </div>
        </div>
      )}
    </div>
  );
}