//
//  LanguageSettingsView.swift
//  SodaLive
//
//  Created by Junie (AI) on 2025/12/16.
//

import SwiftUI

struct LanguageSettingsView: View {
    @StateObject private var viewModel = LanguageSettingsViewModel()

    var body: some View {
        let cardWidth = screenSize().width - 26.7
        
        ZStack {
            Color.black.ignoresSafeArea()
            
            VStack(spacing: 0) {
                DetailNavigationBar(title: String(localized: "언어 설정"))
                
                ScrollView(.vertical, showsIndicators: false) {
                    VStack(spacing: 0) {
                        // List를 ScrollView 안에 두면 렌더링 이슈가 발생할 수 있어
                        // 기본 체크마크(SF Symbols)로 커스텀 라디오 UI를 구성합니다.
                        VStack(spacing: 0) {
                            ForEach(Array(LanguageOption.allCases.enumerated()), id: \.offset) { idx, option in
                                HStack(spacing: 0) {
                                    Text(option.displayName)
                                        .font(.custom(Font.preRegular.rawValue, size: 16))
                                        .foregroundColor(Color.grayee)
                                    Spacer()
                                    if viewModel.pending == option {
                                        Image(systemName: "checkmark")
                                            .font(.system(size: 16, weight: .semibold))
                                            .foregroundColor(Color.white)
                                    }
                                }
                                .padding(.horizontal, 16.7)
                                .frame(height: 50)
                                .contentShape(Rectangle())
                                .onTapGesture { viewModel.select(option) }

                                if idx < LanguageOption.allCases.count - 1 {
                                    Rectangle()
                                        .frame(height: 0.3)
                                        .foregroundColor(Color.gray90)
                                        .padding(.leading, 16.7)
                                }
                            }
                        }
                        .frame(width: cardWidth)
                        .background(Color.gray22)
                        .cornerRadius(6.7)
                        .padding(.top, 26.7)

                        // 적용 버튼
                        Button(action: {
                            Task { await viewModel.applyAndRestart() }
                        }) {
                            Text(String(localized: "적용"))
                                .appFont(size: 16, weight: .bold)
                                .frame(width: cardWidth, height: 50)
                                .background(Color.button)
                                .cornerRadius(6.7)
                                .foregroundColor(.white)
                        }
                        .padding(.top, 20)
                        .padding(.bottom, 26.7)
                    }
                }
            }
            .task { viewModel.onAppear() }
        }
    }
}