//
//  ChatRoomView.swift
//  SodaLive
//
//  Created by klaus on 9/2/25.
//

import SwiftUI
import Kingfisher
import UIKit

struct ChatRoomView: View {
    
    @StateObject var viewModel = ChatRoomViewModel()
    
    @AppStorage("can") private var can: Int = UserDefaults.int(forKey: .can)
    
    let roomId: Int
    
    var body: some View {
        BaseView(isLoading: $viewModel.isLoading) {
            if !viewModel.isHideBg {
                ChatRoomBgView(url: viewModel.chatRoomBgImageUrl)
            }
            
            if !viewModel.isResetting {
                VStack(spacing: 0) {
                    HStack(spacing: 12) {
                        Image("ic_back")
                            .resizable()
                            .frame(width: 24, height: 24)
                            .onTapGesture {
                                AppState.shared.back()
                            }
                        
                        KFImage(URL(string: viewModel.characterProfileUrl))
                            .placeholder {
                                Image(systemName: "person.crop.circle")
                                    .resizable()
                                    .scaledToFit()
                            }
                            .cancelOnDisappear(true)
                            .resizable()
                            .frame(width: 36, height: 36)
                            .clipShape(Circle())
                        
                        VStack(alignment: .leading, spacing: 4) {
                            Text(viewModel.characterName)
                                .font(.custom(Font.preBold.rawValue, size: 12))
                                .foregroundColor(.white)
                                .lineLimit(1)
                                .truncationMode(.tail)
                            
                            Text(viewModel.characterType.rawValue)
                                .font(.custom(Font.preBold.rawValue, size: 10))
                                .foregroundColor(.white)
                                .padding(.horizontal, 4)
                                .padding(.vertical, 2)
                                .background(
                                    Color(hex:
                                            viewModel.characterType == .Clone ?
                                          "0020C9" : "009D68"
                                         )
                                )
                                .cornerRadius(6)
                        }
                        
                        Spacer()
                        
                        HStack(spacing: 4) {
                            Image("ic_can")
                                .resizable()
                                .frame(width: 20, height: 20)
                            
                            Text("\(can)")
                                .font(.custom(Font.preRegular.rawValue, size: 16))
                                .foregroundColor(.white)
                        }
                        .padding(.horizontal, 10)
                        .padding(.vertical, 5)
                        .background(Color(hex: "263238"))
                        .cornerRadius(30)
                        
                        Image("ic_seemore_vertical_white")
                            .resizable()
                            .frame(width: 24, height: 24)
                            .onTapGesture {
                                viewModel.isShowingChatSettingsView = true
                            }
                    }
                    .padding(.horizontal, 16)
                    .padding(.vertical, 8)
                    .frame(width: screenSize().width, height: 60)
                    
                    if !viewModel.isHideNotice {
                        HStack(spacing: 8) {
                            Image(systemName: "info.circle.fill")
                                .resizable()
                                .frame(width: 20, height: 20)
                            
                            Text(
                                viewModel.characterType == .Character
                                ? "보이스온 AI캐릭터톡은 대화의 자유도가 높아 대화에 참여하는 당신은 누구든 될 수 있습니다.\n세계관 속 캐릭터로 대화를 하거나 새로운 인물로 캐릭터와 당신만의 스토리를 만들어보세요.\n※ AI캐릭터톡은 오픈베타 서비스 중이며, 캐릭터의 대화가 어색하거나 불완전할 수 있습니다."
                                : "AI Clone은 크리에이터의 정보를 기반으로 대화하지만, 모든 정보를 완벽하게 반영하거나 실제 대화와 일치하지 않을 수 있습니다."
                            )
                            .font(.custom(Font.preRegular.rawValue, size: 12))
                            .foregroundColor(.white)
                            
                            Image(systemName: "chevron.up")
                                .resizable()
                                .scaledToFit()
                                .frame(width: 20)
                                .onTapGesture { viewModel.isHideNotice = true }
                        }
                        .padding(12)
                        .background(Color(hex: "13181B").opacity(0.7))
                        .cornerRadius(16)
                        .frame(width: screenSize().width - 48)
                    }
                    
                    GeometryReader { geometry in
                        ScrollViewReader { proxy in
                            ScrollView(.vertical, showsIndicators: false) {
                                LazyVStack(spacing: 16) {
                                    ForEach(0..<viewModel.messages.count, id: \.self) { index in
                                        let message = viewModel.messages[index]
                                        if message.mine {
                                            UserMessageItemView(message: message)
                                                .id("msg_\(index)")
                                        } else {
                                            AiMessageItemView(
                                                message: message,
                                                characterName: viewModel.characterName
                                            ) {
                                                if message.hasAccess {
                                                    viewModel.showImageViewer(message.imageUrl)
                                                } else {
                                                    viewModel.selectedMessage = message
                                                    viewModel.selectedMessageIndex = index
                                                }
                                            }
                                            .id("msg_\(index)")
                                        }
                                    }
                                    
                                    if viewModel.showQuotaNoticeView {
                                        ChatQuotaNoticeItemView(remainingTime: viewModel.countdownText) {
                                            viewModel.purchaseChatQuota()
                                        }
                                        .id("quota_\(viewModel.messages.count)")
                                        .padding(.bottom, 12)
                                        .onAppear {
                                            withAnimation(.easeOut(duration: 0.3)) {
                                                proxy.scrollTo("quota_\(viewModel.messages.count)", anchor: .bottom)
                                            }
                                        }
                                    }
                                    
                                    if viewModel.showSendingMessage {
                                        TypingIndicatorItemView(
                                            characterName: viewModel.characterName,
                                            characterProfileUrl: viewModel.characterProfileUrl
                                        )
                                        .id("typing_\(viewModel.messages.count)")
                                    }
                                }
                                .padding(.horizontal, 24)
                                .frame(minHeight: geometry.size.height, alignment: .bottom)
                            }
                            .onChange(of: viewModel.messages.count) { _ in
                                guard !viewModel.messages.isEmpty else { return }
                                withAnimation(.easeOut(duration: 0.3)) {
                                    let targetId = viewModel.showSendingMessage
                                    ? "typing_\(viewModel.messages.count)"
                                    : "msg_\(viewModel.messages.count - 1)"
                                    proxy.scrollTo(targetId, anchor: .bottom)
                                }
                            }
                        }
                    }
                    .frame(width: screenSize().width)
                    .frame(maxHeight: .infinity)
                    
                    if !viewModel.showQuotaNoticeView {
                        HStack(spacing: 8) {
                            HStack(spacing: 0) {
                                ZStack(alignment: .leading) {
                                    if viewModel.messageText.isEmpty {
                                        Text("메시지를 입력하세요.")
                                            .font(.custom(Font.preRegular.rawValue, size: 14))
                                            .foregroundColor(Color(hex: "78909C"))
                                    }
                                    
                                    TextField("", text: $viewModel.messageText)
                                        .font(.custom(Font.preRegular.rawValue, size: 14))
                                        .foregroundColor(.white)
                                        .onSubmit {
                                            viewModel.sendMessage()
                                        }
                                }
                                .frame(maxWidth: .infinity)
                            }
                            .padding(.horizontal, 16)
                            .padding(.vertical, 13)
                            .background(Color(hex: "263238"))
                            .cornerRadius(999)
                            .overlay(
                                RoundedRectangle(cornerRadius: 999)
                                    .stroke(Color(hex: "263238"), lineWidth: 1)
                            )
                            
                            Button(action: {
                                UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
                                viewModel.sendMessage()
                            }) {
                                Image("ic_message_send")
                                    .resizable()
                                    .frame(width: 24, height: 24)
                            }
                        }
                        .padding(.horizontal, 12)
                        .padding(.vertical, 12)
                        .frame(width: screenSize().width)
                    }
                }
            }
            
            if let message = viewModel.selectedMessage, viewModel.selectedMessageIndex >= 0 {
                SodaDialog(
                    title: "잠금된 메시지",
                    desc: "이 메시지를 \(message.price ?? 5)캔으로 잠금해제 하시겠습니까?",
                    confirmButtonTitle: "잠금해제",
                    confirmButtonAction: {
                        viewModel.purchaseChatMessage()
                    },
                    cancelButtonTitle: "취소"
                ) {
                    viewModel.selectedMessage = nil
                    viewModel.selectedMessageIndex = -1
                }
            }
            
            if viewModel.isShowingChatSettingsView {
                ChatSettingsView(
                    isShowing: $viewModel.isShowingChatSettingsView,
                    isHideBg: $viewModel.isHideBg,
                    onTapChangeBg: { viewModel.isShowingChangeBgView = true },
                    onTapResetChatRoom: { viewModel.isShowingChatResetConfirmDialog = true }
                )
            }
            
            if viewModel.isShowingChangeBgView {
                ChatBgSelectionView(
                    characterId: viewModel.characterId,
                    selectedBgImageId: viewModel.chatRoomBgImageId,
                    onTapBgImage: {
                        viewModel.setBackgroundImage(imageItem: $0)
                    },
                    isShowing: $viewModel.isShowingChangeBgView
                )
            }
            
            if viewModel.isShowingChatResetConfirmDialog {
                ZStack {
                    Color.black.opacity(0.7)
                    
                    SodaDialog(
                        title: "대화 초기화",
                        desc: "지금까지의 대화가 모두 초기화 되고 새롭게 대화를 시작합니다.",
                        confirmButtonTitle: "30캔으로 초기화",
                        confirmButtonAction: {
                            viewModel.resetChatRoom()
                            viewModel.isShowingChatResetConfirmDialog = false
                        },
                        cancelButtonTitle: "취소",
                        cancelButtonAction: {
                            viewModel.isShowingChatResetConfirmDialog = false
                        }
                    )
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            
            if viewModel.isResetting {
                ZStack {
                    Color.black.opacity(0.7)
                    
                    VStack(spacing: 0) {
                        ActivityIndicatorView()
                            .frame(width: 100, height: 100)
                        
                        Text("대화 초기화 중...")
                    }
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
        }
        .sheet(isPresented: $viewModel.isShowImageViewer) {
            ImageViewerView(
                images: viewModel.ownedImageUrls,
                selectedIndex: $viewModel.selectedImageIndex
            )
        }
        .onAppear {
            viewModel.getMemberInfo()
            viewModel.enterRoom(roomId: roomId)
        }
        .onDisappear {
            viewModel.stopTimer()
        }
        .popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .top, autohideIn: 2) {
            GeometryReader { geo in
                HStack {
                    Spacer()
                    Text(viewModel.errorMessage)
                        .padding(.vertical, 13.3)
                        .frame(width: geo.size.width - 66.7, alignment: .center)
                        .font(.custom(Font.medium.rawValue, size: 12))
                        .background(Color.button)
                        .foregroundColor(Color.white)
                        .multilineTextAlignment(.center)
                        .cornerRadius(20)
                        .padding(.top, 66.7)
                    Spacer()
                }
            }
        }
    }
}

struct ChatRoomBgView: View {
    
    let url: String?
    
    var body: some View {
        GeometryReader { geo in
            let width = geo.size.width
            let height = width * 3 / 2
            
            ZStack {
                if let url = url {
                    KFImage(URL(string: url))
                        .cancelOnDisappear(true)
                        .resizable()
                        .scaledToFill()
                        .frame(width: width, height: height)
                        .clipped()
                        .ignoresSafeArea()
                }
                
                Color.black
                    .opacity(0.6)
                    .ignoresSafeArea()
            }
            .frame(width: width, height: height)
            .clipped()
        }
        .aspectRatio(2/3, contentMode: .fit)
    }
}

#Preview {
    ChatRoomView(roomId: 0)
}