import SwiftUI

/// Today page — Weather-app style: a bold colored header with the day, then
/// one vivid gradient card per meal.
struct TodayView: View {
    @EnvironmentObject private var store: WatchWeekStore

    private var today: WatchWeekPayload.Day? {
        store.payload?.days.first(where: \.isToday) ?? store.payload?.days.first
    }

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 8) {
                if let today {
                    HStack(alignment: .firstTextBaseline) {
                        Text(today.title)
                            .font(.system(.title3, design: .rounded, weight: .bold))
                            .foregroundStyle(WatchTheme.coral)
                        Spacer()
                        Image(systemName: "fork.knife")
                            .font(.caption)
                            .foregroundStyle(.secondary)
                    }
                    .padding(.horizontal, 2)

                    ForEach(Array(today.meals.enumerated()), id: \.offset) { _, meal in
                        MealCard(meal: meal)
                    }
                } else {
                    EmptySyncView()
                }
            }
        }
    }
}

struct MealCard: View {
    let meal: WatchWeekPayload.Meal

    private var accent: Color { WatchTheme.accent(for: meal.type) }

    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            HStack(spacing: 5) {
                Image(systemName: WatchWeekPayload.icon(for: meal.type))
                    .font(.system(size: 11, weight: .bold))
                Text(meal.label.uppercased())
                    .font(.system(size: 11, weight: .bold, design: .rounded))
                    .tracking(0.5)
            }
            .foregroundStyle(.white.opacity(0.85))

            Text(meal.name ?? "—")
                .font(.system(.body, design: .rounded, weight: .semibold))
                .foregroundStyle(.white)
                .lineLimit(2)
                .minimumScaleFactor(0.8)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(.horizontal, 10)
        .padding(.vertical, 9)
        .background(
            LinearGradient(
                colors: [accent, accent.opacity(0.65)],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            ),
            in: RoundedRectangle(cornerRadius: 12)
        )
    }
}

struct EmptySyncView: View {
    var body: some View {
        VStack(spacing: 8) {
            Image(systemName: "applewatch.radiowaves.left.and.right")
                .font(.title3)
                .foregroundStyle(WatchTheme.coral)
            // Payload arrives fully localized from the iPhone; the watch
            // bundle carries no strings of its own, so this stays neutral.
            Text(verbatim: "MealMood")
                .font(.system(.caption2, design: .rounded, weight: .semibold))
            Image(systemName: "iphone.gen3")
                .font(.caption2)
                .foregroundStyle(.secondary)
        }
        .frame(maxWidth: .infinity)
        .padding(.top, 24)
    }
}