import SwiftUI

/// 「我的 · 字体大小」选择页。面向视力不佳 / 老年用户:放大整个 App 字号。
/// 选中即时生效(整树重建为新档位,无需重启,同语言切换机制)。
/// 每行用各自档位渲染示例字,便于直接比较大小后再选。
struct FontSettingsView: View {
    @State private var manager = FontScaleManager.shared

    /// 示例字基准字号(行内按各档位倍率独立渲染,不随当前全局档位变化,保证可对比)。
    private let sampleBase: CGFloat = 17

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

                Text("放大后整个 App 的文字立即变大,无需重启。设置会被记住。")
                    .font(.tjScaled(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: FontScale) -> some View {
        let selected = manager.scale == option
        return Button {
            manager.set(option)
        } label: {
            HStack(spacing: 14) {
                VStack(alignment: .leading, spacing: 4) {
                    HStack(spacing: 8) {
                        Text(option.label)
                            .font(.system(size: 15, weight: selected ? .semibold : .regular))
                            .foregroundStyle(Tj.Palette.text)
                        Text(option.detail)
                            .font(.system(size: 11))
                            .foregroundStyle(Tj.Palette.text3)
                    }
                    // 示例字:按本档位倍率渲染,直接预览效果。
                    Text("健康档案 Aa 123")
                        .font(.system(size: sampleBase * option.multiplier, weight: .medium))
                        .foregroundStyle(Tj.Palette.text2)
                        .lineLimit(1)
                        .minimumScaleFactor(0.5)
                }

                Spacer(minLength: 8)

                ZStack {
                    Circle()
                        .strokeBorder(selected ? Tj.Palette.ink : Tj.Palette.line, lineWidth: selected ? 0 : 1.5)
                        .background(Circle().fill(selected ? Tj.Palette.ink : Color.clear))
                        .frame(width: 24, height: 24)
                    if selected {
                        Image(systemName: "checkmark")
                            .font(.system(size: 12, weight: .bold))
                            .foregroundStyle(Tj.Palette.paper)
                    }
                }
            }
            .padding(14)
            .frame(maxWidth: .infinity, alignment: .leading)
            .tjCard()
        }
        .buttonStyle(.plain)
    }
}

#Preview {
    NavigationStack { FontSettingsView() }
}