ios-celestia-trace/CelestiaTrace/Views/Components/SyncAuthPromptModal.swift

import SwiftUI

/// Modal sheet prompting unauthenticated users to register or log in before synchronizing recordings.
struct SyncAuthPromptModal: View {
    @Environment(\.dismiss) private var dismiss
    var onLoginClick: () -> Void
    
    var body: some View {
        ZStack {
            Color.spaceBlack.ignoresSafeArea()
            
            VStack(spacing: 24) {
                // Header Icon
                ZStack {
                    Circle()
                        .fill(Color.primary.opacity(0.06))
                        .frame(width: 72, height: 72)
                    
                    Image(systemName: "icloud.and.arrow.up")
                        .font(.system(size: 32, weight: .light))
                        .foregroundStyle(Color.primary)
                }
                .padding(.top, 16)
                
                // Title & Subtitle
                VStack(spacing: 8) {
                    Text("同步录音需要登录")
                        .font(.system(size: 18, weight: .bold))
                        .foregroundStyle(Color.primary)
                    
                    Text("请先注册或登录星痕现场记录账号\n数据才能安全同步至云端备份。")
                        .font(.system(size: 13))
                        .foregroundStyle(Color.secondary)
                        .multilineTextAlignment(.center)
                        .lineSpacing(4)
                }
                .padding(.horizontal, 20)
                
                // Value propositions
                VStack(alignment: .leading, spacing: 12) {
                    featureRow(icon: "lock.shield", text: "端到端云端加密备份")
                    featureRow(icon: "laptopcomputer.and.iphone", text: "多设备实时同步记录")
                    featureRow(icon: "mic.fill", text: "专属录音设备绑定与管理")
                }
                .padding(16)
                .background(Color.cardBackground.opacity(0.5))
                .businessBorder(cornerRadius: 10)
                .padding(.horizontal, 16)
                
                Spacer()
                
                // Action Buttons
                VStack(spacing: 12) {
                    Button {
                        dismiss()
                        onLoginClick()
                    } label: {
                        Text("立即注册 / 登录")
                            .font(.system(size: 15, weight: .semibold))
                            .foregroundStyle(Color.spaceBlack)
                            .frame(maxWidth: .infinity)
                            .padding(.vertical, 14)
                            .background(Color.primary)
                            .cornerRadius(8)
                    }
                    
                    Button {
                        dismiss()
                    } label: {
                        Text("暂不同步")
                            .font(.system(size: 14, weight: .regular))
                            .foregroundStyle(Color.secondary)
                            .padding(.vertical, 8)
                    }
                }
                .padding(.horizontal, 16)
                .padding(.bottom, 24)
            }
        }
    }
    
    private func featureRow(icon: String, text: String) -> some View {
        HStack(spacing: 12) {
            Image(systemName: icon)
                .font(.system(size: 14, weight: .regular))
                .foregroundStyle(Color.primary)
                .frame(width: 20)
            
            Text(text)
                .font(.system(size: 13, weight: .regular))
                .foregroundStyle(Color.primary.opacity(0.85))
        }
    }
}

#Preview {
    SyncAuthPromptModal(onLoginClick: {})
}