'use client'

import {useState} from 'react'
import Image from 'next/image'
import Link from 'next/link'
import PropTypes from 'prop-types'
import Accordion from '@mui/material/Accordion'
import AccordionDetails from '@mui/material/AccordionDetails'
import AccordionSummary from '@mui/material/AccordionSummary'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import CardActionArea from '@mui/material/CardActionArea'
import Chip from '@mui/material/Chip'
import Container from '@mui/material/Container'
import Divider from '@mui/material/Divider'
import Grid from '@mui/material/Grid'
import Paper from '@mui/material/Paper'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
import {green} from '@mui/material/colors'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
import MusicNoteIcon from '@mui/icons-material/MusicNote'
import VerifiedIcon from '@mui/icons-material/Verified'

import {formatKuveti} from '../../lib/kuveti'
import {StreamButton} from '../streaming-buttons'
import {SocialButton} from './social-buttons'
import AwtisBiyografi from './awtis-biyografi'
import MizikLyen from './mizik-lyen'

const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
const EXCLUSIVE_LABEL = process.env.NEXT_PUBLIC_EXCLUSIVE_ARTIST_LABEL || 'OKI Exclusif'
const BLUR_DATA_URL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNsYAAAAAYAAjCB0C8AAAAASUVORK5CYII='

const sortTeks = paroles => paroles.sort((a, b) => a.titre.localeCompare(b.titre, 'fr', {sensitivity: 'base'}))

export default function AwtisDetay({anAwtis}) {
  const [esByografiOuve, meteEsByografiOuve] = useState(false)
  const {alias, biographie, paroles, photo, isExclusiveArtist, titrePhare, rezoSosyal} = anAwtis
  const sortedTeks = sortTeks(paroles)
  const gwanBiyo = biographie && biographie.length > 100
  const biyo = gwanBiyo ? `${biographie.slice(0, 100)}...` : biographie

  const hasStreaming = isExclusiveArtist && titrePhare?.streamAudio?.length > 0
  const coverUrl = titrePhare?.couverture
    ? `${IMAGE_URL}${formatKuveti(titrePhare.couverture, 'small')?.url}`
    : null

  const photoUrl = photo?.url
    ? `${IMAGE_URL}${formatKuveti(photo, 'small')?.url}`
    : null

  return (
    <Container maxWidth='sm'>
      <Box sx={{mt: 2, mb: 1}}>
        <Link passHref href='/awtis'>
          <Button size='small' variant='text' startIcon={<KeyboardBackspaceIcon />} sx={{color: 'text.secondary'}}>
            Retour aux artistes
          </Button>
        </Link>
      </Box>

      {/* Héro */}
      <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', pt: 2, pb: 3}}>
        <Box sx={{
          width: 150, height: 150,
          borderRadius: '50%',
          border: `3px solid ${green[500]}`,
          overflow: 'hidden',
          position: 'relative',
          flexShrink: 0,
          mb: 2,
        }}
        >
          {photoUrl ? (
            <Image
              src={photoUrl}
              alt={`Photo ${alias}`}
              width={150}
              height={150}
              placeholder='blur'
              blurDataURL={BLUR_DATA_URL}
              style={{objectFit: 'cover', width: '100%', height: '100%'}}
            />
          ) : (
            <Box sx={{width: '100%', height: '100%', bgcolor: 'grey.300'}} />
          )}
        </Box>

        <Typography variant='h5' component='h1' sx={{fontWeight: 700, mb: 1, textAlign: 'center'}}>
          {alias}
        </Typography>

        {rezoSosyal?.length > 0 && (
          <Box sx={{display: 'flex', gap: 0.75, flexWrap: 'wrap', justifyContent: 'center', mb: 1.5}}>
            {rezoSosyal.map(rezo => (
              <SocialButton key={rezo.url} rezo={rezo} />
            ))}
          </Box>
        )}

        {isExclusiveArtist && (
          <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.5}}>
            <Chip
              icon={<VerifiedIcon sx={{fontSize: 16}} />}
              label={`Artiste ${EXCLUSIVE_LABEL}`}
              size='small'
              sx={{bgcolor: '#FFD700', color: '#000', fontWeight: 700, '& .MuiChip-icon': {color: '#000'}}}
            />
            <Typography variant='caption' sx={{color: 'text.secondary', textAlign: 'center', maxWidth: 340}}>
              Certains morceaux sont publiés en exclusivité sur PAWÒL-NU, avant toute sortie sur les plateformes de streaming.
            </Typography>
          </Box>
        )}
      </Box>

      <Grid container direction='column' spacing={2}>
        {biyo && (
          <Grid size={12}>
            <Card>
              <CardActionArea onClick={() => meteEsByografiOuve(true)}>
                <CardContent>
                  <Typography gutterBottom variant='body2' sx={{fontWeight: 700, textTransform: 'uppercase', color: 'text.secondary', letterSpacing: 0.5}}>
                    Biographie
                  </Typography>
                  <Typography variant='body1'>
                    {biyo}
                  </Typography>
                </CardContent>
              </CardActionArea>
            </Card>
          </Grid>
        )}

        {hasStreaming && (
          <Grid size={12}>
            <Card sx={{overflow: 'hidden'}}>
              <Box sx={{px: 2, pt: 1.5, pb: 0.5, display: 'flex', alignItems: 'center', gap: 0.75}}>
                <MusicNoteIcon sx={{fontSize: 14, color: 'text.secondary'}} />
                <Typography variant='caption' sx={{fontWeight: 700, textTransform: 'uppercase', color: 'text.secondary', letterSpacing: 0.5}}>
                  Titre phare
                </Typography>
              </Box>
              <Divider />
              <Grid container>
                {coverUrl && (
                  <Grid size={{xs: 12, sm: 4}}>
                    <Link href={`/paroles/${titrePhare.slug}`} style={{display: 'block', height: '100%'}}>
                      <Box sx={{position: 'relative', minHeight: 130, height: '100%'}}>
                        <Image
                          fill
                          src={coverUrl}
                          alt={titrePhare.titre}
                          placeholder='blur'
                          blurDataURL={BLUR_DATA_URL}
                          sizes='200px'
                          style={{objectFit: 'cover'}}
                        />
                      </Box>
                    </Link>
                  </Grid>
                )}
                <Grid size={{xs: 12, sm: coverUrl ? 8 : 12}}>
                  <CardContent>
                    <Typography gutterBottom variant='subtitle1' sx={{fontWeight: 700}}>
                      <Link href={`/paroles/${titrePhare.slug}`} style={{color: 'inherit', textDecoration: 'none'}}>
                        {titrePhare.titre}
                      </Link>
                    </Typography>
                    <Typography variant='caption' sx={{color: 'text.secondary', display: 'block', mb: 1}}>
                      Écouter sur
                    </Typography>
                    <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 1}}>
                      {titrePhare.streamAudio.map(lyen => (
                        <StreamButton key={lyen.url} lyen={lyen} />
                      ))}
                    </Box>
                  </CardContent>
                </Grid>
              </Grid>
            </Card>
          </Grid>
        )}

        <Grid size={12}>
          {paroles.length > 1 ? (
            <Accordion>
              <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls='panel-teks-content' id='panel-teks-header'>
                <Typography sx={{marginRight: 2}} variant='body1'><strong>Liste des paroles</strong></Typography>
                <Chip color='primary' label={paroles.length} size='small' variant='contained' />
              </AccordionSummary>
              <AccordionDetails sx={{paddingInline: 0}}>
                {sortedTeks.map(anPawol => {
                  const {couverture} = anPawol
                  const kuvetiFormat = formatKuveti(couverture, 'thumbnail')
                  return (
                    <Box key={anPawol.id} sx={{paddingBlock: 0.5}}>
                      <MizikLyen anPawol={anPawol} kuveti={kuvetiFormat} />
                    </Box>
                  )
                })}
              </AccordionDetails>
            </Accordion>
          ) : (paroles.length === 0 ? (
            <Typography textAlign='center' variant='body1' color='text.secondary'>
              Aucune parole pour le moment
            </Typography>
          ) : (
            <Box>
              <Typography gutterBottom variant='body1'><strong>Parole</strong></Typography>
              <Paper sx={{paddingBlock: 2}}>
                <MizikLyen anPawol={paroles[0]} kuveti={formatKuveti(paroles[0].couverture, 'thumbnail')} />
              </Paper>
            </Box>
          ))}
        </Grid>
      </Grid>

      <Box sx={{textAlign: 'center', my: 4}}>
        <Link passHref href='/awtis'>
          <Button variant='outlined' startIcon={<KeyboardBackspaceIcon />}>
            Retour aux artistes
          </Button>
        </Link>
      </Box>

      {esByografiOuve && (
        <AwtisBiyografi
          alias={alias}
          paroles={paroles}
          biographie={biographie}
          esByografiOuve={esByografiOuve}
          meteEsByografiOuve={meteEsByografiOuve}
        />
      )}
    </Container>
  )
}

AwtisDetay.propTypes = {
  anAwtis: PropTypes.object.isRequired
}
