dimensionhub/dimensionhub/Views/DetailView.swift

//
//  ListView.swift
//  dimensionhub
//
//  Created by 安礼成 on 2025/2/21.
//
import SwiftUI
import Observation

@Observable
final class DetailModel {
    
    struct VoiceActor: Codable {
        let actor_id: Int
        let name: String
    }
    
    struct Episode: Codable {
        let id: Int32
        let name: String
        let thumb: String
        let numName: String
        
        enum CodingKeys: String, CodingKey {
            case id = "id"
            case name = "name"
            case thumb = "thumb"
            case numName = "num_name"
        }
    }
    
    // 渠道
    struct Channel: Codable {
        let name: String
        let episodes: [Episode]
    }
    
    struct DramaDetailResponse: Codable {
        let name: String
        let voice_actors: [VoiceActor]
        let status: Int
        let channels: [Channel]
    }
    
    var name: String = ""
    var voiceActors: [VoiceActor] = []
    var status: Int = 0
    var channels: [Channel] = []
    
    // 当前选中的channel
    var selectedChannelIdx: Int = 0
    var selectedEpisodes: [Episode] = []
    
    @MainActor
    func loadData(dramaId: Int) async {
        let response = await API.getDramaDetail(as: DramaDetailResponse.self)
        switch response {
        case .error(let code, let message):
            print(code)
            print(message)
        case .result(let detail):
            self.name = detail.name
            self.voiceActors = detail.voice_actors
            self.status = detail.status
            self.channels = detail.channels
            
            self.selectedChannelIdx = 0
            self.selectedEpisodes = detail.channels[0].episodes
        }
    }
    
    func toggleChannel(channelIdx: Int) {
        self.selectedChannelIdx = channelIdx
        self.selectedEpisodes = self.channels[channelIdx].episodes
    }
    
}

struct DetailView: View {
    @State var detailModel = DetailModel()
    
    var body: some View {
        VStack(alignment: .center) {
            
            VStack(alignment: .leading, spacing: 10) {
                Text(detailModel.name)
                    .font(.system(size: 28))
                    .fontWeight(.bold)
                    .foregroundColor(Color(hex: "#333333"))
                
                HStack(alignment: .center, spacing: 0) {
                    ForEach(Array(detailModel.voiceActors.enumerated()), id: \.offset) { index, actor in
                        if index > 0 {
                            Text("、")
                                .font(.system(size: 13))
                                .foregroundColor(Color(hex: "#999999"))
                        }
                        Text(actor.name)
                            .font(.system(size: 13))
                            .foregroundColor(Color(hex: "#999999"))
                    }
                    Text("等")
                        .font(.system(size: 13))
                        .foregroundColor(Color(hex: "#999999"))
                        
                    Spacer()
                }
            }
            .padding([.top, .leading], 10)
            .background(Color(hex: "#F2F2F2"), ignoresSafeAreaEdges: [.bottom])

            HStack {
                Spacer()
                
                switch detailModel.status {
                case 0:
                    FollowButtonView(title: "补完", bgColor: .black, fontColor: .white) {
                        
                    }
                case 1:
                    FollowButtonView(title: "追番", bgColor: .black, fontColor: .white) {
                        
                    }
                case 2:
                    FollowButtonView(title: "前排站位", bgColor: .black, fontColor: .white) {
                        
                    }
                case 3:
                    FollowButtonView(title: "弃番", bgColor: .black, fontColor: .white) {
                        
                    }
                default:
                    FollowButtonView(title: "追番", bgColor: .white, fontColor: Color(hex: "#333333")) {
                        
                    }
                }
            }
            
            // 渠道列表
            HStack(alignment: .center, spacing: 15) {
                ForEach(Array(detailModel.channels.enumerated()), id: \.offset) { idx, channel in
                    Text(channel.name)
                        .font(.system(size: 13))
                        .foregroundColor(idx == detailModel.selectedChannelIdx ? Color(hex: "#169BD5") : Color(hex: "#666666"))
                        .onTapGesture {
                            detailModel.toggleChannel(channelIdx: idx)
                        }
                }
                Spacer()
            }
            .padding(.leading, 10)

            // 渠道相关的数据列表
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(alignment: .center) {
                    ForEach(detailModel.selectedEpisodes, id: \.id) { episode in
                        VStack(alignment: .center) {
                            AsyncImage(url: URL(string: episode.thumb)) { image in
                                image.resizable()
                            } placeholder: {
                                ProgressView()
                            }
                            .frame(width: 90, height: 70)
                            .overlay {
                                VStack {
                                    HStack {
                                        Text(episode.numName)
                                            .font(.system(size: 12))
                                            .foregroundColor(Color(hex: "#333333"))
                                        Spacer()
                                    }
                                    Spacer()
                                }
                                .padding([.top, .leading], 8)
                            }
                            
                            Text(episode.name)
                                .font(.system(size: 12))
                                .foregroundColor(Color(hex: "#333333"))
                                .lineLimit(1)
                        }
                        .frame(width: 90, height: 120)
                    }
                }
            }
            
            HStack(alignment: .center) {
                NavigationLink(destination: ListView()) {
                    Rectangle()
                        .frame(width: 200, height: 25)
                        .foregroundColor(Color(hex: "#F2F2F2"))
                        //.cornerRadius(5)
                        .overlay {
//                            RoundedRectangle(cornerRadius: 5)
//                                .stroke(Color.black, lineWidth: 1)
                            
                            Text("展开全部剧集")
                                .font(.system(size: 13))
                                .foregroundColor(Color(hex: "#999999"))
                                .fontWeight(.regular)
                        }
                }
            }
            
            Spacer()
        }
        .frame(width: 370, alignment: .center)
        .task {
            await detailModel.loadData(dramaId: 124)
            print(UIScreen.main.bounds.width)
        }
    }
    
}

extension DetailView {
    
    struct FollowButtonView: View {
        let title: String
        let bgColor: Color
        let fontColor: Color
        let onTap: () -> Void
        
        var body: some View {
            Rectangle()
                .frame(width: 140, height: 40)
                .foregroundColor(bgColor)
                .cornerRadius(5)
                .overlay {
                    RoundedRectangle(cornerRadius: 5)
                        .stroke(Color.black, lineWidth: 1)
                    
                    Text(title)
                        .font(.system(size: 13))
                        .foregroundColor(fontColor)
                        .fontWeight(.regular)
                }
                .onTapGesture {
                    onTap()
                }
        }
    }
    
}

#Preview {
    DetailView()
}