package com.peachpasswords.ui.theme

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.drawscope.withTransform
import kotlin.math.abs
import kotlin.math.max

/**
 * The two-bloom shell background that sits behind every screen.
 *
 * Mirrors the browser shell (spec §6.3 / popup.css):
 *   radial-gradient(120% 80% at 0% 0%,    accent 8%, transparent 65%)
 *   radial-gradient(85% 100% at 100% 100%, accent 6%, transparent 70%)
 *   over a flat --bg fill.
 *
 * Both blooms are elliptical. A circular approximation drifts off on tall
 * phones — the top-left bloom's vertical extent (0.8·h) outgrows its
 * horizontal extent (1.2·w) once the aspect ratio passes ~1.5, so we draw a
 * circular gradient and squash it to the CSS ellipse with a non-uniform scale.
 */
@Composable
fun ShellBackground(
    modifier: Modifier = Modifier,
    content: @Composable BoxScope.() -> Unit,
) {
    val accent = LocalPeachAccent.current
    val base = MaterialTheme_background()
    Box(
        modifier = modifier
            .fillMaxSize()
            .drawBehind {
                drawRect(color = base)

                drawBloom(
                    center = Offset(0f, 0f),
                    radiusX = size.width * 1.2f,
                    radiusY = size.height * 0.8f,
                    color = accent.copy(alpha = 0.08f),
                    transparentAt = 0.65f,
                )
                drawBloom(
                    center = Offset(size.width, size.height),
                    radiusX = size.width * 0.85f,
                    radiusY = size.height * 1.0f,
                    color = accent.copy(alpha = 0.06f),
                    transparentAt = 0.70f,
                )
            },
        content = content,
    )
}

/**
 * Draw one elliptical radial bloom. [transparentAt] is the fraction of the
 * ellipse radius where the colour has fully faded — matching the CSS
 * `transparent <pct>` stop so the warmth stays concentrated in its corner.
 */
private fun DrawScope.drawBloom(
    center: Offset,
    radiusX: Float,
    radiusY: Float,
    color: Color,
    transparentAt: Float,
) {
    val r = max(radiusX, radiusY)
    val sx = radiusX / r
    val sy = radiusY / r
    withTransform({ scale(sx, sy, pivot = center) }) {
        // The screen rect, mapped back through the scale, is the area we must
        // paint so the squashed gradient still covers every visible pixel.
        val left = center.x + (0f - center.x) / sx
        val right = center.x + (size.width - center.x) / sx
        val top = center.y + (0f - center.y) / sy
        val bottom = center.y + (size.height - center.y) / sy
        drawRect(
            brush = Brush.radialGradient(
                0f to color,
                transparentAt to Color.Transparent,
                center = center,
                radius = r,
            ),
            topLeft = Offset(minOf(left, right), minOf(top, bottom)),
            size = Size(abs(right - left), abs(bottom - top)),
        )
    }
}

@Composable
private fun MaterialTheme_background(): Color =
    androidx.compose.material3.MaterialTheme.colorScheme.background