import SwiftUI

struct TaskItem: Identifiable { let id = UUID(); let text: String; let group: String; var done: Bool }

struct TasksView: View {
    @State private var items: [TaskItem] = [
        .init(text: "Ship the landing page", group: "Today", done: false),
        .init(text: "Review pull requests", group: "Today", done: false),
        .init(text: "Reply to Dana", group: "Today", done: true),
        .init(text: "Plan Q3 roadmap", group: "Upcoming", done: false),
        .init(text: "Book dentist", group: "Upcoming", done: false)
    ]
    private var done: Int { items.filter(\.done).count }

    var body: some View {
        ZStack {
            Color(red: 0.04, green: 0.04, blue: 0.07).ignoresSafeArea()
            ScrollView {
                VStack(alignment: .leading, spacing: 16) {
                    Text("TASKS").font(.caption).bold().foregroundColor(Color(red: 0.39, green: 0.4, blue: 0.95))
                    Text("\(done) of \(items.count) done").font(.system(size: 30, weight: .heavy)).foregroundColor(.white)
                    ProgressView(value: Double(done), total: Double(items.count))
                        .tint(Color(red: 0.39, green: 0.4, blue: 0.95))

                    ForEach(["Today", "Upcoming"], id: \.self) { group in
                        Text(group.uppercased()).font(.caption).bold().foregroundColor(.gray).padding(.top, 10)
                        ForEach($items) { $item in
                            if item.group == group {
                                Button { item.done.toggle() } label: {
                                    HStack {
                                        Image(systemName: item.done ? "checkmark.square.fill" : "square")
                                            .foregroundColor(item.done ? Color(red: 0.39, green: 0.4, blue: 0.95) : .gray)
                                        Text(item.text)
                                            .strikethrough(item.done)
                                            .foregroundColor(item.done ? .gray : .white)
                                        Spacer()
                                    }
                                    .padding(14)
                                    .background(Color.white.opacity(0.04)).cornerRadius(14)
                                }
                            }
                        }
                    }
                }
                .padding(22)
            }
        }
    }
}

#Preview { TasksView() }