import SwiftUI
import SharedModels
import SwiftData

struct FlashcardView: View {
    @Environment(\.modelContext) private var modelContext
    @Environment(\.cloudModelContextProvider) private var cloudModelContextProvider
    var viewModel: PracticeViewModel
    let speechService: SpeechService

    private var cloudModelContext: ModelContext { cloudModelContextProvider() }

    var body: some View {
        ScrollView {
            VStack(spacing: 24) {
                PracticeHeaderView(
                    verb: viewModel.currentVerb,
                    tenseInfo: viewModel.currentTenseInfo,
                    person: viewModel.currentPerson
                )

                // Flashcard area
                VStack(spacing: 16) {
                    if viewModel.isAnswerRevealed {
                        VStack(spacing: 12) {
                            if let form = viewModel.currentForm {
                                IrregularHighlightText(
                                    form: form.form,
                                    spans: viewModel.currentSpans,
                                    font: .largeTitle.bold()
                                )

                                Button {
                                    speechService.speak(form.form)
                                } label: {
                                    Image(systemName: "speaker.wave.2.fill")
                                        .font(.title3)
                                        .padding(12)
                                }
                                .glassEffect(in: .circle)
                            }
                        }
                        .transition(.blurReplace)
                    } else {
                        VStack(spacing: 8) {
                            Image(systemName: "hand.tap")
                                .font(.title)
                                .foregroundStyle(.secondary)

                            Text("Tap to reveal")
                                .font(.headline)
                                .foregroundStyle(.secondary)
                        }
                        .transition(.blurReplace)
                    }
                }
                .frame(maxWidth: .infinity)
                .frame(minHeight: 180)
                .glassEffect(in: RoundedRectangle(cornerRadius: 20))
                .overlay {
                    if !viewModel.isAnswerRevealed {
                        Color.clear
                            .contentShape(Rectangle())
                            .onTapGesture {
                                withAnimation(.smooth) {
                                    viewModel.revealAnswer()
                                }
                            }
                    }
                }

                // Rating buttons (no duplicate answer)
                if viewModel.isAnswerRevealed {
                    AnswerReviewView(
                        form: viewModel.currentForm,
                        spans: viewModel.currentSpans,
                        speechService: speechService,
                        onRate: { quality in
                            viewModel.rateAnswer(
                                quality: quality,
                                localContext: modelContext,
                                cloudContext: cloudModelContext
                            )
                            viewModel.loadNextCard(
                                localContext: modelContext,
                                cloudContext: cloudModelContext
                            )
                        },
                        showAnswer: false,
                        onNext: {
                            viewModel.loadNextCard(
                                localContext: modelContext,
                                cloudContext: cloudModelContext
                            )
                        }
                    )
                    .transition(.move(edge: .bottom).combined(with: .opacity))
                }
            }
            .padding()
            .adaptiveContainer()
        }
        .animation(.smooth, value: viewModel.isAnswerRevealed)
    }
}

#Preview {
    NavigationStack {
        FlashcardView(viewModel: PracticeViewModel(), speechService: SpeechService())
    }
    .modelContainer(for: Verb.self, inMemory: true)
}
