package com.suno.android.ui.screens.home.notifications

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.unit.dp
import com.suno.android.common_ui.theme.ExtendedTheme
import com.suno.android.common_res.R as CommonResR

@Composable
fun NotificationsPermissionBanner(
    onDismiss: () -> Unit,
    onClick: () -> Unit,
) {
    Column(
        modifier = Modifier
            .padding(16.dp)
            .clip(RoundedCornerShape(12.dp))
            .background(ExtendedTheme.colors.backgroundTertiary)
            .clickable { onClick() },
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(
                    start = 12.dp,
                    end = 12.dp,
                    top = 16.dp,
                    bottom = 8.dp,
                ),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Box(
                modifier = Modifier
                    .clip(RoundedCornerShape(8.dp))
                    .background(ExtendedTheme.colors.sunoPink),
                contentAlignment = Alignment.Center,
            ) {
                Text(
                    modifier = Modifier.padding(
                        vertical = 2.dp,
                        horizontal = 4.dp,
                    ),
                    color = ExtendedTheme.colors.backgroundPrimary,
                    style = ExtendedTheme.typography.smallPlayerTitle,
                    text = stringResource(CommonResR.string.notifications),
                )
            }
            Icon(
                modifier = Modifier
                    .size(24.dp)
                    .clip(CircleShape)
                    .clickable {
                        onDismiss()
                    },
                imageVector = ImageVector.vectorResource(
                    id = com.suno.android.common_ui.R.drawable.close,
                ),
                tint = ExtendedTheme.colors.textPrimary,
                contentDescription = "Close",
            )
        }
        Text(
            modifier = Modifier.padding(horizontal = 12.dp),
            style = ExtendedTheme.typography.cardTitle,
            text = stringResource(CommonResR.string.notifications_banner_header),
        )
        Text(
            modifier = Modifier.padding(
                top = 8.dp,
                start = 12.dp,
                end = 12.dp,
                bottom = 24.dp,
            ),
            style = ExtendedTheme.typography.cardTitle,
            color = ExtendedTheme.colors.textSecondary,
            text = stringResource(CommonResR.string.notifications_banner_body),
        )
    }
}