//
//  ChatMessagesList.swift
//  lichunWebsocket
//
//  ScrollView with message bubbles, appearance animations, and auto-scroll
//

import SwiftUI

struct ChatMessagesList: View {
    let character: Person
    let characterID: String
    let allMessages: [ConversationMessage]
    let hiddenMessageIds: Set<String>
    let showTypingIndicator: Bool
    let hasConversation: Bool
    let hasActiveConversation: Bool

    @Binding var appearedMessages: Set<String>
    @Binding var initialMessageIds: Set<String>

    let onRetry: (ConversationMessage) -> Void
    let onDelete: (ConversationMessage) -> Void
    let onTapBackground: () -> Void

    var body: some View {
        LazyVStack(spacing: AppSpacing.md) {
            // Spacer at top to push content down when few messages
            if allMessages.count < 10 {
                Spacer()
                    .frame(minHeight: 100)
            }
            if hasConversation {
                let visibleMessages = allMessages.filter { !hiddenMessageIds.contains($0.id) }
                ForEach(Array(visibleMessages.enumerated()), id: \.element.id) { index, message in
                    CozyMessageBubble(
                        message: message,
                        character: character,
                        isFromPlayer: message.isFromCurrentUser(playerCharacterId: character.id),
                        onRetry: { failedMessage in
                            onRetry(failedMessage)
                        },
                        onDelete: { failedMessage in
                            onDelete(failedMessage)
                        }
                    )
                    .id(message.id)
                    .opacity(appearedMessages.contains(message.id) ? 1 : 0)
                    .offset(y: appearedMessages.contains(message.id) ? 0 : 8)
                    .onAppear {
                        if initialMessageIds.contains(message.id) {
                            // Messages that existed on load appear instantly
                            appearedMessages.insert(message.id)
                        } else {
                            // New messages get a fast fade-in
                            withAnimation(.easeOut(duration: 0.15)) {
                                _ = appearedMessages.insert(message.id)
                            }
                        }
                    }
                }
            } else if hasActiveConversation {
                // Loading state
                VStack(spacing: AppSpacing.lg) {
                    ProgressView()
                        .progressViewStyle(CircularProgressViewStyle(tint: AppColors.primary))
                        .scaleEffect(1.5)
                }
                .frame(maxWidth: .infinity)
                .padding(AppSpacing.xxl)
            } else {
                // Empty state
                ChatMessagesEmptyState(characterName: character.firstname)
            }

            // Typing indicator (shows when waiting for AI response)
            if showTypingIndicator {
                TypingIndicatorBubble(character: character)
                    .id("typing")
                    .transition(.opacity)
            }

            // Bottom padding for scroll
            Color.clear
                .frame(height: AppSpacing.sm)
                .id("bottom")
        }
        .padding(.horizontal, AppSpacing.md)
        .padding(.top, AppSpacing.sm)
    }
}

// MARK: - Empty State (private to this file)

private struct ChatMessagesEmptyState: View {
    let characterName: String

    var body: some View {
        VStack(spacing: AppSpacing.lg) {
            Spacer()

            // Cozy icon with warm background
            ZStack {
                Circle()
                    .fill(
                        LinearGradient(
                            colors: [AppColors.primary.opacity(0.15), AppColors.accent.opacity(0.15)],
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
                    .frame(width: 100, height: 100)

                Image(systemName: "message.fill")
                    .font(.system(size: 40))
                    .foregroundColor(AppColors.primary)
            }

            // Friendly text
            VStack(spacing: AppSpacing.sm) {
                Text("Start a Conversation")
                    .font(.appTitle2)
                    .foregroundColor(AppColors.primaryText)

                Text("Send \(characterName) a message to\nstart building your relationship!")
                    .font(.appBody)
                    .foregroundColor(AppColors.secondaryText)
                    .multilineTextAlignment(.center)
                    .lineSpacing(3)
            }

            Spacer()
        }
        .frame(maxWidth: .infinity)
        .padding(AppSpacing.xl)
    }
}