Analytics Dashboard

import SwiftUI
import Charts

struct AnalyticsDashboardView: View {
    // Sample data
    @State private var selectedTimeRange = "Last 7 Days"
    @State private var showingDatePicker = false
    
    let timeRanges = ["Last 7 Days", "Last 30 Days", "Last 3 Months"]
    
    // Dummy data for metrics
    let metrics: [AnalyticsMetric] = [
        AnalyticsMetric(title: "Active Users", value: "45.2K", trend: "+12%", isPositive: true),
        AnalyticsMetric(title: "Revenue", value: "$28.5K", trend: "+8%", isPositive: true),
        AnalyticsMetric(title: "Session Time", value: "24m", trend: "-5%", isPositive: false),
        AnalyticsMetric(title: "Conversion", value: "3.8%", trend: "+2%", isPositive: true)
    ]
    
    // Dummy data for charts
    let userActivityData: [DataPoint] = [
        DataPoint(date: "Mon", value: 2500),
        DataPoint(date: "Tue", value: 3200),
        DataPoint(date: "Wed", value: 2800),
        DataPoint(date: "Thu", value: 3800),
        DataPoint(date: "Fri", value: 4200),
        DataPoint(date: "Sat", value: 3600),
        DataPoint(date: "Sun", value: 3900)
    ]
    
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack(spacing: 20) {
                    // Time range picker
                    timeRangeSelector
                    
                    // Metrics grid
                    LazyVGrid(columns: [
                        GridItem(.flexible()),
                        GridItem(.flexible())
                    ], spacing: 16) {
                        ForEach(metrics) { metric in
                            MetricCards(metric: metric)
                        }
                    }
                    .padding(.horizontal)
                    
                    // Charts section
                    VStack(alignment: .leading, spacing: 20) {
                        Text("User Activity")
                            .font(.title2)
                            .bold()
                            .padding(.horizontal)
                        
                        Chart {
                            ForEach(userActivityData) { point in
                                LineMark(
                                    x: .value("Day", point.date),
                                    y: .value("Users", point.value)
                                )
                                .foregroundStyle(Color.blue.gradient)
                                
                                AreaMark(
                                    x: .value("Day", point.date),
                                    y: .value("Users", point.value)
                                )
                                .foregroundStyle(Color.blue.opacity(0.1))
                            }
                        }
                        .frame(height: 200)
                        .padding()
                        .background(Color(uiColor: .systemBackground))
                        .cornerRadius(12)
                        .shadow(radius: 2)
                        .padding(.horizontal)
                    }
                    
                    // Platform distribution
                    PlatformDistributionView()
                }
                .padding(.vertical)
            }
            .navigationTitle("Analytics")
            .background(Color(uiColor: .systemGroupedBackground))
        }
    }
    
    private var timeRangeSelector: some View {
        Menu {
            ForEach(timeRanges, id: \.self) { range in
                Button(action: {
                    selectedTimeRange = range
                }) {
                    Text(range)
                }
            }
        } label: {
            HStack {
                Text(selectedTimeRange)
                    .foregroundColor(.primary)
                Image(systemName: "chevron.down")
                    .foregroundColor(.blue)
            }
            .padding()
            .background(Color(uiColor: .systemBackground))
            .cornerRadius(10)
        }
    }
}

struct MetricCards: View {
    let metric: AnalyticsMetric
    
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text(metric.title)
                .font(.subheadline)
                .foregroundColor(.secondary)
            
            HStack(alignment: .firstTextBaseline) {
                Text(metric.value)
                    .font(.title2)
                    .bold()
                
                Spacer()
                
                Text(metric.trend)
                    .font(.footnote)
                    .foregroundColor(metric.isPositive ? .green : .red)
                    .padding(.horizontal, 8)
                    .padding(.vertical, 4)
                    .background(
                        (metric.isPositive ? Color.green : Color.red)
                            .opacity(0.1)
                    )
                    .cornerRadius(8)
            }
        }
        .padding()
        .background(Color(uiColor: .systemBackground))
        .cornerRadius(12)
        .shadow(radius: 2)
    }
}

struct PlatformDistributionView: View {
    let platforms = [
        ("iOS", 65.0, Color.blue),
        ("Android", 30.0, Color.green),
        ("Web", 5.0, Color.orange)
    ]
    
    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            Text("Platform Distribution")
                .font(.title2)
                .bold()
                .padding(.horizontal)
            
            VStack(spacing: 12) {
                ForEach(platforms, id: \.0) { platform, percentage, color in
                    HStack {
                        Text(platform)
                            .frame(width: 80, alignment: .leading)
                        
                        GeometryReader { geometry in
                            ZStack(alignment: .leading) {
                                Rectangle()
                                    .fill(Color(uiColor: .systemGray5))
                                
                                Rectangle()
                                    .fill(color)
                                    .frame(width: geometry.size.width * percentage / 100)
                            }
                        }
                        .frame(height: 8)
                        .cornerRadius(4)
                        
                        Text("\(Int(percentage))%")
                            .frame(width: 50)
                    }
                }
            }
            .padding()
            .background(Color(uiColor: .systemBackground))
            .cornerRadius(12)
            .shadow(radius: 2)
            .padding(.horizontal)
        }
    }
}

// Models
struct AnalyticsMetric: Identifiable {
    let id = UUID()
    let title: String
    let value: String
    let trend: String
    let isPositive: Bool
}

struct DataPoint: Identifiable {
    let id = UUID()
    let date: String
    let value: Double
}