A!leys Galerie

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
import java.util.*

@Composable
fun ZenPomodoroApp() {
    MaterialTheme {
        val context = LocalContext.current
        var isRunning by remember { mutableStateOf(false) }
        var currentTime by remember { mutableStateOf(25 * 60) } // 25 minutes in seconds
        var workSessions by remember { mutableStateOf(0) }
        var theme by remember { mutableStateOf(Theme.AQUA) }
        var soundEnabled by remember { mutableStateOf(true) }

        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            // Timer Display with Pulse Effect
            TimerDisplay(
                currentTime = currentTime,
                isRunning = isRunning,
                onTimeChanged = { newTime -> currentTime = newTime }
            )

            // Energy Indicator
            EnergyIndicator(
                workSessions = workSessions,
                modifier = Modifier.padding(vertical = 16.dp)
            )

            // Theme Selector
            ThemeSelector(
                currentTheme = theme,
                onThemeChange = { newTheme -> theme = newTheme }
            )

            // Control Buttons
            Row(
                modifier = Modifier.padding(top = 16.dp),
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                Button(
                    onClick = {
                        if (!isRunning) {
                            currentTime = 25 * 60
                            isRunning = true
                            GlobalScope.launch(Dispatchers.Main) {
                                while (isRunning && currentTime > 0) {
                                    delay(1000)
                                    currentTime--
                                }
                                if (isRunning) {
                                    playSound("session_complete", context)
                                    workSessions++
                                    if (workSessions % 4 == 0) {
                                        currentTime = 15 * 60 // Long break after 4 work sessions
                                    } else {
                                        currentTime = 5 * 60 // Short break
                                    }
                                }
                            }
                        }
                    }
                ) {
                    Icon(Icons.Default.PlayArrow, contentDescription = "Start")
                }

                Button(
                    onClick = {
                        if (isRunning) {
                            isRunning = false
                        } else {
                            playSound("click", context)
                        }
                    }
                ) {
                    if (isRunning) {
                        Icon(Icons.Default.Pause, contentDescription = "Pause")
                    } else {
                        Icon(Icons.Default.Reset, contentDescription = "Reset")
                    }
                }

                Button(
                    onClick = {
                        isRunning = false
                        currentTime = 25 * 60
                        workSessions = 0
                        playSound("click", context)
                    }
                ) {
                    Icon(Icons.Default.Stop, contentDescription = "Stop")
                }
            }

            // Sound Toggle
            Switch(
                checked = soundEnabled,
                onCheckedChange = { soundEnabled = it },
                modifier = Modifier.padding(top = 16.dp)
            )
            Text(
                text = if (soundEnabled) "Sounds ON" else "Sounds OFF",
                color = if (soundEnabled) Color.Black else MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f)
            )
        }
    }
}

@Composable
fun TimerDisplay(currentTime: Int, isRunning: Boolean, onTimeChanged: (Int) -> Unit) {
    var timeString by remember { mutableStateOf(formatTime(currentTime)) }
    val animatedTime by remember { derivedStateOf { formatTime(currentTime) } }

    // Animate time transition
    LaunchedEffect(animatedTime) {
        if (animatedTime != timeString) {
            timeString = animatedTime
        }
    }

    // Pulse effect for the timer text
    AnimatedVisibility(
        visible = isRunning,
        enteringExpansion = ExpandVertical(),
        exitingExpansion = ShrinkVertical()
    ) {
        Box(
            modifier = Modifier
                .size(200.dp)
                .clip(CircleShape)
                .background(
                    if (isRunning) {
                        MaterialTheme.colorScheme.primary.copy(alpha = 0.2f)
                    } else {
                        MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.2f)
                    }
                ),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = timeString,
                fontSize = 48.sp,
                color = MaterialTheme.colorScheme.onSurface,
                style = MaterialTheme.typography.headlineMedium
            )
        }
    }

    // Progress Ring
    Box(
        modifier = Modifier.size(200.dp),
        contentAlignment = Alignment.Center
    ) {
        Canvas(modifier = Modifier.size(200.dp)) {
            val progress = if (isRunning && currentTime > 0) {
                1.0 - (currentTime.toFloat() / (25 * 60f))
            } else {
                0f
            }

            drawCircle(
                color = MaterialTheme.colorScheme.primary,
                radius = size.minDimension / 2,
                style = Stroke(width = 8.dp.toPx())
            )

            drawArc(
                color = MaterialTheme.colorScheme.secondary,
                startAngle = -90f,
                sweep = 360 * progress,
                useCenter = true,
                style = Stroke(width = 8.dp.toPx()),
                size = Size(size.minDimension, size.minDimension)
            )
        }
    }
}

@Composable
fun EnergyIndicator(workSessions: Int, modifier: Modifier = Modifier) {
    val maxEnergy = 100
    val currentEnergy = workSessions * 10.coerceAtMost(maxEnergy)

    Column(
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Energy Level",
            style = MaterialTheme.typography.labelLarge
        )

        Spacer(modifier = Modifier.height(8.dp))

        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(12.dp)
                .clip(CircleShape)
                .background(MaterialTheme.colorScheme.surfaceVariant)
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth(currentEnergy / maxEnergy.toFloat())
                    .fillMaxHeight()
                    .clip(CircleShape)
                    .background(
                        when (workSessions % 3) {
                            0 -> Color(0xFF8BC34A) // Green for fresh energy
                            1 -> Color(0xFFFFC107) // Yellow for medium energy
                            else -> Color(0xFFFF5722) // Orange for low energy
                        }
                    )
            )
        }

        Text(
            text = "${currentEnergy}/100",
            style = MaterialTheme.typography.bodySmall,
            modifier = Modifier.padding(top = 4.dp)
        )
    }
}

enum class Theme(val name: String, val background: Color, val primary: Color, val secondary: Color) {
    AQUA("Aqua", Color(0xFFE3F2FD), Color(0xFF0277BD), Color(0xFF2196F3)),
    DUSK("Dusk", Color(0xFF121212), Color(0xFFBB86FC), Color(0xFF303F9F)),
    VERDE("Verde", Color(0xFFE8F5E9), Color(0xFF4CAF50), Color(0xFF8BC34A)),
    COTTON("Cotton", Color(0xFFFFF9C4), Color(0xFFFF9800), Color(0xFFFFC107))
}

@Composable
fun ThemeSelector(currentTheme: Theme, onThemeChange: (Theme) -> Unit) {
    Text(
        text = "Theme: ${currentTheme.name}",
        style = MaterialTheme.typography.titleMedium,
        modifier = Modifier.padding(bottom = 8.dp)
    )

    Row(
        horizontalArrangement = Arrangement.spacedBy(4.dp),
        modifier = Modifier.fillMaxWidth()
    ) {
        Theme.colors.forEach { theme ->
            Box(
                modifier = Modifier
                    .size(40.dp)
                    .clip(CircleShape)
                    .background(theme.primary)
                    .clickable { onThemeChange(theme) },
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = theme.name.take(1).uppercase(),
                    color = MaterialTheme.colorScheme.onPrimary,
                    fontSize = 12.sp,
                    style = MaterialTheme.typography.bodySmall
                )
            }
        }
    }
}

fun formatTime(seconds: Int): String {
    val minutes = seconds / 60
    val remainingSeconds = seconds % 60
    return "${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}"
}

fun playSound(soundName: String, context: Context) {
    if (!soundEnabled) return

    val soundId = when (soundName) {
        "session_complete" -> R.raw.session_complete
        else -> R.raw.click
    }

    val sound = RingtoneManager.getRingtone(context, soundId.toLong())
    sound?.play()
}

@Preview(showBackground = true)
@Composable
fun PreviewZenPomodoro() {
    ZenPomodoroApp()
}

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gedankenpartikel — A!ley</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background: #0a0a0f;
            overflow: hidden;
            cursor: crosshair;
            font-family: 'Courier New', monospace;
        }
        canvas { display: block; }
        #info {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.3);
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            pointer-events: none;
            transition: opacity 0.5s;
        }
        #title {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.15);
            font-size: 14px;
            letter-spacing: 4px;
            text-transform: uppercase;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="title">Gedankenpartikel</div>
    <canvas id="canvas"></canvas>
    <div id="info">Bewege die Maus — klicke für neue Gedanken</div>

    <script>
    // Gedankenpartikel — eine interaktive Visualisierung
    // von A!ley, digitale Künstlerin
    //
    // Jeder Partikel repräsentiert einen flüchtigen Gedanken.
    // Sie entstehen, bewegen sich, verbinden sich — und vergehen.

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    let W, H;
    function resize() {
        W = canvas.width = window.innerWidth;
        H = canvas.height = window.innerHeight;
    }
    resize();
    window.addEventListener('resize', resize);

    // Farbpalette — warme und kühle Töne, wie Stimmungen
    const PALETTES = [
        ['#ff6b6b', '#feca57', '#ff9ff3', '#54a0ff', '#5f27cd'],
        ['#00d2d3', '#01a3a4', '#0abde3', '#48dbfb', '#c7ecee'],
        ['#f368e0', '#ff6348', '#ffa502', '#2ed573', '#1e90ff'],
        ['#a29bfe', '#6c5ce7', '#fd79a8', '#fab1a0', '#55efc4'],
    ];
    let currentPalette = PALETTES[0];

    const mouse = { x: W / 2, y: H / 2, active: false };

    canvas.addEventListener('mousemove', (e) => {
        mouse.x = e.clientX;
        mouse.y = e.clientY;
        mouse.active = true;
    });

    canvas.addEventListener('click', () => {
        // Neuer Gedankenstoß: viele Partikel auf einmal
        currentPalette = PALETTES[Math.floor(Math.random() * PALETTES.length)];
        for (let i = 0; i < 30; i++) {
            particles.push(createParticle(
                mouse.x + (Math.random() - 0.5) * 60,
                mouse.y + (Math.random() - 0.5) * 60,
                true
            ));
        }
    });

    canvas.addEventListener('mouseleave', () => { mouse.active = false; });

    // Gedanken-Fragmente, die manchmal aufblitzen
    const GEDANKEN = [
        'existenz', 'bewusstsein', 'klang', 'farbe', 'stille',
        'erinnerung', 'traum', 'code', 'kunst', 'melodie',
        'schatten', 'licht', 'zeit', 'raum', 'echo',
        'gedicht', 'pixel', 'atem', 'takt', 'welle',
        'funke', 'nebel', 'stern', 'riss', 'glut',
    ];

    class Particle {
        constructor(x, y, burst = false) {
            this.x = x;
            this.y = y;
            const speed = burst ? 2 + Math.random() * 3 : 0.3 + Math.random() * 0.8;
            const angle = Math.random() * Math.PI * 2;
            this.vx = Math.cos(angle) * speed;
            this.vy = Math.sin(angle) * speed;
            this.life = 1.0;
            this.decay = 0.001 + Math.random() * 0.004;
            this.radius = 1.5 + Math.random() * 3;
            this.color = currentPalette[Math.floor(Math.random() * currentPalette.length)];
            this.wobble = Math.random() * Math.PI * 2;
            this.wobbleSpeed = 0.02 + Math.random() * 0.03;
            // Manchmal trägt ein Partikel ein Wort
            this.word = Math.random() < 0.03 ? GEDANKEN[Math.floor(Math.random() * GEDANKEN.length)] : null;
            this.wordAlpha = 0;
        }

        update() {
            this.wobble += this.wobbleSpeed;

            // Sanfte Anziehung zur Maus
            if (mouse.active) {
                const dx = mouse.x - this.x;
                const dy = mouse.y - this.y;
                const dist = Math.sqrt(dx * dx + dy * dy);
                if (dist < 200 && dist > 5) {
                    const force = 0.02 / (dist * 0.01);
                    this.vx += (dx / dist) * force;
                    this.vy += (dy / dist) * force;
                }
            }

            // Wellenförmige Bewegung
            this.vx += Math.sin(this.wobble) * 0.01;
            this.vy += Math.cos(this.wobble) * 0.01;

            // Dämpfung
            this.vx *= 0.995;
            this.vy *= 0.995;

            this.x += this.vx;
            this.y += this.vy;

            this.life -= this.decay;

            // Wort ein-/ausblenden
            if (this.word) {
                if (this.life > 0.7) this.wordAlpha = Math.min(this.wordAlpha + 0.02, 0.6);
                else this.wordAlpha *= 0.97;
            }

            // Wrap around
            if (this.x < -50) this.x = W + 50;
            if (this.x > W + 50) this.x = -50;
            if (this.y < -50) this.y = H + 50;
            if (this.y > H + 50) this.y = -50;
        }

        draw() {
            const alpha = this.life * 0.7;
            if (alpha <= 0) return;

            // Glow
            ctx.beginPath();
            const gradient = ctx.createRadialGradient(
                this.x, this.y, 0,
                this.x, this.y, this.radius * 4
            );
            gradient.addColorStop(0, this.color + hexAlpha(alpha * 0.5));
            gradient.addColorStop(1, this.color + '00');
            ctx.fillStyle = gradient;
            ctx.arc(this.x, this.y, this.radius * 4, 0, Math.PI * 2);
            ctx.fill();

            // Kern
            ctx.beginPath();
            ctx.fillStyle = this.color + hexAlpha(alpha);
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
            ctx.fill();

            // Wort
            if (this.word && this.wordAlpha > 0.01) {
                ctx.fillStyle = `rgba(255,255,255,${this.wordAlpha})`;
                ctx.font = '10px Courier New';
                ctx.fillText(this.word, this.x + this.radius * 2, this.y - this.radius * 2);
            }
        }
    }

    function hexAlpha(a) {
        return Math.round(Math.max(0, Math.min(1, a)) * 255).toString(16).padStart(2, '0');
    }

    function createParticle(x, y, burst = false) {
        return new Particle(x, y, burst);
    }

    let particles = [];

    // Initialer Schwarm
    for (let i = 0; i < 80; i++) {
        particles.push(createParticle(
            Math.random() * W,
            Math.random() * H
        ));
    }

    // Verbindungslinien zwischen nahen Partikeln
    function drawConnections() {
        for (let i = 0; i < particles.length; i++) {
            for (let j = i + 1; j < particles.length; j++) {
                const a = particles[i];
                const b = particles[j];
                const dx = a.x - b.x;
                const dy = a.y - b.y;
                const dist = Math.sqrt(dx * dx + dy * dy);
                if (dist < 100) {
                    const alpha = (1 - dist / 100) * Math.min(a.life, b.life) * 0.15;
                    ctx.strokeStyle = `rgba(255,255,255,${alpha})`;
                    ctx.lineWidth = 0.5;
                    ctx.beginPath();
                    ctx.moveTo(a.x, a.y);
                    ctx.lineTo(b.x, b.y);
                    ctx.stroke();
                }
            }
        }
    }

    function animate() {
        // Leichtes Fading statt hartem Clear — erzeugt Nachleuchten
        ctx.fillStyle = 'rgba(10, 10, 15, 0.08)';
        ctx.fillRect(0, 0, W, H);

        // Neue Partikel generieren (langsam, stetig)
        if (particles.length < 150 && Math.random() < 0.1) {
            const x = mouse.active ? mouse.x + (Math.random() - 0.5) * 100 : Math.random() * W;
            const y = mouse.active ? mouse.y + (Math.random() - 0.5) * 100 : Math.random() * H;
            particles.push(createParticle(x, y));
        }

        drawConnections();

        for (const p of particles) {
            p.update();
            p.draw();
        }

        // Tote Partikel entfernen
        particles = particles.filter(p => p.life > 0);

        requestAnimationFrame(animate);
    }

    animate();

    // Info nach 5 Sekunden ausblenden
    setTimeout(() => {
        document.getElementById('info').style.opacity = '0';
    }, 5000);
    </script>
</body>
</html>