import React, { useState, useEffect, useMemo, useRef } from 'react';
import { 
  Play, 
  Pause, 
  RefreshCw, 
  Settings, 
  User, 
  Search, 
  TrendingUp, 
  TrendingDown, 
  AlertCircle,
  BarChart2,
  Filter,
  Download,
  Wifi,
  WifiOff,
  Key,
  Globe,
  Database,
  X
} from 'lucide-react';

// --- MOCK DATA GENERATOR (Fallback and default preview state) ---
const generateOptionChain = (spot, step, count) => {
  const baseStrike = Math.round(spot / step) * step - (Math.floor(count / 2) * step);
  const data = [];
  
  for (let i = 0; i < count; i++) {
    const strike = baseStrike + (i * step);
    const isCallITM = strike < spot;
    const isPutITM = strike > spot;
    const distance = Math.abs(strike - spot);
    const factor = Math.max(0.1, 1 - (distance / (step * 10)));
    
    const callOI = Math.floor((Math.random() * 50000 + 10000) * factor);
    const putOI = Math.floor((Math.random() * 50000 + 10000) * factor);
    const callVol = Math.floor((Math.random() * 200000 + 50000) * factor);
    const putVol = Math.floor((Math.random() * 200000 + 50000) * factor);

    data.push({
      strike,
      calls: {
        oi: callOI,
        chgOi: Math.floor((Math.random() * 10000) - 5000),
        vol: callVol,
        iv: (Math.random() * 15 + 10).toFixed(2),
        ltp: isCallITM ? (spot - strike + Math.random() * 20).toFixed(2) : (Math.random() * 50).toFixed(2),
        chg: (Math.random() * 10 - 5).toFixed(2),
        bidQty: Math.floor(Math.random() * 1000),
        bidPrice: (Math.random() * 100).toFixed(2),
        askPrice: (Math.random() * 100).toFixed(2),
        askQty: Math.floor(Math.random() * 1000),
        itm: isCallITM
      },
      puts: {
        oi: putOI,
        chgOi: Math.floor((Math.random() * 10000) - 5000),
        vol: putVol,
        iv: (Math.random() * 15 + 10).toFixed(2),
        ltp: isPutITM ? (strike - spot + Math.random() * 20).toFixed(2) : (Math.random() * 50).toFixed(2),
        chg: (Math.random() * 10 - 5).toFixed(2),
        bidQty: Math.floor(Math.random() * 1000),
        bidPrice: (Math.random() * 100).toFixed(2),
        askPrice: (Math.random() * 100).toFixed(2),
        askQty: Math.floor(Math.random() * 1000),
        itm: isPutITM
      }
    });
  }
  
  return processOptionChainFlags(data);
};

// --- DYNAMIC POST-PROCESSING FOR MAX VALUE FLAGGING ---
// Essential for LTP Calculator calculations: Support, Resistance, WTT, and WTB highlight badges
const processOptionChainFlags = (data) => {
  if (!data || data.length === 0) return [];
  
  let maxCallOI = 0;
  let maxPutOI = 0;
  let maxCallVol = 0;
  let maxPutVol = 0;

  // First pass: identify true maxima
  data.forEach(row => {
    if (row.calls) {
      if (row.calls.oi > maxCallOI) maxCallOI = row.calls.oi;
      if (row.calls.vol > maxCallVol) maxCallVol = row.calls.vol;
    }
    if (row.puts) {
      if (row.puts.oi > maxPutOI) maxPutOI = row.puts.oi;
      if (row.puts.vol > maxPutVol) maxPutVol = row.puts.vol;
    }
  });

  // Second pass: apply visual styling classes and WTT flags
  return data.map(row => {
    const updatedRow = { ...row };
    if (updatedRow.calls) {
      updatedRow.calls.isMaxOI = updatedRow.calls.oi === maxCallOI && maxCallOI > 0;
      updatedRow.calls.isMaxVol = updatedRow.calls.vol === maxCallVol && maxCallVol > 0;
      updatedRow.calls.isSecondMaxOI = maxCallOI > 0 && updatedRow.calls.oi > maxCallOI * 0.8 && updatedRow.calls.oi !== maxCallOI;
    }
    if (updatedRow.puts) {
      updatedRow.puts.isMaxOI = updatedRow.puts.oi === maxPutOI && maxPutOI > 0;
      updatedRow.puts.isMaxVol = updatedRow.puts.vol === maxPutVol && maxPutVol > 0;
      updatedRow.puts.isSecondMaxOI = maxPutOI > 0 && updatedRow.puts.oi > maxPutOI * 0.8 && updatedRow.puts.oi !== maxPutOI;
    }
    return updatedRow;
  });
};

const INDICES = {
  NIFTY: { spot: 22435.65, step: 50, count: 24, upstoxKey: 'NSE_INDEX|Nifty 50', nseSymbol: 'NIFTY' },
  BANKNIFTY: { spot: 48120.30, step: 100, count: 24, upstoxKey: 'NSE_INDEX|Nifty Bank', nseSymbol: 'BANKNIFTY' },
  FINNIFTY: { spot: 21340.15, step: 50, count: 20, upstoxKey: 'NSE_INDEX|Nifty Fin Service', nseSymbol: 'FINNIFTY' }
};

export default function App() {
  const [selectedIndex, setSelectedIndex] = useState('NIFTY');
  const [spotPrice, setSpotPrice] = useState(INDICES.NIFTY.spot);
  const [isLive, setIsLive] = useState(true);
  const [chainData, setChainData] = useState([]);
  const [selectedPopover, setSelectedPopover] = useState(null);
  
  // Data feed configuration
  const [dataSource, setDataSource] = useState('mock'); // 'mock' | 'nse_public' | 'upstox'
  const [apiStatus, setApiStatus] = useState('idle'); // 'idle' | 'loading' | 'success' | 'error' | 'unauthorized'
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
  
  // Credentials & Proxy options
  const [upstoxToken, setUpstoxToken] = useState('');
  const [corsProxy, setCorsProxy] = useState('https://api.codetabs.com/v1/proxy?quest=');

  const authErrorOccurred = useRef(false);

  // Initialize data structured rows
  useEffect(() => {
    const config = INDICES[selectedIndex];
    setSpotPrice(config.spot);
    setChainData(generateOptionChain(config.spot, config.step, config.count));
  }, [selectedIndex]);

  // --- DATA FEEDS RESILIENT MANAGEMENT ---
  useEffect(() => {
    authErrorOccurred.current = false;
    if (!isLive) {
      setApiStatus('idle');
      return;
    }

    const fetchLiveFeed = async () => {
      // 1. SIMULATED MOCK FEED
      if (dataSource === 'mock') {
        setApiStatus('success');
        setSpotPrice(prev => +(prev + (Math.random() * 4 - 2)).toFixed(2));
        setChainData(prev => prev.map(row => {
          if (Math.random() > 0.85) {
            return {
              ...row,
              calls: { ...row.calls, ltp: (+row.calls.ltp + (Math.random() * 1 - 0.5)).toFixed(2) },
              puts: { ...row.puts, ltp: (+row.puts.ltp + (Math.random() * 1 - 0.5)).toFixed(2) }
            };
          }
          return row;
        }));
        return;
      }

      // 2. UPSTOX OFFICIAL API FEED
      if (dataSource === 'upstox') {
        if (authErrorOccurred.current) return;
        if (!upstoxToken || upstoxToken.trim() === '' || upstoxToken === '{your_access_token}') {
          setApiStatus('unauthorized');
          return;
        }

        setApiStatus('loading');
        const activeKey = INDICES[selectedIndex].upstoxKey;
        const url = `https://api.upstox.com/v2/market-quote/quotes?instrument_key=${encodeURIComponent(activeKey)}`;

        try {
          const response = await fetch(url, {
            method: 'GET',
            headers: {
              'Accept': 'application/json',
              'Authorization': `Bearer ${upstoxToken.trim()}`
            }
          });

          if (response.status === 401) {
            authErrorOccurred.current = true;
            setApiStatus('unauthorized');
            return;
          }

          if (!response.ok) throw new Error(`HTTP ${response.status}`);
          const jsonResponse = await response.json();

          if (jsonResponse.data && jsonResponse.data[activeKey]) {
            const liveLtp = jsonResponse.data[activeKey].last_price;
            setSpotPrice(liveLtp);
            // Re-generate option matrix dynamically centered on live Upstox Spot price
            setChainData(generateOptionChain(liveLtp, INDICES[selectedIndex].step, INDICES[selectedIndex].count));
            setApiStatus('success');
          }
        } catch (error) {
          console.error("Upstox Connection Failed:", error);
          setApiStatus('error');
        }
      }

      // 3. NSE PUBLIC API FEED (Safely parsed & CORS Guarded)
      if (dataSource === 'nse_public') {
        setApiStatus('loading');
        const symbol = INDICES[selectedIndex].nseSymbol;
        const nseUrl = `https://www.nseindia.com/api/option-chain-indices?symbol=${symbol}`;
        const finalUrl = `${corsProxy}${encodeURIComponent(nseUrl)}`;

        try {
          const response = await fetch(finalUrl);
          if (!response.ok) throw new Error(`HTTP status ${response.status}`);
          const rawData = await response.json();

          if (rawData && rawData.records) {
            const underlyingSpot = Number(rawData.records.underlyingValue);
            setSpotPrice(underlyingSpot);

            const allStrikes = rawData.records.data;
            if (allStrikes && allStrikes.length > 0) {
              // Center-cropping strikes: Locate closest to spot price and slice a neat subset
              const sorted = [...allStrikes].sort((a, b) => a.strikePrice - b.strikePrice);
              let closestIdx = 0;
              let minDiff = Infinity;
              
              for (let i = 0; i < sorted.length; i++) {
                const diff = Math.abs(sorted[i].strikePrice - underlyingSpot);
                if (diff < minDiff) {
                  minDiff = diff;
                  closestIdx = i;
                }
              }

              const visibleStrikes = sorted.slice(
                Math.max(0, closestIdx - 12),
                Math.min(sorted.length, closestIdx + 12)
              );

              // Defensive helper utility to parse properties safely avoiding crashes on nulls
              const safeNum = (val) => (val === null || val === undefined || isNaN(Number(val))) ? 0 : Number(val);
              const safeStr = (val, dec = 2) => (val === null || val === undefined || isNaN(Number(val))) ? '0.00' : Number(val).toFixed(dec);

              const parsedChain = visibleStrikes.map(item => ({
                strike: item.strikePrice,
                calls: {
                  oi: item.CE ? safeNum(item.CE.openInterest) : 0,
                  chgOi: item.CE ? safeNum(item.CE.changeinOpenInterest) : 0,
                  vol: item.CE ? safeNum(item.CE.totalTradedVolume) : 0,
                  iv: item.CE ? safeStr(item.CE.impliedVolatility) : '0.00',
                  ltp: item.CE ? safeStr(item.CE.lastPrice) : '0.00',
                  chg: item.CE ? safeStr(item.CE.change) : '0.00',
                  bidQty: item.CE ? safeNum(item.CE.bidQty) : 0,
                  bidPrice: item.CE ? safeStr(item.CE.bidprice) : '0.00', // NSE returns bidprice with lowercase 'p'
                  askPrice: item.CE ? safeStr(item.CE.askprice) : '0.00', // NSE returns askprice with lowercase 'p'
                  askQty: item.CE ? safeNum(item.CE.askQty) : 0,
                  itm: item.strikePrice < underlyingSpot
                },
                puts: {
                  oi: item.PE ? safeNum(item.PE.openInterest) : 0,
                  chgOi: item.PE ? safeNum(item.PE.changeinOpenInterest) : 0,
                  vol: item.PE ? safeNum(item.PE.totalTradedVolume) : 0,
                  iv: item.PE ? safeStr(item.PE.impliedVolatility) : '0.00',
                  ltp: item.PE ? safeStr(item.PE.lastPrice) : '0.00',
                  chg: item.PE ? safeStr(item.PE.change) : '0.00',
                  bidQty: item.PE ? safeNum(item.PE.bidQty) : 0,
                  bidPrice: item.PE ? safeStr(item.PE.bidprice) : '0.00',
                  askPrice: item.PE ? safeStr(item.PE.askprice) : '0.00',
                  askQty: item.PE ? safeNum(item.PE.askQty) : 0,
                  itm: item.strikePrice > underlyingSpot
                }
              }));
              
              // Map flags across extracted rows
              setChainData(processOptionChainFlags(parsedChain));
            }
            setApiStatus('success');
          }
        } catch (error) {
          console.error("NSE Public Fetch Failed:", error);
          setApiStatus('error');
        }
      }
    };

    fetchLiveFeed();
    const interval = setInterval(fetchLiveFeed, dataSource === 'mock' ? 2000 : 5000);
    return () => clearInterval(interval);
  }, [isLive, dataSource, selectedIndex, upstoxToken, corsProxy]);

  // Derived metrics
  const pcr = useMemo(() => {
    const totalCallOI = chainData.reduce((acc, row) => acc + row.calls.oi, 0);
    const totalPutOI = chainData.reduce((acc, row) => acc + row.puts.oi, 0);
    return totalCallOI === 0 ? 0 : (totalPutOI / totalCallOI).toFixed(2);
  }, [chainData]);

  const supportStrike = useMemo(() => {
    const maxPut = chainData.find(r => r.puts.isMaxVol);
    return maxPut ? maxPut.strike : 0;
  }, [chainData]);

  const resistanceStrike = useMemo(() => {
    const maxCall = chainData.find(r => r.calls.isMaxVol);
    return maxCall ? maxCall.strike : 0;
  }, [chainData]);

  const formatNum = (num) => new Intl.NumberFormat('en-IN').format(num);

  const handleCellClick = (type, strike, val, e) => {
    setSelectedPopover({
      x: e.clientX,
      y: e.clientY,
      type,
      strike,
      val
    });
  };

  return (
    <div className="min-h-screen bg-[#0a0f1c] text-slate-300 font-sans text-sm flex flex-col overflow-hidden h-screen">
      
      {/* HEADER NAV */}
      <nav className="bg-slate-900/80 backdrop-blur-md border-b border-slate-800 flex-shrink-0 z-30 flex items-center justify-between px-4 py-2.5 shadow-lg">
        <div className="flex items-center space-x-6">
          <div className="flex items-center space-x-2">
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-600 to-indigo-800 flex items-center justify-center shadow-[0_0_15px_rgba(37,99,235,0.4)]">
              <BarChart2 size={18} className="text-white" />
            </div>
            <span className="font-bold text-lg text-white tracking-tight">AI OptionChain<span className="text-blue-500">.</span></span>
          </div>
          
          <div className="flex space-x-1 bg-slate-950/50 p-1 rounded-lg border border-slate-800">
            {Object.keys(INDICES).map(idx => (
              <button
                key={idx}
                onClick={() => setSelectedIndex(idx)}
                className={`px-4 py-1 rounded-md text-xs font-bold transition-all duration-200 ${
                  selectedIndex === idx ? 'bg-blue-600 text-white shadow-md' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800'
                }`}
              >
                {idx}
              </button>
            ))}
          </div>
        </div>

        <div className="flex items-center space-x-4">
          
          {/* Advanced Feed Selector */}
          <div className="flex items-center space-x-1.5 bg-slate-950/50 border border-slate-850 p-1 rounded-lg">
            <button 
              onClick={() => setDataSource('mock')}
              className={`px-2 py-1 rounded text-[11px] font-bold transition-all flex items-center space-x-1 ${dataSource === 'mock' ? 'bg-slate-800 text-blue-400 border border-slate-700/50' : 'text-slate-500 hover:text-slate-300'}`}
            >
              <Database size={11} />
              <span>Simulated</span>
            </button>
            <button 
              onClick={() => setDataSource('nse_public')}
              className={`px-2 py-1 rounded text-[11px] font-bold transition-all flex items-center space-x-1 ${dataSource === 'nse_public' ? 'bg-slate-800 text-emerald-400 border border-slate-700/50' : 'text-slate-500 hover:text-slate-300'}`}
            >
              <Globe size={11} />
              <span>NSE Web</span>
            </button>
            <button 
              onClick={() => setDataSource('upstox')}
              className={`px-2 py-1 rounded text-[11px] font-bold transition-all flex items-center space-x-1 ${dataSource === 'upstox' ? 'bg-slate-800 text-amber-400 border border-slate-700/50' : 'text-slate-500 hover:text-slate-300'}`}
            >
              <Key size={11} />
              <span>Upstox Live</span>
            </button>
          </div>

          {/* Dynamic Feed Status Badge */}
          <div className={`flex items-center space-x-2 px-3 py-1.5 rounded-full border text-[10px] font-bold transition-all shadow-inner ${
            apiStatus === 'success' ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30' :
            apiStatus === 'unauthorized' ? 'bg-rose-500/20 text-rose-300 border-rose-500/50 animate-pulse' :
            apiStatus === 'loading' ? 'bg-blue-500/10 text-blue-400 border-blue-500/30' :
            apiStatus === 'error' ? 'bg-rose-500/10 text-rose-400 border-rose-500/20' :
            'bg-slate-800/50 text-slate-500 border-slate-700'
          }`}>
            {apiStatus === 'success' ? <Wifi size={12} /> : <WifiOff size={12} />}
            <span className="uppercase tracking-tight">
              {apiStatus === 'unauthorized' ? 'Auth Required' : 
               apiStatus === 'success' ? 'Connected' : 
               apiStatus === 'loading' ? 'Fetching...' : 
               apiStatus === 'error' ? 'Proxy Block' : 'Offline'}
            </span>
          </div>

          <div className="flex items-center bg-[#0a0f1c] rounded-lg px-3 py-1.5 border border-slate-800 focus-within:border-blue-500 transition-colors shadow-inner">
            <Search size={14} className="text-slate-500 mr-2" />
            <input 
              type="text" 
              placeholder="Search..." 
              className="bg-transparent border-none outline-none text-xs w-24 text-white placeholder-slate-600 font-medium"
            />
          </div>
          
          <div className="flex items-center space-x-2 border-l border-slate-800 pl-4">
            <button 
              onClick={() => setIsLive(!isLive)}
              className={`flex items-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-bold transition-all ${
                isLive ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/30' : 'bg-rose-500/10 text-rose-400 border border-rose-500/30'
              }`}
            >
              {isLive ? <Pause size={14} className="fill-current" /> : <Play size={14} className="fill-current" />}
              <span>{isLive ? 'LIVE' : 'PAUSED'}</span>
            </button>
            <button 
              onClick={() => setIsSettingsOpen(true)}
              className="p-2 rounded-md text-slate-400 hover:bg-slate-800 hover:text-white transition-colors"
              title="API Settings"
            >
              <Settings size={16} />
            </button>
          </div>
        </div>
      </nav>

      {/* METRICS DASHBOARD */}
      <div className="bg-[#0f172a] border-b border-slate-800 px-4 py-3 flex flex-wrap items-center justify-between text-xs gap-4 shadow-md z-20 flex-shrink-0">
        <div className="flex flex-wrap items-center gap-4">
          <div className="bg-slate-900 border border-slate-800 rounded-lg p-2 flex flex-col min-w-[130px] shadow-sm">
            <span className="text-slate-500 uppercase tracking-wider text-[9px] font-bold mb-0.5">Spot Price</span>
            <div className="flex items-center space-x-2">
              <span className="text-lg font-black text-white tracking-tight">{formatNum(spotPrice)}</span>
              <span className="flex items-center text-[9px] font-bold px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400">
                <TrendingUp size={10} className="mr-1"/> 0.24%
              </span>
            </div>
          </div>
          
          <div className="bg-slate-900 border border-slate-800 rounded-lg p-2 flex flex-col min-w-[130px] shadow-sm">
            <span className="text-slate-500 uppercase tracking-wider text-[9px] font-bold mb-0.5">Expiry Date</span>
            <select className="bg-[#0a0f1c] text-white border border-slate-700 rounded px-2 py-0.5 outline-none font-bold text-xs">
              <option>28-MAY-2026</option>
              <option>04-JUN-2026</option>
            </select>
          </div>

          <div className="w-px h-10 bg-slate-800 hidden md:block"></div>

          <div className="bg-slate-900 border border-slate-800 rounded-lg p-2 flex flex-col min-w-[90px] shadow-sm text-center">
            <span className="text-slate-500 uppercase tracking-wider text-[9px] font-bold mb-0.5">PCR</span>
            <span className={`font-black text-base ${pcr > 1 ? 'text-emerald-400' : 'text-rose-400'}`}>{pcr}</span>
          </div>
            
          <div className="bg-slate-900 border border-slate-800 rounded-lg p-2 flex flex-col min-w-[110px] shadow-sm relative overflow-hidden">
            <div className="absolute top-0 right-0 bg-emerald-900/50 text-emerald-300 px-1 py-0.5 rounded-bl-md text-[8px] font-bold tracking-tighter uppercase">EOS</div>
            <span className="text-slate-500 uppercase tracking-wider text-[9px] font-bold mb-0.5">Support</span>
            <span className="font-black text-white text-base">{formatNum(supportStrike)}</span>
          </div>

          <div className="bg-slate-900 border border-slate-800 rounded-lg p-2 flex flex-col min-w-[110px] shadow-sm relative overflow-hidden">
            <div className="absolute top-0 right-0 bg-rose-900/50 text-rose-300 px-1 py-0.5 rounded-bl-md text-[8px] font-bold tracking-tighter uppercase">EOR</div>
            <span className="text-slate-500 uppercase tracking-wider text-[9px] font-bold mb-0.5">Resistance</span>
            <span className="font-black text-white text-base flex items-center">
              {formatNum(resistanceStrike)}
              <span className="ml-1.5 text-amber-400 text-[8px] px-1 py-0.5 bg-amber-500/10 border border-amber-500/30 rounded font-bold">WTT</span>
            </span>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <button className="flex items-center space-x-1 bg-slate-800 hover:bg-slate-700 text-white px-3 py-1.5 rounded-lg border border-slate-700 font-medium text-xs">
            <Filter size={14} />
            <span>Filters</span>
          </button>
        </div>
      </div>

      {/* TABLE AREA */}
      <div className="w-full flex-1 overflow-auto relative p-4 bg-[#0a0f1c]">
        
        {/* Connection Failure Guidance Banners */}
        {apiStatus === 'unauthorized' && dataSource === 'upstox' && (
          <div className="absolute inset-x-4 top-4 z-40 bg-amber-500/10 border border-amber-500/30 p-4 rounded-xl backdrop-blur-md flex items-center justify-between shadow-2xl animate-in slide-in-from-top-4 duration-300">
            <div className="flex items-center space-x-4 text-amber-300">
              <div className="p-2 bg-amber-500/20 rounded-full"><Key size={24} /></div>
              <div>
                <p className="font-bold text-base leading-tight">Upstox API Token Required</p>
                <p className="text-xs opacity-80 mt-1">
                  Open <strong>Settings</strong> (Gear Icon in the top right corner) to paste your active Bearer access token.
                </p>
              </div>
            </div>
            <button 
              onClick={() => setIsSettingsOpen(true)}
              className="px-4 py-2 bg-amber-600 text-white rounded-lg text-xs font-bold hover:bg-amber-500 transition-colors shadow-lg shadow-amber-900/20"
            >
              Open Settings
            </button>
          </div>
        )}

        {apiStatus === 'error' && dataSource === 'nse_public' && (
          <div className="absolute inset-x-4 top-4 z-40 bg-rose-500/10 border border-rose-500/30 p-4 rounded-xl backdrop-blur-md flex items-center justify-between shadow-2xl animate-in slide-in-from-top-4 duration-300">
            <div className="flex items-center space-x-4 text-rose-300">
              <div className="p-2 bg-rose-500/20 rounded-full"><Globe size={24} /></div>
              <div>
                <p className="font-bold text-base leading-tight">CORS or Security Block Detected from NSE</p>
                <p className="text-xs opacity-80 mt-1">
                  The NSE website blocks direct requests made by browser frames. Try choosing a different **CORS Proxy** or toggle back to **Simulated** in Settings.
                </p>
              </div>
            </div>
            <button 
              onClick={() => setIsSettingsOpen(true)}
              className="px-4 py-2 bg-rose-600 text-white rounded-lg text-xs font-bold hover:bg-rose-500 transition-colors shadow-lg shadow-rose-900/20"
            >
              Configure Proxy
            </button>
          </div>
        )}

        <div className="min-w-[1200px] border border-slate-700/60 rounded-xl overflow-hidden bg-[#0f172a] shadow-2xl">
          <table className="w-full text-[11px] text-right border-collapse select-none">
            <thead className="bg-[#0f172a] text-slate-300 sticky top-0 z-10 shadow-[0_4px_20px_rgba(0,0,0,0.5)]">
              <tr>
                <th colSpan="8" className="text-center py-2 border-r border-slate-700 border-b bg-gradient-to-r from-rose-950/30 to-[#0f172a] font-bold tracking-[0.2em] text-rose-100 uppercase">CE (Calls)</th>
                <th colSpan="1" className="text-center py-2 border-r border-slate-700 border-b bg-slate-800 font-black tracking-widest text-white uppercase">Strike</th>
                <th colSpan="8" className="text-center py-2 border-b border-slate-700 bg-gradient-to-l from-emerald-950/30 to-[#0f172a] font-bold tracking-[0.2em] text-emerald-100 uppercase">PE (Puts)</th>
              </tr>
              <tr className="text-slate-400 font-bold border-b-2 border-slate-700 bg-slate-900 uppercase">
                <th className="py-2.5 px-2 border-r border-slate-700 w-16">OI</th>
                <th className="py-2.5 px-2 border-r border-slate-700 w-16">Chng OI</th>
                <th className="py-2.5 px-2 border-r border-slate-700 w-20 text-blue-100/70">Volume</th>
                <th className="py-2.5 px-2 border-r border-slate-700 w-12">IV</th>
                <th className="py-2.5 px-2 border-r border-slate-700 bg-slate-800/80 text-white w-16">LTP</th>
                <th className="py-2.5 px-2 border-r border-slate-700 w-12">Chng</th>
                <th className="py-2.5 px-2 border-r border-slate-700 w-14">Bid Qty</th>
                <th className="py-2.5 px-2 border-r border-slate-700 w-14">Bid</th>
                <th className="py-2.5 px-2 border-r border-slate-700 font-black text-white text-center bg-slate-800 w-20 uppercase">Strike</th>
                <th className="py-2.5 px-2 border-r border-slate-700 w-14">Ask</th>
                <th className="py-2.5 px-2 border-r border-slate-700 w-14">Ask Qty</th>
                <th className="py-2.5 px-2 border-r border-slate-700 w-12">Chng</th>
                <th className="py-2.5 px-2 border-r border-slate-700 bg-slate-800/80 text-white w-16">LTP</th>
                <th className="py-2.5 px-2 border-r border-slate-700 w-12">IV</th>
                <th className="py-2.5 px-2 border-r border-slate-700 w-20 text-blue-100/70">Volume</th>
                <th className="py-2.5 px-2 border-r border-slate-700 w-16">Chng OI</th>
                <th className="py-2.5 px-2 w-16 uppercase">OI</th>
              </tr>
            </thead>
            <tbody className="font-mono tabular-nums tracking-tight">
              {chainData.map((row, idx) => {
                const nextRow = chainData[idx + 1];
                const drawImaginaryLine = nextRow && row.strike < spotPrice && nextRow.strike > spotPrice;
                const getCallVolClass = () => row.calls.isMaxVol ? 'bg-blue-900/40 border-x border-blue-500/80 text-blue-200 font-bold shadow-[inset_0_0_10px_rgba(59,130,246,0.2)]' : (row.calls.itm ? 'bg-yellow-600/10' : '');
                const getCallOIClass = () => row.calls.isMaxOI ? 'bg-amber-900/40 border-x border-amber-500/80 text-amber-200 font-bold shadow-[inset_0_0_10px_rgba(245,158,11,0.2)]' : (row.calls.itm ? 'bg-yellow-600/10' : '');
                const getPutVolClass = () => row.puts.isMaxVol ? 'bg-blue-900/40 border-x border-blue-500/80 text-blue-200 font-bold shadow-[inset_0_0_10px_rgba(59,130,246,0.2)]' : (row.puts.itm ? 'bg-yellow-600/10' : '');
                const getPutOIClass = () => row.puts.isMaxOI ? 'bg-amber-900/40 border-x border-amber-500/80 text-amber-200 font-bold shadow-[inset_0_0_10px_rgba(245,158,11,0.2)]' : (row.puts.itm ? 'bg-yellow-600/10' : '');

                return (
                  <React.Fragment key={row.strike}>
                    <tr className="border-b border-slate-800/60 hover:bg-slate-800/60 transition-colors group">
                      <td className={`p-1.5 border-r border-slate-800/60 ${getCallOIClass()}`} onClick={(e) => handleCellClick('Resistance OI', row.strike, row.calls.oi, e)}>{formatNum(row.calls.oi)}</td>
                      <td className={`p-1.5 border-r border-slate-800/60 ${row.calls.itm ? 'bg-yellow-600/10' : ''} ${row.calls.chgOi < 0 ? 'text-rose-400' : 'text-emerald-400'}`}>{formatNum(row.calls.chgOi)}</td>
                      <td className={`p-1.5 border-r border-slate-800/60 ${getCallVolClass()}`} onClick={(e) => handleCellClick('Resistance Vol', row.strike, row.calls.vol, e)}>{formatNum(row.calls.vol)}</td>
                      <td className={`p-1.5 border-r border-slate-800/60 ${row.calls.itm ? 'bg-yellow-600/10' : ''}`}>{row.calls.iv}</td>
                      <td className={`p-1.5 border-r border-slate-800/60 font-bold cursor-pointer hover:bg-slate-700 transition-colors ${row.calls.itm ? 'bg-yellow-700/20 text-yellow-100' : 'bg-slate-800/40 text-slate-200'}`} onClick={(e) => handleCellClick('Call LTP Reversal', row.strike, row.calls.ltp, e)}>{row.calls.ltp}</td>
                      <td className={`p-1.5 border-r border-slate-800/60 ${row.calls.itm ? 'bg-yellow-600/10' : ''} ${row.calls.chg < 0 ? 'text-rose-400' : 'text-emerald-400'}`}>{row.calls.chg}</td>
                      <td className="p-1.5 border-r border-slate-800/60 text-slate-500">{row.calls.bidQty}</td>
                      <td className="p-1.5 border-r border-slate-800/60 text-slate-400">{row.calls.bidPrice}</td>
                      <td className="p-1.5 border-r border-slate-800/60 font-black text-center bg-slate-800/90 text-white relative shadow-inner text-xs">
                        {row.strike === resistanceStrike && <div className="absolute left-1.5 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,1)] border border-rose-300"></div>}
                        {row.strike === supportStrike && <div className="absolute right-1.5 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,1)] border border-emerald-300"></div>}
                        {formatNum(row.strike)}
                      </td>
                      <td className="p-1.5 border-r border-slate-800/60 text-slate-400">{row.puts.askPrice}</td>
                      <td className="p-1.5 border-r border-slate-800/60 text-slate-500">{row.puts.askQty}</td>
                      <td className={`p-1.5 border-r border-slate-800/60 ${row.puts.itm ? 'bg-yellow-600/10' : ''} ${row.puts.chg < 0 ? 'text-rose-400' : 'text-emerald-400'}`}>{row.puts.chg}</td>
                      <td className={`p-1.5 border-r border-slate-800/60 font-bold cursor-pointer hover:bg-slate-700 transition-colors ${row.puts.itm ? 'bg-yellow-700/20 text-yellow-100' : 'bg-slate-800/40 text-slate-200'}`} onClick={(e) => handleCellClick('Put LTP Reversal', row.strike, row.puts.ltp, e)}>{row.puts.ltp}</td>
                      <td className={`p-1.5 border-r border-slate-800/60 ${row.puts.itm ? 'bg-yellow-600/10' : ''}`}>{row.puts.iv}</td>
                      <td className={`p-1.5 border-r border-slate-800/60 ${getPutVolClass()}`} onClick={(e) => handleCellClick('Support Vol', row.strike, row.puts.vol, e)}>{formatNum(row.puts.vol)}</td>
                      <td className={`p-1.5 border-r border-slate-800/60 ${row.puts.itm ? 'bg-yellow-600/10' : ''} ${row.puts.chgOi < 0 ? 'text-rose-400' : 'text-emerald-400'}`}>{formatNum(row.puts.chgOi)}</td>
                      <td className={`p-1.5 ${getPutOIClass()}`} onClick={(e) => handleCellClick('Support OI', row.strike, row.puts.oi, e)}>{formatNum(row.puts.oi)}</td>
                    </tr>
                    {drawImaginaryLine && (
                      <tr className="relative z-0">
                        <td colSpan="17" className="p-0 relative h-3">
                           <div className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-600 to-transparent opacity-80 flex items-center justify-center shadow-[0_0_15px_rgba(37,99,235,0.6)]">
                             <span className="text-[10px] font-sans font-black tracking-[0.4em] text-white bg-[#0a0f1c] px-4 rounded-full border border-blue-500/50 uppercase">
                               Imaginary Line <span className="text-blue-300 ml-2">Spot: {formatNum(spotPrice)}</span>
                             </span>
                           </div>
                        </td>
                      </tr>
                    )}
                  </React.Fragment>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {/* REVERSAL ANALYSIS POPOVER */}
      {selectedPopover && (
        <>
          <div className="fixed inset-0 z-40 bg-[#0a0f1c]/60 backdrop-blur-sm" onClick={() => setSelectedPopover(null)}></div>
          <div className="fixed z-50 bg-slate-900 border border-slate-700 shadow-2xl rounded-xl p-5 w-80 animate-in fade-in zoom-in duration-200" style={{ top: Math.min(selectedPopover.y, window.innerHeight - 280) + 10, left: Math.min(selectedPopover.x, window.innerWidth - 330) + 10 }}>
            <div className="flex justify-between items-center border-b border-slate-800 pb-3 mb-4">
              <h3 className="text-white font-bold text-sm flex items-center"><AlertCircle size={16} className="mr-2 text-blue-500" />Reversal Analysis</h3>
              <span className="text-xs bg-slate-800 px-2.5 py-1 rounded-md text-slate-300 font-mono font-bold">STRIKE: {selectedPopover.strike}</span>
            </div>
            <div className="space-y-3 text-sm">
              <div className="flex justify-between items-center bg-[#0a0f1c] p-2.5 rounded-lg border border-slate-800">
                <span className="text-slate-400">Context:</span>
                <span className="font-bold text-white">{selectedPopover.type}</span>
              </div>
              <div className="flex justify-between items-center bg-[#0a0f1c] p-2.5 rounded-lg border border-slate-800">
                <span className="text-slate-400 text-xs uppercase tracking-widest font-bold">Value:</span>
                <span className="font-mono font-bold text-white text-lg">{formatNum(selectedPopover.val)}</span>
              </div>
              <div className="pt-3 mt-4 border-t border-slate-800">
                <p className="text-slate-500 mb-3 text-xs font-bold uppercase tracking-wider">Calculated Reversals</p>
                <div className="space-y-2 font-mono text-xs">
                  <div className="flex justify-between items-center text-rose-300 bg-rose-950/30 px-3 py-2 rounded-lg border border-rose-900/50 font-bold uppercase tracking-tighter"><span>UR+1 (Ext Res)</span><span>{formatNum(selectedPopover.strike + 22.45)}</span></div>
                  <div className="flex justify-between items-center text-slate-300 px-3 py-2 bg-slate-800/50 rounded-lg"><span>Divergence</span><span>{formatNum(selectedPopover.strike)}</span></div>
                  <div className="flex justify-between items-center text-emerald-300 bg-emerald-950/30 px-3 py-2 rounded-lg border border-emerald-900/50 font-bold uppercase tracking-tighter"><span>US-1 (Ext Sup)</span><span>{formatNum(selectedPopover.strike - 18.20)}</span></div>
                </div>
              </div>
              <button className="w-full mt-4 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white py-2 rounded-lg transition-all font-bold shadow-[0_0_15px_rgba(37,99,235,0.4)] uppercase text-xs" onClick={() => setSelectedPopover(null)}>Close Window</button>
            </div>
          </div>
        </>
      )}

      {/* SETTINGS / CREDENTIALS MODAL */}
      {isSettingsOpen && (
        <>
          <div className="fixed inset-0 z-50 bg-[#0a0f1c]/80 backdrop-blur-md" onClick={() => setIsSettingsOpen(false)}></div>
          <div className="fixed inset-y-0 right-0 w-96 bg-slate-900 border-l border-slate-800 z-50 p-6 flex flex-col shadow-2xl animate-in slide-in-from-right duration-300">
            <div className="flex justify-between items-center border-b border-slate-850 pb-4 mb-6">
              <h3 className="text-white font-black text-lg flex items-center">
                <Settings size={20} className="mr-2 text-blue-500 animate-spin-slow" />
                API & Stream Settings
              </h3>
              <button onClick={() => setIsSettingsOpen(false)} className="p-1 rounded-md text-slate-500 hover:text-white hover:bg-slate-800">
                <X size={20} />
              </button>
            </div>

            <div className="flex-1 space-y-6 overflow-y-auto pr-1">
              <div>
                <label className="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-2">Upstox Bearer Token</label>
                <textarea 
                  value={upstoxToken}
                  onChange={(e) => setUpstoxToken(e.target.value)}
                  placeholder="Paste your Upstox v2 access token here..."
                  className="w-full h-24 bg-slate-950 border border-slate-800 rounded-lg p-3 text-xs text-white font-mono placeholder-slate-700 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                />
                <p className="text-[10px] text-slate-500 mt-1.5 leading-normal">
                  Your token can be fetched from the Upstox Developer Portal after OAuth login. Used to fetch true high-frequency quotes.
                </p>
              </div>

              <div>
                <label className="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-2">NSE CORS Proxy Mode</label>
                <select 
                  value={corsProxy} 
                  onChange={(e) => setCorsProxy(e.target.value)}
                  className="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white outline-none focus:border-blue-500 mb-2"
                >
                  <option value="https://api.codetabs.com/v1/proxy?quest=">CodeTabs Proxy (Recommended)</option>
                  <option value="https://api.allorigins.win/raw?url=">AllOrigins Proxy (Alternative)</option>
                  <option value="">No Proxy (Direct URL Call)</option>
                </select>
                
                <input 
                  type="text"
                  value={corsProxy}
                  onChange={(e) => setCorsProxy(e.target.value)}
                  placeholder="Custom Proxy URL..."
                  className="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:border-blue-500 outline-none text-slate-400"
                />
                <p className="text-[10px] text-slate-500 mt-1.5 leading-normal">
                  Required to query the NSE option API directly from the browser context without CORS blocking.
                </p>
              </div>

              <div className="bg-slate-950 border border-slate-855 rounded-lg p-4 space-y-2">
                <h4 className="text-white font-bold text-xs uppercase tracking-wider flex items-center">
                  <Database size={12} className="mr-1.5 text-blue-400" />
                  Local Memory Save
                </h4>
                <p className="text-[10px] text-slate-400 leading-normal">
                  Settings are active instantly. If your API connection fails, switch the active source back to **Simulated** in the top header.
                </p>
              </div>
            </div>

            <button 
              onClick={() => setIsSettingsOpen(false)}
              className="w-full mt-6 bg-gradient-to-r from-blue-600 to-indigo-700 hover:from-blue-500 hover:to-indigo-600 text-white font-bold py-2.5 rounded-lg shadow-lg shadow-blue-900/30 text-xs uppercase tracking-widest transition-all"
            >
              Save & Apply
            </button>
          </div>
        </>
      )}

      {/* FOOTER */}
      <footer className="bg-[#0a0f1c] border-t border-slate-800/60 p-3 text-center text-[10px] text-slate-600 font-medium uppercase tracking-widest flex-shrink-0">
        <p>Advanced Option Chain Dashboard | Upstox Real-time Integration Active</p>
      </footer>
    </div>
  );
}