import SwiftUI

struct ContentView: View {
    @State private var today: Double = 1500
    private let goal: Double = 2500
    private let week: [(String, Double)] = [("Wed", 2100), ("Thu", 2600), ("Fri", 1800), ("Sat", 2400), ("Sun", 2750), ("Mon", 1950)]

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 24) {
                HStack {
                    VStack(alignment: .leading, spacing: 2) {
                        Text("Tuesday, Oct 14").font(.subheadline.weight(.medium)).foregroundStyle(.teal)
                        Text("HydroRing").font(.largeTitle.bold())
                    }
                    Spacer()
                    Image(systemName: "drop.fill").font(.title2).foregroundStyle(.white)
                        .frame(width: 48, height: 48).background(.teal.gradient, in: RoundedRectangle(cornerRadius: 14))
                }
                ZStack {
                    Circle().stroke(Color.teal.opacity(0.15), lineWidth: 20)
                    Circle().trim(from: 0, to: min(today / goal, 1))
                        .stroke(AngularGradient(colors: [.teal, .blue], center: .center), style: StrokeStyle(lineWidth: 20, lineCap: .round))
                        .rotationEffect(.degrees(-90))
                    VStack(spacing: 4) {
                        Text(String(format: "%.2f L", today / 1000)).font(.system(size: 40, weight: .bold, design: .rounded))
                        Text("of 2.5 L goal").font(.subheadline).foregroundStyle(.secondary)
                    }
                }
                .frame(width: 220, height: 220).frame(maxWidth: .infinity)
                HStack(spacing: 12) {
                    addButton("Glass", "+250 ml", "cup.and.saucer.fill", 250)
                    addButton("Bottle", "+500 ml", "waterbottle.fill", 500)
                }
                VStack(alignment: .leading, spacing: 12) {
                    Text("Last 7 days").font(.headline)
                    HStack(alignment: .bottom, spacing: 10) {
                        ForEach(week + [("Today", today)], id: \.0) { day in
                            VStack(spacing: 6) {
                                RoundedRectangle(cornerRadius: 6).fill(day.1 >= goal ? Color.blue : Color.teal.opacity(0.5))
                                    .frame(height: CGFloat(min(day.1 / 3000, 1)) * 110)
                                Text(day.0).font(.caption2).foregroundStyle(.secondary)
                            }
                        }
                    }
                    .frame(height: 130, alignment: .bottom)
                }
                .padding(18).background(Color(.secondarySystemBackground), in: RoundedRectangle(cornerRadius: 22))
            }
            .padding(20)
        }
    }

    private func addButton(_ title: String, _ amount: String, _ icon: String, _ ml: Double) -> some View {
        Button { today += ml } label: {
            HStack(spacing: 10) {
                Image(systemName: icon).font(.title2).foregroundStyle(.teal)
                VStack(alignment: .leading) {
                    Text(title).font(.headline).foregroundStyle(.primary)
                    Text(amount).font(.subheadline).foregroundStyle(.secondary)
                }
                Spacer()
            }
            .padding(16).background(Color(.secondarySystemBackground), in: RoundedRectangle(cornerRadius: 18))
        }
    }
}

#Preview {
    ContentView()
}