package com.atridad.openclimb.ui.screens

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.atridad.openclimb.data.model.Gym
import com.atridad.openclimb.ui.viewmodel.ClimbViewModel

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun GymsScreen(
    viewModel: ClimbViewModel,
    onNavigateToGymDetail: (String) -> Unit,
    onNavigateToAddGym: () -> Unit
) {
    val gyms by viewModel.gyms.collectAsState()
    
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Text(
            text = "Climbing Gyms",
            style = MaterialTheme.typography.headlineMedium,
            fontWeight = FontWeight.Bold
        )
        
        Spacer(modifier = Modifier.height(16.dp))
        
        if (gyms.isEmpty()) {
            EmptyStateMessage(
                title = "No Gyms Added",
                message = "Add your favorite climbing gyms to start tracking your progress!",
                onActionClick = { },
                actionText = ""
            )
        } else {
            LazyColumn {
                items(gyms) { gym ->
                    GymCard(
                        gym = gym,
                        onClick = { onNavigateToGymDetail(gym.id) }
                    )
                    Spacer(modifier = Modifier.height(8.dp))
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun GymCard(
    gym: Gym,
    onClick: () -> Unit
) {
    Card(
        onClick = onClick,
        modifier = Modifier.fillMaxWidth()
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            Text(
                text = gym.name,
                style = MaterialTheme.typography.titleLarge,
                fontWeight = FontWeight.Bold
            )
            
            gym.location?.let { location ->
                Spacer(modifier = Modifier.height(4.dp))
                Text(
                    text = location,
                    style = MaterialTheme.typography.bodyMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }
            
            Spacer(modifier = Modifier.height(8.dp))
            
            Row {
                gym.supportedClimbTypes.forEach { climbType ->
                    AssistChip(
                        onClick = { },
                        label = { 
                            Text(climbType.name.lowercase().replaceFirstChar { it.uppercase() }) 
                        },
                        modifier = Modifier.padding(end = 4.dp)
                    )
                }
            }
            
            if (gym.difficultySystems.isNotEmpty()) {
                Spacer(modifier = Modifier.height(4.dp))
                Text(
                    text = "Systems: ${gym.difficultySystems.joinToString(", ") { it.name }}",
                    style = MaterialTheme.typography.bodySmall,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }
            
            gym.notes?.let { notes ->
                if (notes.isNotBlank()) {
                    Spacer(modifier = Modifier.height(8.dp))
                    Text(
                        text = notes,
                        style = MaterialTheme.typography.bodySmall,
                        color = MaterialTheme.colorScheme.onSurfaceVariant,
                        maxLines = 2
                    )
                }
            }
        }
    }
}
