package dev.privacyllc.period.feature.onboarding

import android.content.res.Configuration
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import dev.privacyllc.period.designsystem.PeriodTheme
import dev.privacyllc.period.designsystem.art.EmptyStateIllustration
import dev.privacyllc.period.designsystem.art.LearningIllustration
import dev.privacyllc.period.designsystem.art.PrivacyIllustration
import dev.privacyllc.period.designsystem.art.WelcomeIllustration
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

/**
 * Every illustration, in both themes.
 *
 * **These exist because dark mode was broken and nothing said so.** The theme
 * was not wrapping its content in a `Surface`, so any `Text` without an explicit
 * colour inherited Material's default — black — and the app's background never
 * painted. In light mode that looked right by accident. In dark mode the
 * onboarding headings were near-black on charcoal, and it was found by opening
 * the app rather than by any test.
 *
 * A preview pair is not a test and does not fail a build. What it does is put
 * both themes in front of whoever is editing the screen, which is the cheapest
 * thing that would have caught it.
 */
@Preview(name = "Illustrations · light", showBackground = true, heightDp = 620)
@Preview(
    name = "Illustrations · dark",
    showBackground = true,
    heightDp = 620,
    uiMode = Configuration.UI_MODE_NIGHT_YES,
)
@Composable
private fun IllustrationPreviews() {
    PeriodTheme {
        Column(
            Modifier.fillMaxWidth().padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Text("Welcome", style = MaterialTheme.typography.labelLarge)
            WelcomeIllustration(
                primary = MaterialTheme.colorScheme.primary,
                accent = MaterialTheme.colorScheme.tertiary,
                size = 120.dp,
            )
            Text("Learning", style = MaterialTheme.typography.labelLarge)
            LearningIllustration(
                color = MaterialTheme.colorScheme.primary,
                accent = MaterialTheme.colorScheme.tertiary,
                size = 110.dp,
            )
            Text("Privacy", style = MaterialTheme.typography.labelLarge)
            PrivacyIllustration(
                color = MaterialTheme.colorScheme.primary,
                accent = MaterialTheme.colorScheme.tertiary,
                size = 110.dp,
            )
            Text("Empty state", style = MaterialTheme.typography.labelLarge)
            EmptyStateIllustration(color = MaterialTheme.colorScheme.outline, size = 110.dp)
        }
    }
}
