//
//  ProfileView.swift
//  AppClientBaseSwift
//
//  Profile screen view with MVVM binding
//  View màn hình Profile với MVVM binding
//

import SwiftUI

// MARK: - Profile View
// View Profile

/// Profile tab main view
/// View chính của tab Profile
struct ProfileView: View {

    // MARK: - Properties

    /// ViewModel for profile screen
    /// ViewModel cho màn hình profile
    @StateObject private var viewModel = ProfileViewModel()

    // MARK: - Body

    var body: some View {
        NavigationStack {
            List {
                // User info section
                // Phần thông tin user
                userInfoSection

                // Menu items section
                // Phần menu items
                menuSection
            }
            .listStyle(.insetGrouped)
            .navigationTitle("tab_profile".localized)
            .refreshable {
                await viewModel.refreshUser()
            }
            .sheet(isPresented: $viewModel.showAPIDebugger) {
                APITestView()
            }
            .alert("profile_logout_title".localized, isPresented: $viewModel.showLogoutAlert) {
                Button("common_cancel".localized, role: .cancel) {}
                Button("profile_logout".localized, role: .destructive) {
                    viewModel.confirmLogout()
                }
            } message: {
                Text("profile_logout_message".localized)
            }
        }
    }

    // MARK: - Subviews

    /// User info header section
    /// Phần header thông tin user
    private var userInfoSection: some View {
        Section {
            HStack(spacing: DesignSystem.spacingMD) {
                // Avatar
                avatarView

                // User details
                // Chi tiết user
                VStack(alignment: .leading, spacing: DesignSystem.spacingXS) {
                    Text(viewModel.user?.name ?? "Guest User")
                        .font(.headline)

                    Text(viewModel.user?.email ?? "guest@example.com")
                        .font(.subheadline)
                        .foregroundStyle(.secondary)

                    // Verification badge
                    // Badge xác minh
                    if viewModel.user?.isEmailVerified == true {
                        HStack(spacing: 4) {
                            Image(systemName: "checkmark.seal.fill")
                                .font(.caption)
                                .foregroundStyle(Color.success)

                            Text("profile_verified".localized)
                                .font(.caption)
                                .foregroundStyle(Color.success)
                        }
                    }
                }

                Spacer()
            }
            .padding(.vertical, DesignSystem.spacingSM)
        }
    }

    /// User avatar view
    /// View avatar user
    private var avatarView: some View {
        Group {
            if let avatarUrl = viewModel.user?.avatarUrl,
                let url = URL(string: avatarUrl)
            {
                // Async image
                AsyncImage(url: url) { image in
                    image
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                } placeholder: {
                    avatarPlaceholder
                }
            } else {
                // Placeholder with initials
                // Placeholder với chữ cái đầu
                avatarPlaceholder
            }
        }
        .frame(width: 72, height: 72)
        .clipShape(Circle())
    }

    /// Avatar placeholder with initials
    /// Placeholder avatar với chữ cái đầu
    private var avatarPlaceholder: some View {
        ZStack {
            Circle()
                .fill(AppTheme.primaryGradient)

            Text(viewModel.user?.initials ?? "GU")
                .font(.title2)
                .fontWeight(.bold)
                .foregroundStyle(Color.textPrimary)
        }
    }

    /// Menu items section
    /// Phần menu items
    private var menuSection: some View {
        Section {
            ForEach(viewModel.menuItems) { item in
                menuRow(item: item)
            }
        }
    }

    /// Menu row view
    /// View row menu
    /// - Parameter item: Menu item / Item menu
    private func menuRow(item: ProfileMenuItem) -> some View {
        Button {
            viewModel.handleMenuTap(item)
        } label: {
            HStack(spacing: DesignSystem.spacingMD) {
                // Icon
                Image(systemName: item.icon)
                    .font(.body)
                    .foregroundStyle(
                        item.action == .logout ? Color.error :
                        item.action == .apiDebugger ? Color.warning :
                        Color.brandAccent
                    )
                    .frame(width: 24)

                // Title
                Text(item.title)
                    .foregroundStyle(item.action == .logout ? Color.error : Color.textPrimary)

                Spacer()

                // Subtitle or arrow
                // Subtitle hoặc mũi tên
                if let subtitle = item.subtitle {
                    Text(subtitle)
                        .font(.subheadline)
                        .foregroundStyle(.secondary)
                }

                if item.action != .logout {
                    Image(systemName: "chevron.right")
                        .font(.caption)
                        .foregroundStyle(.tertiary)
                }
            }
        }
    }
}

// MARK: - Preview

#Preview {
    ProfileView()
}
