package com.craigvg.lichun_android.ui.screens.store

import androidx.compose.foundation.background
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.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.Inventory2
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.craigvg.lichun_android.ui.theme.AppColors
import com.craigvg.lichun_android.ui.theme.AppSpacing
import com.craigvg.lichun_android.ui.theme.AppTypography
import com.craigvg.lichun_android.viewmodel.PlayerViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle

/**
 * Standalone inventory screen showing owned items
 * Ported from iOS ItemsView.swift
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ItemsScreen(
    playerViewModel: PlayerViewModel = hiltViewModel(),
    onBack: () -> Unit = {}
) {
    val storeItems by playerViewModel.storeItems.collectAsStateWithLifecycle()

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("My Items", style = AppTypography.headline) },
                navigationIcon = {
                    IconButton(onClick = onBack) {
                        Icon(
                            Icons.AutoMirrored.Filled.ArrowBack,
                            "Back",
                            tint = AppColors.primaryText
                        )
                    }
                },
                colors = TopAppBarDefaults.topAppBarColors(containerColor = AppColors.surfaceElevated)
            )
        },
        containerColor = AppColors.background
    ) { paddingValues ->
        if (storeItems.isEmpty()) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(paddingValues),
                contentAlignment = Alignment.Center
            ) {
                Column(horizontalAlignment = Alignment.CenterHorizontally) {
                    Box(
                        modifier = Modifier
                            .size(80.dp)
                            .clip(CircleShape)
                            .background(AppColors.accent.copy(alpha = 0.15f)),
                        contentAlignment = Alignment.Center
                    ) {
                        Icon(
                            Icons.Default.Inventory2,
                            contentDescription = null,
                            tint = AppColors.accent,
                            modifier = Modifier.size(36.dp)
                        )
                    }
                    Spacer(modifier = Modifier.height(AppSpacing.md))
                    Text(
                        text = "No items yet",
                        style = AppTypography.headline,
                        color = AppColors.primaryText
                    )
                    Text(
                        text = "Visit the store to purchase items",
                        style = AppTypography.body,
                        color = AppColors.secondaryText,
                        textAlign = TextAlign.Center
                    )
                }
            }
        } else {
            LazyColumn(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(paddingValues)
                    .padding(horizontal = AppSpacing.md),
                verticalArrangement = Arrangement.spacedBy(AppSpacing.sm),
                contentPadding = PaddingValues(vertical = AppSpacing.md)
            ) {
                items(storeItems) { item ->
                    Card(
                        modifier = Modifier.fillMaxWidth(),
                        shape = RoundedCornerShape(AppSpacing.cornerRadius),
                        colors = CardDefaults.cardColors(containerColor = AppColors.surfaceElevated)
                    ) {
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(AppSpacing.md),
                            verticalAlignment = Alignment.CenterVertically,
                            horizontalArrangement = Arrangement.spacedBy(AppSpacing.md)
                        ) {
                            Box(
                                modifier = Modifier
                                    .size(48.dp)
                                    .clip(CircleShape)
                                    .background(AppColors.accent.copy(alpha = 0.15f)),
                                contentAlignment = Alignment.Center
                            ) {
                                Icon(
                                    Icons.Default.Inventory2,
                                    contentDescription = null,
                                    tint = AppColors.accent,
                                    modifier = Modifier.size(24.dp)
                                )
                            }
                            Column(modifier = Modifier.weight(1f)) {
                                Text(
                                    text = item.name,
                                    style = AppTypography.bodyBold,
                                    color = AppColors.primaryText
                                )
                                Text(
                                    text = item.description,
                                    style = AppTypography.caption,
                                    color = AppColors.secondaryText
                                )
                            }
                            if (item.prestigeBoost > 0) {
                                Text(
                                    text = "+${item.prestigeBoost} Prestige",
                                    style = AppTypography.captionBold,
                                    color = AppColors.prestige
                                )
                            }
                        }
                    }
                }
            }
        }
    }
}