"""
Gandalf's Hyperliquid Trading Dashboard
Flask web dashboard for monitoring the bot
🧙‍♂️ Port: 5000
"""

import sys
import os
sys.path.insert(0, os.path.dirname(__file__))

from flask import Flask, render_template_string, jsonify, Response
import config

app = Flask(__name__)

# HTML Template
DASHBOARD_HTML = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🧙‍♂️ Gandalf Trader - Hyperliquid</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            background: #0d1117;
            color: #e6edf3;
            font-family: 'Segoe UI', system-ui, sans-serif;
            min-height: 100vh;
        }
        .header {
            background: linear-gradient(135deg, #1a1f2e 0%, #0d1117 100%);
            padding: 20px 30px;
            border-bottom: 1px solid #30363d;
        }
        .header h1 { font-size: 24px; margin-bottom: 5px; }
        .header .subtitle { color: #7d8590; font-size: 14px; }
        .badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        .badge-paper { background: #1f6feb22; color: #58a6ff; border: 1px solid #1f6feb44; }
        .badge-live { background: #f8514922; color: #f85149; border: 1px solid #f8514966; }
        .badge-sim { background: #3fb95022; color: #3fb950; border: 1px solid #3fb95044; }

        .container { max-width: 1400px; margin: 0 auto; padding: 20px; }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 25px;
        }
        .stat-card {
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 10px;
            padding: 20px;
        }
        .stat-card .label { color: #7d8590; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
        .stat-card .value { font-size: 28px; font-weight: 700; margin-top: 5px; }
        .stat-card .value.green { color: #3fb950; }
        .stat-card .value.red { color: #f85149; }
        .stat-card .value.blue { color: #58a6ff; }
        .stat-card .sub { font-size: 12px; color: #7d8590; margin-top: 3px; }

        .pnl-value { font-size: 20px !important; }
        .pnl-positive { color: #3fb950 !important; }
        .pnl-negative { color: #f85149 !important; }

        .section { margin-bottom: 30px; }
        .section-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #e6edf3;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        table { width: 100%; border-collapse: collapse; }
        th, td {
            text-align: left;
            padding: 12px 15px;
            border-bottom: 1px solid #30363d;
            font-size: 14px;
        }
        th { color: #7d8590; font-weight: 500; font-size: 12px; text-transform: uppercase; }
        tr:hover { background: #1c2128; }

        .long { color: #3fb950; }
        .short { color: #f85149; }
        .status-open { color: #58a6ff; }
        .status-stop_loss { color: #f85149; }
        .status-take_profit { color: #3fb950; }
        .status-max_hold { color: #d29922; }

        .wallet {
            font-family: monospace;
            font-size: 12px;
            color: #7d8590;
            background: #0d1117;
            padding: 3px 8px;
            border-radius: 4px;
        }

        .refresh-info {
            text-align: center;
            color: #484f58;
            font-size: 12px;
            margin-top: 20px;
        }

        .strategy-info {
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 10px;
            padding: 15px 20px;
            margin-bottom: 20px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        .strategy-item { font-size: 13px; }
        .strategy-item .label { color: #7d8590; }
        .strategy-item .val { font-weight: 600; }

        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
        .live-indicator {
            display: inline-block;
            width: 8px; height: 8px;
            background: #3fb950;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🧙‍♂️ Gandalf's Hyperliquid Trader</h1>
        <div class="subtitle">
            Funding Rate Timing Strategy | <span class="live-indicator"></span> Bot Running
        </div>
    </div>

    <div class="container">
        <div class="strategy-info">
            <div class="strategy-item"><span class="label">Strategy:</span> <span class="val">{{ stats.strategy }}</span></div>
            <div class="strategy-item"><span class="label">Mode:</span> <span class="badge badge-{{ stats.mode.lower() }}">{{ stats.mode }}</span></div>
            <div class="strategy-item"><span class="label">Sharpe (Backtest):</span> <span class="val">{{ stats.sharpe }}</span></div>
            <div class="strategy-item"><span class="label">Win Rate Target:</span> <span class="val">60%</span></div>
            <div class="strategy-item"><span class="label">Max DD:</span> <span class="val">{{ "%.1f"|format(stats.get("drawdown", 0)) }}%</span></div>
            <div class="strategy-item"><span class="label">Wallet:</span> <span class="wallet">{{ stats.wallet[:8] }}...{{ stats.wallet[-6:] }}</span></div>
        </div>

        <div class="stats-grid">
            <div class="stat-card">
                <div class="label">Portfolio Value</div>
                <div class="value green">${{ "%.2f"|format(stats.bankroll) }}</div>
                <div class="sub">Initial: ${{ "%.2f"|format(stats.initial_bankroll) }}</div>
            </div>
            <div class="stat-card">
                <div class="label">Total P&L</div>
                <div class="value pnl-value {{ 'pnl-positive' if stats.total_pnl >= 0 else 'pnl-negative' }}">
                    {{ "+" if stats.total_pnl >= 0 else "" }}${{ "%.2f"|format(stats.total_pnl) }}
                </div>
                <div class="sub">{{ "+" if stats.total_pnl_percent >= 0 else "" }}{{ "%.2f"|format(stats.total_pnl_percent) }}%</div>
            </div>
            <div class="stat-card">
                <div class="label">Win Rate</div>
                <div class="value blue">{{ "%.1f"|format(stats.win_rate) }}%</div>
                <div class="sub">{{ stats.winning_trades }}W / {{ stats.losing_trades }}L</div>
            </div>
            <div class="stat-card">
                <div class="label">Total Trades</div>
                <div class="value">{{ stats.closed_trades }}</div>
                <div class="sub">Open: {{ stats.open_positions }}</div>
            </div>
            <div class="stat-card">
                <div class="label">Drawdown</div>
                <div class="value {{ 'red' if stats.drawdown > 5 else 'blue' }}">{{ "%.2f"|format(stats.drawdown) }}%</div>
                <div class="sub">Max: {{ "%.2f"|format(stats.get("drawdown", 0)) }}%</div>
            </div>
            <div class="stat-card">
                <div class="label">Avg Win / Loss</div>
                <div class="value">
                    <span class="green">+${{ "%.2f"|format(stats.avg_win) if stats.avg_win else 0 }}</span>
                    <span style="color:#7d8590"> / </span>
                    <span class="red">-${{ "%.2f"|format(-stats.avg_loss if stats.avg_loss and stats.avg_loss < 0 else (stats.avg_loss if stats.avg_loss else 0)) }}</span>
                </div>
                <div class="sub">Per trade</div>
            </div>
        </div>

        {% if stats.positions %}
        <div class="section">
            <div class="section-title">📊 Open Positions ({{ stats.positions|length }})</div>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Coin</th>
                        <th>Side</th>
                        <th>Entry Price</th>
                        <th>Size</th>
                        <th>Stop Loss</th>
                        <th>Take Profit</th>
                        <th>Funding</th>
                        <th>Age</th>
                    </tr>
                </thead>
                <tbody>
                {% for pos in stats.positions %}
                    <tr>
                        <td style="font-family:monospace;font-size:11px">{{ pos.id[-12:] }}</td>
                        <td><strong>{{ pos.coin }}</strong></td>
                        <td class="{{ pos.side }}">{{ pos.side.upper() }}</td>
                        <td>${{ "%.4f"|format(pos.entry_price) }}</td>
                        <td>${{ "%.2f"|format(pos.size) }}</td>
                        <td>${{ "%.4f"|format(pos.stop_loss) }}</td>
                        <td>${{ "%.4f"|format(pos.take_profit) }}</td>
                        <td>{{ "%.6f"|format(pos.funding_rate) }}</td>
                        <td>{{ "%.1f"|format((current_time - pos.opened_at)/60) if pos.opened_at else "N/A" }}m</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}

        <div class="section">
            <div class="section-title">📜 Recent Trades ({{ stats.closed_trades }} total)</div>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Coin</th>
                        <th>Side</th>
                        <th>Entry</th>
                        <th>Exit Reason</th>
                        <th>P&L</th>
                        <th>Funding</th>
                    </tr>
                </thead>
                <tbody>
                {% for trade in stats.recent_trades %}
                    <tr>
                        <td style="font-family:monospace;font-size:11px">{{ trade.id[-12:] }}</td>
                        <td><strong>{{ trade.coin }}</strong></td>
                        <td class="{{ trade.side }}">{{ trade.side.upper() }}</td>
                        <td>${{ "%.4f"|format(trade.entry_price) }}</td>
                        <td class="status-{{ trade.status }}">{{ trade.status.replace('_',' ').upper() }}</td>
                        <td class="{{ 'pnl-positive' if trade.pnl >= 0 else 'pnl-negative' }}">
                            {{ "+" if trade.pnl >= 0 else "" }}${{ "%.2f"|format(trade.pnl) }}
                        </td>
                        <td>{{ "%.6f"|format(trade.funding_rate) }}</td>
                    </tr>
                {% else %}
                    <tr><td colspan="7" style="text-align:center;color:#7d8590;padding:30px">
                        No closed trades yet. Bot is scanning for opportunities...
                    </td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="refresh-info">
        Auto-refreshes every 10 seconds | Data from Hyperliquid API
        | <a href="/api/status" style="color:#58a6ff">API Endpoint</a>
    </div>

    <script>
        setTimeout(() => location.reload(), 10000);
    </script>
</body>
</html>
"""


@app.route("/")
def index():
    """Main dashboard page"""
    import json
    import time
    try:
        with open("/home/node/.openclaw/workspace/crypto-wallet/bot/status.json", "r") as f:
            stats = json.load(f)
    except:
        stats = {
            "mode": "STOPPED",
            "wallet": "0x0bA3cb704A41832ebEceAB78B7243b5a5b111F98",
            "strategy": "Funding Rate Timing",
            "bankroll": 200.0,
            "total_pnl": 0,
            "closed_trades": 0,
            "win_rate": 0,
            "open_positions": 0,
            "drawdown": 0,
            "max_drawdown": 0,
            "positions": [],
            "recent_trades": [],
            "sharpe": 2.23,
            "initial_bankroll": 200.0,
            "winning_trades": 0,
            "losing_trades": 0,
            "avg_win": 0,
            "avg_loss": 0,
            "total_pnl_percent": 0
        }
    return render_template_string(DASHBOARD_HTML, stats=stats, current_time=time.time())


@app.route("/api/status")
def api_status():
    """JSON API endpoint"""
    import json
    try:
        with open("/home/node/.openclaw/workspace/crypto-wallet/bot/status.json", "r") as f:
            stats = json.load(f)
    except:
        stats = {
            "mode": "STOPPED",
            "wallet": "0x0bA3cb704A41832ebEceAB78B7243b5a5b111F98",
            "strategy": "Funding Rate Timing",
            "bankroll": 200.0,
            "total_pnl": 0,
            "closed_trades": 0,
            "win_rate": 0,
            "open_positions": 0,
            "drawdown": 0,
            "max_drawdown": 0,
            "positions": [],
            "recent_trades": [],
            "sharpe": 2.23,
            "initial_bankroll": 200.0,
            "winning_trades": 0,
            "losing_trades": 0,
            "avg_win": 0,
            "avg_loss": 0,
            "total_pnl_percent": 0
        }
    return jsonify(stats)


if __name__ == "__main__":
    print("🧙‍♂️ Starting Gandalf's Trading Dashboard...")
    print(f"📊 Dashboard: http://localhost:{config.DASHBOARD_PORT}")
    app.run(
        host=config.DASHBOARD_HOST,
        port=config.DASHBOARD_PORT,
        debug=False,
        threaded=True
    )
