//
//  ContentMainTagCurationView.swift
//  SodaLive
//
//  Created by klaus on 2/22/25.
//

import SwiftUI
import Kingfisher

struct ContentMainTagCurationView: View {
    
    let tagList: [String]
    let contentList: [GetAudioContentMainItem]
    let selectTag: (String) -> Void
    
    let tagColumns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    let contentColumns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    @State private var selectedTag = ""
    
    var body: some View {
        VStack(alignment: .leading, spacing: 13.3) {
            Text("태그별 추천 콘텐츠")
                .font(.custom(Font.bold.rawValue, size: 18.3))
                .foregroundColor(.grayee)
                .padding(.horizontal, 13.3)
            
            LazyVGrid(columns: tagColumns, spacing: 6) {
                ForEach(0..<tagList.count, id: \.self) { index in
                    let tag = tagList[index]
                    Text(tagList[index])
                        .font(.custom(Font.medium.rawValue, size: 10))
                        .foregroundColor(
                            selectedTag == tag ?
                                .button:
                                .gray77
                        )
                        .padding(.vertical, 10)
                        .frame(width: (screenSize().width - 18 - 26.7) / 4)
                        .overlay(
                            RoundedRectangle(cornerRadius: 2.6)
                                .strokeBorder(lineWidth: 1)
                                .foregroundColor(
                                    selectedTag == tag ?
                                        .button:
                                        .gray77
                                )
                        )
                        .onTapGesture {
                            if selectedTag != tag {
                                selectedTag = tag
                                selectTag(tag)
                            }
                        }
                }
            }
            .padding(.horizontal, 13.3)
            
            LazyVGrid(columns: contentColumns, spacing: 13.3) {
                ForEach(0..<contentList.count, id: \.self) { index in
                    ContentMainTagCurationContentView(
                        item: contentList[index],
                        itemWidth: (screenSize().width - 40) / 3
                    )
                }
            }
            .padding(.horizontal, 13.3)
        }
        .onAppear {
            selectedTag = tagList[0]
        }
    }
}

struct ContentMainTagCurationContentView: View {
    
    let item: GetAudioContentMainItem
    let itemWidth: CGFloat
    
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            ZStack(alignment: .bottom) {
                KFImage(URL(string: item.coverImageUrl))
                    .cancelOnDisappear(true)
                    .downsampling(
                        size: CGSize(
                            width: itemWidth,
                            height: itemWidth
                        )
                    )
                    .resizable()
                    .scaledToFill()
                    .frame(width: itemWidth, height: itemWidth, alignment: .top)
                    .cornerRadius(2.7)
                
                VStack(spacing: 0) {
                    Spacer()
                    
                    HStack(spacing: 0) {
                        HStack(spacing: 2) {
                            if item.price > 0 {
                                Image("ic_card_can_gray")
                                
                                Text("\(item.price)")
                                    .font(.custom(Font.medium.rawValue, size: 8.5))
                                    .foregroundColor(Color.white)
                            } else {
                                Text("무료")
                                    .font(.custom(Font.medium.rawValue, size: 8.5))
                                    .foregroundColor(Color.white)
                            }
                        }
                        .padding(3)
                        .background(Color.gray33.opacity(0.7))
                        .cornerRadius(10)
                        .padding(.leading, 2.7)
                        .padding(.bottom, 2.7)
                        
                        Spacer()
                        
                        HStack(spacing: 2) {
                            Text(item.duration)
                                .font(.custom(Font.medium.rawValue, size: 8.5))
                                .foregroundColor(Color.white)
                        }
                        .padding(3)
                        .background(Color.gray33.opacity(0.7))
                        .cornerRadius(10)
                        .padding(.trailing, 2.7)
                        .padding(.bottom, 2.7)
                    }
                }
            }
            .frame(width: itemWidth, height: itemWidth)
            
            Text(item.title)
                .font(.custom(Font.medium.rawValue, size: 13.3))
                .foregroundColor(Color.grayd2)
                .frame(width: itemWidth, alignment: .leading)
                .multilineTextAlignment(.leading)
                .fixedSize(horizontal: false, vertical: true)
                .lineLimit(2)
            
            HStack(spacing: 5.3) {
                KFImage(URL(string: item.creatorProfileImageUrl))
                    .cancelOnDisappear(true)
                    .downsampling(
                        size: CGSize(
                            width: 21.3,
                            height: 21.3
                        )
                    )
                    .resizable()
                    .scaledToFill()
                    .frame(width: 21.3, height: 21.3)
                    .clipShape(Circle())
                    .onTapGesture { AppState.shared.setAppStep(step: .creatorDetail(userId: item.creatorId)) }
                
                Text(item.creatorNickname)
                    .font(.custom(Font.medium.rawValue, size: 12))
                    .foregroundColor(.gray77)
                    .lineLimit(1)
            }
            .padding(.bottom, 10)
        }
        .onTapGesture {
            AppState.shared
                .setAppStep(step: .contentDetail(contentId: item.contentId))
        }
    }
}

#Preview {
    ContentMainTagCurationView(
        tagList: ["test", "test2", "test3", "test4", "test5", "test6", "test7"],
        contentList: [
            GetAudioContentMainItem(
                contentId: 1,
                coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
                title: "ㅓ처랴햐햫햐햐",
                creatorId: 8,
                creatorProfileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
                creatorNickname: "유저1",
                price: 100,
                duration: "00:00:30"
            ),
            GetAudioContentMainItem(
                contentId: 2,
                coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
                title: "ㅓ처랴햐햫햐햐",
                creatorId: 8,
                creatorProfileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
                creatorNickname: "유저2",
                price: 0,
                duration: "00:00:30"
            ),
            GetAudioContentMainItem(
                contentId: 3,
                coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
                title: "ㅓ처랴햐햫햐햐",
                creatorId: 8,
                creatorProfileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
                creatorNickname: "유저3",
                price: 1000,
                duration: "00:00:30"
            ),
            GetAudioContentMainItem(
                contentId: 4,
                coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
                title: "ㅓ처랴햐햫햐햐",
                creatorId: 8,
                creatorProfileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
                creatorNickname: "유저3",
                price: 50000,
                duration: "00:00:30"
            )
        ],
        selectTag: { _ in }
    )
}
