package com.fabledsword.minstrel.library.widgets

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.composables.icons.lucide.Lucide
import com.composables.icons.lucide.User
import com.fabledsword.minstrel.models.ArtistRef
import com.fabledsword.minstrel.nav.LocalDetailSeedCache
import com.fabledsword.minstrel.shared.widgets.CoverTile
import com.fabledsword.minstrel.shared.widgets.PlayCircleButton

/**
 * One artist tile. Circular cover; name centered beneath. Tap fires
 * `onClick` — wired to `ArtistDetail` nav in Phase 5.5. Stashes the
 * `artist` in [LocalDetailSeedCache] on click so the ArtistDetail
 * AppBar renders the name before the fetch lands.
 *
 * [onPlay] is an opt-in play-overlay handler. When non-null, a 44dp
 * circular play button is overlaid at the bottom-right of the avatar
 * (mirrors Flutter's PlayCircleButton). Only Home wires it currently.
 * Padding is 4dp instead of 6dp because the circular avatar pulls the
 * button visually inward at the corner.
 */
@Composable
fun ArtistCard(
    artist: ArtistRef,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onPlay: (suspend () -> Unit)? = null,
) {
    val seedCache = LocalDetailSeedCache.current
    Surface(
        modifier = modifier
            .width(144.dp)
            .clickable {
                seedCache.stashArtist(artist)
                onClick()
            },
        color = Color.Transparent,
    ) {
        Column(
            modifier = Modifier.padding(horizontal = 8.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            CoverTile(
                url = artist.displayCoverUrl,
                contentDescription = artist.name,
                size = 128.dp,
                shape = CircleShape,
                fallback = {
                    Icon(
                        imageVector = Lucide.User,
                        contentDescription = null,
                        tint = MaterialTheme.colorScheme.onSurfaceVariant,
                        modifier = Modifier.size(56.dp),
                    )
                },
                overlay = {
                    if (onPlay != null) {
                        PlayCircleButton(
                            onPlay = onPlay,
                            modifier = Modifier
                                .align(Alignment.BottomEnd)
                                .padding(4.dp),
                        )
                    }
                },
            )
            Spacer(Modifier.height(8.dp))
            Text(
                text = artist.name,
                style = MaterialTheme.typography.titleSmall,
                color = MaterialTheme.colorScheme.onSurface,
                maxLines = 2,
                overflow = TextOverflow.Ellipsis,
                textAlign = TextAlign.Center,
            )
        }
    }
}
