import SwiftUI

/// 「我的 · 语言」选择页。选中即时生效(整个 App 重建为所选语言,无需重启)。
struct LanguageSettingsView: View {
    @State private var lang = LanguageManager.shared

    var body: some View {
        ScrollView {
            VStack(spacing: 10) {
                ForEach(AppLanguage.allCases) { option in
                    row(option)
                }

                Text("切换后整个 App 立即生效,无需重启。")
                    .font(.system(size: 12))
                    .foregroundStyle(Tj.Palette.text3)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(.horizontal, 4)
                    .padding(.top, 6)
            }
            .padding(.horizontal, 16)
            .padding(.vertical, 20)
        }
        .background(Tj.Palette.sand.ignoresSafeArea())
        .navigationTitle("语言")
        .navigationBarTitleDisplayMode(.inline)
    }

    private func row(_ option: AppLanguage) -> some View {
        let selected = lang.current == option
        return Button {
            // 切换会触发根视图 .id 重建 → 当前导航栈回到「我的」根,整树换语言。
            lang.set(option)
        } label: {
            HStack(spacing: 12) {
                ZStack {
                    Circle().fill(selected ? Tj.Palette.amber.opacity(0.25) : Tj.Palette.sand2)
                    icon(option, selected: selected)
                }
                .frame(width: 40, height: 40)

                Text(option.displayName)
                    .font(.system(size: 15, weight: selected ? .semibold : .regular))
                    .foregroundStyle(Tj.Palette.text)

                Spacer()

                if selected {
                    Image(systemName: "checkmark")
                        .font(.system(size: 14, weight: .semibold))
                        .foregroundStyle(Tj.Palette.ink)
                }
            }
            .padding(14)
            .tjCard()
        }
        .buttonStyle(.plain)
    }

    /// 每个语言的个性化图标:本族语代表字(中/A/あ/가),跟随系统用地球符号。
    @ViewBuilder
    private func icon(_ option: AppLanguage, selected: Bool) -> some View {
        let fg = selected ? Tj.Palette.ink : Tj.Palette.text2
        switch option.pickerIcon {
        case .symbol(let name):
            Image(systemName: name)
                .font(.system(size: 16))
                .foregroundStyle(fg)
        case .glyph(let g):
            Text(verbatim: g)
                .font(.system(size: 17, weight: .semibold))
                .foregroundStyle(fg)
        }
    }
}

#Preview {
    NavigationStack { LanguageSettingsView() }
}