package com.socialapp.presentation.ui.screens

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.socialapp.presentation.ui.theme.AccentMagenta

data class Notification(
    val id: Int,
    val type: String, // like, follow, comment, mention, post
    val userName: String,
    val userAvatar: String,
    val description: String,
    val timestamp: String,
    val isRead: Boolean,
    val action: String? = null
)

@Composable
fun NotificationScreen(
    onUserClick: (Int) -> Unit = {},
    onPostClick: (Int) -> Unit = {}
) {
    val selectedTab = remember { mutableStateOf(0) }
    val notifications = remember {
        mutableStateOf(
            listOf(
                Notification(1, "like", "Sarah", "", "liked your post", "5m ago", false),
                Notification(2, "follow", "Mike", "", "started following you", "15m ago", false),
                Notification(3, "comment", "Emma", "", "commented on your post", "30m ago", false),
                Notification(4, "mention", "John", "", "mentioned you in a comment", "1h ago", true),
                Notification(5, "like", "Lisa", "", "liked your post", "2h ago", true),
                Notification(6, "follow", "Alex", "", "started following you", "3h ago", true),
            )
        )
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.background)
    ) {
        // Header
        Text(
            text = "Notifications",
            fontSize = 28.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.padding(16.dp)
        )

        // Tabs
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 8.dp),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            listOf("All", "Likes", "Comments", "Follows").forEachIndexed { index, tab ->
                Box(
                    modifier = Modifier
                        .clip(RoundedCornerShape(20.dp))
                        .background(
                            if (selectedTab.value == index) MaterialTheme.colorScheme.onBackground.copy(alpha = 0.2f)
                            else MaterialTheme.colorScheme.surface
                        )
                        .clickable { selectedTab.value = index }
                        .padding(horizontal = 12.dp, vertical = 8.dp),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        text = tab,
                        fontSize = 13.sp,
                        fontWeight = if (selectedTab.value == index) FontWeight.SemiBold else FontWeight.Normal
                    )
                }
            }
        }

        Spacer(modifier = Modifier.height(8.dp))

        // Notifications List
        LazyColumn(modifier = Modifier.fillMaxSize()) {
            items(notifications.value) { notification ->
                NotificationItem(
                    notification = notification,
                    onUserClick = { onUserClick(notification.id) },
                    onPostClick = { onPostClick(notification.id) }
                )
                Divider(color = MaterialTheme.colorScheme.surface, thickness = 1.dp, modifier = Modifier.padding(horizontal = 16.dp))
            }
        }
    }
}

@Composable
private fun NotificationItem(
    notification: Notification,
    onUserClick: () -> Unit = {},
    onPostClick: () -> Unit = {}
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .background(
                if (!notification.isRead) AccentMagenta.copy(alpha = 0.05f)
                else MaterialTheme.colorScheme.background
            )
            .clickable { onUserClick() }
            .padding(12.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        // Avatar with Icon
        Box(
            modifier = Modifier
                .size(48.dp)
                .clip(CircleShape)
                .background(AccentMagenta.copy(alpha = 0.3f)),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = notification.userName.first().toString(),
                fontSize = 20.sp,
                fontWeight = FontWeight.Bold,
                color = AccentMagenta
            )

            // Notification Icon Badge
            Box(
                modifier = Modifier
                    .size(16.dp)
                    .clip(CircleShape)
                    .background(AccentMagenta)
                    .align(Alignment.TopEnd)
                    .offset(x = 2.dp, y = (-2).dp),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    imageVector = when (notification.type) {
                        "like" -> Icons.Default.Favorite
                        "follow" -> Icons.Default.PersonAdd
                        "comment" -> Icons.Default.ChatBubble
                        "mention" -> Icons.Default.Tag
                        else -> Icons.Default.Notifications
                    },
                    contentDescription = notification.type,
                    tint = MaterialTheme.colorScheme.background,
                    modifier = Modifier.size(8.dp)
                )
            }
        }

        // Content
        Column(
            modifier = Modifier.weight(1f),
            verticalArrangement = Arrangement.Center
        ) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Text(
                    text = notification.userName,
                    fontSize = 13.sp,
                    fontWeight = FontWeight.Bold
                )
                Spacer(modifier = Modifier.width(4.dp))
                Text(
                    text = notification.description,
                    fontSize = 13.sp,
                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.7f)
                )
            }
            Text(
                text = notification.timestamp,
                fontSize = 11.sp,
                color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f),
                modifier = Modifier.padding(top = 4.dp)
            )
        }

        // Action Button
        if (!notification.isRead) {
            Box(
                modifier = Modifier
                    .size(8.dp)
                    .clip(CircleShape)
                    .background(AccentMagenta)
            )
        } else {
            IconButton(onClick = onPostClick, modifier = Modifier.size(32.dp)) {
                Icon(
                    imageVector = Icons.Default.ChevronRight,
                    contentDescription = "View",
                    tint = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.3f),
                    modifier = Modifier.size(20.dp)
                )
            }
        }
    }
}