import CommentsClient
import ComponentLibrary
import ComposableArchitecture
import GenAPI
import Localization
import SwiftUI

struct CommentReportSheet: View {
    @Environment(\.dismiss) private var dismiss

    @State var selectedReason: ReportCommentRequest.Reason?

    let tappedSubmit: (ReportCommentRequest.Reason) -> Void

    var body: some View {
        VStack(spacing: 0) {
            VStack(spacing: 0) {
                titleBar

                ForEach(ReportCommentRequest.Reason.allCases, id: \.self) { reason in
                    row(reason)
                }
            }

            Spacer()
        }
        .overlay(alignment: .bottom) {
            reportButton
        }
        .background(Color.SemanticV1.backgroundPrimary, ignoresSafeAreaEdges: .all)
        .presentationCornerRadius(40, conditional: true)
    }

    @ViewBuilder
    private var titleBar: some View {
        VStack {
            Rectangle()
                .foregroundStyle(Color.SemanticV1.backgroundSecondary)
                .foregroundColor(.clear)
                .frame(width: 35, height: 5)
                .cornerRadius(50)
                .opacity(0.4)

            HStack {
                Spacer()

                Button {
                    dismiss()
                } label: {
                    Image.Icon.close
                }
                .tint(.black)
                .padding(.trailing, 14)
            }
            .overlay(alignment: .center, content: {
                Text(L10n.FeatureComments.reportSheetTitle)
                    .typographyV1(.caption5)
            })

            Rectangle()
                .foregroundStyle(Color.SemanticV1.textBrand)
                .frame(height: 1 / 3)
                .frame(maxWidth: .infinity)
        }
    }

    @ViewBuilder
    private func row(_ reason: ReportCommentRequest.Reason) -> some View {
        let isSelected = self.selectedReason == reason

        Button {
            self.selectedReason = reason
        } label: {
            HStack(spacing: 24) {
                Image.Icon.checkV1
                    .resizable()
                    .foregroundStyle(isSelected ? Color.SemanticV1.textOnDark : .clear)
                    .frame(width: 24, height: 24)
                    .clipShape(Circle())
                    .background(
                        Circle()
                            .strokeBorder(isSelected ? .clear : Color.SemanticV1.textPrimary, lineWidth: 1)
                            .fill(isSelected ? Color.SemanticV1.auraPink : .clear)
                    )

                Text(reason.localizedTitle)
                    .typographyV1(.caption2)
                    .foregroundStyle(Color.SemanticV1.textBrand)

                Spacer()
            }
            .frame(height: 30)
            .padding(.vertical, 16)
            .padding(.horizontal, 12)
            .contentShape(.rect)
            .overlay(
                Rectangle()
                    .stroke(Color.SemanticV1.borderPrimary, lineWidth: 0.5)
                    .padding(.horizontal, 12)
                    /// hide the left right stroke of this rectangle
                    .mask {
                        VStack(spacing: 0) {
                            Rectangle().frame(height: 0.5)
                            Spacer()
                            Rectangle().frame(height: 0.5)
                        }
                    }
            )
        }
        .buttonStyle(.plain)
    }

    @ViewBuilder
    private var reportButton: some View {
        PrimaryButtonV1(title: L10n.FeatureClipDetail.report, isLoading: false, colorCombination: .dark, preferredSize: .largeRounded) {
            if let selectedReason {
                tappedSubmit(selectedReason)
            } else {
                assertionFailure("invariant: no reason selected")
            }
        }
        .padding(16)
    }
}

#Preview {
    Rectangle()
        .foregroundStyle(.red)
        .sheet(isPresented: .constant(true)) {
            CommentReportSheet(tappedSubmit: { _ in })
                .presentationDetents([.fraction(0.6)])
        }
}