//
//  HomeContent_MaximalistChaos.swift
//  SportsTime
//
//  MAXIMALIST CHAOS: More is more. Patterns, gradients, overlapping elements.
//  Controlled visual chaos with sports memorabilia collage aesthetic.
//

import SwiftUI
import SwiftData

struct HomeContent_MaximalistChaos: View {
    @Environment(\.colorScheme) private var colorScheme
    @Binding var showNewTrip: Bool
    @Binding var selectedTab: Int
    @Binding var selectedSuggestedTrip: SuggestedTrip?

    let savedTrips: [SavedTrip]
    let suggestedTripsGenerator: SuggestedTripsGenerator
    let displayedTips: [PlanningTip]

    // Chaotic color palette
    private let hotOrange = Color(red: 1.0, green: 0.4, blue: 0.0)
    private let electricPurple = Color(red: 0.6, green: 0.0, blue: 1.0)
    private let limeGreen = Color(red: 0.5, green: 1.0, blue: 0.0)
    private let hotPink = Color(red: 1.0, green: 0.0, blue: 0.5)
    private let skyBlue = Color(red: 0.0, green: 0.7, blue: 1.0)

    var body: some View {
        ZStack {
            // Chaotic background pattern
            chaoticBackground

            ScrollView {
                ZStack {
                    // Floating decorative elements
                    floatingDecorations

                    VStack(spacing: 20) {
                        // MAXIMALIST HERO
                        maximalistHero
                            .padding(.top, 40)
                            .padding(.horizontal, 16)

                        // FEATURED TRIPS - Stacked chaos
                        if !suggestedTripsGenerator.suggestedTrips.isEmpty {
                            featuredSection
                                .padding(.horizontal, 16)
                        }

                        // SAVED TRIPS
                        if !savedTrips.isEmpty {
                            savedSection
                                .padding(.horizontal, 16)
                        }

                        Spacer(minLength: 60)
                    }
                }
            }
        }
    }

    // MARK: - Chaotic Background

    private var chaoticBackground: some View {
        ZStack {
            // Base gradient
            LinearGradient(
                colors: colorScheme == .dark
                    ? [Color(red: 0.1, green: 0.0, blue: 0.15), Color(red: 0.0, green: 0.1, blue: 0.15)]
                    : [Color(red: 1.0, green: 0.95, blue: 0.9), Color(red: 0.95, green: 0.9, blue: 1.0)],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
            .ignoresSafeArea()

            // Diagonal stripes
            GeometryReader { geo in
                ForEach(0..<20, id: \.self) { i in
                    Rectangle()
                        .fill(hotOrange.opacity(0.05))
                        .frame(width: 30, height: geo.size.height * 2)
                        .rotationEffect(.degrees(45))
                        .offset(x: CGFloat(i * 60) - 200)
                }
            }
            .allowsHitTesting(false)

            // Random circles
            Circle()
                .fill(electricPurple.opacity(0.1))
                .frame(width: 300, height: 300)
                .offset(x: 150, y: -100)

            Circle()
                .fill(limeGreen.opacity(0.1))
                .frame(width: 200, height: 200)
                .offset(x: -100, y: 300)

            Circle()
                .fill(hotPink.opacity(0.08))
                .frame(width: 250, height: 250)
                .offset(x: 100, y: 500)
        }
    }

    // MARK: - Floating Decorations

    private var floatingDecorations: some View {
        ZStack {
            // Sports icons scattered
            Image(systemName: "sportscourt.fill")
                .font(.system(size: 60))
                .foregroundStyle(hotOrange.opacity(0.15))
                .rotationEffect(.degrees(-15))
                .offset(x: 120, y: 50)

            Image(systemName: "ticket.fill")
                .font(.system(size: 50))
                .foregroundStyle(electricPurple.opacity(0.15))
                .rotationEffect(.degrees(20))
                .offset(x: -100, y: 200)

            Image(systemName: "car.fill")
                .font(.system(size: 45))
                .foregroundStyle(limeGreen.opacity(0.15))
                .rotationEffect(.degrees(-10))
                .offset(x: 80, y: 400)

            Image(systemName: "map.fill")
                .font(.system(size: 55))
                .foregroundStyle(hotPink.opacity(0.12))
                .rotationEffect(.degrees(25))
                .offset(x: -80, y: 600)
        }
        .allowsHitTesting(false)
    }

    // MARK: - Maximalist Hero

    private var maximalistHero: some View {
        ZStack {
            // Multiple layered backgrounds
            RoundedRectangle(cornerRadius: 20)
                .fill(electricPurple.opacity(colorScheme == .dark ? 0.3 : 0.15))
                .offset(x: 8, y: 8)
                .rotationEffect(.degrees(2))

            RoundedRectangle(cornerRadius: 20)
                .fill(hotOrange.opacity(colorScheme == .dark ? 0.3 : 0.15))
                .offset(x: -4, y: 4)
                .rotationEffect(.degrees(-1))

            // Main card
            VStack(spacing: 16) {
                // Stacked badges
                HStack(spacing: 8) {
                    ForEach(["🏟️", "🚗", "⚾", "🏀", "🏈"], id: \.self) { emoji in
                        Text(emoji)
                            .font(.system(size: 20))
                            .padding(8)
                            .background(
                                Circle()
                                    .fill(Color.white.opacity(colorScheme == .dark ? 0.1 : 0.8))
                            )
                    }
                }

                // Title with multiple colors
                HStack(spacing: 4) {
                    Text("SPORTS")
                        .foregroundStyle(hotOrange)
                    Text("TIME")
                        .foregroundStyle(electricPurple)
                    Text("!")
                        .foregroundStyle(limeGreen)
                }
                .font(.system(size: 36, weight: .black, design: .rounded))

                // Subtitle in pill
                Text("THE ULTIMATE ROAD TRIP EXPERIENCE")
                    .font(.system(size: 11, weight: .bold))
                    .tracking(2)
                    .foregroundStyle(.white)
                    .padding(.horizontal, 16)
                    .padding(.vertical, 8)
                    .background(
                        Capsule()
                            .fill(
                                LinearGradient(
                                    colors: [hotPink, electricPurple],
                                    startPoint: .leading,
                                    endPoint: .trailing
                                )
                            )
                    )

                // CTA Button - Maximalist style
                Button {
                    showNewTrip = true
                } label: {
                    ZStack {
                        // Shadow layers
                        RoundedRectangle(cornerRadius: 16)
                            .fill(limeGreen)
                            .offset(x: 4, y: 4)

                        RoundedRectangle(cornerRadius: 16)
                            .fill(hotPink)
                            .offset(x: 2, y: 2)

                        HStack {
                            Text("START PLANNING")
                                .font(.system(size: 16, weight: .black))

                            Image(systemName: "arrow.right.circle.fill")
                                .font(.system(size: 20))
                        }
                        .foregroundStyle(.black)
                        .padding(.horizontal, 24)
                        .padding(.vertical, 16)
                        .background(hotOrange)
                        .clipShape(RoundedRectangle(cornerRadius: 16))
                    }
                }
                .padding(.top, 8)
            }
            .padding(24)
            .background(
                RoundedRectangle(cornerRadius: 20)
                    .fill(colorScheme == .dark ? Color.white.opacity(0.1) : Color.white.opacity(0.9))
                    .overlay(
                        RoundedRectangle(cornerRadius: 20)
                            .stroke(
                                LinearGradient(
                                    colors: [hotOrange, electricPurple, limeGreen, hotPink],
                                    startPoint: .topLeading,
                                    endPoint: .bottomTrailing
                                ),
                                lineWidth: 3
                            )
                    )
            )
        }
    }

    // MARK: - Featured Section

    private var featuredSection: some View {
        VStack(alignment: .leading, spacing: 16) {
            // Header with multiple elements
            HStack {
                // Stacked text
                VStack(alignment: .leading, spacing: 0) {
                    Text("FEATURED")
                        .font(.system(size: 10, weight: .bold))
                        .foregroundStyle(hotPink)
                    Text("TRIPS")
                        .font(.system(size: 22, weight: .black))
                        .foregroundStyle(colorScheme == .dark ? .white : .black)
                }

                Spacer()

                // Refresh with chaos
                Button {
                    Task {
                        await suggestedTripsGenerator.refreshTrips()
                    }
                } label: {
                    ZStack {
                        Circle()
                            .fill(limeGreen.opacity(0.3))
                            .frame(width: 44, height: 44)
                            .offset(x: 2, y: 2)

                        Image(systemName: "arrow.clockwise")
                            .font(.system(size: 16, weight: .bold))
                            .foregroundStyle(limeGreen)
                            .padding(12)
                            .background(Circle().fill(colorScheme == .dark ? Color.white.opacity(0.1) : .white))
                    }
                }
            }

            // Chaotic card stack
            ForEach(Array(suggestedTripsGenerator.suggestedTrips.prefix(4).enumerated()), id: \.element.id) { index, suggestedTrip in
                Button {
                    selectedSuggestedTrip = suggestedTrip
                } label: {
                    chaoticTripCard(suggestedTrip.trip, colorIndex: index)
                }
                .buttonStyle(.plain)
            }
        }
    }

    private func chaoticTripCard(_ trip: Trip, colorIndex: Int) -> some View {
        let colors = [hotOrange, electricPurple, limeGreen, hotPink, skyBlue]
        let accentColor = colors[colorIndex % colors.count]

        return ZStack {
            // Shadow offset
            RoundedRectangle(cornerRadius: 16)
                .fill(accentColor.opacity(0.4))
                .offset(x: 4, y: 4)

            HStack(spacing: 14) {
                // Sport icon in chaotic circle
                ZStack {
                    Circle()
                        .fill(accentColor.opacity(0.3))
                        .frame(width: 54, height: 54)
                        .offset(x: 2, y: 2)

                    Circle()
                        .fill(colorScheme == .dark ? Color.white.opacity(0.15) : .white)
                        .frame(width: 50, height: 50)

                    Image(systemName: trip.uniqueSports.first?.iconName ?? "sportscourt")
                        .font(.system(size: 22))
                        .foregroundStyle(accentColor)
                }

                VStack(alignment: .leading, spacing: 6) {
                    Text(trip.displayName)
                        .font(.system(size: 16, weight: .bold, design: .rounded))
                        .foregroundStyle(colorScheme == .dark ? .white : .black)
                        .lineLimit(1)

                    HStack(spacing: 8) {
                        Text("\(trip.stops.count) CITIES")
                            .font(.system(size: 10, weight: .black))
                            .padding(.horizontal, 8)
                            .padding(.vertical, 4)
                            .background(accentColor)
                            .foregroundStyle(.white)

                        Text("\(trip.totalGames) GAMES")
                            .font(.system(size: 10, weight: .black))
                            .padding(.horizontal, 8)
                            .padding(.vertical, 4)
                            .background(colors[(colorIndex + 1) % colors.count])
                            .foregroundStyle(.white)
                    }
                }

                Spacer()

                Image(systemName: "chevron.right.circle.fill")
                    .font(.system(size: 24))
                    .foregroundStyle(accentColor)
            }
            .padding(16)
            .background(
                RoundedRectangle(cornerRadius: 16)
                    .fill(colorScheme == .dark ? Color.white.opacity(0.08) : Color.white.opacity(0.95))
                    .overlay(
                        RoundedRectangle(cornerRadius: 16)
                            .stroke(accentColor.opacity(0.5), lineWidth: 2)
                    )
            )
        }
    }

    // MARK: - Saved Section

    private var savedSection: some View {
        VStack(alignment: .leading, spacing: 16) {
            HStack {
                VStack(alignment: .leading, spacing: 0) {
                    Text("YOUR")
                        .font(.system(size: 10, weight: .bold))
                        .foregroundStyle(skyBlue)
                    Text("TRIPS")
                        .font(.system(size: 22, weight: .black))
                        .foregroundStyle(colorScheme == .dark ? .white : .black)
                }

                Spacer()

                Button {
                    selectedTab = 2
                } label: {
                    Text("VIEW ALL →")
                        .font(.system(size: 12, weight: .bold))
                        .foregroundStyle(skyBlue)
                }
            }

            ForEach(Array(savedTrips.prefix(3).enumerated()), id: \.element.id) { index, savedTrip in
                if let trip = savedTrip.trip {
                    NavigationLink {
                        TripDetailView(trip: trip)
                    } label: {
                        let colors = [skyBlue, hotOrange, electricPurple]
                        let accentColor = colors[index % colors.count]

                        HStack {
                            Rectangle()
                                .fill(accentColor)
                                .frame(width: 6)

                            Text(trip.displayName)
                                .font(.system(size: 14, weight: .semibold, design: .rounded))
                                .foregroundStyle(colorScheme == .dark ? .white : .black)

                            Spacer()

                            Text("\(trip.stops.count)")
                                .font(.system(size: 14, weight: .black))
                                .foregroundStyle(.white)
                                .padding(.horizontal, 12)
                                .padding(.vertical, 6)
                                .background(accentColor)
                                .clipShape(Capsule())
                        }
                        .padding(.vertical, 14)
                        .padding(.horizontal, 12)
                        .background(
                            RoundedRectangle(cornerRadius: 12)
                                .fill(colorScheme == .dark ? Color.white.opacity(0.05) : Color.white.opacity(0.8))
                                .overlay(
                                    RoundedRectangle(cornerRadius: 12)
                                        .stroke(accentColor.opacity(0.3), lineWidth: 1)
                                )
                        )
                    }
                    .buttonStyle(.plain)
                }
            }
        }
    }
}
