import SwiftUI
import Charts

struct TimeSeriesView: View {
    @Environment(\.dismiss) private var dismiss
    @StateObject private var viewModel: TimeSeriesViewModel
    @State private var showTableView = false
    
    init(groupId: Int?, groupName: String) {
        _viewModel = StateObject(wrappedValue: TimeSeriesViewModel(groupId: groupId, groupName: groupName))
    }
    
    var body: some View {
        NavigationView {
            VStack(spacing: 0) {
                // Competence Picker
                Picker("Kompetenz", selection: $viewModel.selectedCompetence) {
                    ForEach(0..<6, id: \.self) { i in
                        Text(Norms.kompetenzen[i]).tag(i)
                    }
                }
                .pickerStyle(.segmented)
                .padding()
                
                if viewModel.isLoading {
                    Spacer()
                    ProgressView()
                    Spacer()
                } else if viewModel.timeSeriesData.isEmpty {
                    Spacer()
                    ContentUnavailableView(
                        "Keine Daten",
                        systemImage: "chart.line.uptrend.xyaxis",
                        description: Text("Für diese Gruppe wurden keine Profile gefunden.")
                    )
                    Spacer()
                } else {
                    // Chart
                    Chart {
                        ForEach(viewModel.chartData.indices, id: \.self) { i in
                            let point = viewModel.chartData[i]
                            LineMark(
                                x: .value("Profil", point.name),
                                y: .value("Wert", point.value)
                            )
                            .foregroundStyle(.blue)
                            
                            PointMark(
                                x: .value("Profil", point.name),
                                y: .value("Wert", point.value)
                            )
                            .foregroundStyle(.blue)
                        }
                    }
                    .frame(height: 300)
                    .padding()
                    .chartYScale(domain: 1...5)
                    
                    Divider()
                    
                    // Table View (optional)
                    DisclosureGroup("Details anzeigen", isExpanded: $showTableView) {
                        ScrollView(.horizontal) {
                            VStack(alignment: .leading, spacing: 0) {
                                // Header
                                HStack(spacing: 0) {
                                    Text("Profilname")
                                        .font(.headline)
                                        .frame(width: 150, alignment: .leading)
                                        .padding(.horizontal, 8)
                                    ForEach(0..<6, id: \.self) { i in
                                        Text(Norms.kompetenzen[i])
                                            .font(.caption)
                                            .frame(width: 80, alignment: .center)
                                    }
                                }
                                .padding(.vertical, 8)
                                .background(Color.gray.opacity(0.2))
                                
                                Divider()
                                
                                // Rows
                                ForEach(viewModel.tableData.indices, id: \.self) { i in
                                    let row = viewModel.tableData[i]
                                    HStack(spacing: 0) {
                                        Text(row.profileName)
                                            .font(.subheadline)
                                            .frame(width: 150, alignment: .leading)
                                            .padding(.horizontal, 8)
                                        ForEach(0..<6, id: \.self) { j in
                                            Text("\(row.values[j])")
                                                .font(.subheadline)
                                                .frame(width: 80, alignment: .center)
                                        }
                                    }
                                    .padding(.vertical, 6)
                                    
                                    if i < viewModel.tableData.count - 1 {
                                        Divider()
                                    }
                                }
                            }
                        }
                        .padding()
                    }
                    .padding()
                }
            }
            .navigationTitle("Zeitreihe - \(viewModel.groupName)")
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("Schließen") { dismiss() }
                }
                ToolbarItem(placement: .primaryAction) {
                    Button(action: { Task { await viewModel.loadTimeSeriesData() } }) {
                        Image(systemName: "arrow.clockwise")
                    }
                }
            }
        }
        .task {
            await viewModel.loadTimeSeriesData()
        }
    }
}