//
//  PromoCarousel.swift
//  AppClientBaseSwift
//
//  Promotional banners carousel - Pastel Yellow Theme
//  Carousel banners khuyến mãi - Theme Pastel Vàng
//

import SwiftUI

// MARK: - Promo Item
// Item Promo

/// Promotional banner item
/// Item banner khuyến mãi
struct PromoItem: Identifiable {
    let id = UUID()
    let title: String
    let subtitle: String
    let gradientColors: [Color]
    let icon: String

    static let samples: [PromoItem] = [
        PromoItem(
            title: "Giảm 50% Đặt xe",
            subtitle: "Áp dụng đến 31/01",
            gradientColors: [Color.brandPrimary, Color.brandAccent],
            icon: "car.fill"
        ),
        PromoItem(
            title: "Freeship Đồ ăn",
            subtitle: "Đơn từ 50K",
            gradientColors: [Color.success, Color.success.opacity(0.7)],
            icon: "takeoutbag.and.cup.and.straw.fill"
        ),
        PromoItem(
            title: "Hoàn tiền 20%",
            subtitle: "Thanh toán hóa đơn",
            gradientColors: [Color.info, Color.brandSecondary],
            icon: "creditcard.fill"
        )
    ]
}

// MARK: - Promo Carousel
// Carousel Promo

/// Promotional banners carousel
/// Carousel banners khuyến mãi
struct PromoCarousel: View {

    // MARK: - Properties

    /// Promo items to display
    /// Các items promo hiển thị
    let items: [PromoItem]

    /// Current page index
    /// Index trang hiện tại
    @State private var currentIndex = 0

    /// Auto-scroll timer
    /// Timer auto-scroll
    @State private var timer: Timer?

    // MARK: - Init

    init(items: [PromoItem] = PromoItem.samples) {
        self.items = items
    }

    // MARK: - Body

    var body: some View {
        VStack(spacing: 12) {
            // Carousel
            TabView(selection: $currentIndex) {
                ForEach(Array(items.enumerated()), id: \.element.id) { index, item in
                    PromoCard(item: item)
                        .tag(index)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .frame(height: 140)

            // Page indicators
            // Indicators trang
            HStack(spacing: 6) {
                ForEach(0..<items.count, id: \.self) { index in
                    Circle()
                        .fill(index == currentIndex ? Color.brandAccent : Color.textSecondary.opacity(0.3))
                        .frame(width: index == currentIndex ? 8 : 6, height: index == currentIndex ? 8 : 6)
                        .animation(.easeInOut(duration: 0.2), value: currentIndex)
                }
            }
        }
        .onAppear {
            startAutoScroll()
        }
        .onDisappear {
            stopAutoScroll()
        }
    }

    // MARK: - Methods

    /// Start auto-scroll timer
    /// Bắt đầu timer auto-scroll
    private func startAutoScroll() {
        timer = Timer.scheduledTimer(withTimeInterval: 4.0, repeats: true) { _ in
            withAnimation(.easeInOut(duration: 0.5)) {
                currentIndex = (currentIndex + 1) % items.count
            }
        }
    }

    /// Stop auto-scroll timer
    /// Dừng timer auto-scroll
    private func stopAutoScroll() {
        timer?.invalidate()
        timer = nil
    }
}

// MARK: - Promo Card
// Card Promo

/// Individual promo banner card
/// Card banner promo riêng lẻ
struct PromoCard: View {
    let item: PromoItem

    var body: some View {
        HStack {
            // Content
            // Nội dung
            VStack(alignment: .leading, spacing: 8) {
                Text(item.title)
                    .font(.headline)
                    .fontWeight(.bold)
                    .foregroundStyle(Color.textPrimary)

                Text(item.subtitle)
                    .font(.subheadline)
                    .foregroundStyle(Color.textPrimary.opacity(0.7))

                Spacer()

                // CTA Button
                Text("Xem ngay →")
                    .font(.caption)
                    .fontWeight(.semibold)
                    .foregroundStyle(Color.textPrimary)
                    .padding(.horizontal, 12)
                    .padding(.vertical, 6)
                    .background(Color.white.opacity(0.5))
                    .cornerRadius(12)
            }
            .padding(20)

            Spacer()

            // Icon
            Image(systemName: item.icon)
                .font(.system(size: 50))
                .foregroundStyle(Color.textPrimary.opacity(0.2))
                .padding(.trailing, 20)
        }
        .frame(maxWidth: .infinity)
        .background(
            LinearGradient(
                colors: item.gradientColors,
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
        )
        .cornerRadius(16)
        .shadow(color: AppTheme.cardShadow, radius: 10, x: 0, y: 5)
        .padding(.horizontal, 4)
    }
}

// MARK: - Preview

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