import SwiftUI
import Bedrock

/// A sheet that displays header layout options as a live preview carousel.
struct HeaderLayoutPickerView: View {
    @Environment(\.dismiss) private var dismiss
    
    @Binding var selectedLayout: CardHeaderLayout
    let photoData: Data?
    let coverPhotoData: Data?
    let logoData: Data?
    let avatarSystemName: String
    let theme: CardTheme
    let displayName: String
    let role: String
    let company: String
    
    @State private var currentLayout: CardHeaderLayout
    
    init(
        selectedLayout: Binding<CardHeaderLayout>,
        photoData: Data?,
        coverPhotoData: Data?,
        logoData: Data?,
        avatarSystemName: String,
        theme: CardTheme,
        displayName: String,
        role: String,
        company: String
    ) {
        self._selectedLayout = selectedLayout
        self.photoData = photoData
        self.coverPhotoData = coverPhotoData
        self.logoData = logoData
        self.avatarSystemName = avatarSystemName
        self.theme = theme
        self.displayName = displayName
        self.role = role
        self.company = company
        self._currentLayout = State(initialValue: selectedLayout.wrappedValue)
    }
    
    private var suggestedLayout: CardHeaderLayout {
        CardHeaderLayout.suggested(
            hasProfile: photoData != nil,
            hasCover: coverPhotoData != nil,
            hasLogo: logoData != nil
        )
    }
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 0) {
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(spacing: Design.Spacing.large) {
                        ForEach(CardHeaderLayout.allCases) { layout in
                            LayoutPreviewCard(
                                layout: layout,
                                isSelected: currentLayout == layout,
                                isSuggested: layout == suggestedLayout,
                                photoData: photoData,
                                coverPhotoData: coverPhotoData,
                                logoData: logoData,
                                avatarSystemName: avatarSystemName,
                                theme: theme
                            ) {
                                withAnimation(.snappy(duration: Design.Animation.quick)) {
                                    currentLayout = layout
                                }
                            }
                        }
                    }
                    .padding(.horizontal, Design.Spacing.xLarge)
                    .padding(.vertical, Design.Spacing.large)
                }
                .scrollClipDisabled()
                
                Spacer()
                
                Button {
                    selectedLayout = currentLayout
                    dismiss()
                } label: {
                    Text("Confirm layout")
                        .font(.headline)
                        .foregroundStyle(.white)
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, Design.Spacing.large)
                        .background(.black)
                        .clipShape(.rect(cornerRadius: Design.CornerRadius.medium))
                }
                .padding(.horizontal, Design.Spacing.xLarge)
                .padding(.bottom, Design.Spacing.xLarge)
            }
            .background(Color.AppBackground.base)
            .navigationTitle("Choose a layout")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button {
                        dismiss()
                    } label: {
                        Image(systemName: "xmark")
                            .font(.body)
                            .foregroundStyle(Color.Text.primary)
                    }
                }
            }
        }
    }
}

// MARK: - Layout Preview Card

private struct LayoutPreviewCard: View {
    let layout: CardHeaderLayout
    let isSelected: Bool
    let isSuggested: Bool
    let photoData: Data?
    let coverPhotoData: Data?
    let logoData: Data?
    let avatarSystemName: String
    let theme: CardTheme
    let onSelect: () -> Void
    
    private let cardWidth: CGFloat = 200
    private let cardHeight: CGFloat = 280
    private let bannerHeight: CGFloat = 100
    private let avatarSize: CGFloat = 56
    private let logoRectWidth: CGFloat = 84 // 56 * 1.5 aspect ratio
    
    private var needsMoreImages: Bool {
        !layout.hasAllRequiredImages(
            hasProfile: photoData != nil,
            hasCover: coverPhotoData != nil,
            hasLogo: logoData != nil
        )
    }
    
    private var hasOverlappingContent: Bool {
        layout.hasOverlappingContent
    }
    
    var body: some View {
        Button(action: onSelect) {
            VStack(spacing: 0) {
                ZStack(alignment: .top) {
                    VStack(spacing: 0) {
                        bannerContent
                            .frame(height: bannerHeight)
                            .clipped()
                        
                        contentArea
                            .offset(y: hasOverlappingContent ? -avatarSize / 2 : 0)
                            .padding(.bottom, hasOverlappingContent ? -avatarSize / 2 : 0)
                    }
                    .frame(width: cardWidth, height: cardHeight)
                    .background(Color.AppBackground.elevated)
                    .clipShape(.rect(cornerRadius: Design.CornerRadius.large))
                    .overlay(
                        RoundedRectangle(cornerRadius: Design.CornerRadius.large)
                            .stroke(isSelected ? theme.primaryColor : .clear, lineWidth: Design.LineWidth.thick)
                    )
                    .shadow(color: Color.Text.secondary.opacity(Design.Opacity.subtle), radius: Design.Shadow.radiusMedium, y: Design.Shadow.offsetMedium)
                    
                    badgeOverlay
                        .offset(y: -Design.Spacing.small)
                }
            }
        }
        .buttonStyle(.plain)
        .accessibilityLabel(layout.displayName)
        .accessibilityValue(isSelected ? String(localized: "Selected") : "")
        .accessibilityHint(layout.description)
        .accessibilityAddTraits(isSelected ? [.isSelected] : [])
    }
    
    // MARK: - Banner Content
    
    @ViewBuilder
    private var bannerContent: some View {
        switch layout.bannerContent {
        case .profile:
            profileBannerPreview
        case .logo:
            logoBannerPreview
        case .cover:
            coverBannerPreview
        }
    }
    
    private var profileBannerPreview: some View {
        ZStack {
            if let photoData, let uiImage = UIImage(data: photoData) {
                Image(uiImage: uiImage)
                    .resizable()
                    .scaledToFill()
            } else {
                LinearGradient(colors: [theme.primaryColor, theme.secondaryColor], startPoint: .topLeading, endPoint: .bottomTrailing)
                
                VStack(spacing: Design.Spacing.xxSmall) {
                    Image(systemName: "person.fill")
                        .font(.system(size: Design.BaseFontSize.title))
                    Text("Profile")
                        .font(.caption)
                        .bold()
                }
                .foregroundStyle(theme.textColor.opacity(Design.Opacity.medium))
            }
        }
    }
    
    private var logoBannerPreview: some View {
        ZStack {
            LinearGradient(colors: [theme.primaryColor, theme.secondaryColor], startPoint: .topLeading, endPoint: .bottomTrailing)
            
            if let logoData, let uiImage = UIImage(data: logoData) {
                Image(uiImage: uiImage)
                    .resizable()
                    .scaledToFill()
            } else {
                VStack(spacing: Design.Spacing.xxSmall) {
                    Image(systemName: "building.2.fill")
                        .font(.system(size: Design.BaseFontSize.title))
                    Text("Logo")
                        .font(.caption)
                        .bold()
                }
                .foregroundStyle(theme.textColor.opacity(Design.Opacity.medium))
            }
        }
    }
    
    private var coverBannerPreview: some View {
        Group {
            if let coverData = coverPhotoData, let uiImage = UIImage(data: coverData) {
                Image(uiImage: uiImage)
                    .resizable()
                    .scaledToFill()
            } else {
                ZStack {
                    LinearGradient(colors: [theme.primaryColor.opacity(Design.Opacity.light), theme.secondaryColor.opacity(Design.Opacity.light)], startPoint: .topLeading, endPoint: .bottomTrailing)
                    
                    VStack(spacing: Design.Spacing.xxSmall) {
                        Image(systemName: "photo.fill")
                            .font(.system(size: Design.BaseFontSize.title))
                        Text("Cover")
                            .font(.caption)
                            .bold()
                    }
                    .foregroundStyle(Color.Text.tertiary)
                }
            }
        }
        .clipped()
    }
    
    // MARK: - Content Area
    
    private var contentArea: some View {
        VStack(alignment: .leading, spacing: Design.Spacing.small) {
            contentOverlay
            placeholderTextLines
            Spacer()
        }
        .padding(.horizontal, Design.Spacing.medium)
        .padding(.top, Design.Spacing.medium)
        .padding(.bottom, Design.Spacing.small)
    }
    
    @ViewBuilder
    private var contentOverlay: some View {
        switch layout.contentOverlay {
        case .none:
            EmptyView()
        case .avatar:
            HStack {
                profileAvatar
                Spacer()
            }
        case .logoRectangle:
            HStack {
                logoRectangle
                Spacer()
            }
        case .avatarAndLogo:
            HStack {
                profileAvatar
                Spacer()
                logoRectangle
            }
        }
    }
    
    private var placeholderTextLines: some View {
        VStack(alignment: .leading, spacing: Design.Spacing.xSmall) {
            RoundedRectangle(cornerRadius: Design.CornerRadius.small)
                .fill(Color.Text.tertiary.opacity(Design.Opacity.hint))
                .frame(height: Design.Spacing.medium)
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.trailing, Design.Spacing.xLarge)
            
            RoundedRectangle(cornerRadius: Design.CornerRadius.small)
                .fill(Color.Text.tertiary.opacity(Design.Opacity.subtle))
                .frame(height: Design.Spacing.small)
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.trailing, Design.Spacing.xxLarge)
            
            RoundedRectangle(cornerRadius: Design.CornerRadius.small)
                .fill(Color.Text.tertiary.opacity(Design.Opacity.subtle))
                .frame(height: Design.Spacing.small)
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.trailing, Design.Spacing.xLarge)
        }
    }
    
    // MARK: - Overlay Components
    
    private var profileAvatar: some View {
        Group {
            if let photoData, let uiImage = UIImage(data: photoData) {
                Image(uiImage: uiImage)
                    .resizable()
                    .scaledToFill()
            } else {
                Image(systemName: avatarSystemName)
                    .font(.system(size: avatarSize / 2.5))
                    .foregroundStyle(theme.textColor)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(theme.accentColor)
            }
        }
        .frame(width: avatarSize, height: avatarSize)
        .clipShape(.circle)
        .overlay(Circle().stroke(Color.AppBackground.elevated, lineWidth: Design.LineWidth.medium))
    }
    
    private var logoBadge: some View {
        Group {
            if let logoData, let uiImage = UIImage(data: logoData) {
                Image(uiImage: uiImage)
                    .resizable()
                    .scaledToFill()
                    .clipped()
            } else {
                VStack(spacing: Design.Spacing.xxSmall) {
                    Image(systemName: "building.2")
                        .font(.caption)
                    Text("Logo")
                        .font(.system(size: 8))
                }
                .foregroundStyle(theme.textColor)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
        }
        .frame(width: avatarSize, height: avatarSize)
        .background(theme.accentColor)
        .clipShape(.rect(cornerRadius: Design.CornerRadius.medium))
        .overlay(RoundedRectangle(cornerRadius: Design.CornerRadius.medium).stroke(Color.AppBackground.elevated, lineWidth: Design.LineWidth.medium))
    }
    
    private var logoRectangle: some View {
        Group {
            if let logoData, let uiImage = UIImage(data: logoData) {
                Image(uiImage: uiImage)
                    .resizable()
                    .scaledToFill()
                    .clipped()
            } else {
                VStack(spacing: Design.Spacing.xxSmall) {
                    Image(systemName: "building.2")
                        .font(.caption)
                    Text("Logo")
                        .font(.system(size: 8))
                }
                .foregroundStyle(theme.textColor)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
        }
        .frame(width: logoRectWidth, height: avatarSize)
        .background(theme.accentColor)
        .clipShape(.rect(cornerRadius: Design.CornerRadius.medium))
        .overlay(RoundedRectangle(cornerRadius: Design.CornerRadius.medium).stroke(Color.AppBackground.elevated, lineWidth: Design.LineWidth.medium))
    }
    
    // MARK: - Badges
    
    @ViewBuilder
    private var badgeOverlay: some View {
        if needsMoreImages {
            LayoutBadge(text: "More images required", iconName: "lock.fill", backgroundColor: Color.Text.primary.opacity(Design.Opacity.strong))
        } else if isSuggested && !isSelected {
            LayoutBadge(text: "Suggested", iconName: "star.fill", backgroundColor: Color.Badge.star)
        }
    }
}

// MARK: - Layout Badge

private struct LayoutBadge: View {
    let text: String
    let iconName: String
    let backgroundColor: Color
    
    var body: some View {
        HStack(spacing: Design.Spacing.xSmall) {
            Image(systemName: iconName)
                .font(.caption2)
            Text(text)
                .font(.caption2)
                .bold()
        }
        .padding(.horizontal, Design.Spacing.small)
        .padding(.vertical, Design.Spacing.xSmall)
        .background(backgroundColor)
        .foregroundStyle(.white)
        .clipShape(.capsule)
    }
}

// MARK: - Preview

#Preview {
    @Previewable @State var selectedLayout: CardHeaderLayout = .profileBanner
    
    HeaderLayoutPickerView(
        selectedLayout: $selectedLayout,
        photoData: nil,
        coverPhotoData: nil,
        logoData: nil,
        avatarSystemName: "person.crop.circle",
        theme: .coral,
        displayName: "John Doe",
        role: "Developer",
        company: "Acme Inc"
    )
}
