import SwiftUI

struct CategoryListView: View {
    let categories: [WordCategory]
    @State private var path: [AppRoute] = []

    var body: some View {
        NavigationStack(path: $path) {
            List(categories) { category in
                NavigationLink(value: AppRoute.category(category)) {
                    HStack(spacing: 16) {
                        Image(systemName: category.icon)
                            .font(.title2)
                            .foregroundStyle(.white)
                            .frame(width: 44, height: 44)
                            .background(.tint, in: RoundedRectangle(cornerRadius: 10))
                        VStack(alignment: .leading, spacing: 4) {
                            Text(category.name)
                                .font(.headline)
                            Text("\(category.words.count) 个单词")
                                .font(.subheadline)
                                .foregroundStyle(.secondary)
                        }
                    }
                    .padding(.vertical, 4)
                }
            }
            .navigationTitle("单词分类")
            .navigationDestination(for: AppRoute.self) { route in
                switch route {
                case .category(let category):
                    WordListView(category: category) { path.append($0) }
                case .word(let word):
                    WordDetailView(word: word)
                case .quizSetup(let request):
                    QuizSetupView(request: request)
                case .quiz(let config):
                    QuizView(config: config)
                }
            }
        }
    }
}

#Preview {
    CategoryListView(categories: [
        WordCategory(id: "colors", name: "颜色", icon: "paintpalette.fill", words: [
            Word(word: "red", phonetic: "/red/", meaning: "红色", example: "The apple is red.", exampleMeaning: "苹果是红色的。")
        ])
    ])
}
