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

const TAREFAS = [
    { id: 1, text: 'Dose Dupla', color: '#e74c3c' },
    { id: 2, text: 'Mestre do Silêncio', color: '#3498db' },
    { id: 3, text: 'Verdade ou Consequência', color: '#9b59b6' },
    { id: 4, text: 'Eu Nunca', color: '#f1c40f' },
    { id: 5, text: 'Cante um Refrão', color: '#2ecc71' },
    { id: 6, text: 'Vire o Copo', color: '#e67e22' },
    { id: 7, text: 'Social (Todos bebem!)', color: '#1abc9c' },
    { id: 8, text: 'Imite um Bêbado', color: '#34495e' },
    { id: 9, text: 'Desafio de Trava-Língua', color: '#d35400' },
    { id: 10, text: 'Sorte (Escolha alguém)', color: '#27ae60' },
]

export default function TarefaDeBebado() {
    const [isSpinning, setIsSpinning] = useState(false)
    const [rotation, setRotation] = useState(0)
    const [resultado, setResultado] = useState(null)
    const wheelRef = useRef(null)

    const spin = () => {
        if (isSpinning) return

        setIsSpinning(true)
        setResultado(null)

        // Sorteia um ângulo extra (pelo menos 5 voltas completas + ângulo aleatório)
        const extraDegrees = Math.floor(Math.random() * 360)
        const spinDegrees = rotation + 1800 + extraDegrees

        setRotation(spinDegrees)

        // Calcula qual tarefa caiu
        // Como a roleta gira no sentido horário, mas o ângulo aumenta positivamente, 
        // precisamos ajustar o cálculo para o topo (onde está o ponteiro)
        setTimeout(() => {
            setIsSpinning(false)

            const actualDegrees = spinDegrees % 360
            const n = TAREFAS.length
            const sectorSize = 360 / n

            // O ponteiro está no topo (270 graus ou -90 no círculo trigonométrico padrão)
            // Mas o CSS transform rotate gira tudo. 
            // A fórmula abaixo mapeia o ângulo final para o índice correto
            const index = Math.floor(((360 - actualDegrees) % 360) / sectorSize)
            setResultado(TAREFAS[index])
        }, 5000)
    }

    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}>Tarefa de Bêbado</h1>

            <div className={styles.gameContainer}>
                <div className={styles.pointer}></div>
                <div className={styles.centerPin}>
                    <button
                        className={styles.spinButton}
                        onClick={spin}
                        disabled={isSpinning}
                    >
                        Girar
                    </button>
                </div>

                <div
                    className={styles.wheelWrapper}
                    style={{
                        transform: `rotate(${rotation}deg)`,
                        background: `conic-gradient(${TAREFAS.map((t, i) => `${t.color} ${(360 / TAREFAS.length) * i}deg ${(360 / TAREFAS.length) * (i + 1)}deg`).join(', ')})`
                    }}
                    ref={wheelRef}
                >
                    {TAREFAS.map((tarefa, i) => {
                        const angle = (360 / TAREFAS.length) * i + (360 / TAREFAS.length / 2)
                        return (
                            <div
                                key={tarefa.id}
                                className={styles.labelWrapper}
                                style={{ transform: `rotate(${angle}deg)` }}
                            >
                                <div className={styles.sectorLabel}>
                                    {tarefa.id}
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>

            <div className={styles.resultContainer} style={{ opacity: resultado ? 1 : 0.3 }}>
                {resultado ? (
                    <>
                        <div className={styles.resultTitle}>Opção {resultado.id}:</div>
                        <div className={styles.resultText}>{resultado.text}</div>
                    </>
                ) : (
                    <div className={styles.resultText}>
                        {isSpinning ? 'Sorteando...' : 'Gire a roleta!'}
                    </div>
                )}
            </div>

            <div className={styles.legendContainer}>
                <h3 className={styles.legendTitle}>Legenda das Tarefas</h3>
                <div className={styles.legendGrid}>
                    {TAREFAS.map(tarefa => (
                        <div key={tarefa.id} className={styles.legendItem}>
                            <span className={styles.legendNumber} style={{ backgroundColor: tarefa.color }}>
                                {tarefa.id}
                            </span>
                            <span className={styles.legendText}>{tarefa.text}</span>
                        </div>
                    ))}
                </div>
            </div>

            <div style={{ marginTop: '20px', fontSize: '0.8rem', color: 'rgba(239, 199, 184, 0.4)', textAlign: 'center' }}>
                Respeite as leis e seus limites. <br /> Beber e dirigir é crime. Se beber, não dirija.
            </div>
        </div>
    )
}
