'use client'

import {useState} from 'react'
import PropTypes from 'prop-types'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Dialog from '@mui/material/Dialog'
import DialogTitle from '@mui/material/DialogTitle'
import DialogContent from '@mui/material/DialogContent'
import DialogActions from '@mui/material/DialogActions'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import Link from 'next/link'

const BOKANTE_URL = process.env.NEXT_PUBLIC_BOKANTE_URL || 'https://bokante.o-k-i.net'
const BOKANTE_ACCOUNT = process.env.NEXT_PUBLIC_BOKANTE_ACCOUNT || 'pawol_nu'

function extraireInstance(saisie) {
  const valeur = saisie.trim().replace(/^@/, '').replace(/^https?:\/\//, '').replace(/\/$/, '')
  return valeur.includes('@') ? valeur.split('@').pop() : valeur
}

export default function ReponsMastodon({bokanteStatusId}) {
  const [ouvert, setOuvert] = useState(false)
  const [saisie, setSaisie] = useState('')

  if (!bokanteStatusId) {
    return null
  }

  const tootUrl = `${BOKANTE_URL}/@${BOKANTE_ACCOUNT}/${bokanteStatusId}`

  const repondre = () => {
    const instance = extraireInstance(saisie)
    if (!instance) {
      return
    }

    window.open(`https://${instance}/authorize_interaction?uri=${encodeURIComponent(tootUrl)}`, '_blank', 'noopener,noreferrer')
    setOuvert(false)
  }

  return (
    <Box sx={{maxWidth: 700, margin: '1em auto 0', textAlign: 'center'}}>
      <Typography variant='body2' sx={{mb: 1}}>
        Rejoignez la discussion sur{' '}
        <Link href={tootUrl} target='_blank' rel='noopener noreferrer'>Mastodon</Link>
      </Typography>
      <Button variant='outlined' size='small' onClick={() => setOuvert(true)}>
        Répondre via Mastodon
      </Button>
      <Dialog open={ouvert} onClose={() => setOuvert(false)}>
        <DialogTitle>Répondre depuis votre compte Mastodon</DialogTitle>
        <DialogContent>
          <Typography variant='body2' sx={{mb: 2}}>
            Indiquez votre identifiant (@vous@votre-instance) ou juste le nom de votre
            instance, vous serez redirigé·e vers votre compte pour répondre.
          </Typography>
          <TextField
            autoFocus
            fullWidth
            label='@vous@votre-instance'
            value={saisie}
            onChange={event => setSaisie(event.target.value)}
            onKeyDown={event => {
              if (event.key === 'Enter') {
                repondre()
              }
            }}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setOuvert(false)}>Annuler</Button>
          <Button variant='contained' onClick={repondre}>Continuer</Button>
        </DialogActions>
      </Dialog>
    </Box>
  )
}

ReponsMastodon.propTypes = {
  bokanteStatusId: PropTypes.string
}