import SwiftUI

struct WordDetailView: View {
    let word: Word
    @Environment(SpeechService.self) private var speech

    private var isSpeaking: Bool {
        speech.speakingText == word.word
    }

    var body: some View {
        ScrollView {
            VStack(spacing: 32) {
                VStack(spacing: 12) {
                    Text(word.word)
                        .font(.system(size: 48, weight: .bold))
                    Text(word.phonetic)
                        .font(.title3)
                        .foregroundStyle(.secondary)
                    Button {
                        speech.speak(word.word)
                    } label: {
                        Label(isSpeaking ? "朗读中" : "发音", systemImage: isSpeaking ? "speaker.wave.3.fill" : "speaker.wave.2.fill")
                            .font(.headline)
                            .padding(.horizontal, 24)
                            .padding(.vertical, 10)
                    }
                    .buttonStyle(.borderedProminent)
                    .disabled(isSpeaking)
                }

                VStack(alignment: .leading, spacing: 16) {
                    VStack(alignment: .leading, spacing: 6) {
                        Text("释义")
                            .font(.caption)
                            .foregroundStyle(.secondary)
                        Text(word.meaning)
                            .font(.title2)
                    }

                    Divider()

                    VStack(alignment: .leading, spacing: 6) {
                        Text("例句")
                            .font(.caption)
                            .foregroundStyle(.secondary)
                        HStack(alignment: .top) {
                            VStack(alignment: .leading, spacing: 4) {
                                Text(word.example)
                                    .font(.body)
                                Text(word.exampleMeaning)
                                    .font(.subheadline)
                                    .foregroundStyle(.secondary)
                            }
                            Spacer()
                            Button {
                                speech.speak(word.example)
                            } label: {
                                Image(systemName: "speaker.wave.2")
                            }
                            .buttonStyle(.borderless)
                        }
                    }
                }
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding()
                .background(.quaternary.opacity(0.5), in: RoundedRectangle(cornerRadius: 16))
            }
            .padding()
        }
        .navigationTitle(word.word)
        .navigationBarTitleDisplayMode(.inline)
    }
}

#Preview {
    NavigationStack {
        WordDetailView(word: Word(word: "red", phonetic: "/red/", meaning: "红色", example: "The apple is red.", exampleMeaning: "苹果是红色的。"))
            .environment(SpeechService())
    }
}
