//
//  ServiceGrid.swift
//  AppClientBaseSwift
//
//  Services grid with icons and labels - Pastel Yellow Theme
//  Grid services với icons và labels - Theme Pastel Vàng
//

import SwiftUI

// MARK: - Service Item
// Item Service

/// Service item model
/// Model item service
struct ServiceItem: Identifiable {
    let id = UUID()
    let icon: String
    let title: String
    let color: Color
    let action: String

    static let defaultServices: [ServiceItem] = [
        ServiceItem(icon: "car.fill", title: "Đặt xe", color: Color.brandAccent, action: "booking"),
        ServiceItem(icon: "takeoutbag.and.cup.and.straw.fill", title: "Đồ ăn", color: Color.error, action: "food"),
        ServiceItem(icon: "creditcard.fill", title: "Thanh toán", color: Color.info, action: "payment"),
        ServiceItem(icon: "arrow.left.arrow.right", title: "Chuyển tiền", color: Color.brandSecondary, action: "transfer"),
        ServiceItem(icon: "tag.fill", title: "Khuyến mãi", color: Color.warning, action: "promo"),
        ServiceItem(icon: "plus.circle.fill", title: "Nạp tiền", color: Color.success, action: "topup"),
        ServiceItem(icon: "ticket.fill", title: "Đặt vé", color: Color.brandPrimary, action: "tickets"),
        ServiceItem(icon: "ellipsis", title: "Thêm", color: Color.textSecondary, action: "more")
    ]
}

// MARK: - Service Grid
// Grid Service

/// Grid of service icons
/// Grid các icon service
struct ServiceGrid: View {

    // MARK: - Properties

    /// Services to display
    /// Các services hiển thị
    let services: [ServiceItem]

    /// Service tap callback
    /// Callback tap service
    var onServiceTap: ((ServiceItem) -> Void)?

    /// Grid columns
    /// Các cột grid
    private let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    // MARK: - Init

    init(services: [ServiceItem] = ServiceItem.defaultServices, onServiceTap: ((ServiceItem) -> Void)? = nil) {
        self.services = services
        self.onServiceTap = onServiceTap
    }

    // MARK: - Body

    var body: some View {
        LazyVGrid(columns: columns, spacing: 20) {
            ForEach(services) { service in
                ServiceGridItem(service: service)
                    .onTapGesture {
                        onServiceTap?(service)
                    }
            }
        }
    }
}

// MARK: - Service Grid Item
// Item Grid Service

/// Individual service grid item
/// Item grid service riêng lẻ
struct ServiceGridItem: View {
    let service: ServiceItem

    var body: some View {
        VStack(spacing: 10) {
            // Icon container
            // Container icon
            ZStack {
                RoundedRectangle(cornerRadius: 16)
                    .fill(service.color.opacity(0.15))
                    .frame(width: 56, height: 56)

                Image(systemName: service.icon)
                    .font(.system(size: 24))
                    .foregroundStyle(service.color)
            }

            // Label
            Text(service.title)
                .font(.caption)
                .fontWeight(.medium)
                .foregroundStyle(Color.textPrimary)
                .lineLimit(1)
        }
    }
}

// MARK: - Preview

#Preview {
    ZStack {
        Color.appBackground.ignoresSafeArea()
        ServiceGrid()
            .padding()
    }
}
