app.py

import pandas as pd
import requests
import uvicorn
import json
import time
import os
import threading
from datetime import datetime
from fastapi import FastAPI, Cookie, BackgroundTasks, Query
from fastapi.responses import HTMLResponse, RedirectResponse, JSONResponse
from typing import Optional

# ==========================================
# 1. CONFIGURATION
# ==========================================
# REPLACE THESE WITH YOUR UPSTOX CREDENTIALS
API_KEY      = "13c3ac18-b78f-4e5b-a6b8-d8f66de0b52c"
API_SECRET   = "qymj4zn0i1"
REDIRECT_URI = "https://topsecrettraders-depthchainindiaup.hf.space/callback" 

CACHE_FILE = "upstox_master_cache.json"

app = FastAPI()

# ==========================================
# 2. DATA LOADER (UPSTOX MASTER)
# ==========================================

MASTER_DB = {}
SEARCH_INDEX = [] 

SYSTEM_STATUS = {
    "ready": False,
    "message": "Booting..."
}
UPDATE_LOCK = threading.Lock()

# Manual mapping for Index Spot Keys (Safety Net)
INDEX_MAP = {
    "NIFTY": "NSE_INDEX|Nifty 50",
    "BANKNIFTY": "NSE_INDEX|Nifty Bank",
    "FINNIFTY": "NSE_INDEX|Nifty Fin Service",
    "MIDCPNIFTY": "NSE_INDEX|NIFTY MID SELECT",
    "SENSEX": "BSE_INDEX|SENSEX",
    "BANKEX": "BSE_INDEX|BANKEX",
    "SENSEX50": "BSE_INDEX|SENSEX50"
}

def update_master_db():
    global SYSTEM_STATUS, MASTER_DB, SEARCH_INDEX
    
    if not UPDATE_LOCK.acquire(blocking=False):
        return

    try:
        SYSTEM_STATUS["message"] = "Downloading Upstox Master Data..."
        print(">>> [BG TASK] STARTING DOWNLOAD (NSE, BSE, MCX)...")
        
        # 1. NSE
        url_nse = "https://assets.upstox.com/market-quote/instruments/exchange/NSE.json.gz"
        df_nse = pd.read_json(url_nse, compression='gzip')
        
        # 2. BSE
        url_bse = "https://assets.upstox.com/market-quote/instruments/exchange/BSE.json.gz"
        df_bse = pd.read_json(url_bse, compression='gzip')

        # 3. MCX
        url_mcx = "https://assets.upstox.com/market-quote/instruments/exchange/MCX.json.gz"
        df_mcx = pd.read_json(url_mcx, compression='gzip')

        SYSTEM_STATUS["message"] = "Processing Data..."
        
        # Combine all exchanges
        df = pd.concat([df_nse, df_bse, df_mcx], ignore_index=True)
        
        # Filter relevant segments
        mask = df['segment'].isin(['NSE_FO', 'BSE_FO', 'MCX_FO', 'NSE_INDEX', 'BSE_INDEX', 'NSE_EQ'])
        df = df[mask]
        
        temp_db = {}
        search_list = []
        
        # ---------------------------------------------------------
        # STEP 1: Build the SPOT LOOKUP Dictionary
        # Map: "RELIANCE" -> "NSE_EQ|INE002A01018"
        # ---------------------------------------------------------
        spot_lookup = {}

        for _, row in df.iterrows():
            seg = row['segment']
            
            # For Stocks (Equity): Use 'trading_symbol' (e.g., "RELIANCE")
            if seg == 'NSE_EQ':
                sym = str(row['trading_symbol']).strip().upper()
                key = row['instrument_key']
                spot_lookup[sym] = key
            
            # For Indices: Use 'trading_symbol' (e.g., "Nifty 50")
            elif seg == 'NSE_INDEX' or seg == 'BSE_INDEX':
                sym = str(row['trading_symbol']).strip().upper()
                key = row['instrument_key']
                spot_lookup[sym] = key
                
                # Also map 'name' just in case
                name = str(row['name']).strip().upper()
                spot_lookup[name] = key

        # ---------------------------------------------------------
        # STEP 2: Build the DERIVATIVES Chain
        # ---------------------------------------------------------
        for _, row in df.iterrows():
            seg = row['segment']
            
            # Skip non-derivatives
            if seg not in ['NSE_FO', 'BSE_FO', 'MCX_FO']: 
                continue 
            
            sym = row['trading_symbol'] # e.g. RELIANCE24JANFUT
            key = row['instrument_key']
            
            # -----------------------------------------------------
            # CRITICAL FIX: IDENTIFY THE ROOT SYMBOL
            # Priority: underlying_symbol > asset_symbol > name
            # -----------------------------------------------------
            root = ""
            
            # 1. Try 'underlying_symbol' (This gives "RELIANCE" correctly for stocks)
            us = row.get('underlying_symbol')
            if pd.notna(us) and str(us).strip() != "":
                root = str(us).strip().upper()
                
            # 2. Fallback to 'asset_symbol' if underlying is empty
            if not root:
                asym = row.get('asset_symbol')
                if pd.notna(asym) and str(asym).strip() != "":
                    root = str(asym).strip().upper()
                    
            # 3. Last resort: 'name' (Though usually Long Name for stocks)
            if not root:
                nm = row.get('name')
                if pd.notna(nm):
                    root = str(nm).strip().upper()

            # Normalize (remove spaces just in case)
            clean_root = root.replace(' ', '') 

            # Initialize DB Entry
            if clean_root not in temp_db:
                # Find Spot Key
                spot_key = ""
                
                # A: Manual Map (Indices)
                if clean_root in INDEX_MAP:
                    spot_key = INDEX_MAP[clean_root]
                
                # B: Lookup using raw ROOT (e.g. "RELIANCE") matches "NSE_EQ" trading_symbol
                elif root in spot_lookup:
                    spot_key = spot_lookup[root]
                
                # C: Lookup using cleaned ROOT
                elif clean_root in spot_lookup:
                    spot_key = spot_lookup[clean_root]
                
                # Determine Exchange Code
                exch_code = seg.split('_')[0] 
                
                # Use Short Name for display if possible, else Full Name
                # If root is "RELIANCE", display is likely "RELIANCE"
                # If row['name'] is "RELIANCE INDUSTRIES LTD", use that for nice display
                display_name = row['name'] if pd.notna(row['name']) else root

                temp_db[clean_root] = { 
                    "spot": spot_key, 
                    "exch": exch_code, 
                    "name": display_name, 
                    "items": [] 
                }

            inst_type = row.get('instrument_type', '') 
            
            # Parse Expiry
            exp = 0
            raw_exp = row.get('expiry')
            if pd.notna(raw_exp):
                try:
                    if isinstance(raw_exp, (int, float)):
                        exp = int(raw_exp / 1000)
                    elif isinstance(raw_exp, str):
                        dt = datetime.strptime(raw_exp, "%Y-%m-%d")
                        exp = int(dt.replace(tzinfo=None).timestamp())
                except: pass

            strike = float(row.get('strike_price', 0.0))
            
            # Map Types
            t_mapped = "FUT"
            if inst_type == "CE": t_mapped = "CE"
            elif inst_type == "PE": t_mapped = "PE"
            elif inst_type in ["FUTIDX", "FUTSTK", "FUTCOM", "FUTBLN", "FUTENR"]: t_mapped = "FUT"
            
            temp_db[clean_root]["items"].append({
                "s": key,       
                "dis": sym,     
                "e": exp,       
                "k": strike,    
                "t": t_mapped   
            })

        # ---------------------------------------------------------
        # STEP 3: Finalize
        # ---------------------------------------------------------
        final_db = {}
        for root, data in temp_db.items():
            if not data["items"]: continue
            
            sorted_items = sorted(data["items"], key=lambda x: (x['e'], x['k']))
            
            final_db[root] = { 
                "spot": data["spot"], 
                "exch": data["exch"], 
                "items": sorted_items 
            }
            
            # Add to Search
            # We use the full name in display so user sees "RELIANCE INDUSTRIES LTD"
            # But the 'root' key is "RELIANCE"
            search_list.append({
                "root": root,           
                "name": data["name"],   
                "exch": data["exch"],   
                "display": f"{data['name']} ({root})"
            })

        MASTER_DB = final_db
        SEARCH_INDEX = sorted(search_list, key=lambda x: x['root'])
        
        with open(CACHE_FILE, "w") as f:
            json.dump({"db": final_db, "idx": SEARCH_INDEX}, f)

        SYSTEM_STATUS["ready"] = True
        SYSTEM_STATUS["message"] = "Ready"
        print(f">>> [BG TASK] COMPLETE. Loaded {len(SEARCH_INDEX)} roots. Fixed Underlying Symbol Logic.")

    except Exception as e:
        print(f">>> [BG TASK] ERROR: {e}")
        SYSTEM_STATUS["message"] = f"Error: {str(e)}"
    finally:
        UPDATE_LOCK.release()

@app.on_event("startup")
def startup_event():
    global MASTER_DB, SEARCH_INDEX
    if os.path.exists(CACHE_FILE):
        try:
            print(">>> STARTUP: Loading Cache...")
            with open(CACHE_FILE, "r") as f:
                data = json.load(f)
                MASTER_DB = data["db"]
                SEARCH_INDEX = data["idx"]
            SYSTEM_STATUS["ready"] = True
            SYSTEM_STATUS["message"] = "Ready (Cached)"
        except: pass
            
    if not SYSTEM_STATUS["ready"]:
        thread = threading.Thread(target=update_master_db)
        thread.start()

# ==========================================
# 3. ROUTES
# ==========================================

@app.get("/")
def home(access_token: Optional[str] = Cookie(None)):
    if not access_token:
        auth_url = (
            f"https://api.upstox.com/v2/login/authorization/dialog?"
            f"response_type=code&client_id={API_KEY}&redirect_uri={REDIRECT_URI}"
        )
        return HTMLResponse(f"""
        <div style="height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; font-family:sans-serif; background:#f5f5f5;">
            <div style="background:white; padding:40px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.1); text-align:center;">
                <h2 style="margin-top:0;">Authentication Required</h2>
                <a href="{auth_url}" style="display:inline-block; background:#2962ff; color:white; padding:12px 25px; text-decoration:none; border-radius:5px; font-weight:bold; margin-top:10px;">LOGIN WITH UPSTOX</a>
            </div>
        </div>
        """)
    
    return HTMLResponse(HTML_TEMPLATE.replace("{{USER_TOKEN}}", access_token))

@app.get("/callback")
def callback(code: Optional[str] = None):
    if not code: return JSONResponse({"error": "No Code Provided"})

    url = "https://api.upstox.com/v2/login/authorization/token"
    headers = { 'accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded' }
    data = {
        'code': code,
        'client_id': API_KEY,
        'client_secret': API_SECRET,
        'redirect_uri': REDIRECT_URI,
        'grant_type': 'authorization_code'
    }
    
    resp = requests.post(url, headers=headers, data=data)
    json_resp = resp.json()
    
    if "access_token" in json_resp:
        response = RedirectResponse(url="/")
        response.set_cookie(key="access_token", value=json_resp['access_token'], httponly=True)
        return response
    else:
        return HTMLResponse(f"<h3>Login Failed</h3><pre>{json.dumps(json_resp, indent=2)}</pre>")

@app.get("/logout")
def logout():
    response = RedirectResponse(url="/")
    response.delete_cookie("access_token")
    return response

@app.get("/api/status")
def get_status():
    return JSONResponse(SYSTEM_STATUS)

@app.get("/api/search")
def search_symbol(q: str = Query(..., min_length=1)):
    if not SYSTEM_STATUS["ready"]: return JSONResponse([])
    query = q.upper()
    
    results = []
    # 1. Exact Starts With Root (e.g. "REL")
    results += [x for x in SEARCH_INDEX if x['root'].startswith(query)]
    
    # 2. Contains in Name (e.g. "RELIANCE") - limit to 10
    if len(results) < 20:
        results += [x for x in SEARCH_INDEX if query in x['name'].upper() and x not in results][:10]
        
    return JSONResponse(results[:30])

@app.get("/api/chain")
def get_chain(symbol: str):
    root = symbol.upper()
    if root in MASTER_DB:
        return JSONResponse(MASTER_DB[root])
    return JSONResponse({"error": "Symbol not found"}, status_code=404)

@app.get("/api/refresh")
def force_refresh(background_tasks: BackgroundTasks):
    SYSTEM_STATUS["ready"] = False
    SYSTEM_STATUS["message"] = "Refreshing..."
    background_tasks.add_task(update_master_db)
    return JSONResponse({"s": "ok"})


# ==========================================
# 4. FRONTEND
# ==========================================

HTML_TEMPLATE = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PRO CHAIN (UPSTOX)</title>
    <meta name="viewport" content="width=1100">
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;800&family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root { 
            --bg: #ffffff; --panel: #f4f6f8; --border: #e0e0e0; 
            --text-main: #1a1a1a; --text-sub: #555555;
            --accent: #6c4af5; --green: #00c853; --red: #d50000;
            --green-soft: rgba(0, 200, 83, 0.27); --red-soft: rgba(213, 0, 0, 0.18);
            --atm-bg: rgba(108, 74, 245, 0.08);
            --badge-nse: #00c853; --badge-bse: #ff6d00; --badge-mcx: #2962ff;
        }
        * { box-sizing: border-box; }
        body { margin: 0; background: var(--bg); color: var(--text-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

        .top-nav { padding: 0 20px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; height: 60px; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
        .btn { background: #fff; border: 1px solid var(--border); padding: 8px 16px; font-size: 12px; border-radius: 6px; cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; transition:0.2s; white-space:nowrap; color: var(--text-sub); }
        .btn:hover { border-color: var(--accent); color: var(--accent); background:#f0f7ff; }
        .btn.active { background: var(--accent); color: white; border-color: var(--accent); }
        
        .icon-btn { padding: 8px; border-radius: 50%; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--text-sub); transition:0.2s; }
        .icon-btn:hover { background: #f0f0f0; color: var(--text-main); }

        .search-box { position: relative; width: 350px; margin-right: 20px; }
        .search-input { width: 100%; padding: 10px 15px; border: 1px solid var(--border); border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-weight: bold; font-size: 14px; outline: none; transition: 0.3s; background: #f9f9f9; }
        .search-input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(108, 74, 245, 0.1); }
        .search-dropdown { position: absolute; top: 105%; left: 0; width: 100%; background: white; border: 1px solid var(--border); max-height: 400px; overflow-y: auto; display: none; box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-radius: 6px; z-index: 100; }
        
        .search-item { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid #f5f5f5; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
        .search-item:hover { background: #f0f7ff; color: var(--accent); }

        .ref-wrap { position: relative; cursor: pointer; user-select: none; }
        .ref-dropdown { position: absolute; top: 100%; right: 0; width: 180px; background: white; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); display: none; z-index: 100; }
        .ref-item { padding: 10px; font-size: 11px; font-weight: 700; border-bottom: 1px solid #f5f5f5; transition: 0.2s; }
        .ref-item:hover { background: #f0f7ff; color: var(--accent); }
        .ref-item.active { background: var(--accent); color: white; }
        
        .exch-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; color: white; font-weight: 800; min-width: 40px; text-align: center; }
        .badge-NSE { background: var(--badge-nse); }
        .badge-BSE { background: var(--badge-bse); }
        .badge-MCX { background: var(--badge-mcx); }

        .grid-layout { display: flex; height: calc(100vh - 60px); }
        
        /* Chain Panel */
        .chain-panel { flex: 1; display: flex; flex-direction: column; position: relative; }
        
        .chain-header { display: grid; grid-template-columns: 1fr 1fr; background: #f8f9fa; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 800; text-align: center; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.5px; }
        .header-cell { padding: 12px 5px; display: flex; align-items: center; justify-content: center; gap: 8px; position:relative; border-right: 1px solid var(--border); }
        .header-icon { opacity: 0.3; cursor: pointer; transition: 0.2s; }
        .header-icon:hover { opacity: 1; color: var(--accent); }

        .chain-body { flex: 1; overflow-y: auto; background: #fff; scroll-behavior: smooth; }
        
        .row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #f0f0f0; height: 42px; align-items: center; font-family: 'JetBrains Mono'; font-size: 12px; }
        .row:hover { background: #fafafa; }
        .row.atm { background: var(--atm-bg); border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
        
        .graph-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid var(--border); cursor: crosshair; }
        .visual-bar { position: absolute; top: 8px; bottom: 8px; z-index: 0; border-radius: 4px; transition: width 0.3s, left 0.3s; opacity: 0.9; }
        
        .strike-txt { z-index: 2; font-weight: 800; font-size: 13px; color: var(--text-main); }
        .delta-txt { z-index: 2; font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.85); padding: 0 5px; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); margin-top: -2px; }
        
        /* Futures / Sidebar Panel */
        .fut-panel { width: 300px; background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; }
        
        .panel-section { padding: 15px; border-bottom: 1px solid var(--border); background: #fff; margin-bottom: 10px; }
        .panel-title { font-size: 11px; font-weight: 800; color: #888; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; display:flex; justify-content:space-between; align-items:center; }
        
        .fut-card { padding: 12px; background: #fff; border: 1px solid #eee; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
        .meter-bg { height: 6px; background: #eee; border-radius: 3px; display: flex; overflow: hidden; margin-top: 8px; }
        
        .netflow-card { background: #fff; padding: 15px; border-radius: 8px; border: 1px solid var(--border); text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
        
        .nf-sec { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
        .nf-sec:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
        .nf-title { font-size: 10px; font-weight: 800; color: #888; text-transform: uppercase; margin-bottom: 8px; text-align: left; }
        
        .aggr-row { display: flex; width: 100%; border: 1px solid transparent; }
        .aggr-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
        
        .aggr-val { font-size: 20px; font-family: 'JetBrains Mono'; font-weight: 800; line-height: 1; margin-bottom: 2px; }
        .aggr-lbl { font-size: 9px; font-weight: 700; color: #aaa; background: transparent; padding: 0; border-radius: 0; margin-top: 2px; display:flex; align-items:center; gap:3px; }
        
        .info-bubble { width:12px; height:12px; background:#eee; color:#666; border-radius:50%; font-size:8px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-family:'Inter'; font-weight:800; }
        .info-bubble:hover { background:var(--accent); color:white; }

        /* Modals */
        .modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); z-index: 1000; display: none; justify-content: center; align-items: center; backdrop-filter: blur(2px); }
        .modal-box { background: #fff; width: 420px; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); padding: 25px; display:flex; flex-direction:column; animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        
        .modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; max-height: 300px; overflow-y: auto; }
        .opt-btn { padding: 10px; text-align: center; border: 1px solid #eee; border-radius: 6px; cursor: pointer; font-weight:600; font-size:12px; transition:0.2s; background:#f9f9f9; }
        .opt-btn:hover { background: #fff; border-color: var(--accent); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        .opt-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
        
        .inp-group { margin-top:15px; }
        .inp-label { font-size:11px; font-weight:800; color:#888; margin-bottom:5px; display:block; }
        .modal-inp { width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; font-family:'JetBrains Mono'; font-weight:bold; font-size:14px; }
        .modal-action { background:var(--accent); color:white; border:none; padding:10px 20px; border-radius:6px; font-weight:bold; cursor:pointer; width:100%; margin-top:20px; }
        .modal-action.sec { background:#eee; color:#333; margin-top:10px; }

        .info-table { width:100%; font-family:'JetBrains Mono'; font-size:10px; border-collapse: collapse; margin-top:10px; }
        .info-table th { text-align:left; color:#888; border-bottom:1px solid #eee; padding:5px; }
        .info-table td { padding:5px; border-bottom:1px solid #f9f9f9; color:#333; }
        .info-row-res { background: #f0f7ff; font-weight:800; }
        .info-row-atm { border-top: 2px solid var(--accent); background: rgba(108, 74, 245, 0.05); }

        .conf-list { max-height: 250px; overflow-y: auto; margin-bottom: 15px; border: 1px solid #eee; border-radius: 6px; background: #fafafa; }
        .conf-item { background: #fff; border-bottom: 1px solid #eee; padding: 10px; }
        .conf-item:last-child { border-bottom: none; }
        .conf-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
        .conf-body { margin-top: 10px; display: none; padding-top: 10px; border-top: 1px solid #f5f5f5; }
        .conf-item.expanded .conf-body { display: block; }
        .conf-item.expanded .conf-header { color: var(--accent); }
        .del-btn { color: var(--red); cursor: pointer; font-size: 10px; font-weight: bold; border: 1px solid var(--red-soft); padding: 2px 6px; border-radius: 4px; }
        .add-btn { width: 100%; border: 1px dashed #ccc; padding: 10px; text-align: center; font-size: 11px; font-weight: bold; color: #888; cursor: pointer; border-radius: 6px; margin-bottom: 15px; transition: 0.2s; background: #fff; }
        .add-btn:hover { border-color: var(--accent); color: var(--accent); background: #f0f7ff; }

        .loader-ov { position: fixed; top:0; left:0; width:100%; height:100%; background:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index: 9999; }
        .spinner { width: 30px; height: 30px; border: 3px solid #f3f3f3; border-top: 3px solid var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 15px; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        
        @keyframes blink { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
        .live-dot { width:8px; height:8px; background:#ccc; border-radius:50%; transition:0.3s; }
        .live-dot.active { background: var(--green); animation: blink 1.5s infinite; box-shadow: 0 0 5px var(--green); }
        .live-dot.error { background: var(--red); }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #bbb; }
        
        .code-box { background:#f4f4f4; padding:10px; border-radius:6px; font-family:'JetBrains Mono'; font-size:11px; color:#555; margin-top:5px; display:none; }
        .var-tag { color:var(--accent); font-weight:bold; }
    </style>
</head>
<body>

<!-- LOADER -->
<div class="loader-ov" id="loader">
    <div class="spinner"></div>
    <div id="loaderMsg" style="font-weight:700; color:var(--text-main); font-size:14px; letter-spacing:1px;">CONNECTING...</div>
</div>

<!-- EXPIRY MODAL -->
<div class="modal" id="expModal">
    <div class="modal-box">
        <div style="display:flex; justify-content:space-between; font-weight:800; font-size:16px; border-bottom:1px solid #eee; padding-bottom:15px;">
            <span>SELECT EXPIRY</span>
            <span style="cursor:pointer; color:#999;" onclick="closeModal('expModal')">✕</span>
        </div>
        <div class="modal-grid" id="expGrid"></div>
    </div>
</div>

<!-- INFO BREAKDOWN MODAL -->
<div class="modal" id="infoModal">
    <div class="modal-box" style="width: 500px; max-width:95%;">
        <div style="display:flex; justify-content:space-between; font-weight:800; font-size:16px; border-bottom:1px solid #eee; padding-bottom:15px;">
            <span>CALCULATION BREAKDOWN</span>
            <span style="cursor:pointer; color:#999;" onclick="closeModal('infoModal')">✕</span>
        </div>
        <div style="margin-top:15px; font-size:12px;">
            <div><strong>LIVE SPOT:</strong> <span id="infoSpot" style="font-family:'JetBrains Mono'; color:var(--accent);">0.00</span></div>
            <div style="margin-top:5px;"><strong>FORMULA:</strong> <span id="infoForm" style="font-family:'JetBrains Mono'; background:#f4f4f4; padding:2px 6px; border-radius:4px;"></span></div>
        </div>
        <div style="overflow-y:auto; max-height:400px; margin-top:10px;">
            <table class="info-table" id="infoTable">
                <!-- Dynamic Content -->
            </table>
        </div>
        <div style="margin-top:10px; font-size:10px; color:#888; text-align:center;">* Uses Raw Integer Values for Accuracy</div>
    </div>
</div>

<!-- CONFIG MODAL -->
<div class="modal" id="confModal">
    <div class="modal-box">
        <div style="display:flex; justify-content:space-between; font-weight:800; font-size:16px; border-bottom:1px solid #eee; padding-bottom:15px;">
            <span id="confTitle">COLUMN SETTINGS</span>
            <span style="cursor:pointer; color:#999;" onclick="closeModal('confModal')">✕</span>
        </div>
        <div class="inp-group">
            <span class="inp-label">DISPLAY TITLE</span>
            <input type="text" id="confName" class="modal-inp" placeholder="e.g. NET FLOW">
        </div>
        <div class="inp-group">
            <span class="inp-label">CUSTOM FORMULA</span>
            <input type="text" id="confForm" class="modal-inp" placeholder="e.g. PS - CS">
        </div>
        <button class="modal-action" onclick="saveConfig()">SAVE CONFIGURATION</button>
        <button class="modal-action sec" onclick="resetConfig()">RESET TO DEFAULTS</button>
    </div>
</div>

<!-- SIDEBAR AGGREGATE SETTINGS MODAL -->
<div class="modal" id="sideConfModal">
    <div class="modal-box">
        <div style="display:flex; justify-content:space-between; font-weight:800; font-size:16px; border-bottom:1px solid #eee; padding-bottom:15px;">
            <span>SIDEBAR CONFIG</span>
            <span style="cursor:pointer; color:#999;" onclick="closeModal('sideConfModal')">✕</span>
        </div>
        <div style="margin-top:10px; font-size:11px; font-weight:700; color:#888; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;">
            <span>CONFIGURE CARDS & RANGES</span>
            <span onclick="toggleVarHelp()" style="color:var(--accent); cursor:pointer; font-weight:800;">[?] VARIABLES</span>
        </div>
        <div class="code-box" id="sideVarHelp">
             <div>VARIABLES AVAILABLE:</div>
             <div style="margin-top:4px;">
                 <span class="var-tag">CS</span> = Call Sell &nbsp; <span class="var-tag">CB</span> = Call Buy &nbsp; <span class="var-tag">CO</span> = Call OI &nbsp; <span class="var-tag">CLTP</span> = Call LTP &nbsp; <span class="var-tag">CV</span> = Call Vol<br>
                 <span class="var-tag">PS</span> = Put Sell &nbsp;&nbsp; <span class="var-tag">PB</span> = Put Buy &nbsp; <span class="var-tag">PO</span> = Put OI &nbsp; <span class="var-tag">PLTP</span> = Put LTP &nbsp; <span class="var-tag">PV</span> = Put Vol
             </div>
             <div style="margin-top:4px; font-size:10px; color:#888;">Supports +, -, *, /, ( ) arithmetic.</div>
        </div>
        <div class="conf-list" id="sideListContainer"></div>
        <div class="add-btn" onclick="addSideItem()">+ ADD NEW AGGREGATE CARD</div>
        <button class="modal-action" onclick="saveSideConfig()">SAVE SETTINGS</button>
        <button class="modal-action sec" onclick="resetSideConfig()">RESET DEFAULTS</button>
    </div>
</div>

<!-- TOP NAV -->
<div class="top-nav">
    <div style="display:flex; align-items:center;">
        <div class="search-box">
            <input type="text" class="search-input" id="searchInp" placeholder="SEARCH (e.g. SBIN, CRUDE)..." autocomplete="off">
            <div class="search-dropdown" id="searchRes"></div>
        </div>
    </div>
    
    <div style="display:flex; gap:20px; align-items:center;">
        <button class="icon-btn" onclick="refreshDB()" title="Refresh Master DB">
            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
        </button>
        <div class="ref-wrap" onclick="toggleRefMenu()">
            <div style="text-align:right;">
                <div style="font-size:10px; font-weight:700; color:#aaa; letter-spacing:1px; display:flex; align-items:center; justify-content:flex-end; gap:4px;">
                    <span id="spotLabel">SPOT</span> <span>▼</span>
                </div>
                <div id="spotPrice" style="font-family:'JetBrains Mono'; font-weight:800; font-size:17px; color:var(--text-main);">0.00</div>
            </div>
            <div class="ref-dropdown" id="refMenu"></div>
        </div>
        <button class="btn" onclick="document.getElementById('expModal').style.display='flex'">
            <span style="color:#888">EXP:</span> <span id="selExpTxt" style="color:var(--text-main)">SELECT</span>
            <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"></path></svg>
        </button>
        <div class="live-dot" id="statusDot" title="Connection Status"></div>
        <button class="btn" onclick="location.href='/logout'" style="border:none; color:var(--red); padding:0;">
            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
        </button>
    </div>
</div>

<div class="grid-layout">
    <div class="chain-panel">
        <div class="chain-header">
            <div class="header-cell">
                <span id="headL_txt">NET FLOW</span>
                <svg class="header-icon" onclick="openConfig('left')" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
            </div>
            <div class="header-cell">
                <span id="headR_txt">OVERALL FLOW</span>
                <svg class="header-icon" onclick="openConfig('right')" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
            </div>
        </div>
        <div class="chain-body" id="chainBody">
            <div style="padding:40px; text-align:center; color:#999; font-weight:600; font-size:14px;">USE SEARCH BAR TO LOAD DATA</div>
        </div>
    </div>
    
    <div class="fut-panel">
        <div class="panel-section">
            <div class="panel-title">
                <span>AGGREGATE FLOW</span>
                <div style="display:flex; align-items:center; gap:5px;">
                    <svg onclick="openSideConfig()" style="cursor:pointer; opacity:0.5;" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                </div>
            </div>
            <div class="netflow-card" id="sideContainer">
                <div style="padding:20px; color:#ccc; font-size:10px;">LOADING CONFIG...</div>
            </div>
        </div>
        <div class="panel-section">
            <div class="panel-title">FUTURES CONTRACTS</div>
            <div id="futBody"></div>
        </div>
    </div>
</div>

<script>
    const UPSTOX_TOKEN = "{{USER_TOKEN}}";
    
    // Core State
    let CURRENT_ROOT = "";
    let CHAIN_DATA = null;
    let ACTIVE_EXP = 0;
    let SPOT_SYM = "";
    let SELECTED_REF_SYM = ""; // The actual symbol key used for ATM/Calcs
    let SPOT_PRICE = 0;
    let FUT_SYMS = [];
    let OPT_SYMS = [];
    let POLLER = null;
    let IS_POLLING = false;
    let SEARCH_TIMER = null;
    let ATM_STRIKE = 0;
    let LATEST_ROW_DATA = {};

    // Default Configurations
    const DEFAULTS = {
        left: { name: "NET FLOW", formula: "PS - CS" },
        right: { name: "OVERALL FLOW", formula: "CB + PS - (PB + CS)" },
        side: [
            { id: 1, name: "NET FLOW", formula: "PS - CS", ranges: [7,10], _expanded: true },
            { id: 2, name: "OVERALL", formula: "CB + PS - (PB + CS)", ranges: [7,10], _expanded: false },
            { id: 3, name: "NET OI", formula: "PO - CO", ranges: [10], _expanded: false }
        ]
    };

    // Load Config from LocalStorage
    let CONFIG = JSON.parse(localStorage.getItem('tst_chain_config')) || JSON.parse(JSON.stringify(DEFAULTS));
    if(!Array.isArray(CONFIG.side)) CONFIG.side = JSON.parse(JSON.stringify(DEFAULTS.side));

    let EDITING_COL = null; 

    window.onload = () => { 
        applyConfig();
        checkStatus();
        const inp = document.getElementById('searchInp');
        inp.addEventListener('input', (e) => {
            clearTimeout(SEARCH_TIMER);
            SEARCH_TIMER = setTimeout(() => doSearch(e.target.value), 300);
        });
        document.addEventListener('click', (e) => {
            if(!e.target.closest('.search-box')) document.getElementById('searchRes').style.display = 'none';
        });
    };

    // ===================================
    // MATH ENGINE
    // ===================================
    function evaluateFormula(formula, vars) {
        try {
            let exp = formula;
            exp = exp.replace(/CS/g, vars.CS || 0);
            exp = exp.replace(/CB/g, vars.CB || 0);
            exp = exp.replace(/PS/g, vars.PS || 0);
            exp = exp.replace(/PB/g, vars.PB || 0);
            
            exp = exp.replace(/CO/g, vars.CO || 0);
            exp = exp.replace(/PO/g, vars.PO || 0);
            exp = exp.replace(/CLTP/g, vars.CLTP || 0);
            exp = exp.replace(/PLTP/g, vars.PLTP || 0);
            exp = exp.replace(/CV/g, vars.CV || 0);
            exp = exp.replace(/PV/g, vars.PV || 0);
            
            if(/[^0-9+\-*/(). ]/.test(exp)) return 0;
            return new Function('return ' + exp)();
        } catch(e) { return 0; }
    }
    
    // ===================================
    // CONFIG LOGIC
    // ===================================
    function applyConfig() {
        document.getElementById('headL_txt').innerText = CONFIG.left.name;
        document.getElementById('headR_txt').innerText = CONFIG.right.name;
        renderSidebar();
    }

    function renderSidebar() {
        const con = document.getElementById('sideContainer');
        if(!CONFIG.side || CONFIG.side.length === 0) {
            con.innerHTML = '<div style="padding:10px; color:#aaa; font-size:10px;">NO METRICS CONFIGURED</div>';
            return;
        }

        con.innerHTML = CONFIG.side.map((item, idx) => {
            const boxes = item.ranges.map((r, rIdx) => `
                <div class="aggr-item">
                    <span class="aggr-val" id="sv-${idx}-${rIdx}">0</span>
                    <span class="aggr-lbl">
                        ATM ±${r} 
                        <span class="info-bubble" onclick="showInfo(${idx}, ${rIdx})">i</span>
                    </span>
                </div>
            `).join('');

            return `
            <div class="nf-sec">
                <div class="nf-title">${item.name}</div>
                <div class="aggr-row">
                    ${boxes}
                </div>
            </div>`;
        }).join('');
    }

    function showInfo(cardIdx, rangeIdx) {
        if(!CONFIG.side[cardIdx]) return;
        const cfg = CONFIG.side[cardIdx];
        const range = cfg.ranges[rangeIdx];
        const formula = cfg.formula;
        
        document.getElementById('infoSpot').innerText = SPOT_PRICE.toFixed(2);
        document.getElementById('infoForm').innerText = formula;
        
        const kList = Object.keys(LATEST_ROW_DATA).map(parseFloat).sort((a,b)=>a-b);
        const lowers = kList.filter(k => k < SPOT_PRICE);
        const uppers = kList.filter(k => k >= SPOT_PRICE);
        
        const selLow = lowers.slice(-range);
        const selHigh = uppers.slice(0, range);
        const allSel = [...selLow, ...selHigh].sort((a,b)=>a-b);
        let grandTotal = 0;
        
        const table = document.getElementById('infoTable');
        
        let hHTML = `<tr><th style="width:50px;">STRIKE</th><th>CS</th><th>CB</th><th>PS</th><th>PB</th><th>CALC</th></tr>`;
        
        let rowsHTML = allSel.map((k, idx) => {
            const d = LATEST_ROW_DATA[k] || {};
            const val = evaluateFormula(formula, d);
            grandTotal += val;
            
            // ATM Line Logic
            let rowClass = "";
            if (k >= SPOT_PRICE) {
                const prev = allSel[idx-1];
                if (prev === undefined || prev < SPOT_PRICE) {
                    rowClass = "info-row-atm";
                }
            }

            return `<tr class="${rowClass}">
                <td style="font-weight:bold;">${k}</td>
                <td>${d.CS||0}</td><td>${d.CB||0}</td><td>${d.PS||0}</td><td>${d.PB||0}</td>
                <td style="font-weight:bold; color:${val>=0?'var(--green)':'var(--red)'}">${val}</td>
            </tr>`;
        }).join('');
        
        rowsHTML += `<tr class="info-row-res"><td colspan="5" style="text-align:right;">TOTAL</td><td style="color:${grandTotal>=0?'var(--green)':'var(--red)'}">${grandTotal}</td></tr>`;
        table.innerHTML = hHTML + rowsHTML;
        document.getElementById('infoModal').style.display = 'flex';
    }

    function openConfig(col) {
        EDITING_COL = col;
        const cfg = CONFIG[col];
        document.getElementById('confTitle').innerText = (col === 'left' ? "LEFT COLUMN" : "RIGHT COLUMN") + " SETTINGS";
        document.getElementById('confName').value = cfg.name;
        document.getElementById('confForm').value = cfg.formula;
        document.getElementById('confModal').style.display = 'flex';
    }

    function saveConfig() {
        const name = document.getElementById('confName').value;
        const form = document.getElementById('confForm').value.toUpperCase();
        if(!name || !form) { alert("Fields cannot be empty"); return; }
        CONFIG[EDITING_COL] = { name: name, formula: form };
        saveAndReload();
        closeModal('confModal');
    }

    function resetConfig() {
        if(confirm("Reset Main Columns to Default?")) {
            CONFIG.left = DEFAULTS.left;
            CONFIG.right = DEFAULTS.right;
            saveAndReload();
            closeModal('confModal');
        }
    }

    // --- SIDEBAR DYNAMIC CONFIG ---
    let TEMP_SIDE_CONFIG = [];

    function openSideConfig() {
        TEMP_SIDE_CONFIG = JSON.parse(JSON.stringify(CONFIG.side));
        renderSideConfigList();
        document.getElementById('sideConfModal').style.display = 'flex';
    }

    function renderSideConfigList() {
        const list = document.getElementById('sideListContainer');
        list.innerHTML = TEMP_SIDE_CONFIG.map((item, idx) => `
            <div class="conf-item ${item._expanded ? 'expanded' : ''}">
                <div class="conf-header" onclick="toggleSideItem(${idx})">
                    <span style="font-weight:700; font-size:12px;">${idx+1}. ${item.name}</span>
                    <div style="display:flex; align-items:center; gap:10px;">
                        <span style="font-size:10px; color:#aaa;">${item.ranges.length} RANGES</span>
                        <span class="del-btn" onclick="removeSideItem(event, ${idx})">DEL</span>
                    </div>
                </div>
                <div class="conf-body" onclick="event.stopPropagation()">
                    <div class="inp-group" style="margin-top:0;">
                        <span class="inp-label">TITLE</span>
                        <input type="text" class="modal-inp" value="${item.name}" onchange="updateSideItem(${idx}, 'name', this.value)">
                    </div>
                    <div class="inp-group">
                        <span class="inp-label">FORMULA</span>
                        <input type="text" class="modal-inp" value="${item.formula}" onchange="updateSideItem(${idx}, 'formula', this.value)">
                    </div>
                    <div class="inp-group">
                        <span class="inp-label">RANGES (Comma separated, max 3 recommended)</span>
                        <input type="text" class="modal-inp" value="${item.ranges.join(', ')}" onchange="updateSideItem(${idx}, 'ranges', this.value)">
                    </div>
                </div>
            </div>
        `).join('');
    }

    function toggleSideItem(idx) { TEMP_SIDE_CONFIG[idx]._expanded = !TEMP_SIDE_CONFIG[idx]._expanded; renderSideConfigList(); }
    function toggleVarHelp() { const box = document.getElementById('sideVarHelp'); box.style.display = (box.style.display === 'none' || box.style.display === '') ? 'block' : 'none'; }
    function addSideItem() { TEMP_SIDE_CONFIG.push({ id: Date.now(), name: "NEW METRIC", formula: "PS - CS", ranges: [10], _expanded: true }); renderSideConfigList(); }
    function removeSideItem(e, idx) { e.stopPropagation(); if(confirm("Delete this card?")) { TEMP_SIDE_CONFIG.splice(idx, 1); renderSideConfigList(); } }
    function updateSideItem(idx, field, val) {
        if(field === 'ranges') {
            const nums = val.split(',').map(s => parseInt(s.trim())).filter(n => !isNaN(n) && n > 0 && n <= 50);
            TEMP_SIDE_CONFIG[idx][field] = nums.length > 0 ? nums : [10];
        } else if (field === 'formula') { TEMP_SIDE_CONFIG[idx][field] = val.toUpperCase();
        } else { TEMP_SIDE_CONFIG[idx][field] = val; }
    }
    function saveSideConfig() {
        const clean = TEMP_SIDE_CONFIG.map(x => { const { _expanded, ...rest } = x; return rest; });
        CONFIG.side = clean;
        saveAndReload();
        closeModal('sideConfModal');
    }
    function resetSideConfig() { if(confirm("Reset Sidebar to defaults?")) { CONFIG.side = JSON.parse(JSON.stringify(DEFAULTS.side)); saveAndReload(); closeModal('sideConfModal'); } }
    function saveAndReload() { localStorage.setItem('tst_chain_config', JSON.stringify(CONFIG)); applyConfig(); pollData(); }
    function closeModal(id) { document.getElementById(id).style.display = 'none'; }

    // ===================================
    // UPSTOX DATA LOGIC
    // ===================================
    async function checkStatus() {
        try {
            const res = await fetch('/api/status');
            const status = await res.json();
            if(status.ready) {
                document.getElementById('loader').style.display = 'none';
                if(!CURRENT_ROOT) loadSymbol('NIFTY'); 
            } else {
                document.getElementById('loaderMsg').innerText = status.message.toUpperCase();
                setTimeout(checkStatus, 2000);
            }
        } catch(e) { setTimeout(checkStatus, 2000); }
    }

    async function refreshDB() {
        if(!confirm("Download fresh Master Data? (Takes ~15s)")) return;
        document.getElementById('loaderMsg').innerText = "DOWNLOADING...";
        document.getElementById('loader').style.display = 'flex';
        await fetch('/api/refresh');
        checkStatus();
    }

    async function doSearch(q) {
        const resDiv = document.getElementById('searchRes');
        if(q.length < 2) { resDiv.style.display = 'none'; return; }
        try {
            const res = await fetch(`/api/search?q=${q}`);
            const data = await res.json();
            
            // Format: "Company Name (Symbol) [Exchange]"
            resDiv.innerHTML = data.map(item => 
                `<div class="search-item" onclick="loadSymbol('${item.root}')">
                    <span>${item.name} <small style="color:#888; font-weight:normal;">(${item.root})</small></span>
                    <span class="exch-badge badge-${item.exch}">${item.exch}</span>
                </div>`
            ).join('');
            resDiv.style.display = 'block';
        } catch(e) { console.error(e); }
    }

    async function loadSymbol(root) {
        document.getElementById('searchInp').value = root;
        document.getElementById('searchRes').style.display = 'none';
        document.getElementById('loaderMsg').innerText = "LOADING CHAIN...";
        document.getElementById('loader').style.display = 'flex';
        
        // --- FIX 1: CLEAR OLD DATA IMMEDIATELY ---
        SPOT_PRICE = 0;
        document.getElementById('spotPrice').innerText = "0.00";
        // -----------------------------------------

        try {
            const res = await fetch(`/api/chain?symbol=${root}`);
            if(!res.ok) throw new Error("Symbol not found");
            const data = await res.json();
            
            CURRENT_ROOT = root;
            CHAIN_DATA = data.items;
            SPOT_SYM = data.spot; 

            // Find valid futures (closest expiry)
            FUT_SYMS = CHAIN_DATA.filter(x => x.t === 'FUT').sort((a,b) => a.e - b.e).slice(0, 3);
            
            // --- FIX 2: ROBUST DEFAULT SELECTION LOGIC ---
            // If Spot Symbol exists AND is not empty, use it.
            // Otherwise, default to the first Future contract.
            if (SPOT_SYM && SPOT_SYM !== "") {
                SELECTED_REF_SYM = SPOT_SYM;
            } else if (FUT_SYMS.length > 0) {
                SELECTED_REF_SYM = FUT_SYMS[0].s;
            } else {
                SELECTED_REF_SYM = ""; // No valid reference
            }
            // ---------------------------------------------
            
            buildRefMenu();
            setupExpiries();
            document.getElementById('loader').style.display = 'none';

        } catch(e) {
            alert("Error: " + e.message);
            document.getElementById('loader').style.display = 'none';
        }
    }

    function buildRefMenu() {
        const menu = document.getElementById('refMenu');
        let html = '';
        
        // Option 1: Spot (Only if exists)
        if(SPOT_SYM && SPOT_SYM !== "") {
            const isSel = (SELECTED_REF_SYM === SPOT_SYM);
            html += `<div class="ref-item ${isSel?'active':''}" onclick="selectRef('${SPOT_SYM}', 'SPOT PRICE')">SPOT PRICE</div>`;
            if(isSel) document.getElementById('spotLabel').innerText = "SPOT PRICE";
        }

        // Option 2: Futures
        FUT_SYMS.forEach(f => {
            const label = new Date(f.e*1000).toLocaleDateString('en-GB', {day:'numeric', month:'short'}) + " FUT";
            const isSel = (SELECTED_REF_SYM === f.s);
            html += `<div class="ref-item ${isSel?'active':''}" onclick="selectRef('${f.s}', '${label}')">${label}</div>`;
            if(isSel) document.getElementById('spotLabel').innerText = label;
        });

        menu.innerHTML = html;
        
        // If we defaulted to a Future because Spot was missing, update the label immediately
        if (SELECTED_REF_SYM !== "" && SELECTED_REF_SYM !== SPOT_SYM) {
             const foundFut = FUT_SYMS.find(f => f.s === SELECTED_REF_SYM);
             if(foundFut) {
                 const label = new Date(foundFut.e*1000).toLocaleDateString('en-GB', {day:'numeric', month:'short'}) + " FUT";
                 document.getElementById('spotLabel').innerText = label;
             }
        }
    }

    function toggleRefMenu() {
        const m = document.getElementById('refMenu');
        m.style.display = (m.style.display === 'block') ? 'none' : 'block';
    }

    function selectRef(key, label) {
        SELECTED_REF_SYM = key;
        document.getElementById('spotLabel').innerText = label;
        buildRefMenu(); 
        SPOT_PRICE = 0; 
        document.getElementById('spotPrice').innerText = "0.00"; // Clear visual
        pollData();     
    }

    function setupExpiries() {
        const opts = CHAIN_DATA.filter(x => x.t === 'CE' || x.t === 'PE');
        const exps = [...new Set(opts.map(i => i.e))].sort((a,b) => a-b);
        const today = Math.floor(Date.now()/1000) - 86400;
        const validExps = exps.filter(ts => ts > today); 
        
        if(validExps.length === 0) { 
            document.getElementById('chainBody').innerHTML = '<div style="padding:20px; text-align:center;">NO OPTIONS DATA</div>';
            return; 
        }
        
        ACTIVE_EXP = validExps[0];
        updateExpText(ACTIVE_EXP);
        
        const grid = document.getElementById('expGrid');
        grid.innerHTML = validExps.map(ts => {
            const dStr = new Date(ts*1000).toLocaleDateString('en-GB', {day:'2-digit', month:'short'});
            return `<div class="opt-btn ${ts===ACTIVE_EXP?'active':''}" onclick="selectExp(${ts})">${dStr}</div>`;
        }).join('');
        
        buildChain();
    }
    
    function selectExp(ts) {
        ACTIVE_EXP = ts;
        updateExpText(ts);
        closeModal('expModal');
        document.querySelectorAll('.opt-btn').forEach(b => {
            if(b.innerText === new Date(ts*1000).toLocaleDateString('en-GB', {day:'2-digit', month:'short'})) 
                b.classList.add('active'); 
            else b.classList.remove('active');
        });
        buildChain();
    }
    
    function updateExpText(ts) {
        document.getElementById('selExpTxt').innerText = new Date(ts*1000).toLocaleDateString('en-GB', {day:'2-digit', month:'short'});
    }
    
    function buildChain() {
        const body = document.getElementById('chainBody');
        const relevant = CHAIN_DATA.filter(x => x.e === ACTIVE_EXP && (x.t === 'CE' || x.t === 'PE'));
        OPT_SYMS = relevant;
        
        const strikes = [...new Set(relevant.map(x => x.k))].sort((a,b) => a-b);
        
        body.innerHTML = strikes.map(k => `
            <div class="row" id="row-${k}" data-k="${k}">
                <div class="graph-col">
                    <div style="width:160px; height:100%; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center;">
                        <div class="visual-bar" id="barL-${k}"></div>
                        <span class="strike-txt">${k}</span>
                        <span class="delta-txt" id="valL-${k}">-</span>
                    </div>
                </div>
                <div class="graph-col">
                    <div style="width:160px; height:100%; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center;">
                        <div class="visual-bar" id="barR-${k}"></div>
                        <span class="strike-txt">${k}</span>
                        <span class="delta-txt" id="valR-${k}">-</span>
                    </div>
                </div>
            </div>
        `).join('');
        
        window.scrolled = false;
        restartPoller();
    }

    function restartPoller() {
        if(POLLER) clearInterval(POLLER);
        POLLER = setInterval(pollData, 1500);
        pollData();
    }

    async function pollData() {
        if(IS_POLLING || !CURRENT_ROOT) return;
        IS_POLLING = true;
        
        try {
            // Ensure SELECTED_REF_SYM is included in fetch list
            let symbolsToFetch = [];
            if(SELECTED_REF_SYM) symbolsToFetch.push(SELECTED_REF_SYM);
            
            symbolsToFetch = [...symbolsToFetch, ...FUT_SYMS.map(x => x.s)];
            
            const kList = Array.from(document.querySelectorAll('.row')).map(r => parseFloat(r.dataset.k));
            
            if(kList.length > 0) {
                // Use SPOT_PRICE if valid, else fallback to middle strike for initial centering
                const refPrice = SPOT_PRICE > 0 ? SPOT_PRICE : kList[Math.floor(kList.length/2)];
                let selectedK = kList.find(k => k >= refPrice);
                if (selectedK === undefined) selectedK = kList[kList.length - 1];

                ATM_STRIKE = selectedK;
                const atmIdx = kList.indexOf(selectedK);
                
                document.querySelectorAll('.atm').forEach(e => e.classList.remove('atm'));
                const atmRow = document.getElementById(`row-${selectedK}`);
                if(atmRow) {
                    atmRow.classList.add('atm');
                    if(!window.scrolled && SPOT_PRICE > 0) { 
                        atmRow.scrollIntoView({block:'center', behavior:'auto'}); 
                        window.scrolled = true; 
                    }
                }

                let maxRange = 10;
                if(CONFIG.side && Array.isArray(CONFIG.side)) {
                    CONFIG.side.forEach(item => { if(item.ranges) { const m = Math.max(...item.ranges); if(m > maxRange) maxRange = m; } });
                }
                
                const start = Math.max(0, atmIdx - 20);
                const end = Math.min(kList.length, atmIdx + 20);
                const viewKs = kList.slice(start, end);

                const rangeStart = Math.max(0, atmIdx - maxRange);
                const rangeEnd = Math.min(kList.length, atmIdx + maxRange + 1);
                const calcKs = kList.slice(rangeStart, rangeEnd);
                
                const allNeededKs = new Set([...viewKs, ...calcKs]);

                OPT_SYMS.forEach(o => {
                    if(allNeededKs.has(o.k)) symbolsToFetch.push(o.s);
                });
            }

            const uniqueSyms = [...new Set(symbolsToFetch)].filter(s => s && s.length > 2);
            if(uniqueSyms.length === 0) return;
            
            const url = `https://api.upstox.com/v2/market-quote/quotes?instrument_key=${uniqueSyms.join(',')}`;
            const res = await fetch(url, { headers: { 'Accept': 'application/json', 'Authorization': `Bearer ${UPSTOX_TOKEN}` }});
            
            if(res.status === 401) { location.href = '/logout'; return; }
            
            const json = await res.json();
            if(json.status === 'success') {
                updateUI(json.data);
                const dot = document.getElementById('statusDot');
                dot.classList.add('active');
                dot.classList.remove('error');
            }
        } catch(e) { 
            console.error(e); 
            const dot = document.getElementById('statusDot');
            dot.classList.remove('active');
            dot.classList.add('error');
        } 
        finally { IS_POLLING = false; }
    }

    function updateUI(raw_data) {
        // Create a Token Map for easy lookup
        const tokenMap = {};
        for(const key in raw_data) {
            const item = raw_data[key];
            if(item && item.instrument_token) {
                tokenMap[item.instrument_token] = item;
            }
        }

        // Update Reference Price
        // Check if SELECTED_REF_SYM exists in the returned data
        const refData = tokenMap[SELECTED_REF_SYM];
        if(refData) {
            SPOT_PRICE = refData.last_price;
            document.getElementById('spotPrice').innerText = SPOT_PRICE.toFixed(2);
        } else {
            // If data for selected symbol didn't come back, keep existing SPOT_PRICE
            // (Don't set to 0 to avoid flickering if one packet drops)
        }
        
        // Update Futures
        const futHTML = FUT_SYMS.map(f => {
            const d = tokenMap[f.s];
            if(!d) return '';
            const dt = new Date(f.e*1000).toLocaleDateString('en-GB', {day:'numeric', month:'short'});
            const b = d.total_buy_quantity || 0;
            const s = d.total_sell_quantity || 0;
            const ch = d.net_change || 0;
            const tot = (b + s) || 1;
            const bPct = (b/tot)*100;
            return `
            <div class="fut-card">
                <div style="display:flex; justify-content:space-between; font-weight:700;">
                    <span>${dt} FUT</span> <span style="color:${ch>=0?'var(--green)':'var(--red)'}">${d.last_price}</span>
                </div>
                <div class="meter-bg">
                    <div style="width:${bPct}%; background:var(--green)"></div>
                    <div style="width:${100-bPct}%; background:var(--red)"></div>
                </div>
                <div style="display:flex; justify-content:space-between; font-size:10px; color:#666; margin-top:4px;">
                    <span>B: ${fmt(b)}</span> <span>S: ${fmt(s)}</span>
                </div>
            </div>`;
        }).join('');
        if(futHTML) document.getElementById('futBody').innerHTML = futHTML;

        // Process Options
        const rowData = {};
        for(const item of OPT_SYMS) {
            const d = tokenMap[item.s];
            if(!d) continue;

            if(!rowData[item.k]) rowData[item.k] = { 
                CS:0, CB:0, PS:0, PB:0, 
                CO:0, PO:0, CLTP:0, PLTP:0, CV:0, PV:0 
            };
            
            if(item.t === 'CE') {
                rowData[item.k].CS = d.total_sell_quantity || 0;
                rowData[item.k].CB = d.total_buy_quantity || 0;
                rowData[item.k].CO = d.oi || 0;
                rowData[item.k].CLTP = d.last_price || 0;
                rowData[item.k].CV = d.volume || 0;
            }
            if(item.t === 'PE') {
                rowData[item.k].PS = d.total_sell_quantity || 0;
                rowData[item.k].PB = d.total_buy_quantity || 0;
                rowData[item.k].PO = d.oi || 0;
                rowData[item.k].PLTP = d.last_price || 0;
                rowData[item.k].PV = d.volume || 0;
            }
        }
        
        LATEST_ROW_DATA = rowData;

        // --- RENDER CHAIN ---
        let maxL = 0, maxR = 0;
        const processedRows = {};

        for(const k in rowData) {
            const vars = rowData[k];
            processedRows[k] = {
                left: evaluateFormula(CONFIG.left.formula, vars),
                right: evaluateFormula(CONFIG.right.formula, vars)
            };
            maxL = Math.max(maxL, Math.abs(processedRows[k].left));
            maxR = Math.max(maxR, Math.abs(processedRows[k].right));
        }

        for(const k in processedRows) {
            const r = processedRows[k];
            
            const valL = document.getElementById(`valL-${k}`);
            if(valL) {
                valL.innerText = (r.left>0?"+":"") + fmt(r.left);
                valL.style.color = r.left >= 0 ? 'var(--green)' : 'var(--red)';
                
                const barL = document.getElementById(`barL-${k}`);
                if(maxL > 0) {
                    const pct = (Math.abs(r.left) / maxL) * 100;
                    barL.style.left = '0%';
                    barL.style.width = pct + '%';
                    barL.style.background = r.left >= 0 ? 'var(--green-soft)' : 'var(--red-soft)';
                }
            }

            const valR = document.getElementById(`valR-${k}`);
            if(valR) {
                valR.innerText = (r.right>0?"+":"") + fmt(r.right);
                valR.style.color = r.right >= 0 ? 'var(--green)' : 'var(--red)';
                
                const barR = document.getElementById(`barR-${k}`);
                if(maxR > 0) {
                    const pct = (Math.abs(r.right) / maxR) * 100;
                    barR.style.left = '0%';
                    barR.style.width = pct + '%';
                    barR.style.background = r.right >= 0 ? 'var(--green-soft)' : 'var(--red-soft)';
                }
            }
        }

        // --- SIDEBAR AGGREGATION ---
        if(SPOT_PRICE > 0 && CONFIG.side && CONFIG.side.length > 0) {
            const kList = Object.keys(rowData).map(parseFloat).sort((a,b)=>a-b);
            const lowers = kList.filter(k => k < SPOT_PRICE);
            const uppers = kList.filter(k => k >= SPOT_PRICE);

            CONFIG.side.forEach((item, idx) => {
                item.ranges.forEach((rng, rIdx) => {
                    const el = document.getElementById(`sv-${idx}-${rIdx}`);
                    if(el) {
                        const selLow = lowers.slice(-rng);
                        const selHigh = uppers.slice(0, rng);
                        const targetStrikes = [...selLow, ...selHigh];
                        
                        let total = 0;
                        for(const k of targetStrikes) {
                            if(rowData[k]) total += evaluateFormula(item.formula, rowData[k]);
                        }
                        el.innerText = (total > 0 ? "+" : "") + fmt(total);
                        el.style.color = total >= 0 ? 'var(--green)' : 'var(--red)';
                    }
                });
            });
        }
    }

    function fmt(n) {
        if(!n) return '0';
        let abs = Math.abs(n);
        if(abs>=10000000) return (n/10000000).toFixed(2)+'Cr';
        if(abs>=100000) return (n/100000).toFixed(2)+'L';
        if(abs>=1000) return (n/1000).toFixed(1)+'k';
        return n.toLocaleString();
    }
</script>
</body>
</html>
"""

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=7860)