package id.iiyh.inatrading.core.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import id.iiyh.inatrading.core.ui.theme.InaTradingTheme
import id.iiyh.inatrading.core.ui.theme.OnSurface
import id.iiyh.inatrading.core.ui.theme.SurfaceContainerLowest
import id.iiyh.inatrading.core.ui.theme.InaShape

private val CardShape = RoundedCornerShape(InaShape.md)

/**
 * Card dasar sesuai design spec:
 * - Zero border (no outline)
 * - Background: SurfaceContainerLowest (#ffffff) di atas SurfaceContainerLow (#f2f4f5)
 * - Padding minimal 24dp
 * - On press: background shift + ambient shadow naik sedikit
 */
@Composable
fun InaCard(
    modifier: Modifier = Modifier,
    onClick: (() -> Unit)? = null,
    content: @Composable () -> Unit,
) {
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()

    // Ambient shadow sesuai design spec: on-surface @ 4% opacity, blur 32dp, offsetY 8dp
    // Saat pressed, shadow sedikit lebih dalam
    val shadowElevation = if (isPressed) 6.dp else 2.dp
    val bgColor = if (isPressed) Color(0xFFFAFAFA) else SurfaceContainerLowest

    val clickModifier = if (onClick != null) {
        Modifier.clickable(
            interactionSource = interactionSource,
            indication = ripple(color = OnSurface.copy(alpha = 0.06f)),
            onClick = onClick,
        )
    } else Modifier

    Column(
        modifier = modifier
            .shadow(
                elevation = shadowElevation,
                shape = CardShape,
                ambientColor = OnSurface.copy(alpha = 0.04f),
                spotColor = OnSurface.copy(alpha = 0.04f),
            )
            .clip(CardShape)
            .background(bgColor)
            .then(clickModifier)
            .padding(24.dp),
    ) {
        content()
    }
}

// ─── Preview ──────────────────────────────────────────────────────────────────
@Preview(showBackground = true, backgroundColor = 0xFFF2F4F5)
@Composable
private fun InaCardPreview() {
    InaTradingTheme {
        Column(
            modifier = Modifier.padding(24.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            InaCard {
                Text("Card tanpa interaksi")
            }
            InaCard(onClick = {}) {
                Text("Card dengan onClick (clickable)")
            }
        }
    }
}
