@model DashboardViewModel
@{
    ViewData["Title"] = "Admin Dashboard";
}

@section Styles {
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            --danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            --surface: #ffffff;
            --background: #f8fafc;
            --text-primary: #2d3748;
            --text-secondary: #4a5568;
            --border: #e2e8f0;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --border-radius: 12px;
        }

        .dashboard-container {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--background);
            color: var(--text-primary);
            line-height: 1.6;
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
        }

        .dashboard-header {
            background: var(--surface);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 2rem;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

            .dashboard-header::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: var(--primary-gradient);
            }

        .welcome-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .welcome-text h1 {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .welcome-text p {
            color: var(--text-secondary);
            font-size: 1.1rem;
        }

        .user-avatar {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .avatar-circle {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--primary-gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .user-info h3 {
            font-weight: 600;
            color: var(--text-primary);
        }

        .user-info p {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            background: var(--surface);
            border-radius: var(--border-radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

            .stat-card:hover {
                transform: translateY(-2px);
                box-shadow: var(--shadow-lg);
            }

            .stat-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
            }

            .stat-card.primary::before {
                background: var(--primary-gradient);
            }

            .stat-card.success::before {
                background: var(--success-gradient);
            }

            .stat-card.warning::before {
                background: var(--warning-gradient);
            }

            .stat-card.danger::before {
                background: var(--danger-gradient);
            }

        .stat-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }

        .stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
        }

            .stat-icon.primary {
                background: var(--primary-gradient);
            }

            .stat-icon.success {
                background: var(--success-gradient);
            }

            .stat-icon.warning {
                background: var(--warning-gradient);
            }

            .stat-icon.danger {
                background: var(--danger-gradient);
            }

        .stat-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .stat-label {
            color: var(--text-secondary);
            font-size: 0.9rem;
            font-weight: 500;
        }

        .stat-trend {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .trend-positive {
            color: #10b981;
        }

        .trend-negative {
            color: #ef4444;
        }

        .charts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .chart-card {
            background: var(--surface);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            box-shadow: var(--shadow);
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }

        .chart-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .chart-filter {
            padding: 0.5rem 1rem;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 0.9rem;
            background: var(--surface);
            color: var(--text-primary);
        }

        .chart-container {
            position: relative;
            height: 300px;
        }

        .performance-metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .metric-card {
            background: var(--surface);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            box-shadow: var(--shadow);
        }

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

        .progress-bar {
            height: 8px;
            background: var(--border);
            border-radius: 4px;
            overflow: hidden;
            margin: 1rem 0;
        }

        .progress-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        .recent-activity {
            background: var(--surface);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            box-shadow: var(--shadow);
        }

        .activity-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }

        .activity-list {
            list-style: none;
        }

        .activity-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 0;
            border-bottom: 1px solid var(--border);
        }

            .activity-item:last-child {
                border-bottom: none;
            }

        .activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            color: white;
        }

        .activity-content {
            flex: 1;
        }

        .activity-title {
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .activity-meta {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        /* NEW: Notification Styles */
        .notification-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .notification-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.5rem;
            background: var(--background);
            border-radius: 8px;
            border-left: 4px solid var(--success-gradient);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

            .notification-item:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

        .notification-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: var(--success-gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

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

        .notification-title {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
            font-size: 0.95rem;
        }

        .notification-meta {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        .notification-actions {
            display: flex;
            gap: 0.75rem;
            flex-shrink: 0;
        }

        .notification-btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 500;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

            .notification-btn.btn-primary {
                background: var(--primary-gradient);
                color: white;
            }

            .notification-btn.btn-secondary {
                background: var(--surface);
                color: var(--text-primary);
                border: 1px solid var(--border);
            }

            .notification-btn:hover {
                transform: translateY(-1px);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                text-decoration: none;
            }

            .notification-btn.btn-primary:hover {
                color: white;
            }

            .notification-btn.btn-secondary:hover {
                color: var(--text-primary);
            }

        .data-table {
            background: var(--surface);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-top: 2rem;
        }

        .full-width-table {
            grid-column: 1 / -1;
            width: 100%;
        }

        .table-header {
            padding: 1.5rem;
            background: var(--background);
            border-bottom: 1px solid var(--border);
        }

        .table-responsive {
            overflow-x: auto;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            min-width: 800px;
        }

            .table th, .table td {
                padding: 1rem;
                text-align: left;
                border-bottom: 1px solid var(--border);
                vertical-align: middle;
            }

            .table th {
                background: var(--background);
                font-weight: 600;
                color: var(--text-secondary);
                font-size: 0.9rem;
            }

            .table tr:hover {
                background: var(--background);
                transition: background-color 0.2s ease;
            }

        .survey-title-cell strong {
            color: var(--text-primary);
            font-size: 0.95rem;
        }

        .survey-title-cell small {
            color: var(--text-secondary);
            font-size: 0.8rem;
        }

        .completion-cell {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .completion-text {
            font-weight: 500;
            font-size: 0.9rem;
        }

        .mini-progress-bar {
            width: 100%;
            height: 4px;
            background: var(--border);
            border-radius: 2px;
            overflow: hidden;
        }

        .mini-progress-fill {
            height: 100%;
            border-radius: 2px;
            transition: width 0.3s ease;
        }

        .badge {
            display: inline-block;
            padding: 0.3rem 0.6rem;
            font-size: 0.8rem;
            font-weight: 500;
            border-radius: 6px;
            text-align: center;
            min-width: 40px;
        }

        .badge-info {
            background: #e0f2fe;
            color: #0369a1;
        }

        .badge-success {
            background: #dcfce7;
            color: #166534;
        }

        .action-buttons {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .action-icon-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 6px;
            background: var(--background);
            color: var(--text-secondary);
            text-decoration: none;
            transition: all 0.2s ease;
            border: 1px solid transparent;
        }

            .action-icon-btn:hover {
                background: var(--primary-gradient);
                color: white;
                transform: translateY(-1px);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                text-decoration: none;
            }

        .status-badge {
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .status-active {
            background: #dcfce7;
            color: #166534;
        }

        .status-draft {
            background: #fef3c7;
            color: #92400e;
        }

        .status-closed {
            background: #fee2e2;
            color: #991b1b;
        }

        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--text-secondary);
        }

            .empty-state i {
                font-size: 3rem;
                margin-bottom: 1rem;
                opacity: 0.5;
            }

            .empty-state h4 {
                margin-bottom: 0.5rem;
                color: var(--text-primary);
            }

            .empty-state p {
                margin-bottom: 1.5rem;
            }

        .quick-actions {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
            flex-wrap: wrap;
        }

        .action-btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background: var(--primary-gradient);
            color: white;
        }

        .btn-secondary {
            background: var(--surface);
            color: var(--text-primary);
            border: 1px solid var(--border);
        }

        .action-btn:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow);
            text-decoration: none;
        }

        .btn-primary:hover {
            color: white;
        }

        .btn-secondary:hover {
            color: var(--text-primary);
        }

        .real-time-indicator {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .pulse {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #10b981;
            animation: pulse 2s infinite;
        }

        @@keyframes pulse {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }

            100% {
                opacity: 1;
            }
        }

        @@media (max-width: 768px) {
            .dashboard-container {
                padding: 1rem;
            }

            .welcome-section {
                flex-direction: column;
                text-align: center;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }

            .charts-grid {
                grid-template-columns: 1fr;
            }

            .welcome-text h1 {
                font-size: 2rem;
            }

            .quick-actions {
                justify-content: center;
            }
            /* Notification responsive */
            .notification-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
                padding: 1rem;
            }

            .notification-actions {
                width: 100%;
                justify-content: flex-start;
            }

            .notification-btn {
                flex: 1;
                justify-content: center;
                min-width: 120px;
            }
            /* Table responsive */
            .table {
                font-size: 0.8rem;
                min-width: 600px;
            }

                .table th, .table td {
                    padding: 0.5rem;
                }

            .action-buttons {
                flex-wrap: wrap;
            }

            .action-icon-btn {
                width: 28px;
                height: 28px;
            }
        }

        @@media (max-width: 480px) {
            .notification-actions {
                flex-direction: column;
            }

            .notification-btn {
                width: 100%;
            }
        }
    </style>
}

<div class="dashboard-container">
    <!-- Header Section -->
    <div class="dashboard-header">
        <div class="welcome-section">
            <div class="welcome-text">
                <h1>Survey Analytics Dashboard</h1>
                <p>Real-time insights into your questionnaire performance</p>
            </div>
            <div class="user-avatar">
                <div class="avatar-circle">
                    @if (!string.IsNullOrEmpty(Model.FirstName) && !string.IsNullOrEmpty(Model.LastName))
                    {
                        @Model.FirstName.Substring(0, 1).ToUpper()
                        @Model.LastName.Substring(0, 1).ToUpper()
                    }
                    else
                    {
                        <i class="fas fa-user-tie"></i>
                    }
                </div>
                <div class="user-info">
                    <h3>@Model.FirstName @Model.LastName</h3>
                    <p>System Administrator</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Key Metrics Grid -->
    <div class="stats-grid">
        <div class="stat-card primary">
            <div class="stat-header">
                <div class="stat-icon primary">
                    <i class="fas fa-clipboard-list"></i>
                </div>
            </div>
            <div class="stat-value" id="total-questionnaires">@Model.SurveyAnalytics.TotalQuestionnaires</div>
            <div class="stat-label">Total Questionnaires</div>
            <div class="stat-trend">
                <i class="fas fa-arrow-@(Model.SurveyAnalytics.TrendData.QuestionnairesTrendPositive ? "up" : "down") trend-@(Model.SurveyAnalytics.TrendData.QuestionnairesTrendPositive ? "positive" : "negative")"></i>
                <span class="trend-@(Model.SurveyAnalytics.TrendData.QuestionnairesTrendPositive ? "positive" : "negative")">@Model.SurveyAnalytics.TrendData.QuestionnairesTrendText</span>
            </div>
        </div>

        <div class="stat-card success">
            <div class="stat-header">
                <div class="stat-icon success">
                    <i class="fas fa-users"></i>
                </div>
            </div>
            <div class="stat-value" id="total-responses">@Model.SurveyAnalytics.TotalResponses</div>
            <div class="stat-label">Total Responses</div>
            <div class="stat-trend">
                <i class="fas fa-arrow-@(Model.SurveyAnalytics.TrendData.ResponsesTrendPositive ? "up" : "down") trend-@(Model.SurveyAnalytics.TrendData.ResponsesTrendPositive ? "positive" : "negative")"></i>
                <span class="trend-@(Model.SurveyAnalytics.TrendData.ResponsesTrendPositive ? "positive" : "negative")">@Model.SurveyAnalytics.TrendData.ResponsesTrendText</span>
            </div>
        </div>

        <div class="stat-card warning">
            <div class="stat-header">
                <div class="stat-icon warning">
                    <i class="fas fa-percentage"></i>
                </div>
            </div>
            <div class="stat-value" id="completion-rate">@Model.SurveyAnalytics.CompletionRate%</div>
            <div class="stat-label">Avg. Completion Rate</div>
            <div class="stat-trend">
                <i class="fas fa-arrow-@(Model.SurveyAnalytics.TrendData.CompletionTrendPositive ? "up" : "down") trend-@(Model.SurveyAnalytics.TrendData.CompletionTrendPositive ? "positive" : "negative")"></i>
                <span class="trend-@(Model.SurveyAnalytics.TrendData.CompletionTrendPositive ? "positive" : "negative")">@Model.SurveyAnalytics.TrendData.CompletionTrendText</span>
            </div>
        </div>

        <div class="stat-card danger">
            <div class="stat-header">
                <div class="stat-icon danger">
                    <i class="fas fa-clock"></i>
                </div>
            </div>
            <div class="stat-value" id="avg-response-time">@Model.SurveyAnalytics.AvgResponseTime</div>
            <div class="stat-label">Avg. Minutes per Survey</div>
            <div class="stat-trend">
                <i class="fas fa-arrow-@(Model.SurveyAnalytics.TrendData.ResponseTimeTrendPositive ? "down" : "up") trend-@(Model.SurveyAnalytics.TrendData.ResponseTimeTrendPositive ? "positive" : "negative")"></i>
                <span class="trend-@(Model.SurveyAnalytics.TrendData.ResponseTimeTrendPositive ? "positive" : "negative")">@Model.SurveyAnalytics.TrendData.ResponseTimeTrendText</span>
            </div>
        </div>
    </div>

    <!-- Performance Metrics -->
    <div class="performance-metrics">
        <div class="metric-card">
            <div class="metric-header">
                <h3>Response Rate Trends</h3>
                <div class="real-time-indicator">
                    <div class="pulse"></div>
                    Live Data
                </div>
            </div>
            <div class="stat-value">@Model.SurveyAnalytics.ResponseRateTrend%</div>
            <div class="stat-label">Current Month Response Rate</div>
            <div class="progress-bar">
                <div class="progress-fill" style="width: @Model.SurveyAnalytics.ResponseRateTrend%; background: var(--success-gradient);"></div>
            </div>
        </div>

        <div class="metric-card">
            <div class="metric-header">
                <h3>User Engagement</h3>
                <span style="color: var(--text-secondary); font-size: 0.9rem;">Last 30 days</span>
            </div>
            <div class="stat-value">@Model.SurveyAnalytics.MonthlyActiveUsers</div>
            <div class="stat-label">Active Participants</div>
            <div class="progress-bar">
                <div class="progress-fill" style="width: @(Math.Min(100, Math.Max(5, Model.SurveyAnalytics.MonthlyActiveUsers * 2)))%; background: var(--primary-gradient);"></div>
            </div>
        </div>

        <div class="metric-card">
            <div class="metric-header">
                <h3>Survey Quality</h3>
                <span style="color: var(--text-secondary); font-size: 0.9rem;">Response quality</span>
            </div>
            <div class="stat-value">@Model.SurveyAnalytics.QualityScore/10</div>
            <div class="stat-label">Quality Score</div>
            <div class="progress-bar">
                <div class="progress-fill" style="width: @(Model.SurveyAnalytics.QualityScore * 10)%; background: var(--warning-gradient);"></div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="charts-grid">
        <div class="chart-card">
            <div class="chart-header">
                <h3 class="chart-title">Survey Responses Over Time</h3>
                <select class="chart-filter" id="response-time-filter">
                    <option value="7">Last 7 days</option>
                    <option value="30" selected>Last 30 days</option>
                    <option value="90">Last 90 days</option>
                </select>
            </div>
            <div class="chart-container">
                <canvas id="responseChart"></canvas>
            </div>
        </div>

        <div class="chart-card">
            <div class="chart-header">
                <h3 class="chart-title">Question Types Distribution</h3>
                <span style="color: var(--text-secondary); font-size: 0.9rem;">All Surveys</span>
            </div>
            <div class="chart-container">
                <canvas id="questionTypeChart"></canvas>
            </div>
        </div>

        <div class="chart-card">
            <div class="chart-header">
                <h3 class="chart-title">Survey Performance</h3>
                <span style="color: var(--text-secondary); font-size: 0.9rem;">Top performing</span>
            </div>
            <div class="chart-container">
                <canvas id="performanceChart"></canvas>
            </div>
        </div>

        <div class="chart-card">
            <div class="chart-header">
                <h3 class="chart-title">Response Rate Trends</h3>
                <select class="chart-filter">
                    <option>This week</option>
                    <option selected>This month</option>
                    <option>This quarter</option>
                </select>
            </div>
            <div class="chart-container">
                <canvas id="activityChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Recent Activity -->
    <!-- 🔥 UPDATED RECENT ACTIVITY SECTION with User-Specific Analytics Links -->
    <!-- 🔥 UPDATED RECENT ACTIVITY SECTION with Distinct Activity Types -->
    <div class="recent-activity">
        <div class="activity-header">
            <h3>Recent Activity</h3>
            <span style="color: var(--text-secondary); font-size: 0.9rem;">Last 24 hours</span>
        </div>
        <div class="notification-list">
            @if (Model.SurveyAnalytics.RecentActivity.Any())
            {
                @foreach (var activity in Model.SurveyAnalytics.RecentActivity.Take(5))
                {
                    <div class="notification-item @(activity.Type == "creation" ? "creation-activity" : "response-activity")">
                        <div class="notification-icon @(activity.Type == "creation" ? "creation-icon" : "response-icon")">
                            <i class="@activity.Icon"></i>
                        </div>
                        <div class="notification-content">
                            <div class="notification-title">@activity.Description</div>
                            <div class="notification-meta">
                                @activity.Timestamp.ToString("MMM dd, yyyy HH:mm")
                                @(!string.IsNullOrEmpty(activity.UserName) ? $"by {activity.UserName}" : "")
                                @if (!string.IsNullOrEmpty(activity.UserEmail))
                                {
                                    <span class="text-muted">(@activity.UserEmail)</span>
                                }
                            </div>
                        </div>
                        <div class="notification-actions">
                            @if (activity.Type == "response")
                            {
                                <!-- 📋 RESPONSE ACTIVITY ACTIONS -->
                                @if (activity.ResponseId > 0)
                                {
                                    <a href="@Url.Action("ViewResponse", "UserResponse", new { area = "Admin", id = activity.ResponseId })"
                                       class="notification-btn btn-primary"
                                       title="View Response #@activity.ResponseId">
                                        <i class="fas fa-eye"></i> View Response
                                    </a>
                                }

                                @if (!string.IsNullOrEmpty(activity.UserEmail))
                                {
                                    <a href="@Url.Action("UserResponsesStatus", "UserResponseStatus", new { area = "Admin", userEmail = activity.UserEmail })"
                                       class="notification-btn btn-secondary"
                                       title="View all responses from @activity.UserEmail">
                                        <i class="fas fa-user-chart"></i> User Analytics
                                    </a>
                                }
                            }
                            else if (activity.Type == "creation")
                            {
                                <!-- 🆕 SURVEY CREATION ACTIVITY ACTIONS -->
                                @if (activity.QuestionnaireId > 0)
                                {
                                    <a href="@Url.Action("Details", "Questionnaire", new { area = "Admin", id = activity.QuestionnaireId })"
                                       class="notification-btn btn-success"
                                       title="View Survey Details">
                                        <i class="fas fa-info-circle"></i> View Survey
                                    </a>
                                    <a href="@Url.Action("Edit", "Questionnaire", new { area = "Admin", id = activity.QuestionnaireId })"
                                       class="notification-btn btn-warning"
                                       title="Edit Survey">
                                        <i class="fas fa-edit"></i> Edit
                                    </a>
                                }
                            }
                            else
                            {
                                <!-- 🔄 FALLBACK ACTIONS -->
                                <a href="@Url.Action("Index", "UserResponse", new { area = "Admin" })"
                                   class="notification-btn btn-primary">
                                    <i class="fas fa-list"></i> View All
                                </a>
                            }
                        </div>
                    </div>
                }
            }
            else
            {
                <div class="notification-item">
                    <div class="notification-icon" style="background: var(--primary-gradient);">
                        <i class="fas fa-info-circle"></i>
                    </div>
                    <div class="notification-content">
                        <div class="notification-title">Welcome to your survey dashboard!</div>
                        <div class="notification-meta">Start by creating your first questionnaire to see activity here</div>
                    </div>
                    <div class="notification-actions">
                        <a href="@Url.Action("Create", "Questionnaire", new { area = "Admin" })"
                           class="notification-btn btn-primary">
                            <i class="fas fa-plus"></i> Create Survey
                        </a>
                    </div>
                </div>
            }
        </div>
    </div>

    <style>
        /* 🎨 DISTINCT STYLING FOR DIFFERENT ACTIVITY TYPES */

        /* 📋 Response Activity Styling */
        .response-activity {
            border-left: 4px solid var(--success-gradient) !important;
            background: linear-gradient(90deg, rgba(16, 185, 129, 0.05) 0%, rgba(255, 255, 255, 1) 10%);
        }

        .response-icon {
            background: var(--success-gradient) !important;
            animation: pulse-green 2s infinite;
        }

        /* 🆕 Survey Creation Activity Styling */
        .creation-activity {
            border-left: 4px solid var(--primary-gradient) !important;
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(255, 255, 255, 1) 10%);
        }

        .creation-icon {
            background: var(--primary-gradient) !important;
            animation: pulse-blue 2s infinite;
        }

        /* ✨ Animation Effects */
        @@keyframes pulse-green {
            0%, 100%

        {
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
        }

        50% {
            box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
        }

        }

        @@keyframes pulse-blue {
            0%, 100%

        {
            box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
        }

        50% {
            box-shadow: 0 0 0 5px rgba(102, 126, 234, 0);
        }

        }

        /* 🔘 Additional Button Styles */
        .btn-success {
            background: var(--success-gradient);
            color: white;
            border: none;
        }

            .btn-success:hover {
                color: white;
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
            }

        .btn-warning {
            background: var(--warning-gradient);
            color: white;
            border: none;
        }

            .btn-warning:hover {
                color: white;
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
            }

        /* 📱 Mobile Responsive Adjustments */
        @@media (max-width: 768px) {
            .creation-activity, .response-activity

        {
            background: var(--surface);
        }

        .notification-actions {
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .notification-btn {
            flex: 1;
            min-width: 120px;
            font-size: 0.8rem;
            padding: 0.4rem 0.8rem;
        }

        }
    </style>

    <!-- Data Table - Full Width -->
    <div class="data-table full-width-table">
        <div class="table-header">
            <h3>Active Questionnaires</h3>
        </div>
        @if (Model.SurveyAnalytics.TopSurveys.Any())
        {
            <div class="table-responsive">
                <table class="table w-100">
                    <thead>
                        <tr>
                            <th style="width: 45%;">Title</th>
                            <th style="width: 10%;">Questions</th>
                            <th style="width: 10%;">Responses</th>
                            <th style="width: 15%;">Completion Rate</th>
                            <th style="width: 10%;">Status</th>
                            <th style="width: 20%;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var survey in Model.SurveyAnalytics.TopSurveys)
                        {
                            <tr>
                                <td>
                                    <div class="survey-title-cell">
                                        <strong>@survey.Title</strong>
                                        <small class="text-muted d-block">Survey ID: @survey.Id</small>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge badge-info">@survey.QuestionCount</span>
                                </td>
                                <td>
                                    <span class="badge badge-success">@survey.ResponseCount</span>
                                </td>
                                <td>
                                    <div class="completion-cell">
                                        <span class="completion-text">@survey.CompletionRate%</span>
                                        <div class="mini-progress-bar">
                                            <div class="mini-progress-fill" style="width: @survey.CompletionRate%; background: @(survey.CompletionRate >= 80 ? "#10b981" : survey.CompletionRate >= 50 ? "#f59e0b" : "#ef4444");"></div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="status-badge status-active">Active</span>
                                </td>
                                <td>
                                    <div class="action-buttons">
                                        <a href="@Url.Action("Details", "Questionnaire", new { id = survey.Id })" class="action-icon-btn" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="@Url.Action("Edit", "Questionnaire", new { id = survey.Id })" class="action-icon-btn" title="Edit Survey">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <a href="@Url.Action("Index", "UserResponse")" class="action-icon-btn" title="View Responses">
                                            <i class="fas fa-download"></i>
                                        </a>
                                       
                                    </div>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        }
        else
        {
            <div class="empty-state">
                <i class="fas fa-clipboard-list"></i>
                <h4>No surveys yet</h4>
                <p>Create your first survey to start collecting responses and see analytics here.</p>
                <a href="@Url.Action("Create", "Questionnaire")" class="action-btn btn-primary">
                    <i class="fas fa-plus"></i>
                    Create Your First Survey
                </a>
            </div>
        }
    </div>

    <!-- Quick Actions -->
    <div class="quick-actions">
        <a href="@Url.Action("Create", "Questionnaire")" class="action-btn btn-primary">
            <i class="fas fa-plus"></i>
            Create New Survey
        </a>
        <a href="@Url.Action("Index", "UserResponse")" class="action-btn btn-secondary">
            <i class="fas fa-download"></i>
            Export Data
        </a>
        <a href="@Url.Action("Index", "UserResponseStatus")" class="action-btn btn-secondary">
            <i class="fas fa-users"></i>
            Manage Response
        </a>
        <a href="@Url.Action("Index", "Questionnaire")" class="action-btn btn-secondary">
            <i class="fas fa-list"></i>
            All Surveys
        </a>
    </div>
</div>

@section Scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
    <script>
        // Chart configurations and data
        const chartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true,
                    position: 'bottom'
                }
            }
        };

        // Global variables for charts
        let responseChart, questionTypeChart, performanceChart, activityChart;

        // Load real data and initialize charts
        document.addEventListener('DOMContentLoaded', function() {
            initializeCharts();

            // Auto-refresh data every 30 seconds
            setInterval(refreshRealtimeData, 30000);

            // Animate progress bars on load
            animateProgressBars();

            // Add hover effects to stat cards
            addHoverEffects();
        });

        function initializeCharts() {
            loadResponseTrends();
            loadQuestionTypeDistribution();
            loadSurveyPerformance();
            loadActivityChart();
        }

        function loadResponseTrends() {
            fetch('@Url.Action("GetResponseTrendsData", "Admin")')
                .then(response => response.json())
                .then(data => {
                    const ctx = document.getElementById('responseChart').getContext('2d');

                    if (responseChart) {
                        responseChart.destroy();
                    }

                    responseChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: data.length > 0 ? data.map(d => new Date(d.date).toLocaleDateString()) : ['No data'],
                            datasets: [{
                                label: 'Survey Responses',
                                data: data.length > 0 ? data.map(d => d.responses) : [0],
                                borderColor: '#667eea',
                                backgroundColor: 'rgba(102, 126, 234, 0.1)',
                                tension: 0.4,
                                fill: true
                            }]
                        },
                        options: {
                            ...chartOptions,
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    grid: { color: '#e2e8f0' }
                                },
                                x: {
                                    grid: { color: '#e2e8f0' }
                                }
                            }
                        }
                    });
                })
                .catch(error => {
                    console.error('Error loading response trends:', error);
                    createFallbackResponseChart();
                });
        }

        function loadQuestionTypeDistribution() {
            fetch('@Url.Action("GetQuestionTypeDistribution", "Admin")')
                .then(response => response.json())
                .then(data => {
                    const ctx = document.getElementById('questionTypeChart').getContext('2d');

                    if (questionTypeChart) {
                        questionTypeChart.destroy();
                    }

                    const hasData = data && data.length > 0;

                    questionTypeChart = new Chart(ctx, {
                        type: 'doughnut',
                        data: {
                            labels: hasData ? data.map(d => d.type) : ['No Data'],
                            datasets: [{
                                data: hasData ? data.map(d => d.count) : [1],
                                backgroundColor: hasData ? [
                                    '#667eea', '#764ba2', '#f093fb', '#f5576c',
                                    '#4facfe', '#00f2fe', '#43e97b', '#38f9d7'
                                ] : ['#e2e8f0'],
                                borderWidth: 2,
                                borderColor: '#ffffff'
                            }]
                        },
                        options: {
                            ...chartOptions,
                            cutout: '60%'
                        }
                    });
                })
                .catch(error => {
                    console.error('Error loading question type distribution:', error);
                    createFallbackQuestionTypeChart();
                });
        }

        function loadSurveyPerformance() {
            fetch('@Url.Action("GetSurveyPerformanceData", "Admin")')
                .then(response => response.json())
                .then(data => {
                    const ctx = document.getElementById('performanceChart').getContext('2d');

                    if (performanceChart) {
                        performanceChart.destroy();
                    }

                    const hasData = data && data.length > 0;

                    performanceChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: hasData ? data.map(d => d.name.length > 15 ? d.name.substring(0, 15) + '...' : d.name) : ['No Surveys'],
                            datasets: [{
                                label: 'Responses',
                                data: hasData ? data.map(d => d.responses) : [0],
                                backgroundColor: 'rgba(102, 126, 234, 0.8)',
                                borderColor: '#667eea',
                                borderWidth: 2,
                                borderRadius: 4
                            }]
                        },
                        options: {
                            ...chartOptions,
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    grid: { color: '#e2e8f0' }
                                },
                                x: {
                                    grid: { color: '#e2e8f0' }
                                }
                            }
                        }
                    });
                })
                .catch(error => {
                    console.error('Error loading survey performance:', error);
                    createFallbackPerformanceChart();
                });
        }

        function loadActivityChart() {
            fetch('@Url.Action("GetRealWeeklyActivity", "Admin")')
                .then(response => response.json())
                .then(data => {
                    const ctx = document.getElementById('activityChart').getContext('2d');

                    if (activityChart) {
                        activityChart.destroy();
                    }

                    const hasData = data && data.length > 0;

                    activityChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: hasData ? data.map(d => d.day) : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                            datasets: [{
                                label: 'Response Rate %',
                                data: hasData ? data.map(d => d.responseRate) : [0, 0, 0, 0, 0, 0, 0],
                                backgroundColor: 'rgba(16, 185, 129, 0.8)',
                                borderColor: '#10b981',
                                borderWidth: 2,
                                borderRadius: 4
                            }]
                        },
                        options: {
                            ...chartOptions,
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    max: 100,
                                    grid: { color: '#e2e8f0' }
                                },
                                x: {
                                    grid: { color: '#e2e8f0' }
                                }
                            },
                            plugins: {
                                ...chartOptions.plugins,
                                tooltip: {
                                    callbacks: {
                                        afterLabel: function(context) {
                                            if (hasData) {
                                                const dataPoint = data[context.dataIndex];
                                                return [
                                                    `Active Users: ${dataPoint.activeUsers}`,
                                                    `Responses: ${dataPoint.responses}`
                                                ];
                                            }
                                            return [];
                                        }
                                    }
                                }
                            }
                        }
                    });
                })
                .catch(error => {
                    console.error('Error loading weekly activity:', error);
                    createFallbackActivityChart();
                });
        }

        function refreshRealtimeData() {
            fetch('@Url.Action("GetRealTimeAnalytics", "Admin")')
                .then(response => response.json())
                .then(data => {
                    // Update real-time metrics
                    const totalQuestionnaires = document.getElementById('total-questionnaires');
                    const totalResponses = document.getElementById('total-responses');

                    if (totalQuestionnaires) totalQuestionnaires.textContent = data.totalQuestionnaires;
                    if (totalResponses) totalResponses.textContent = data.totalResponses;

                    console.log('Dashboard data refreshed at ' + new Date().toLocaleTimeString());
                })
                .catch(error => console.error('Error refreshing data:', error));
        }

        function animateProgressBars() {
            const progressBars = document.querySelectorAll('.progress-fill');
            progressBars.forEach(bar => {
                const width = bar.style.width;
                bar.style.width = '0%';
                setTimeout(() => {
                    bar.style.width = width;
                }, 500);
            });
        }

        function addHoverEffects() {
            const statCards = document.querySelectorAll('.stat-card');
            statCards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-5px) scale(1.02)';
                });
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0) scale(1)';
                });
            });
        }

        // Fallback chart functions
        function createFallbackResponseChart() {
            const ctx = document.getElementById('responseChart').getContext('2d');
            responseChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    datasets: [{
                        label: 'Survey Responses',
                        data: [5, 12, 8, 15, 20, 8, 6],
                        borderColor: '#667eea',
                        backgroundColor: 'rgba(102, 126, 234, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    ...chartOptions,
                    scales: {
                        y: { beginAtZero: true, grid: { color: '#e2e8f0' } },
                        x: { grid: { color: '#e2e8f0' } }
                    }
                }
            });
        }

        function createFallbackQuestionTypeChart() {
            const ctx = document.getElementById('questionTypeChart').getContext('2d');
            questionTypeChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['Multiple Choice', 'Open Ended', 'Likert Scale', 'Text Input', 'Rating'],
                    datasets: [{
                        data: [35, 25, 20, 12, 8],
                        backgroundColor: ['#667eea', '#764ba2', '#f093fb', '#f5576c', '#4facfe'],
                        borderWidth: 2,
                        borderColor: '#ffffff'
                    }]
                },
                options: { ...chartOptions, cutout: '60%' }
            });
        }

        function createFallbackPerformanceChart() {
            const ctx = document.getElementById('performanceChart').getContext('2d');
            performanceChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Survey 1', 'Survey 2', 'Survey 3'],
                    datasets: [{
                        label: 'Responses',
                        data: [25, 45, 30],
                        backgroundColor: 'rgba(102, 126, 234, 0.8)',
                        borderColor: '#667eea',
                        borderWidth: 2,
                        borderRadius: 4
                    }]
                },
                options: {
                    ...chartOptions,
                    scales: {
                        y: { beginAtZero: true, grid: { color: '#e2e8f0' } },
                        x: { grid: { color: '#e2e8f0' } }
                    }
                }
            });
        }

        function createFallbackActivityChart() {
            const ctx = document.getElementById('activityChart').getContext('2d');
            activityChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    datasets: [{
                        label: 'Response Rate %',
                        data: [45, 52, 48, 65, 72, 35, 28],
                        backgroundColor: 'rgba(16, 185, 129, 0.8)',
                        borderColor: '#10b981',
                        borderWidth: 2,
                        borderRadius: 4
                    }]
                },
                options: {
                    ...chartOptions,
                    scales: {
                        y: { beginAtZero: true, max: 100, grid: { color: '#e2e8f0' } },
                        x: { grid: { color: '#e2e8f0' } }
                    }
                }
            });
        }

        // Chart filter functionality
        document.getElementById('response-time-filter')?.addEventListener('change', function() {
            console.log('Filter changed to:', this.value, 'days');
            loadResponseTrends();
        });
    </script>
}