//
//  CozyMessageInput.swift
//  lichunWebsocket
//
//  Cozy message input field with send button and layered shadows
//

import SwiftUI

struct CozyMessageInput: View {
    @Binding var text: String
    let onSend: () -> Void
    @FocusState private var isFocused: Bool

    var body: some View {
        HStack(spacing: AppSpacing.sm) {
            // Text input field
            TextField("Type a message...", text: $text)
                .font(.appBody)
                .padding(.horizontal, AppSpacing.md)
                .padding(.vertical, AppSpacing.sm)
                .background(AppColors.surfaceElevated)
                .cornerRadius(24)
                .overlay(
                    RoundedRectangle(cornerRadius: 24)
                        .strokeBorder(
                            isFocused ? AppColors.primary.opacity(0.3) : AppColors.surfaceElevated.lighter(by: 0.2),
                            lineWidth: isFocused ? 2 : 1
                        )
                )
                .shadow(color: Color.black.opacity(0.04), radius: 4, x: 0, y: 2)
                .shadow(color: Color.black.opacity(0.02), radius: 2, x: 0, y: 1)
                .focused($isFocused)
                .animation(.spring(response: 0.3, dampingFraction: 0.7), value: isFocused)

            // Send button
            Button(action: {
                if !text.isEmpty {
                    hapticFeedback(style: .light)
                    onSend()
                }
            }) {
                Image(systemName: text.isEmpty ? "arrow.up.circle" : "arrow.up.circle.fill")
                    .font(.system(size: 36))
                    .foregroundColor(
                        text.isEmpty ? AppColors.disabledText : AppColors.primary
                    )
                    .shadow(
                        color: text.isEmpty ? .clear : AppColors.primary.opacity(0.4),
                        radius: 6,
                        x: 0,
                        y: 3
                    )
                    .shadow(
                        color: text.isEmpty ? .clear : AppColors.primary.opacity(0.2),
                        radius: 3,
                        x: 0,
                        y: 1
                    )
            }
            .disabled(text.isEmpty)
            .animation(.spring(response: 0.3, dampingFraction: 0.7), value: text.isEmpty)
        }
        .padding(.horizontal, AppSpacing.md)
        .padding(.vertical, AppSpacing.sm)
    }
}

// MARK: - Preview
#if DEBUG
struct CozyMessageInput_Previews: PreviewProvider {
    @State private static var sampleText = "Hello!"

    static var previews: some View {
        VStack {
            Spacer()
            CozyMessageInput(text: .constant("")) {
                print("Send tapped")
            }
            CozyMessageInput(text: $sampleText) {
                print("Send tapped")
            }
        }
        .background(AppColors.background)
    }
}
#endif