//
//  OriginalWorkDetailHeaderView.swift
//  SodaLive
//
//  Created by klaus on 9/16/25.
//

import SwiftUI
import Kingfisher

struct OriginalWorkDetailHeaderView: View {
    
    let item: OriginalWorkDetailResponse
    
    var body: some View {
        VStack(spacing: 0) {
            if let imageUrl = item.imageUrl {
                KFImage(URL(string: imageUrl))
                    .cancelOnDisappear(true)
                    .resizable()
                    .scaledToFill()
                    .frame(width: 168, height: 168 * 432 / 306)
                    .clipped()
                    .cornerRadius(16)
            }
            
            Text(item.title)
                .font(.custom(Font.preBold.rawValue, size: 26))
                .foregroundColor(.white)
                .padding(.top, 40)
            
            HStack(spacing: 4) {
                Text(item.contentType)
                    .font(.custom(Font.preRegular.rawValue, size: 14))
                    .foregroundColor(Color(hex: "B0BEC5"))
                    .padding(.horizontal, 7)
                    .padding(.vertical, 3)
                    .background(Color(hex: "263238"))
                    .cornerRadius(4)
                    .overlay {
                        RoundedRectangle(cornerRadius: 4)
                            .strokeBorder(lineWidth: 1)
                            .foregroundColor(.white)
                    }
                
                Text(item.category)
                    .font(.custom(Font.preRegular.rawValue, size: 14))
                    .foregroundColor(.button)
                    .padding(.horizontal, 7)
                    .padding(.vertical, 3)
                    .background(Color(hex: "263238"))
                    .cornerRadius(4)
                    .overlay {
                        RoundedRectangle(cornerRadius: 4)
                            .strokeBorder(lineWidth: 1)
                            .foregroundColor(.button)
                    }
                
                if item.isAdult {
                    Text("19+")
                        .font(.custom(Font.preRegular.rawValue, size: 14))
                        .foregroundColor(Color(hex: "ff5c49"))
                        .padding(.horizontal, 7)
                        .padding(.vertical, 3)
                        .background(Color(hex: "263238"))
                        .cornerRadius(4)
                        .overlay {
                            RoundedRectangle(cornerRadius: 4)
                                .strokeBorder(lineWidth: 1)
                                .foregroundColor(Color(hex: "ff5c49"))
                        }
                }
            }
            .padding(.top, 14)
            
            Text(
                item.tags
                    .map { $0.hasPrefix("#") ? $0 : "#\($0)" }
                    .joined(separator: " ")
            )
            .font(.custom(Font.preRegular.rawValue, size: 14))
            .foregroundColor(Color(hex: "3bb9f1"))
            .frame(maxWidth: .infinity)
            .padding(.top, 14)
        }
    }
}

#Preview {
    OriginalWorkDetailHeaderView(
        item: OriginalWorkDetailResponse(
            imageUrl: "https://picsum.photos/400",
            title: "작품제목",
            contentType: "웹소설",
            category: "로맨스",
            isAdult: true,
            description: "작품설명입니다.보이스온의 오픈월드 캐릭터톡은 청소년 보호를 위해 본인인증한성인만 이용이 가능합니다.캐릭터톡 서비스를 이용하시려면 본인인증을 하고 이용해주세요.",
            originalWork: nil,
            originalLink: "https://apple.com",
            writer: nil,
            studio: nil,
            originalLinks: [],
            tags: [],
            characters: []
        )
    )
}