import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import styles from './EuNunca.module.css'

const FRASES = {
    light: [
        "Eu nunca... esqueci o nome de alguém que acabei de conhecer no bar.",
        "Eu nunca... bebi direto da garrafa quando ninguém estava olhando.",
        "Eu nunca... fingi estar bêbado para fugir de uma situação.",
        "Eu nunca... tentei abrir uma garrafa com o dente ou sapato.",
        "Eu nunca... postei algo nas redes sociais e apaguei no dia seguinte.",
        "Eu nunca... caí da cadeira no bar.",
        "Eu nunca... cantei no karaokê e achei que arrasei (mas não).",
        "Eu nunca... bebi algo que não sabia o que era.",
        "Eu nunca... dormi em um lugar público após beber.",
        "Eu nunca... entrei no banheiro errado.",
        "Eu nunca... pedi uma música pro DJ que ele se recusou a tocar.",
        "Eu nunca... ganhei um drink de um desconhecido.",
    ],
    hard: [
        "Eu nunca... mandei mensagem para o ex depois de beber.",
        "Eu nunca... dancei em cima de uma mesa ou balcão.",
        "Eu nunca... fiz um 'shot' e me arrependi imediatamente.",
        "Eu nunca... saí de fininho para não pagar a conta (ou esqueci).",
        "Eu nunca... flertei com o garçom/garçonete para ganhar desconto.",
        "Eu nunca... misturei mais de 5 tipos de bebida na mesma noite.",
        "Eu nunca... peguei o drink de outra pessoa sem querer.",
        "Eu nunca... chorei no bar por motivo nenhum.",
        "Eu nunca... fiz um juramento de 'nunca mais vou beber' e quebrei no dia seguinte.",
        "Eu nunca... liguei para o chefe enquanto estava no bar.",
    ]
}

export default function EuNunca() {
    const [category, setCategory] = useState("light")
    const [currentPhrase, setCurrentPhrase] = useState("")
    const [isSliding, setIsSliding] = useState(false)
    const [usedIndexes, setUsedIndexes] = useState({ light: [], hard: [] })

    const getNewPhrase = (newCategory = category) => {
        setIsSliding(true)

        setTimeout(() => {
            const phrasesList = FRASES[newCategory]
            let nextIndex

            let currentUsed = usedIndexes[newCategory]

            if (currentUsed.length === phrasesList.length) {
                currentUsed = []
            }

            do {
                nextIndex = Math.floor(Math.random() * phrasesList.length)
            } while (currentUsed.includes(nextIndex))

            setCurrentPhrase(phrasesList[nextIndex])
            setUsedIndexes(prev => ({
                ...prev,
                [newCategory]: [...currentUsed, nextIndex]
            }))
            setCategory(newCategory)
            setIsSliding(false)
        }, 400)
    }

    useEffect(() => {
        getNewPhrase()
    }, [])

    return (
        <div className={styles.page}>
            <Link to="/jogos" className={styles.backLink}>
                <i className="fas fa-arrow-left"></i> Voltar para Jogos
            </Link>

            <h1 className={styles.title}>Eu Nunca</h1>

            <div className={styles.categorySelector}>
                <button
                    className={`${styles.catBtn} ${category === 'light' ? styles.active : ''}`}
                    onClick={() => category !== 'light' && getNewPhrase('light')}
                >
                    <i className="fas fa-laugh-beam"></i> Light
                </button>
                <button
                    className={`${styles.catBtn} ${category === 'hard' ? styles.active : ''}`}
                    onClick={() => category !== 'hard' && getNewPhrase('hard')}
                >
                    <i className="fas fa-fire"></i> Hard
                </button>
            </div>

            <div className={styles.cardContainer}>
                <div className={`${styles.card} ${isSliding ? styles.slidingOut : ''}`} onClick={() => getNewPhrase()}>
                    <div className={styles.cardIcon}>
                        <i className="fas fa-glass-cheers"></i>
                    </div>
                    <div className={styles.phrase}>
                        {currentPhrase}
                    </div>
                    <button className={styles.nextBtn}>PRÓXIMA</button>
                </div>
            </div>

            <div className={styles.instructions}>
                <strong>Como Jogar:</strong> Leia a frase em voz alta. <br />
                Todos que <strong>JÁ FIZERAM</strong> o que diz a frase, devem beber um gole! 🥃
            </div>

            <div style={{ marginTop: '20px', fontSize: '0.8rem', color: 'rgba(239, 199, 184, 0.4)', textAlign: 'center' }}>
                Respeite seus limites. Jogo destinado a maiores de 18 anos.
            </div>
        </div>
    )
}
