{{-- File: resources/views/insights/investment-advisor.blade.php --}}

@extends('layouts.app')

@section('title', 'CLEDA Investment Advisor')

@section('content')

<!-- CLEDA.I Loading Screen -->
<div id="cledaLoadingOverlay" class="cleda-loading-overlay">
    <div class="loading-container">
        <div class="logo-container">
            <img src="/assets/images/logos/cleda.i-logo.svg" alt="CLEDA.I" class="loading-logo">
        </div>
        
        <div class="loading-content">
            <h2 class="loading-title">CLEDA.I Insights</h2>
            <div class="loading-subtitle">AI-Powered Investment Intelligence</div>
            
            <div class="loading-progress">
                <div class="progress-bar">
                    <div class="progress-fill"></div>
                </div>
                
                <div class="loading-messages">
                    <div class="loading-message active" data-message="0">
                        <i class="fas fa-database"></i>
                        Connecting to data sources...
                    </div>
                    <div class="loading-message" data-message="1">
                        <i class="fas fa-brain"></i>
                        Analyzing congressional trading data...
                    </div>
                    <div class="loading-message" data-message="2">
                        <i class="fas fa-user-tie"></i>
                        Processing insider trading signals...
                    </div>
                    <div class="loading-message" data-message="3">
                        <i class="fas fa-chart-candlestick"></i>
                        Generating trading recommendations...
                    </div>
                    <div class="loading-message" data-message="4">
                        <i class="fas fa-robot"></i>
                        Claude AI analysis in progress...
                    </div>
                    <div class="loading-message" data-message="5">
                        <i class="fas fa-check-circle"></i>
                        Finalizing investment insights...
                    </div>
                </div>
            </div>
        </div>
        
        <div class="loading-footer">
            <div class="loading-disclaimer">
                <i class="fas fa-shield-alt"></i>
                For educational purposes only • Not financial advice
            </div>
        </div>
    </div>
    
    <!-- Animated background elements -->
    <div class="bg-animation">
        <div class="floating-element" style="--delay: 0s; --duration: 8s;"><i class="fas fa-chart-line"></i></div>
        <div class="floating-element" style="--delay: 2s; --duration: 10s;"><i class="fas fa-trending-up"></i></div>
        <div class="floating-element" style="--delay: 4s; --duration: 12s;"><i class="fas fa-dollar-sign"></i></div>
        <div class="floating-element" style="--delay: 6s; --duration: 9s;"><i class="fas fa-analytics"></i></div>
    </div>
</div>

<div class="investment-advisor-dashboard">
    <div class="container-fluid">
        <!-- Hero Header -->
        <div class="hero-header mb-4">
            <div class="row align-items-center">
                <div class="col-12 col-lg-8">
                    <div class="hero-content">
                        <h1 class="hero-title">
                            <i class="fas fa-chart-line me-2"></i>
                            <span class="hero-title-text">CLEDA Investment Advisor</span>
                        </h1>
                        <p class="hero-subtitle">AI-Powered Investment Intelligence • Powered by Alternative Data & Claude AI</p>
                        <div class="hero-badges mt-3">
                            <span class="badge badge-custom me-2 mb-2">
                                <i class="fas fa-robot me-1"></i>Claude AI Analysis
                            </span>
                            <span class="badge badge-custom me-2 mb-2">
                                <i class="fas fa-database me-1"></i>Quiver Data
                            </span>
                            <span class="badge badge-custom me-2 mb-2">
                                <i class="fas fa-sync-alt me-1"></i>Real-time
                            </span>
                            <span class="badge badge-custom mb-2">
                                <i class="fas fa-chart-candlestick me-1"></i>Trading Advisor
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-4 mt-3 mt-lg-0">
                    <div class="last-updated-card">
                        <div class="update-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="update-info">
                            <div class="update-label">Last Updated</div>
                            <div class="update-time">{{ isset($lastUpdated) ? $lastUpdated->format('M j, Y') : now()->format('M j, Y') }}</div>
                            <div class="update-time-detail">{{ isset($lastUpdated) ? $lastUpdated->format('H:i') : now()->format('H:i') }} EST</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if(isset($error))
            <div class="alert alert-warning custom-alert mb-4">
                <div class="alert-icon">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <div class="alert-content">
                    <strong>Data Unavailable</strong>
                    <p class="mb-0">{{ $error }}</p>
                </div>
            </div>
        @endif

        <!-- Claude AI Analysis Section with Track Trade Functionality -->
        @if(isset($aiAnalysis) && is_string($aiAnalysis) && $aiAnalysis !== 'Analysis temporarily unavailable. Please try again later.')
        <div class="ai-analysis-section mb-4">
            <div class="section-header">
                <div class="section-icon">
                    <i class="fas fa-robot"></i>
                </div>
                <div class="section-title">
                    <h2>Claude AI Trading Recommendations</h2>
                    <p>AI-powered trade suggestions with tracking capability</p>
                </div>
            </div>
            
            <div class="analysis-card">
                <!-- Disclaimer -->
                <div class="alert alert-warning mb-3 disclaimer-alert">
                    <div class="alert-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div class="alert-content">
                        <strong>Investment Disclaimer:</strong>
                        <p class="mb-0">These are AI-generated recommendations for educational purposes only. Always conduct your own research and consult with a financial advisor before making any trading decisions.</p>
                    </div>
                </div>

                <!-- AI Analysis Content with Track Trade Integration -->
                <div class="ai-analysis-display">
                    <div class="ai-analysis-header">
                        <h5 class="mb-0">
                            <i class="fas fa-brain me-2"></i>
                            Claude AI Analysis & Recommendations
                        </h5>
                    </div>
                    <div class="ai-analysis-content" id="aiAnalysisContent">
                        {{ $aiAnalysis }}
                    </div>
                </div>

                <div class="analysis-footer">
                    <div class="analysis-meta">
                        <span class="meta-item">
                            <i class="fas fa-robot me-1"></i>
                            Claude AI (Haiku)
                        </span>
                        <span class="meta-item">
                            <i class="fas fa-clock me-1"></i>
                            Generated recently
                        </span>
                    </div>
                </div>
            </div>
        </div>
        @elseif(isset($aiAnalysis))
            <div class="alert alert-info custom-alert mb-4">
                <div class="alert-icon">
                    <i class="fas fa-info-circle"></i>
                </div>
                <div class="alert-content">
                    <strong>AI Analysis Status</strong>
                    <p class="mb-0">{{ $aiAnalysis }}</p>
                </div>
            </div>
        @endif

        <!-- Data Overview Cards -->
        <div class="overview-cards mb-4">
            <div class="row g-3">
                <div class="col-6 col-md-3">
                    <div class="overview-card congressional">
                        <div class="card-icon">
                            <i class="fas fa-landmark"></i>
                        </div>
                        <div class="card-content">
                            <div class="card-number">{{ is_array($congressData) && !isset($congressData['error']) ? count($congressData) : 0 }}</div>
                            <div class="card-label">Congressional</div>
                            <div class="card-sublabel">Political signals</div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="overview-card insider">
                        <div class="card-icon">
                            <i class="fas fa-user-tie"></i>
                        </div>
                        <div class="card-content">
                            <div class="card-number">{{ is_array($insiderData) && !isset($insiderData['error']) ? count($insiderData) : 0 }}</div>
                            <div class="card-label">Insider</div>
                            <div class="card-sublabel">Corporate moves</div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="overview-card ai-status">
                        <div class="card-icon">
                            @if(isset($aiAnalysis) && is_string($aiAnalysis) && $aiAnalysis !== 'Analysis temporarily unavailable. Please try again later.')
                                <i class="fas fa-check-circle"></i>
                            @else
                                <i class="fas fa-hourglass-half"></i>
                            @endif
                        </div>
                        <div class="card-content">
                            <div class="card-number">{{ isset($aiAnalysis) && is_string($aiAnalysis) && $aiAnalysis !== 'Analysis temporarily unavailable. Please try again later.' ? '✓' : '...' }}</div>
                            <div class="card-label">AI Analysis</div>
                            <div class="card-sublabel">{{ isset($aiAnalysis) && is_string($aiAnalysis) && $aiAnalysis !== 'Analysis temporarily unavailable. Please try again later.' ? 'Complete' : 'Processing' }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="overview-card trading-recommendations">
                        <div class="card-icon">
                            <i class="fas fa-chart-candlestick"></i>
                        </div>
                        <div class="card-content">
                            <div class="card-number">{{ isset($recentRecommendations) ? $recentRecommendations->count() : 0 }}</div>
                            <div class="card-label">Tracked Trades</div>
                            <div class="card-sublabel">AI Recommendations</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Data Section -->
        <div class="row g-3 mb-4">
            <!-- Congressional Trading -->
            <div class="col-12 col-lg-6">
                <div class="data-card congressional-card">
                    <div class="card-header-custom">
                        <div class="header-content-wrapper">
                            <div class="header-icon">
                                <i class="fas fa-landmark"></i>
                            </div>
                            <div class="header-content">
                                <h3>Congressional Trading</h3>
                                <p>Recent political insider trading activity</p>
                            </div>
                        </div>
                        <div class="header-badge">
                            <span class="badge bg-primary">
                                {{ is_array($congressData) && !isset($congressData['error']) ? count($congressData) : 0 }} trades
                            </span>
                        </div>
                    </div>
                    
                    <div class="card-body-custom">
                        @if(isset($congressData['error']))
                            <div class="empty-state">
                                <div class="empty-icon">
                                    <i class="fas fa-info-circle"></i>
                                </div>
                                <div class="empty-content">
                                    <h4>{{ $congressData['error'] }}</h4>
                                    @if($congressData['error'] === 'Quiver API key not configured')
                                        <p>Add your Quiver API key to .env file to enable live data</p>
                                        <code>QUIVER_API_KEY=your_key_here</code>
                                    @endif
                                </div>
                            </div>
                        @else
                            <div class="trading-table">
                                @forelse($congressData as $index => $trade)
                                    <div class="trade-row {{ $index === 0 ? 'featured' : '' }}">
                                        <div class="trade-info">
                                            <div class="representative">
                                                <strong>{{ Str::limit($trade['Representative'] ?? 'Unknown', 20) }}</strong>
                                                @if(isset($trade['Party']))
                                                    <span class="party-badge {{ strtolower($trade['Party']) }}">
                                                        {{ $trade['Party'] }}
                                                    </span>
                                                @endif
                                            </div>
                                            <div class="trade-details">
                                                <div class="trade-details-row">
                                                    <span class="ticker">{{ $trade['Ticker'] ?? 'N/A' }}</span>
                                                    <span class="transaction {{ strtolower($trade['Transaction'] ?? 'unknown') }}">
                                                        {{ $trade['Transaction'] ?? 'Unknown' }}
                                                    </span>
                                                </div>
                                                <div class="trade-details-row">
                                                    <span class="date">
                                                        {{ isset($trade['TransactionDate']) ? \Carbon\Carbon::parse($trade['TransactionDate'])->format('M j, Y') : 'Unknown date' }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="trade-action">
                                            <div class="action-badge {{ strtolower($trade['Transaction'] ?? 'unknown') }}">
                                                @if(isset($trade['Transaction']))
                                                    @if($trade['Transaction'] === 'Purchase')
                                                        <i class="fas fa-arrow-up"></i>
                                                    @else
                                                        <i class="fas fa-arrow-down"></i>
                                                    @endif
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="empty-state">
                                        <div class="empty-icon">
                                            <i class="fas fa-chart-line"></i>
                                        </div>
                                        <div class="empty-content">
                                            <h4>No Recent Trades</h4>
                                            <p>Congressional trading data will appear here when available</p>
                                        </div>
                                    </div>
                                @endforelse
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Insider Trading -->
            <div class="col-12 col-lg-6">
                <div class="data-card insider-card">
                    <div class="card-header-custom">
                        <div class="header-content-wrapper">
                            <div class="header-icon">
                                <i class="fas fa-user-tie"></i>
                            </div>
                            <div class="header-content">
                                <h3>Insider Trading</h3>
                                <p>Corporate insider trading movements</p>
                            </div>
                        </div>
                        <div class="header-badge">
                            <span class="badge bg-info">
                                {{ is_array($insiderData) && !isset($insiderData['error']) ? count($insiderData) : 0 }} trades
                            </span>
                        </div>
                    </div>
                    
                    <div class="card-body-custom">
                        @if(isset($insiderData['error']))
                            <div class="empty-state">
                                <div class="empty-icon">
                                    <i class="fas fa-info-circle"></i>
                                </div>
                                <div class="empty-content">
                                    <h4>{{ $insiderData['error'] }}</h4>
                                    @if($insiderData['error'] === 'Quiver API key not configured')
                                        <p>Add your Quiver API key to .env file to enable live data</p>
                                        <code>QUIVER_API_KEY=your_key_here</code>
                                    @endif
                                </div>
                            </div>
                        @else
                            <div class="trading-table">
                                @forelse($insiderData as $index => $trade)
                                    <div class="trade-row {{ $index === 0 ? 'featured' : '' }}">
                                        <div class="trade-info">
                                            <div class="insider">
                                                <strong>{{ $trade['Ticker'] ?? 'N/A' }}</strong>
                                                <span class="company-name">{{ Str::limit($trade['Name'] ?? 'Unknown Insider', 25) }}</span>
                                            </div>
                                            <div class="trade-details">
                                                <div class="trade-details-row">
                                                    <span class="shares">
                                                        {{ isset($trade['Shares']) ? number_format($trade['Shares']) . ' shares' : 'Unknown volume' }}
                                                    </span>
                                                </div>
                                                <div class="trade-details-row">
                                                    <span class="date">
                                                        {{ isset($trade['Date']) ? \Carbon\Carbon::parse($trade['Date'])->format('M j, Y') : 'Recent' }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="trade-action">
                                            <div class="action-badge {{ isset($trade['AcquiredDisposedCode']) && $trade['AcquiredDisposedCode'] === 'A' ? 'purchase' : 'sale' }}">
                                                @if(isset($trade['AcquiredDisposedCode']))
                                                    @if($trade['AcquiredDisposedCode'] === 'A')
                                                        <i class="fas fa-arrow-up"></i>
                                                    @else
                                                        <i class="fas fa-arrow-down"></i>
                                                    @endif
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="empty-state">
                                        <div class="empty-icon">
                                            <i class="fas fa-user-tie"></i>
                                        </div>
                                        <div class="empty-content">
                                            <h4>No Recent Trades</h4>
                                            <p>Insider trading data will appear here when available</p>
                                        </div>
                                    </div>
                                @endforelse
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer Info -->
        <div class="dashboard-footer">
            <div class="row align-items-center">
                <div class="col-12 col-md-8 mb-3 mb-md-0">
                    <div class="footer-info">
                        <p class="mb-1">
                            <strong>Powered by CLEDA.I Insights</strong> • 
                            Advanced AI-driven investment intelligence platform with trading recommendations
                        </p>
                        <p class="mb-0 text-muted">
                            Data sources: Quiver Quantitative • Analysis: Claude AI • 
                            Updates every 5 minutes automatically • Options trading recommendations for education
                        </p>
                    </div>
                </div>
                <div class="col-12 col-md-4 text-center text-md-end">
                    <a href="/insights/investment-advisor" class="btn btn-refresh">
                        <i class="fas fa-sync-alt me-2"></i>Refresh Data
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Track Trade Modal -->
<div class="modal fade" id="trackTradeModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Track AI Trade Recommendation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="trackTradeForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Action</label>
                                <select class="form-select" name="action" required>
                                    <option value="">Select Action</option>
                                    <option value="BUY">BUY</option>
                                    <option value="SELL">SELL</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Type</label>
                                <select class="form-select" name="type" required>
                                    <option value="">Select Type</option>
                                    <option value="STOCK">STOCK</option>
                                    <option value="CALL">CALL</option>
                                    <option value="PUT">PUT</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Ticker</label>
                                <input type="text" class="form-control" name="ticker" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Quantity</label>
                                <input type="number" class="form-control" name="quantity" required min="1">
                                <small class="text-muted">Shares for stocks, contracts for options</small>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Entry Price</label>
                                <input type="number" class="form-control" name="entry_price" step="0.01">
                                <small class="text-muted">Leave blank to fetch current price</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Cost Estimate</label>
                                <input type="number" class="form-control" name="cost_estimate" step="0.01" required>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="optionsFields" style="display: none;">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Strike Price</label>
                                <input type="number" class="form-control" name="strike_price" step="0.01">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Expiration Date</label>
                                <input type="date" class="form-control" name="expiration_date">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Confidence</label>
                                <select class="form-select" name="confidence" required>
                                    <option value="">Select</option>
                                    <option value="HIGH">HIGH</option>
                                    <option value="MEDIUM">MEDIUM</option>
                                    <option value="LOW">LOW</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Risk</label>
                                <select class="form-select" name="risk" required>
                                    <option value="">Select</option>
                                    <option value="HIGH">HIGH</option>
                                    <option value="MEDIUM">MEDIUM</option>
                                    <option value="LOW">LOW</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Target Return (%)</label>
                                <input type="number" class="form-control" name="target_return" step="0.1" required>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Reasoning</label>
                        <textarea class="form-control" name="reasoning" rows="3" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Trigger Event</label>
                        <input type="text" class="form-control" name="trigger_event" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-plus me-1"></i>Track Trade
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
/* CLEDA.I Loading Screen Styles */
.cleda-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #003666 0%, #007785 50%, #20c997 100%);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.cleda-loading-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loading-container {
    text-align: center;
    color: white;
    max-width: 500px;
    padding: 2rem;
    position: relative;
    z-index: 2;
}

.logo-container {
    margin-bottom: 2rem;
    animation: logoFloat 3s ease-in-out infinite;
}

.loading-logo {
    width: 120px;
    height: auto;
    filter: brightness(0) invert(1);
    drop-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

.loading-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    animation: titleGlow 2s ease-in-out infinite alternate;
}

.loading-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    font-weight: 300;
    letter-spacing: 0.5px;
}

.loading-progress {
    margin-top: 2rem;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #20c997, #007785, #20c997);
    background-size: 200% 100%;
    border-radius: 10px;
    animation: progressFill 6s ease-in-out, progressShimmer 2s ease-in-out infinite;
    width: 0%;
}

.loading-messages {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-message {
    display: none;
    font-size: 1rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.loading-message.active {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: translateY(0);
    animation: messageGlow 1s ease-in-out;
}

.loading-message i {
    margin-right: 0.8rem;
    font-size: 1.2rem;
    animation: iconSpin 2s linear infinite;
}

.loading-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.loading-disclaimer {
    font-size: 0.85rem;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Background Animation */
.bg-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.floating-element {
    position: absolute;
    font-size: 2rem;
    opacity: 0.1;
    animation: float var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
}

.floating-element:nth-child(1) { top: 20%; left: 10%; }
.floating-element:nth-child(2) { top: 70%; right: 15%; }
.floating-element:nth-child(3) { bottom: 20%; left: 20%; }
.floating-element:nth-child(4) { top: 40%; right: 10%; }

/* Animations */
@keyframes logoFloat {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-10px) scale(1.05); }
}

@keyframes titleGlow {
    0% { text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3); }
    100% { text-shadow: 0 2px 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(32, 201, 151, 0.4); }
}

@keyframes progressFill {
    0% { width: 0%; }
    20% { width: 15%; }
    40% { width: 35%; }
    60% { width: 55%; }
    80% { width: 80%; }
    100% { width: 100%; }
}

@keyframes progressShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes messageGlow {
    0% { text-shadow: none; }
    50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
    100% { text-shadow: none; }
}

@keyframes iconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
        opacity: 0.1;
    }
    25% { 
        transform: translateY(-20px) rotate(90deg);
        opacity: 0.2;
    }
    50% { 
        transform: translateY(-40px) rotate(180deg);
        opacity: 0.1;
    }
    75% { 
        transform: translateY(-20px) rotate(270deg);
        opacity: 0.15;
    }
}

/* Investment Advisor Dashboard Styles */
.investment-advisor-dashboard {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    min-height: 100vh;
    padding: 1rem 0;
}

/* Hero Header */
.hero-header {
    background: linear-gradient(135deg, #003666 0%, #007785 100%);
    border-radius: 15px;
    padding: 2rem 1.5rem;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 54, 102, 0.3);
    margin: -0.5rem 0 1rem 0;
}

.hero-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.hero-title-text {
    word-break: break-word;
}

.hero-subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 0;
    line-height: 1.4;
}

.badge-custom {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.last-updated-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    backdrop-filter: blur(10px);
}

.update-icon {
    font-size: 1.8rem;
    margin-right: 1rem;
    opacity: 0.8;
    flex-shrink: 0;
}

.update-label {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-bottom: 0.2rem;
}

.update-time {
    font-size: 1rem;
    font-weight: 600;
}

.update-time-detail {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* AI Analysis Section */
.ai-analysis-section {
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.section-header {
    background: linear-gradient(135deg, #007785 0%, #005662 100%);
    color: white;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.section-icon {
    font-size: 2rem;
    margin-right: 1rem;
    opacity: 0.9;
    flex-shrink: 0;
}

.section-title {
    flex: 1;
    min-width: 0;
}

.section-title h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.section-title p {
    margin: 0.25rem 0 0 0;
    opacity: 0.8;
    font-size: 0.9rem;
}

.section-badge {
    margin-left: auto;
    margin-top: 0.5rem;
}

.analysis-card {
    padding: 1.5rem;
}

/* AI Analysis Display */
.ai-analysis-display {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin-bottom: 1rem;
}

.ai-analysis-header {
    background: #1f2937;
    color: white;
    padding: 1rem 1.5rem;
}

.ai-analysis-content {
    padding: 1.5rem;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    background: white;
    border: none;
    color: #1f2937;
}

/* Recommendation Block Styles */
.recommendation-block {
    background: white;
    border: 2px solid #10b981;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
}

.recommendation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.recommendation-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.track-trade-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
}

.track-trade-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    color: white;
}

.recommendation-content {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 8px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    color: #374151;
    border-left: 4px solid #10b981;
}

/* Disclaimer Alert */
.disclaimer-alert {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 8px;
}

.analysis-footer {
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
}

.analysis-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.meta-item {
    color: #64748b;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}

/* Overview Cards */
.overview-cards {
    margin: 1.5rem 0;
}

.overview-card {
    background: white;
    border-radius: 12px;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    min-height: 100px;
    -webkit-tap-highlight-color: transparent;
}

.overview-card:hover, .overview-card:active {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.overview-card .card-icon {
    font-size: 2rem;
    margin-right: 0.8rem;
    opacity: 0.8;
    flex-shrink: 0;
}

.overview-card.congressional .card-icon { color: #3b82f6; }
.overview-card.insider .card-icon { color: #06b6d4; }
.overview-card.ai-status .card-icon { color: #10b981; }
.overview-card.trading-recommendations .card-icon { color: #8b5cf6; }

.card-content {
    flex: 1;
    min-width: 0;
}

.card-number {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.2rem;
}

.card-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.2rem;
}

.card-sublabel {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.2;
}

/* Data Cards */
.data-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    height: 100%;
}

.card-header-custom {
    padding: 1.2rem 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-content-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.congressional-card .card-header-custom {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.insider-card .card-header-custom {
    background: linear-gradient(135deg, #cffafe 0%, #a7f3d0 100%);
}

.header-icon {
    font-size: 1.5rem;
    margin-right: 0.8rem;
    color: #003666;
    flex-shrink: 0;
}

.header-content {
    flex: 1;
    min-width: 0;
}

.header-content h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

.header-content p {
    margin: 0.2rem 0 0 0;
    color: #6b7280;
    font-size: 0.8rem;
}

.header-badge {
    flex-shrink: 0;
}

.card-body-custom {
    padding: 1.2rem 1.5rem;
    max-height: 450px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Trading Table */
.trading-table {
    space-y: 0.8rem;
}

.trade-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-bottom: 0.8rem;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.trade-row:hover, .trade-row:active {
    background: #f9fafb;
    border-color: #d1d5db;
    transform: translateX(3px);
}

.trade-row.featured {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #f59e0b;
}

.trade-info {
    flex: 1;
    min-width: 0;
}

.representative {
    margin-bottom: 0.4rem;
}

.representative strong {
    color: #1f2937;
    font-size: 0.95rem;
}

.party-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
    margin-left: 0.4rem;
    font-weight: 500;
    display: inline-block;
}

.party-badge.democratic {
    background: #dbeafe;
    color: #1d4ed8;
}

.party-badge.republican {
    background: #fee2e2;
    color: #dc2626;
}

.trade-details {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.trade-details-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ticker {
    background: #1f2937;
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.75rem;
}

.transaction {
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
}

.transaction.purchase {
    background: #dcfce7;
    color: #166534;
}

.transaction.sale {
    background: #fee2e2;
    color: #dc2626;
}

.date, .shares {
    color: #6b7280;
    font-size: 0.8rem;
}

.insider strong {
    color: #1f2937;
    font-size: 0.95rem;
}

.company-name {
    display: block;
    color: #6b7280;
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.trade-action {
    flex-shrink: 0;
    margin-left: 0.8rem;
}

.action-badge {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
}

.action-badge.purchase {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.action-badge.sale {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: #6b7280;
}

.empty-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-content h4 {
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.empty-content code {
    background: #f3f4f6;
    padding: 0.4rem 0.8rem;
    border-radius: 5px;
    font-size: 0.8rem;
    color: #1f2937;
    display: inline-block;
    margin-top: 0.5rem;
    word-break: break-all;
}

/* Custom Alerts */
.custom-alert {
    border: none;
    border-radius: 12px;
    padding: 1.2rem;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.alert-icon {
    font-size: 1.5rem;
    margin-right: 1rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.alert-content {
    flex: 1;
    min-width: 0;
}

.alert-content h4 {
    margin-bottom: 0.4rem;
    font-size: 1rem;
}

/* Dashboard Footer */
.dashboard-footer {
    background: white;
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    margin-top: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.footer-info p {
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
}

.btn-refresh {
    background: linear-gradient(135deg, #007785 0%, #005662 100%);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 20px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.btn-refresh:hover, .btn-refresh:active {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 119, 133, 0.4);
    color: white;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .investment-advisor-dashboard {
        padding: 0.5rem 0;
    }
    
    .hero-header {
        padding: 1.5rem 1rem;
        margin: 0 0 1rem 0;
        border-radius: 12px;
    }
    
    .hero-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .hero-title .me-2 {
        margin-right: 0.5rem !important;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .badge-custom {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
    
    .last-updated-card {
        padding: 1rem;
    }
    
    .update-icon {
        font-size: 1.5rem;
        margin-right: 0.8rem;
    }
    
    .section-header {
        padding: 1.2rem;
        flex-direction: column;
        text-align: center;
        gap: 0.8rem;
    }
    
    .section-icon {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    
    .section-badge {
        margin-left: 0;
        margin-top: 0;
    }
    
    .analysis-card {
        padding: 1.2rem;
    }
    
    .ai-analysis-content {
        padding: 1.2rem;
        font-size: 0.8rem;
        line-height: 1.5;
    }
    
    .recommendation-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .track-trade-btn {
        width: 100%;
        justify-content: center;
    }
    
    .recommendation-content {
        font-size: 0.8rem;
        padding: 0.8rem;
    }
    
    .overview-card {
        padding: 1rem;
        min-height: 90px;
    }
    
    .overview-card .card-icon {
        font-size: 1.8rem;
        margin-right: 0.6rem;
    }
    
    .card-number {
        font-size: 1.3rem;
    }
    
    .card-label {
        font-size: 0.8rem;
    }
    
    .card-sublabel {
        font-size: 0.7rem;
    }
    
    .card-header-custom {
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
    
    .header-content-wrapper {
        width: 100%;
    }
    
    .header-badge {
        align-self: flex-start;
    }
    
    .card-body-custom {
        padding: 1rem;
        max-height: 400px;
    }
    
    .trade-row {
        padding: 0.8rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
    
    .trade-info {
        width: 100%;
    }
    
    .trade-action {
        align-self: flex-end;
        margin-left: 0;
    }
    
    .representative strong {
        font-size: 0.9rem;
    }
    
    .party-badge {
        font-size: 0.6rem;
        padding: 0.1rem 0.3rem;
        margin-left: 0.3rem;
    }
    
    .trade-details-row {
        gap: 0.3rem;
    }
    
    .ticker, .transaction {
        font-size: 0.7rem;
        padding: 0.15rem 0.5rem;
    }
    
    .date, .shares {
        font-size: 0.75rem;
    }
    
    .action-badge {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    .empty-state {
        padding: 1.5rem 0.8rem;
    }
    
    .empty-icon {
        font-size: 2rem;
    }
    
    .empty-content h4 {
        font-size: 1rem;
    }
    
    .empty-content p {
        font-size: 0.85rem;
    }
    
    .dashboard-footer {
        padding: 1rem;
        text-align: center;
    }
    
    .footer-info p {
        font-size: 0.8rem;
        line-height: 1.4;
    }
    
    .btn-refresh {
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .analysis-meta {
        justify-content: center;
        gap: 0.8rem;
    }
    
    .meta-item {
        font-size: 0.8rem;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.3rem;
    }
    
    .hero-subtitle {
        font-size: 0.85rem;
    }
    
    .overview-card {
        padding: 0.8rem;
        min-height: 80px;
    }
    
    .overview-card .card-icon {
        font-size: 1.6rem;
        margin-right: 0.5rem;
    }
    
    .card-number {
        font-size: 1.2rem;
    }
    
    .card-label {
        font-size: 0.75rem;
    }
    
    .card-sublabel {
        font-size: 0.65rem;
    }
    
    .section-title h2 {
        font-size: 1.3rem;
    }
    
    .header-content h3 {
        font-size: 1rem;
    }
    
    .header-content p {
        font-size: 0.75rem;
    }
}

/* Auto-refresh animation */
.auto-refresh {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Touch improvements */
.trade-row, .overview-card, .btn-refresh, .recommendation-block {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Improved scrollbar for mobile */
.card-body-custom::-webkit-scrollbar {
    width: 4px;
}

.card-body-custom::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.card-body-custom::-webkit-scrollbar-thumb {
    background: #007785;
    border-radius: 4px;
}

.card-body-custom::-webkit-scrollbar-thumb:hover {
    background: #005662;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Loading screen functionality
    const loadingOverlay = document.getElementById('cledaLoadingOverlay');
    const messages = document.querySelectorAll('.loading-message');
    let currentMessage = 0;
    let messageInterval;
    
    // Start the loading sequence
    function startLoadingSequence() {
        messageInterval = setInterval(() => {
            messages[currentMessage].classList.remove('active');
            currentMessage = (currentMessage + 1) % messages.length;
            setTimeout(() => {
                messages[currentMessage].classList.add('active');
            }, 200);
        }, 1000);
    }
    
    // Hide loading screen
    function hideLoadingScreen() {
        clearInterval(messageInterval);
        loadingOverlay.classList.add('fade-out');
        setTimeout(() => {
            loadingOverlay.style.display = 'none';
        }, 800);
    }
    
    // Start loading sequence and hide after 3 seconds
    startLoadingSequence();
    setTimeout(hideLoadingScreen, 3000);
    
    // Parse AI analysis and add Track Trade buttons
    const analysisContent = document.getElementById('aiAnalysisContent');
    if (analysisContent) {
        let content = analysisContent.textContent || analysisContent.innerText;
        
        // Parse recommendations using regex
        const recommendationRegex = /RECOMMENDATION (\d+):([\s\S]*?)(?=RECOMMENDATION \d+:|$)/g;
        let match;
        let processedHTML = '';
        let lastIndex = 0;
        
        while ((match = recommendationRegex.exec(content)) !== null) {
            const recommendationNumber = match[1];
            const recommendationText = match[2].trim();
            
            // Add any text before this recommendation
            processedHTML += escapeHtml(content.substring(lastIndex, match.index));
            
            // Extract trade details using regex
            const actionMatch = recommendationText.match(/ACTION:\s*(\w+)/i);
            const typeMatch = recommendationText.match(/TYPE:\s*(\w+)/i);
            const tickerMatch = recommendationText.match(/TICKER:\s*(\w+)/i);
            const quantityMatch = recommendationText.match(/(?:CONTRACTS|SHARES):\s*(\d+)/i);
            const strikeMatch = recommendationText.match(/STRIKE:\s*\$?(\d+(?:\.\d+)?)/i);
            const expirationMatch = recommendationText.match(/EXPIRATION:\s*(\d{4}-\d{2}-\d{2})/i);
            const costMatch = recommendationText.match(/COST_ESTIMATE:\s*\$?(\d+(?:\.\d+)?)/i);
            const confidenceMatch = recommendationText.match(/CONFIDENCE:\s*(\w+)/i);
            const riskMatch = recommendationText.match(/RISK:\s*(\w+)/i);
            const targetReturnMatch = recommendationText.match(/TARGET_RETURN:\s*(\d+(?:\.\d+)?)/i);
           const reasoningMatch = recommendationText.match(/REASONING:\s*(.+?)(?=\n|$)/i);
           const triggerMatch = recommendationText.match(/TRIGGER_EVENT:\s*(.+?)(?=\n|$)/i);
           
           // Create recommendation block with track trade button
           const recommendationBlock = `
               <div class="recommendation-block" data-recommendation="${recommendationNumber}">
                   <div class="recommendation-header">
                       <h4 class="recommendation-title">Trade Recommendation ${recommendationNumber}</h4>
                       <button type="button" class="track-trade-btn" onclick="openTrackTradeModal('${recommendationNumber}', {
                           action: '${actionMatch ? actionMatch[1] : ''}',
                           type: '${typeMatch ? typeMatch[1] : ''}',
                           ticker: '${tickerMatch ? tickerMatch[1] : ''}',
                           quantity: '${quantityMatch ? quantityMatch[1] : ''}',
                           strike_price: '${strikeMatch ? strikeMatch[1] : ''}',
                           expiration_date: '${expirationMatch ? expirationMatch[1] : ''}',
                           cost_estimate: '${costMatch ? costMatch[1] : ''}',
                           confidence: '${confidenceMatch ? confidenceMatch[1] : ''}',
                           risk: '${riskMatch ? riskMatch[1] : ''}',
                           target_return: '${targetReturnMatch ? targetReturnMatch[1] : ''}',
                           reasoning: '${reasoningMatch ? reasoningMatch[1].trim() : ''}',
                           trigger_event: '${triggerMatch ? triggerMatch[1].trim() : ''}'
                       })">
                           <i class="fas fa-chart-line me-1"></i>Track This Trade
                       </button>
                   </div>
                   <div class="recommendation-content">${escapeHtml(recommendationText)}</div>
               </div>
           `;
           
           processedHTML += recommendationBlock;
           lastIndex = match.index + match[0].length;
       }
       
       // Add any remaining text after the last recommendation
       processedHTML += escapeHtml(content.substring(lastIndex));
       
       // Update the analysis content with the processed HTML
       analysisContent.innerHTML = processedHTML;
   }
   
   // Helper function to escape HTML
   function escapeHtml(text) {
       const div = document.createElement('div');
       div.textContent = text;
       return div.innerHTML;
   }
   
   // Auto-refresh functionality
   function autoRefresh() {
       const refreshIcon = document.querySelector('.btn-refresh i');
       if (refreshIcon) {
           refreshIcon.classList.add('auto-refresh');
           setTimeout(() => {
               window.location.reload();
           }, 1000);
       }
   }
   
   // Set up auto-refresh every 5 minutes
   setInterval(autoRefresh, 300000); // 5 minutes = 300,000 milliseconds
   
   // Track trade modal functionality
   window.openTrackTradeModal = function(recommendationNumber, tradeData) {
       const modal = new bootstrap.Modal(document.getElementById('trackTradeModal'));
       const form = document.getElementById('trackTradeForm');
       
       // Pre-fill form with extracted data
       if (tradeData.action) form.querySelector('[name="action"]').value = tradeData.action.toUpperCase();
       if (tradeData.type) form.querySelector('[name="type"]').value = tradeData.type.toUpperCase();
       if (tradeData.ticker) form.querySelector('[name="ticker"]').value = tradeData.ticker.toUpperCase();
       if (tradeData.quantity) form.querySelector('[name="quantity"]').value = tradeData.quantity;
       if (tradeData.cost_estimate) form.querySelector('[name="cost_estimate"]').value = tradeData.cost_estimate;
       if (tradeData.confidence) form.querySelector('[name="confidence"]').value = tradeData.confidence.toUpperCase();
       if (tradeData.risk) form.querySelector('[name="risk"]').value = tradeData.risk.toUpperCase();
       if (tradeData.target_return) form.querySelector('[name="target_return"]').value = tradeData.target_return;
       if (tradeData.reasoning) form.querySelector('[name="reasoning"]').value = tradeData.reasoning;
       if (tradeData.trigger_event) form.querySelector('[name="trigger_event"]').value = tradeData.trigger_event;
       
       // Handle options-specific fields
       const typeSelect = form.querySelector('[name="type"]');
       const optionsFields = document.getElementById('optionsFields');
       
       function toggleOptionsFields() {
           const type = typeSelect.value;
           if (type === 'CALL' || type === 'PUT') {
               optionsFields.style.display = 'block';
               if (tradeData.strike_price) form.querySelector('[name="strike_price"]').value = tradeData.strike_price;
               if (tradeData.expiration_date) form.querySelector('[name="expiration_date"]').value = tradeData.expiration_date;
           } else {
               optionsFields.style.display = 'none';
           }
       }
       
       typeSelect.addEventListener('change', toggleOptionsFields);
       toggleOptionsFields(); // Initial call
       
       modal.show();
   };
   
   // Handle track trade form submission
   document.getElementById('trackTradeForm').addEventListener('submit', function(e) {
       e.preventDefault();
       
       const formData = new FormData(this);
       const tradeData = Object.fromEntries(formData.entries());
       
       // Add Claude AI source
       tradeData.source = 'CLAUDE_AI';
       tradeData.recommendation_date = new Date().toISOString().split('T')[0];
       
       // Submit to tracking endpoint (would need to be implemented)
       fetch('/api/track-trade', {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json',
               'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
           },
           body: JSON.stringify(tradeData)
       })
       .then(response => response.json())
       .then(data => {
           if (data.success) {
               // Close modal and show success message
               bootstrap.Modal.getInstance(document.getElementById('trackTradeModal')).hide();
               
               // Show success toast or alert
               const successAlert = document.createElement('div');
               successAlert.className = 'alert alert-success alert-dismissible fade show position-fixed';
               successAlert.style.cssText = 'top: 20px; right: 20px; z-index: 10000; max-width: 300px;';
               successAlert.innerHTML = `
                   <strong>Trade Tracked!</strong> Recommendation has been added to your tracking dashboard.
                   <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
               `;
               document.body.appendChild(successAlert);
               
               // Auto-remove after 5 seconds
               setTimeout(() => {
                   if (successAlert.parentNode) {
                       successAlert.remove();
                   }
               }, 5000);
               
               // Update tracked trades count in overview card
               const trackedTradesCard = document.querySelector('.overview-card.trading-recommendations .card-number');
               if (trackedTradesCard) {
                   const currentCount = parseInt(trackedTradesCard.textContent) || 0;
                   trackedTradesCard.textContent = currentCount + 1;
               }
           } else {
               alert('Error tracking trade: ' + (data.message || 'Unknown error'));
           }
       })
       .catch(error => {
           console.error('Error:', error);
           alert('Error tracking trade. Please try again.');
       });
   });
   
   // Enhanced mobile touch handling
   const cards = document.querySelectorAll('.overview-card, .trade-row');
   cards.forEach(card => {
       card.addEventListener('touchstart', function() {
           this.style.transform = 'scale(0.98)';
       });
       
       card.addEventListener('touchend', function() {
           this.style.transform = '';
       });
   });
   
   // Smooth scrolling for mobile
   if ('scrollBehavior' in document.documentElement.style) {
       document.documentElement.style.scrollBehavior = 'smooth';
   }
   
   // Initialize Bootstrap tooltips if any exist
   const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
   tooltips.forEach(tooltip => {
       new bootstrap.Tooltip(tooltip);
   });
   
   // Initialize Bootstrap popovers if any exist
   const popovers = document.querySelectorAll('[data-bs-toggle="popover"]');
   popovers.forEach(popover => {
       new bootstrap.Popover(popover);
   });
   
   console.log('CLEDA Investment Advisor Dashboard initialized successfully');
});

// Additional utility functions
function formatCurrency(amount) {
   return new Intl.NumberFormat('en-US', {
       style: 'currency',
       currency: 'USD',
       minimumFractionDigits: 0,
       maximumFractionDigits: 2
   }).format(amount);
}

function formatNumber(number) {
   return new Intl.NumberFormat('en-US').format(number);
}

function formatDate(dateString) {
   return new Date(dateString).toLocaleDateString('en-US', {
       year: 'numeric',
       month: 'short',
       day: 'numeric'
   });
}

// Performance monitoring
window.addEventListener('load', function() {
   if (window.performance && window.performance.timing) {
       const loadTime = window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
       console.log('Page load time:', loadTime + 'ms');
   }
});

// Error handling for failed API calls
window.addEventListener('error', function(e) {
   console.error('Global error:', e.error);
   // Could send error reports to monitoring service
});

// Cleanup function for when page is unloaded
window.addEventListener('beforeunload', function() {
   // Clear any intervals or timeouts
   // Cleanup any open connections
   console.log('CLEDA Investment Advisor Dashboard cleanup');
});
</script>
@endsection