@page "/strategies"
@using TradingBot.Models
@using TradingBot.Services
@inject TradingBotService BotService
@implements IDisposable
@rendermode InteractiveServer

<PageTitle>Strategie - TradingBot</PageTitle>

<div class="strategies-page">
    <div class="page-header">
        <div>
            <h1>Gestione Strategie</h1>
            <p class="subtitle">Crea e gestisci le tue strategie di trading automatizzate</p>
        </div>
        <button class="btn-primary">
            <span class="bi bi-plus-lg"></span>
            Nuova Strategia
        </button>
    </div>

    <div class="strategies-grid">
        
        <!-- Active Strategy Card -->
        <div class="strategy-card active">
            <div class="card-header">
                <div class="strategy-info">
                    <h3>RSI + MACD Cross</h3>
                    <span class="badge active">ATTIVA</span>
                </div>
                <div class="strategy-actions">
                    <button class="btn-icon" title="Modifica">
                        <span class="bi bi-pencil"></span>
                    </button>
                    <button class="btn-icon" title="Duplica">
                        <span class="bi bi-files"></span>
                    </button>
                </div>
            </div>

            <div class="card-body">
                <div class="strategy-description">
                    Strategia basata su indicatori tecnici RSI e MACD per identificare punti di ingresso e uscita ottimali
                </div>

                <div class="strategy-stats">
                    <div class="stat">
                        <span class="stat-label">Asset Applicati</span>
                        <span class="stat-value">@activeAssets/@totalAssets</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">Win Rate</span>
                        <span class="stat-value profit">@portfolioStats.WinRate.ToString("F1")%</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">Trades Totali</span>
                        <span class="stat-value">@portfolioStats.TotalTrades</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">Profitto</span>
                        <span class="stat-value @(portfolioStats.TotalProfit >= 0 ? "profit" : "loss")">
                            $@portfolioStats.TotalProfit.ToString("N2")
                        </span>
                    </div>
                </div>

                <div class="strategy-parameters">
                    <h4>Parametri</h4>
                    <div class="params-grid">
                        <div class="param">
                            <span class="param-label">Condizione BUY</span>
                            <code class="param-value">RSI &lt; 40 AND MACD &gt; 0</code>
                        </div>
                        <div class="param">
                            <span class="param-label">Condizione SELL</span>
                            <code class="param-value">RSI &gt; 60 AND MACD &lt; 0</code>
                        </div>
                        <div class="param">
                            <span class="param-label">Stop Loss</span>
                            <code class="param-value">5%</code>
                        </div>
                        <div class="param">
                            <span class="param-label">Take Profit</span>
                            <code class="param-value">10%</code>
                        </div>
                    </div>
                </div>

                <div class="strategy-indicators">
                    <h4>Indicatori Utilizzati</h4>
                    <div class="indicators-list">
                        <span class="indicator-tag">
                            <span class="bi bi-graph-up"></span>
                            RSI (14)
                        </span>
                        <span class="indicator-tag">
                            <span class="bi bi-graph-down"></span>
                            MACD (12, 26, 9)
                        </span>
                        <span class="indicator-tag">
                            <span class="bi bi-activity"></span>
                            EMA (12, 26)
                        </span>
                    </div>
                </div>
            </div>

            <div class="card-footer">
                <button class="btn-secondary">
                    <span class="bi bi-pause-circle"></span>
                    Disattiva
                </button>
                <button class="btn-primary" @onclick="@(() => NavigateToStatistics())">
                    <span class="bi bi-bar-chart-line"></span>
                    Vedi Performance
                </button>
            </div>
        </div>

        <!-- Example Inactive Strategy Cards -->
        <div class="strategy-card">
            <div class="card-header">
                <div class="strategy-info">
                    <h3>Media Mobile Semplice</h3>
                    <span class="badge inactive">INATTIVA</span>
                </div>
                <div class="strategy-actions">
                    <button class="btn-icon" title="Modifica">
                        <span class="bi bi-pencil"></span>
                    </button>
                    <button class="btn-icon" title="Elimina">
                        <span class="bi bi-trash"></span>
                    </button>
                </div>
            </div>

            <div class="card-body">
                <div class="strategy-description">
                    Strategia classica basata sull'incrocio di medie mobili a breve e lungo termine
                </div>

                <div class="strategy-stats">
                    <div class="stat">
                        <span class="stat-label">Asset Applicati</span>
                        <span class="stat-value">0/@totalAssets</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">Win Rate</span>
                        <span class="stat-value">-</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">Trades Totali</span>
                        <span class="stat-value">0</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">Profitto</span>
                        <span class="stat-value">$0.00</span>
                    </div>
                </div>

                <div class="strategy-parameters">
                    <h4>Parametri</h4>
                    <div class="params-grid">
                        <div class="param">
                            <span class="param-label">SMA Breve</span>
                            <code class="param-value">10 periodi</code>
                        </div>
                        <div class="param">
                            <span class="param-label">SMA Lungo</span>
                            <code class="param-value">30 periodi</code>
                        </div>
                        <div class="param">
                            <span class="param-label">Stop Loss</span>
                            <code class="param-value">3%</code>
                        </div>
                        <div class="param">
                            <span class="param-label">Take Profit</span>
                            <code class="param-value">8%</code>
                        </div>
                    </div>
                </div>

                <div class="strategy-indicators">
                    <h4>Indicatori Utilizzati</h4>
                    <div class="indicators-list">
                        <span class="indicator-tag">
                            <span class="bi bi-graph-up"></span>
                            SMA (10)
                        </span>
                        <span class="indicator-tag">
                            <span class="bi bi-graph-up"></span>
                            SMA (30)
                        </span>
                    </div>
                </div>
            </div>

            <div class="card-footer">
                <button class="btn-secondary">
                    <span class="bi bi-play-circle"></span>
                    Attiva
                </button>
                <button class="btn-secondary">
                    <span class="bi bi-pencil"></span>
                    Modifica
                </button>
            </div>
        </div>

        <!-- Template Strategy Card -->
        <div class="strategy-card template">
            <div class="template-content">
                <div class="template-icon">
                    <span class="bi bi-diagram-3"></span>
                </div>
                <h3>Crea Nuova Strategia</h3>
                <p>Progetta una strategia personalizzata con indicatori tecnici e regole di trading</p>
                <button class="btn-primary">
                    <span class="bi bi-plus-lg"></span>
                    Inizia Ora
                </button>
            </div>
        </div>

    </div>

    <!-- Strategy Templates Section -->
    <div class="templates-section">
        <h2>Template Strategie</h2>
        <p class="section-subtitle">Inizia da modelli predefiniti e personalizzali secondo le tue esigenze</p>
        
        <div class="templates-grid">
            <div class="template-item">
                <div class="template-header">
                    <span class="bi bi-lightning-charge"></span>
                    <h4>Scalping Veloce</h4>
                </div>
                <p>Strategia ad alta frequenza per profitti rapidi su piccoli movimenti di prezzo</p>
                <button class="btn-outline">
                    <span class="bi bi-download"></span>
                    Usa Template
                </button>
            </div>

            <div class="template-item">
                <div class="template-header">
                    <span class="bi bi-graph-up-arrow"></span>
                    <h4>Trend Following</h4>
                </div>
                <p>Segui le tendenze di mercato dominanti per massimizzare i profitti</p>
                <button class="btn-outline">
                    <span class="bi bi-download"></span>
                    Usa Template
                </button>
            </div>

            <div class="template-item">
                <div class="template-header">
                    <span class="bi bi-arrow-left-right"></span>
                    <h4>Mean Reversion</h4>
                </div>
                <p>Sfrutta il ritorno dei prezzi verso la media storica</p>
                <button class="btn-outline">
                    <span class="bi bi-download"></span>
                    Usa Template
                </button>
            </div>

            <div class="template-item">
                <div class="template-header">
                    <span class="bi bi-shield-check"></span>
                    <h4>Conservative</h4>
                </div>
                <p>Strategia a basso rischio con protezione del capitale</p>
                <button class="btn-outline">
                    <span class="bi bi-download"></span>
                    Usa Template
                </button>
            </div>
        </div>
    </div>
</div>

@code {
    private PortfolioStatistics portfolioStats = new();
    private int activeAssets = 0;
    private int totalAssets = 0;

    protected override void OnInitialized()
    {
        BotService.OnStatusChanged += HandleUpdate;
        BotService.OnTradeExecuted += HandleTradeExecuted;
        
        RefreshData();
    }

    private void RefreshData()
    {
        portfolioStats = BotService.GetPortfolioStatistics();
        activeAssets = BotService.AssetConfigurations.Values.Count(c => c.IsEnabled);
        totalAssets = BotService.AssetConfigurations.Count;
        StateHasChanged();
    }

    private void NavigateToStatistics()
    {
        // Navigate to statistics page
    }

    private void HandleUpdate() => InvokeAsync(RefreshData);
    private void HandleTradeExecuted(Trade trade) => InvokeAsync(RefreshData);

    public void Dispose()
    {
        BotService.OnStatusChanged -= HandleUpdate;
        BotService.OnTradeExecuted -= HandleTradeExecuted;
    }
}