# Flux-RX Report Templates: HTML structures
from flux_rx.report_styles import BASE_CSS, COMPARISON_CSS

SINGLE_REPORT_TEMPLATE = """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{ticker} | Flux-RX Analytics</title>
    <script src="https://cdn.plot.ly/plotly-2.35.0.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <style>{css}</style>
</head>
<body>
    <div class="app">
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="logo">Flux<span>-RX</span></div>
            </div>
            <nav class="sidebar-nav">
                <div class="nav-section">
                    <div class="nav-section-title">Analysis</div>
                    <a href="#overview" class="nav-item active">Overview</a>
                    <a href="#chart" class="nav-item">Price Chart</a>
                    <a href="#analytics" class="nav-item">Analytics</a>
                    <a href="#returns" class="nav-item">Monthly Returns</a>
                </div>
                <div class="nav-section">
                    <div class="nav-section-title">Details</div>
                    <a href="#company" class="nav-item">Company Info</a>
                </div>
            </nav>
        </aside>
        
        <main class="main">
            <header class="topbar">
                <div class="ticker-header">
                    <span class="ticker-symbol">{ticker}</span>
                    <span class="ticker-name">{ticker_name}</span>
                    <span class="ticker-badge">{ticker_sector}</span>
                </div>
                <div class="price-display">
                    <div class="current-price">${current_price:,.2f}</div>
                    <div class="price-change">
                        <span class="change-value {change_class}">
                            {change_sign}{change_abs:,.2f}
                        </span>
                        <span class="change-badge {change_bg_class}">
                            {change_sign}{change_pct:.2f}%
                        </span>
                    </div>
                </div>
            </header>
            
            <div class="content">
                <div id="overview" class="metrics-grid">
                    {metric_cards}
                </div>
                
                <section id="chart" class="section">
                    <div class="section-header">
                        <h2 class="section-title">Main Analysis Chart</h2>
                    </div>
                    <div class="chart-container">
                        {main_chart_html}
                    </div>
                </section>
                
                <section id="analytics" class="section">
                    <div class="section-header">
                        <h2 class="section-title">Rolling Risk & Performance</h2>
                    </div>
                    <div class="chart-container">
                        {analytics_chart_html}
                    </div>
                </section>
                
                <section id="returns" class="section">
                    <div class="section-header">
                        <h2 class="section-title">Monthly Return Matrix</h2>
                    </div>
                    <div class="chart-container">
                        {heatmap_chart_html}
                    </div>
                </section>
                
                <section id="company" class="info-grid">
                    <div class="info-card">
                        <h3 class="info-card-title">Security Information</h3>
                        {security_info_rows}
                    </div>
                    <div class="info-card">
                        <h3 class="info-card-title">Business Summary</h3>
                        <p style="font-size: 13px; color: var(--text-secondary); line-height: 1.6;">{ticker_description}</p>
                    </div>
                </section>
            </div>
            
            <footer class="footer">
                Generated by <a href="https://github.com/desenyon/flux-rx">Flux-RX Finance Engine</a> • {timestamp}
            </footer>
        </main>
    </div>
</body>
</html>"""

COMPARISON_REPORT_TEMPLATE = """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comparison Analysis | Flux-RX</title>
    <script src="https://cdn.plot.ly/plotly-2.35.0.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <style>{css}</style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1 class="title">Comparison Analysis</h1>
            <p class="subtitle">{start_date} - {end_date}</p>
            <div class="tickers">
                {ticker_badges}
            </div>
        </header>
        
        <section class="section">
            <h2 class="section-title">Performance Metrics</h2>
            <div class="card" style="padding: 0; overflow: hidden;">
                <table>
                    <thead>
                        <tr>
                            <th>Ticker</th>
                            <th>CAGR</th>
                            <th>Volatility</th>
                            <th>Max DD</th>
                            <th>Sharpe</th>
                            <th>Sortino</th>
                            <th>Calmar</th>
                        </tr>
                    </thead>
                    <tbody>{metrics_rows}</tbody>
                </table>
            </div>
        </section>
        
        <section class="section">
            <h2 class="section-title">Normalized Performance</h2>
            <div class="card">{perf_html}</div>
        </section>
        
        <section class="section">
            <div class="grid">
                <div>
                    <h2 class="section-title">Risk-Return</h2>
                    <div class="card">{risk_html}</div>
                </div>
                <div>
                    <h2 class="section-title">Correlation Matrix</h2>
                    <div class="card">{corr_html}</div>
                </div>
            </div>
        </section>
        
        <footer class="footer">
            Generated by Flux-RX on {timestamp}
        </footer>
    </div>
</body>
</html>"""
