import SwiftUI

/// Screen 3: Name your home - Content only (no navigation bar)
struct OnboardingNameResidenceContent: View {
    @Binding var residenceName: String
    var onContinue: () -> Void

    @FocusState private var isTextFieldFocused: Bool
    @State private var isAnimating = false
    @Environment(\.colorScheme) var colorScheme

    private var isValid: Bool {
        !residenceName.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty
    }

    private let nameSuggestions = [
        "Casa de [Your Name]",
        "The Cozy Corner",
        "Home Sweet Home",
        "The Nest",
        "Château Us"
    ]

    var body: some View {
        ZStack {
            WarmGradientBackground()
                .a11yDecorative()

            // Decorative blobs
            GeometryReader { geo in
                OrganicBlobShape(variation: 2)
                    .fill(
                        RadialGradient(
                            colors: [
                                Color.appAccent.opacity(0.08),
                                Color.appAccent.opacity(0.02),
                                Color.clear
                            ],
                            center: .center,
                            startRadius: 0,
                            endRadius: geo.size.width * 0.35
                        )
                    )
                    .frame(width: geo.size.width * 0.6, height: geo.size.height * 0.35)
                    .offset(x: -geo.size.width * 0.15, y: geo.size.height * 0.05)
                    .blur(radius: 25)

                OrganicBlobShape(variation: 0)
                    .fill(
                        RadialGradient(
                            colors: [
                                Color.appPrimary.opacity(0.06),
                                Color.appPrimary.opacity(0.01),
                                Color.clear
                            ],
                            center: .center,
                            startRadius: 0,
                            endRadius: geo.size.width * 0.3
                        )
                    )
                    .frame(width: geo.size.width * 0.5, height: geo.size.height * 0.3)
                    .offset(x: geo.size.width * 0.55, y: geo.size.height * 0.6)
                    .blur(radius: 20)
            }
            .a11yDecorative()

            VStack(spacing: 0) {
                Spacer()

                // Content
                VStack(spacing: OrganicSpacing.comfortable) {
                    // Animated house icon
                    ZStack {
                        // Pulsing glow circles
                        Circle()
                            .fill(
                                RadialGradient(
                                    colors: [Color.appAccent.opacity(0.15), Color.clear],
                                    center: .center,
                                    startRadius: 30,
                                    endRadius: 80
                                )
                            )
                            .frame(width: 160, height: 160)
                            .offset(x: -20, y: -20)
                            .scaleEffect(isAnimating ? 1.1 : 1.0)
                            .animation(
                                isAnimating
                                    ? Animation.easeInOut(duration: 2.5).repeatForever(autoreverses: true)
                                    : .default,
                                value: isAnimating
                            )

                        Circle()
                            .fill(
                                RadialGradient(
                                    colors: [Color.appPrimary.opacity(0.15), Color.clear],
                                    center: .center,
                                    startRadius: 30,
                                    endRadius: 80
                                )
                            )
                            .frame(width: 160, height: 160)
                            .offset(x: 20, y: 20)
                            .scaleEffect(isAnimating ? 0.95 : 1.05)
                            .animation(
                                isAnimating
                                    ? Animation.easeInOut(duration: 3).repeatForever(autoreverses: true).delay(0.5)
                                    : .default,
                                value: isAnimating
                            )

                        // Main icon
                        Image("icon")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 100, height: 100)
                            .clipShape(RoundedRectangle(cornerRadius: 22, style: .continuous))
                            .naturalShadow(.pronounced)
                    }

                    // Title with playful wording
                    VStack(spacing: 12) {
                        Text("Let's give your place a name!")
                            .font(.system(size: 26, weight: .bold, design: .rounded))
                            .foregroundColor(Color.appTextPrimary)
                            .multilineTextAlignment(.center)
                            .accessibilityIdentifier(AccessibilityIdentifiers.Onboarding.nameResidenceTitle)
                            .a11yHeader()

                        Text("Don't worry, nothing's written in stone here.\nYou can always change it later in the app.")
                            .font(.system(size: 15, weight: .medium))
                            .foregroundColor(Color.appTextSecondary)
                            .multilineTextAlignment(.center)
                            .lineSpacing(4)
                    }

                    // Text field with organic styling
                    VStack(alignment: .leading, spacing: 12) {
                        HStack(spacing: 14) {
                            ZStack {
                                Circle()
                                    .fill(
                                        LinearGradient(
                                            colors: [Color.appPrimary.opacity(0.15), Color.appAccent.opacity(0.1)],
                                            startPoint: .topLeading,
                                            endPoint: .bottomTrailing
                                        )
                                    )
                                    .frame(width: 40, height: 40)

                                Image("outline")
                                    .renderingMode(.template)
                                    .resizable()
                                    .aspectRatio(contentMode: .fit)
                                    .frame(width: 18, height: 18)
                                    .foregroundStyle(
                                        LinearGradient(
                                            colors: [Color.appPrimary, Color.appAccent],
                                            startPoint: .topLeading,
                                            endPoint: .bottomTrailing
                                        )
                                    )
                            }

                            TextField("The Smith Residence", text: $residenceName)
                                .font(.system(size: 17, weight: .medium))
                                .textInputAutocapitalization(.words)
                                .focused($isTextFieldFocused)
                                .submitLabel(.continue)
                                .accessibilityIdentifier(AccessibilityIdentifiers.Onboarding.residenceNameField)
                                .accessibilityHint("Enter the name of your property")
                                .onSubmit {
                                    if isValid {
                                        onContinue()
                                    }
                                }

                            if !residenceName.isEmpty {
                                Button(action: { residenceName = "" }) {
                                    Image(systemName: "xmark.circle.fill")
                                        .font(.system(size: 20))
                                        .foregroundColor(Color.appTextSecondary.opacity(0.5))
                                }
                            }
                        }
                        .padding(18)
                        .background(
                            ZStack {
                                Color.appBackgroundSecondary
                                GrainTexture(opacity: 0.01)
                            }
                        )
                        .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
                        .overlay(
                            RoundedRectangle(cornerRadius: 20, style: .continuous)
                                .stroke(
                                    isTextFieldFocused
                                        ? LinearGradient(colors: [Color.appPrimary, Color.appAccent], startPoint: .leading, endPoint: .trailing)
                                        : LinearGradient(colors: [Color.appTextSecondary.opacity(0.2), Color.appTextSecondary.opacity(0.2)], startPoint: .leading, endPoint: .trailing),
                                    lineWidth: 2
                                )
                        )
                        .naturalShadow(isTextFieldFocused ? .medium : .subtle)
                        .animation(.easeInOut(duration: 0.2), value: isTextFieldFocused)

                        // Name suggestions
                        if residenceName.isEmpty {
                            VStack(alignment: .leading, spacing: 8) {
                                Text("Need inspiration?")
                                    .font(.system(size: 13, weight: .semibold))
                                    .foregroundColor(Color.appTextSecondary)
                                    .padding(.top, 4)

                                ScrollView(.horizontal, showsIndicators: false) {
                                    HStack(spacing: 10) {
                                        ForEach(nameSuggestions, id: \.self) { suggestion in
                                            Button(action: {
                                                withAnimation(.spring(response: 0.3)) {
                                                    residenceName = suggestion
                                                }
                                            }) {
                                                Text(suggestion)
                                                    .font(.system(size: 13, weight: .semibold))
                                                    .foregroundColor(Color.appPrimary)
                                                    .padding(.horizontal, 14)
                                                    .padding(.vertical, 10)
                                                    .background(Color.appPrimary.opacity(0.1))
                                                    .clipShape(Capsule())
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .padding(.horizontal, OrganicSpacing.comfortable)
                }

                Spacer()

                // Continue button
                Button(action: onContinue) {
                    HStack(spacing: 10) {
                        Text("That's Perfect!")
                            .font(.system(size: 17, weight: .bold))

                        Image(systemName: "arrow.right")
                            .font(.system(size: 16, weight: .bold))
                    }
                    .frame(maxWidth: .infinity)
                    .frame(height: 56)
                    .foregroundColor(Color.appTextOnPrimary)
                    .background(
                        isValid
                            ? AnyShapeStyle(LinearGradient(colors: [Color.appPrimary, Color.appSecondary], startPoint: .leading, endPoint: .trailing))
                            : AnyShapeStyle(Color.appTextSecondary.opacity(0.4))
                    )
                    .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
                    .naturalShadow(isValid ? .medium : .subtle)
                }
                .accessibilityIdentifier(AccessibilityIdentifiers.Onboarding.nameResidenceContinueButton)
                .disabled(!isValid)
                .padding(.horizontal, OrganicSpacing.comfortable)
                .padding(.bottom, OrganicSpacing.airy)
                .animation(.easeInOut(duration: 0.2), value: isValid)
            }
        }
        .onAppear {
            isAnimating = true
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                isTextFieldFocused = true
            }
        }
        .onDisappear {
            isAnimating = false
        }
    }
}

// MARK: - Legacy wrapper with navigation bar (for backwards compatibility)

struct OnboardingNameResidenceView: View {
    @Binding var residenceName: String
    var onContinue: () -> Void
    var onBack: () -> Void

    var body: some View {
        ZStack {
            WarmGradientBackground()

            VStack(spacing: 0) {
                // Navigation bar
                HStack {
                    Button(action: onBack) {
                        ZStack {
                            Circle()
                                .fill(Color.appPrimary.opacity(0.1))
                                .frame(width: 36, height: 36)

                            Image(systemName: "chevron.left")
                                .font(.system(size: 14, weight: .semibold))
                                .foregroundColor(Color.appPrimary)
                        }
                    }

                    Spacer()

                    OnboardingProgressIndicator(currentStep: 2, totalSteps: 5)

                    Spacer()

                    // Invisible spacer for alignment
                    Circle()
                        .fill(Color.clear)
                        .frame(width: 36, height: 36)
                }
                .padding(.horizontal, 20)
                .padding(.vertical, 12)

                OnboardingNameResidenceContent(
                    residenceName: $residenceName,
                    onContinue: onContinue
                )
            }
        }
    }
}

// MARK: - Preview

#Preview {
    OnboardingNameResidenceContent(
        residenceName: .constant(""),
        onContinue: {}
    )
}
