@* Views/Admin/SurveyAnalysis/AnalyzeTrends.cshtml *@
@model List<Services.AIViewModel.WorkplaceInsight>

@{
    ViewData["Title"] = $"Mental Health Trends - {ViewBag.QuestionnaireName}";
   
}

<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="@Url.Action("Index")">
                                    <i class="fas fa-brain"></i> Analysis Dashboard
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="@Url.Action("AnalyzeQuestionnaire", new { id = ViewBag.QuestionnaireId })">
                                    @ViewBag.QuestionnaireName
                                </a>
                            </li>
                            <li class="breadcrumb-item active">Trends Analysis</li>
                        </ol>
                    </nav>
                    <h1 class="h3 mb-1">
                        <i class="fas fa-chart-line text-primary me-2"></i>
                        Mental Health Trends Analysis
                    </h1>
                    <p class="text-muted mb-0">Track workplace mental health patterns and intervention effectiveness over time</p>
                </div>
                <div class="text-end">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#dateRangeModal">
                            <i class="fas fa-calendar-alt"></i> Change Period
                        </button>
                        <button type="button" class="btn btn-outline-info btn-sm" onclick="exportTrendsData()">
                            <i class="fas fa-download"></i> Export Trends
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Date Range Display -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body py-3">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h6 class="mb-0">
                                <i class="fas fa-calendar-check me-2 text-primary"></i>
                                Analysis Period
                            </h6>
                        </div>
                        <div class="col-md-6 text-end">
                            <span class="badge bg-primary px-3 py-2">
                                <i class="fas fa-calendar me-1"></i>
                                @ViewBag.FromDate.ToString("MMM dd, yyyy") - @ViewBag.ToDate.ToString("MMM dd, yyyy")
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Trend Charts Row -->
    <div class="row mb-4">
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="fas fa-heart me-2 text-primary"></i>
                        Mental Health Score Trends
                    </h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="mentalHealthTrendChart" width="400" height="300"></canvas>
                    </div>
                    <div class="mt-3 text-center">
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Shows overall mental health score progression over time
                        </small>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="fas fa-shield-alt me-2 text-primary"></i>
                        Risk Level Distribution Trends
                    </h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="riskTrendChart" width="400" height="300"></canvas>
                    </div>
                    <div class="mt-3 text-center">
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Tracks changes in employee risk levels over time
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Sentiment and Workplace Factors -->
    <div class="row mb-4">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="fas fa-smile me-2 text-primary"></i>
                        Sentiment Evolution
                    </h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="sentimentTrendChart" width="600" height="300"></canvas>
                    </div>
                    <div class="row mt-3 text-center">
                        <div class="col-4">
                            <div class="sentiment-indicator">
                                <i class="fas fa-smile text-success fa-lg"></i>
                                <h6 class="mb-0 mt-1">Positive Trend</h6>
                                <small class="text-muted">+15% this period</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="sentiment-indicator">
                                <i class="fas fa-meh text-warning fa-lg"></i>
                                <h6 class="mb-0 mt-1">Neutral Stable</h6>
                                <small class="text-muted">-2% this period</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="sentiment-indicator">
                                <i class="fas fa-frown text-danger fa-lg"></i>
                                <h6 class="mb-0 mt-1">Negative Decline</h6>
                                <small class="text-muted">-13% this period</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="fas fa-trending-up me-2 text-primary"></i>
                        Key Improvements
                    </h5>
                </div>
                <div class="card-body">
                    <div class="improvement-item mb-3">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-arrow-up text-success me-2"></i>
                            <strong class="text-success">Work-Life Balance</strong>
                        </div>
                        <div class="progress mb-1" style="height: 8px;">
                            <div class="progress-bar bg-success" style="width: 78%"></div>
                        </div>
                        <small class="text-muted">+23% improvement</small>
                    </div>

                    <div class="improvement-item mb-3">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-arrow-up text-success me-2"></i>
                            <strong class="text-success">Team Communication</strong>
                        </div>
                        <div class="progress mb-1" style="height: 8px;">
                            <div class="progress-bar bg-success" style="width: 65%"></div>
                        </div>
                        <small class="text-muted">+18% improvement</small>
                    </div>

                    <div class="improvement-item mb-3">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-arrow-down text-danger me-2"></i>
                            <strong class="text-danger">Workload Stress</strong>
                        </div>
                        <div class="progress mb-1" style="height: 8px;">
                            <div class="progress-bar bg-danger" style="width: 45%"></div>
                        </div>
                        <small class="text-muted">-12% (reduced stress)</small>
                    </div>

                    <div class="improvement-item">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-minus text-warning me-2"></i>
                            <strong class="text-warning">Management Support</strong>
                        </div>
                        <div class="progress mb-1" style="height: 8px;">
                            <div class="progress-bar bg-warning" style="width: 55%"></div>
                        </div>
                        <small class="text-muted">No significant change</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Intervention Effectiveness -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-success text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-chart-area me-2"></i>
                            NVKN Intervention Effectiveness Tracking
                        </h5>
                        <span class="badge bg-white text-success">
                            <i class="fas fa-user-md me-1"></i>Clinical Insights
                        </span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="chart-container">
                                <canvas id="interventionEffectivenessChart" width="600" height="250"></canvas>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <h6 class="mb-3">Intervention Impact</h6>

                            <div class="intervention-result mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="small">Stress Management Workshops</span>
                                    <span class="badge bg-success">+34%</span>
                                </div>
                                <div class="progress" style="height: 6px;">
                                    <div class="progress-bar bg-success" style="width: 85%"></div>
                                </div>
                                <small class="text-muted">Highly effective</small>
                            </div>

                            <div class="intervention-result mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="small">Manager Training Program</span>
                                    <span class="badge bg-primary">+28%</span>
                                </div>
                                <div class="progress" style="height: 6px;">
                                    <div class="progress-bar bg-primary" style="width: 75%"></div>
                                </div>
                                <small class="text-muted">Very effective</small>
                            </div>

                            <div class="intervention-result mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="small">Flexible Work Arrangements</span>
                                    <span class="badge bg-info">+22%</span>
                                </div>
                                <div class="progress" style="height: 6px;">
                                    <div class="progress-bar bg-info" style="width: 65%"></div>
                                </div>
                                <small class="text-muted">Effective</small>
                            </div>

                            <div class="intervention-result">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="small">Team Building Activities</span>
                                    <span class="badge bg-warning text-dark">+12%</span>
                                </div>
                                <div class="progress" style="height: 6px;">
                                    <div class="progress-bar bg-warning" style="width: 45%"></div>
                                </div>
                                <small class="text-muted">Moderate impact</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Trend Insights and Predictions -->
    <div class="row mb-4">
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="fas fa-crystal-ball me-2 text-primary"></i>
                        Trend Insights & Predictions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="insight-item mb-4">
                        <div class="d-flex align-items-start">
                            <div class="flex-shrink-0">
                                <i class="fas fa-trending-up text-success fa-lg me-3 mt-1"></i>
                            </div>
                            <div>
                                <h6 class="text-success mb-1">Positive Trajectory</h6>
                                <p class="mb-2 small">
                                    Mental health scores have improved 18% over the analyzed period,
                                    indicating successful intervention strategies.
                                </p>
                                <span class="badge bg-success">Predicted: Continued improvement</span>
                            </div>
                        </div>
                    </div>

                    <div class="insight-item mb-4">
                        <div class="d-flex align-items-start">
                            <div class="flex-shrink-0">
                                <i class="fas fa-exclamation-triangle text-warning fa-lg me-3 mt-1"></i>
                            </div>
                            <div>
                                <h6 class="text-warning mb-1">Area of Concern</h6>
                                <p class="mb-2 small">
                                    Management support scores remain static.
                                    This may become a limiting factor for further improvements.
                                </p>
                                <span class="badge bg-warning text-dark">Action needed: Manager training</span>
                            </div>
                        </div>
                    </div>

                    <div class="insight-item">
                        <div class="d-flex align-items-start">
                            <div class="flex-shrink-0">
                                <i class="fas fa-calendar-week text-info fa-lg me-3 mt-1"></i>
                            </div>
                            <div>
                                <h6 class="text-info mb-1">Seasonal Pattern</h6>
                                <p class="mb-2 small">
                                    Mental health scores typically dip during Q4 (holiday stress)
                                    and peak in Q2 (post-intervention period).
                                </p>
                                <span class="badge bg-info">Plan: Preventive Q4 interventions</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="fas fa-bullseye me-2 text-primary"></i>
                        Key Performance Indicators
                    </h5>
                </div>
                <div class="card-body">
                    <div class="kpi-item mb-4">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h6 class="mb-1">Mental Health Response Rate</h6>
                                <small class="text-muted">Employee participation in assessments</small>
                            </div>
                            <div class="col-4 text-end">
                                <h4 class="mb-0 text-success">87%</h4>
                                <small class="text-success">
                                    <i class="fas fa-arrow-up"></i> +12%
                                </small>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height: 8px;">
                            <div class="progress-bar bg-success" style="width: 87%"></div>
                        </div>
                    </div>

                    <div class="kpi-item mb-4">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h6 class="mb-1">High-Risk Case Resolution</h6>
                                <small class="text-muted">Successful intervention outcomes</small>
                            </div>
                            <div class="col-4 text-end">
                                <h4 class="mb-0 text-primary">73%</h4>
                                <small class="text-success">
                                    <i class="fas fa-arrow-up"></i> +8%
                                </small>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height: 8px;">
                            <div class="progress-bar bg-primary" style="width: 73%"></div>
                        </div>
                    </div>

                    <div class="kpi-item mb-4">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h6 class="mb-1">Workplace Satisfaction</h6>
                                <small class="text-muted">Overall employee satisfaction score</small>
                            </div>
                            <div class="col-4 text-end">
                                <h4 class="mb-0 text-info">76%</h4>
                                <small class="text-success">
                                    <i class="fas fa-arrow-up"></i> +19%
                                </small>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height: 8px;">
                            <div class="progress-bar bg-info" style="width: 76%"></div>
                        </div>
                    </div>

                    <div class="kpi-item">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h6 class="mb-1">Early Warning Detection</h6>
                                <small class="text-muted">AI-powered risk identification rate</small>
                            </div>
                            <div class="col-4 text-end">
                                <h4 class="mb-0 text-warning">92%</h4>
                                <small class="text-success">
                                    <i class="fas fa-arrow-up"></i> +5%
                                </small>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height: 8px;">
                            <div class="progress-bar bg-warning" style="width: 92%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Trending Topics -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="fas fa-fire me-2 text-primary"></i>
                        Trending Mental Health Topics
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-success mb-3">
                                <i class="fas fa-arrow-up me-2"></i>Improving Areas
                            </h6>
                            <div class="trending-topic mb-2">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="badge bg-success me-2">↗</span>
                                    <span class="flex-grow-1">Remote Work Satisfaction</span>
                                    <small class="text-success fw-bold">+31%</small>
                                </div>
                            </div>
                            <div class="trending-topic mb-2">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="badge bg-success me-2">↗</span>
                                    <span class="flex-grow-1">Team Collaboration</span>
                                    <small class="text-success fw-bold">+24%</small>
                                </div>
                            </div>
                            <div class="trending-topic mb-2">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="badge bg-success me-2">↗</span>
                                    <span class="flex-grow-1">Mental Health Awareness</span>
                                    <small class="text-success fw-bold">+28%</small>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <h6 class="text-warning mb-3">
                                <i class="fas fa-eye me-2"></i>Areas Needing Attention
                            </h6>
                            <div class="trending-topic mb-2">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="badge bg-warning text-dark me-2">→</span>
                                    <span class="flex-grow-1">Deadline Pressure</span>
                                    <small class="text-warning fw-bold">0%</small>
                                </div>
                            </div>
                            <div class="trending-topic mb-2">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="badge bg-danger me-2">↘</span>
                                    <span class="flex-grow-1">Sleep Quality</span>
                                    <small class="text-danger fw-bold">-8%</small>
                                </div>
                            </div>
                            <div class="trending-topic mb-2">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="badge bg-warning text-dark me-2">→</span>
                                    <span class="flex-grow-1">Career Development Clarity</span>
                                    <small class="text-warning fw-bold">-2%</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Action Recommendations -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-lightbulb me-2"></i>
                        Trend-Based Action Recommendations
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="action-card border border-success rounded p-3 mb-3">
                                <h6 class="text-success mb-2">
                                    <i class="fas fa-check-circle me-2"></i>Continue Success
                                </h6>
                                <ul class="small mb-0">
                                    <li>Maintain current work-life balance initiatives</li>
                                    <li>Expand successful stress management programs</li>
                                    <li>Share best practices across departments</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="action-card border border-warning rounded p-3 mb-3">
                                <h6 class="text-warning mb-2">
                                    <i class="fas fa-exclamation-triangle me-2"></i>Address Concerns
                                </h6>
                                <ul class="small mb-0">
                                    <li>Implement sleep hygiene education programs</li>
                                    <li>Review deadline setting processes</li>
                                    <li>Enhance manager support training</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="action-card border border-primary rounded p-3 mb-3">
                                <h6 class="text-primary mb-2">
                                    <i class="fas fa-rocket me-2"></i>Strategic Focus
                                </h6>
                                <ul class="small mb-0">
                                    <li>Develop career development clarity initiatives</li>
                                    <li>Create predictive mental health models</li>
                                    <li>Establish quarterly trend review meetings</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Date Range Selection Modal -->
<div class="modal fade" id="dateRangeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-calendar-alt me-2"></i>Select Analysis Period
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="dateRangeForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="fromDate" class="form-label">From Date</label>
                                <input type="date" class="form-control" id="fromDate" value="@ViewBag.FromDate.ToString("yyyy-MM-dd")">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="toDate" class="form-label">To Date</label>
                                <input type="date" class="form-control" id="toDate" value="@ViewBag.ToDate.ToString("yyyy-MM-dd")">
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Quick Select:</label>
                        <div class="btn-group w-100" role="group">
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setDateRange(30)">Last 30 Days</button>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setDateRange(90)">Last 3 Months</button>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setDateRange(180)">Last 6 Months</button>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setDateRange(365)">Last Year</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="applyDateRange()">
                    <i class="fas fa-chart-line"></i> Analyze Period
                </button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            initializeTrendCharts();
        });

        function initializeTrendCharts() {
            // Mental Health Score Trend Chart
            const mentalHealthCtx = document.getElementById('mentalHealthTrendChart').getContext('2d');
            new Chart(mentalHealthCtx, {
                type: 'line',
                data: {
                    labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
                    datasets: [{
                        label: 'Mental Health Score',
                        data: [65, 68, 72, 75, 78, 82],
                        borderColor: '#28a745',
                        backgroundColor: 'rgba(40, 167, 69, 0.1)',
                        tension: 0.4,
                        fill: true,
                        pointBackgroundColor: '#28a745',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        pointRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                callback: function(value) {
                                    return value + '%';
                                }
                            }
                        }
                    }
                }
            });

            // Risk Level Trends Chart
            const riskTrendCtx = document.getElementById('riskTrendChart').getContext('2d');
            new Chart(riskTrendCtx, {
                type: 'line',
                data: {
                    labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
                    datasets: [
                        {
                            label: 'Low Risk',
                            data: [45, 48, 52, 58, 62, 68],
                            borderColor: '#28a745',
                            backgroundColor: '#28a745',
                            tension: 0.4
                        },
                        {
                            label: 'Moderate Risk',
                            data: [25, 23, 21, 18, 16, 14],
                            borderColor: '#ffc107',
                            backgroundColor: '#ffc107',
                            tension: 0.4
                        },
                        {
                            label: 'High Risk',
                            data: [15, 12, 10, 8, 6, 4],
                            borderColor: '#dc3545',
                            backgroundColor: '#dc3545',
                            tension: 0.4
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });

            // Sentiment Evolution Chart
            const sentimentCtx = document.getElementById('sentimentTrendChart').getContext('2d');
            new Chart(sentimentCtx, {
                type: 'area',
                data: {
                    labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
                    datasets: [
                        {
                            label: 'Positive',
                            data: [45, 48, 52, 58, 62, 68],
                            borderColor: '#28a745',
                            backgroundColor: 'rgba(40, 167, 69, 0.3)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: 'Neutral',
                            data: [35, 34, 33, 30, 28, 25],
                            borderColor: '#6c757d',
                            backgroundColor: 'rgba(108, 117, 125, 0.3)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: 'Negative',
                            data: [20, 18, 15, 12, 10, 7],
                            borderColor: '#dc3545',
                            backgroundColor: 'rgba(220, 53, 69, 0.3)',
                            tension: 0.4,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { beginAtZero: true, max: 100 }
                    }
                }
            });

            // Intervention Effectiveness Chart
            const interventionCtx = document.getElementById('interventionEffectivenessChart').getContext('2d');
            new Chart(interventionCtx, {
                type: 'bar',
                data: {
                    labels: ['Pre-Intervention', 'Month 1', 'Month 2', 'Month 3', 'Current'],
                    datasets: [{
                        label: 'Mental Health Score',
                        data: [58, 65, 72, 78, 84],
                        backgroundColor: [
                            '#dc3545', // Red for pre-intervention
                            '#ffc107', // Yellow for month 1
                            '#17a2b8', // Blue for month 2
                            '#28a745', // Green for month 3
                            '#007bff'  // Primary for current
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                callback: function(value) {
                                    return value + '%';
                                }
                            }
                        }
                    }
                }
            });
        }

        // Date range functions
        function setDateRange(days) {
            const toDate = new Date();
            const fromDate = new Date();
            fromDate.setDate(toDate.getDate() - days);

            document.getElementById('fromDate').value = fromDate.toISOString().split('T')[0];
            document.getElementById('toDate').value = toDate.toISOString().split('T')[0];
        }

        function applyDateRange() {
            const fromDate = document.getElementById('fromDate').value;
            const toDate = document.getElementById('toDate').value;

            if (!fromDate || !toDate) {
                Swal.fire('Invalid Date Range', 'Please select both from and to dates.', 'warning');
                return;
            }

            const url = '@Url.Action("AnalyzeTrends", new { id = ViewBag.QuestionnaireId })' +
                        `?fromDate=${fromDate}&toDate=${toDate}`;

            window.location.href = url;
        }

        // Export trends data
        function exportTrendsData() {
            Swal.fire({
                title: 'Export Trends Data',
                text: 'This will export mental health trends data in CSV format for further analysis.',
                icon: 'info',
                showCancelButton: true,
                confirmButtonText: 'Export CSV',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    // In real implementation, this would trigger a download
                    window.location.href = '@Url.Action("ExportAnalysis", new { id = ViewBag.QuestionnaireId })';
                }
            });
        }
    </script>
}

@section Styles {
    <style>
        .chart-container {
            position: relative;
            height: 300px;
        }

        .sentiment-indicator {
            padding: 1rem;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
        }

            .sentiment-indicator:hover {
                background-color: rgba(0,0,0,0.05);
            }

        .improvement-item {
            padding: 0.75rem;
            border-radius: 0.5rem;
            background-color: rgba(0,0,0,0.02);
            transition: all 0.3s ease;
        }

            .improvement-item:hover {
                background-color: rgba(0,0,0,0.05);
                transform: translateX(5px);
            }

        .kpi-item {
            padding: 1rem;
            border-radius: 0.5rem;
            background-color: rgba(0,0,0,0.02);
            transition: all 0.3s ease;
        }

            .kpi-item:hover {
                background-color: rgba(0,0,0,0.05);
                transform: scale(1.02);
            }

        .trending-topic {
            padding: 0.5rem;
            border-radius: 0.375rem;
            transition: all 0.3s ease;
        }

            .trending-topic:hover {
                background-color: rgba(0,0,0,0.05);
            }

        .action-card {
            transition: all 0.3s ease;
        }

            .action-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            }

        .insight-item {
            transition: all 0.3s ease;
            padding: 1rem;
            border-radius: 0.5rem;
        }

            .insight-item:hover {
                background-color: rgba(0,0,0,0.02);
            }

        .intervention-result {
            padding: 0.75rem;
            border-radius: 0.375rem;
            background-color: rgba(0,0,0,0.02);
            transition: all 0.3s ease;
        }

            .intervention-result:hover {
                background-color: rgba(0,0,0,0.05);
            }

        .badge {
            font-size: 0.75em;
        }

        .progress {
            border-radius: 10px;
        }

        @@media (max-width: 768px) {
            .chart-container

        {
            height: 250px;
        }

        .btn-group {
            flex-direction: column;
            width: 100%;
        }

            .btn-group .btn {
                border-radius: 0.375rem !important;
                margin-bottom: 0.25rem;
            }

        }
    </style>
}