//
//  AutoSlideCharacterBannerView.swift
//  SodaLive
//
//  Created by klaus on 8/29/25.
//

import SwiftUI
import Kingfisher

struct AutoSlideCharacterBannerView: View {
    var items: [CharacterBannerResponse] = []
    var onTap: (CharacterBannerResponse) -> Void = { _ in }
    
    @State private var currentIndex: Int = 0
    @State private var height: CGFloat = 0
    private let timer = Timer.publish(every: 4, on: .main, in: .common).autoconnect()
    
    var body: some View {
        VStack(spacing: 8) {
            TabView(selection: $currentIndex) {
                ForEach(0..<items.count, id: \.self) { index in
                    let item = items[index]
                    KFImage(URL(string: item.imageUrl))
                        .placeholder { Color.gray.opacity(0.2) }
                        .retry(maxCount: 2, interval: .seconds(1))
                        .cancelOnDisappear(true)
                        .resizable()
                        .scaledToFill()
                        .frame(height: height)
                        .clipped()
                        .cornerRadius(12)
                        .contentShape(Rectangle())
                        .tag(index)
                        .onTapGesture { onTap(item) }
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .frame(maxWidth: .infinity)
            .frame(height: height)
            .onAppear {
                self.height = screenSize().width * 0.53
            }
            .onDisappear {
                timer.upstream.connect().cancel()
            }
            .onReceive(timer) { _ in
                guard !items.isEmpty else { return }
                withAnimation { currentIndex = (currentIndex + 1) % items.count }
            }
            
            HStack(spacing: 4) {
                ForEach(0..<items.count, id: \.self) { index in
                    Capsule()
                        .foregroundColor(
                            index == currentIndex
                            ? .button
                            : .gray90
                        )
                        .frame(
                            width: index == currentIndex ? 18 : 6,
                            height: 6
                        )
                        .tag(index)
                }
            }
        }
    }
}

#Preview {
    AutoSlideCharacterBannerView(
        items: [
            CharacterBannerResponse(characterId: 1, imageUrl: "https://picsum.photos/1000/300")
        ]
    )
    .padding()
    .background(Color.black)
}