package com.tt.honeyDue.ui.components.dialogs

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
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.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import com.tt.honeyDue.ui.theme.*
import com.tt.honeyDue.platform.HapticFeedbackType
import com.tt.honeyDue.platform.rememberHapticFeedback

/**
 * ThemePickerDialog - Shows all available themes in a grid
 * Matches iOS theme picker functionality
 *
 * Features:
 * - Grid layout with 2 columns
 * - Shows theme preview colors
 * - Current theme highlighted with checkmark
 * - Theme name and description
 *
 * Usage:
 * ```
 * if (showThemePicker) {
 *     ThemePickerDialog(
 *         currentTheme = ThemeManager.currentTheme,
 *         onThemeSelected = { theme ->
 *             ThemeManager.setTheme(theme)
 *             showThemePicker = false
 *         },
 *         onDismiss = { showThemePicker = false }
 *     )
 * }
 * ```
 */
@Composable
fun ThemePickerDialog(
    currentTheme: ThemeColors,
    onThemeSelected: (ThemeColors) -> Unit,
    onDismiss: () -> Unit
) {
    val hapticFeedback = rememberHapticFeedback()

    Dialog(onDismissRequest = onDismiss) {
        Card(
            shape = RoundedCornerShape(AppRadius.lg),
            colors = CardDefaults.cardColors(
                containerColor = MaterialTheme.colorScheme.background
            ),
            modifier = Modifier
                .fillMaxWidth()
                .padding(AppSpacing.lg)
        ) {
            Column(
                modifier = Modifier.padding(AppSpacing.xl)
            ) {
                // Header
                Text(
                    text = "Choose Theme",
                    style = MaterialTheme.typography.headlineSmall,
                    color = MaterialTheme.colorScheme.onBackground,
                    modifier = Modifier.padding(bottom = AppSpacing.lg)
                )

                // Theme Grid
                LazyVerticalGrid(
                    columns = GridCells.Fixed(2),
                    horizontalArrangement = Arrangement.spacedBy(AppSpacing.md),
                    verticalArrangement = Arrangement.spacedBy(AppSpacing.md),
                    modifier = Modifier.heightIn(max = 400.dp)
                ) {
                    items(ThemeManager.getAllThemes()) { theme ->
                        ThemeCard(
                            theme = theme,
                            isSelected = theme.id == currentTheme.id,
                            onClick = {
                                hapticFeedback.perform(HapticFeedbackType.Selection)
                                onThemeSelected(theme)
                            }
                        )
                    }
                }

                // Close button
                Spacer(modifier = Modifier.height(AppSpacing.lg))
                TextButton(
                    onClick = onDismiss,
                    modifier = Modifier.align(Alignment.End)
                ) {
                    Text("Close")
                }
            }
        }
    }
}

/**
 * Individual theme card in the picker
 */
@Composable
private fun ThemeCard(
    theme: ThemeColors,
    isSelected: Boolean,
    onClick: () -> Unit
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .clickable(onClick = onClick)
            .then(
                if (isSelected) {
                    Modifier.border(
                        width = 2.dp,
                        color = MaterialTheme.colorScheme.primary,
                        shape = RoundedCornerShape(AppRadius.md)
                    )
                } else {
                    Modifier
                }
            ),
        shape = RoundedCornerShape(AppRadius.md),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.backgroundSecondary
        )
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(AppSpacing.md),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // Color preview circles
            Row(
                horizontalArrangement = Arrangement.spacedBy(AppSpacing.xs),
                modifier = Modifier.padding(bottom = AppSpacing.sm)
            ) {
                // Preview with light mode colors
                ColorCircle(theme.lightPrimary)
                ColorCircle(theme.lightSecondary)
                ColorCircle(theme.lightAccent)
            }

            // Theme name
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.Center,
                modifier = Modifier.fillMaxWidth()
            ) {
                Text(
                    text = theme.displayName,
                    style = MaterialTheme.typography.titleSmall,
                    color = MaterialTheme.colorScheme.onBackground,
                    textAlign = TextAlign.Center,
                    modifier = Modifier.weight(1f)
                )

                if (isSelected) {
                    Icon(
                        imageVector = Icons.Default.Check,
                        contentDescription = "Selected",
                        tint = MaterialTheme.colorScheme.primary,
                        modifier = Modifier.size(16.dp)
                    )
                }
            }

            // Theme description
            Text(
                text = theme.description,
                style = MaterialTheme.typography.bodySmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant,
                textAlign = TextAlign.Center,
                modifier = Modifier.padding(top = AppSpacing.xs)
            )
        }
    }
}

/**
 * Small colored circle for theme preview
 */
@Composable
private fun ColorCircle(color: Color) {
    Box(
        modifier = Modifier
            .size(24.dp)
            .clip(CircleShape)
            .background(color)
            .border(
                width = 1.dp,
                color = Color.Black.copy(alpha = 0.1f),
                shape = CircleShape
            )
    )
}
