package com.craigvg.lichun_android.ui.screens.messaging.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ChatBubble
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.craigvg.lichun_android.ui.theme.AppColors
import com.craigvg.lichun_android.ui.theme.AppSpacing
import com.craigvg.lichun_android.ui.theme.AppTypography

/**
 * Empty conversation list state with icon and description.
 * Ported from iOS MessagesEmptyState.swift
 */
@Composable
fun MessagesEmptyState(
    modifier: Modifier = Modifier
) {
    Box(
        modifier = modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier.padding(AppSpacing.xl)
        ) {
            // Animated icon circle
            Box(
                modifier = Modifier
                    .size(140.dp)
                    .background(
                        Brush.linearGradient(
                            listOf(
                                AppColors.primary.copy(alpha = 0.1f),
                                AppColors.accent.copy(alpha = 0.1f)
                            )
                        ),
                        CircleShape
                    ),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    imageVector = Icons.Default.ChatBubble,
                    contentDescription = null,
                    tint = AppColors.primary,
                    modifier = Modifier.size(50.dp)
                )
            }

            Spacer(modifier = Modifier.height(AppSpacing.md))

            Text(
                text = "No Messages Yet",
                style = AppTypography.title,
                color = AppColors.primaryText,
                textAlign = TextAlign.Center
            )

            Spacer(modifier = Modifier.height(AppSpacing.xs))

            Text(
                text = "Connect with friends and family!\nStart a conversation to build\nyour relationships",
                style = AppTypography.body,
                color = AppColors.secondaryText,
                textAlign = TextAlign.Center
            )
        }
    }
}