'use client';

import { useState, useContext } from "react";
import { Alertconstext } from "@/context/AlertWrapper";
import Cuadrado from "./cuadros";

const Tablero = () => {
    const [cuadros, setCuadros] = useState(Array(9).fill(''));
    const [turno, setTurno] = useState('X');
    const alert = useContext(Alertconstext);

    const changecolor = () => {
        // Función vacía, agregar funcionalidad si es necesario
    };

    const reiniciar = () => {
        // Función vacía, agregar funcionalidad si es necesario
    };

    const pintaFigura = (indexItem, valor) => {
        if (cuadros[indexItem] !== '') {
            alert.show('Tablero', '¡Casilla ya seleccionada!');
            return;
        }
        if (cuadros[indexItem] === '') {
            const misCuadros = cuadros.slice();
            misCuadros[indexItem] = valor;
            setCuadros(misCuadros);

            setTurno(turno === 'X' ? 'O' : 'X');
        }
    };

    const calcularGanador = (mytablero) => {
        const jugadasGanadas = [
            [0, 1, 2],
            [3, 4, 5],
            [6, 7, 8],
            [0, 3, 6],
            [1, 4, 7],
            [2, 5, 8],
            [0, 4, 8],
            [2, 4, 6]
        ];
        for (let ij = 0; ij < jugadasGanadas.length; ij++) {
            const [a, b, c] = jugadasGanadas[ij];
            if (mytablero[a] && mytablero[a] === mytablero[b] && mytablero[a] === mytablero[c]) {
                return mytablero[a];
            }
        }
        return '';
    };

    const ganador = calcularGanador(cuadros);

    return (
        <>
            <h1 className="px-5 text-5xl font-extrabold text-black text-center mt-20">Totito</h1>
            <div className="justify-center flex"> 
                <span className="block text-center mt-5 text-black border w-64 py-2 rounded-xl shadow-xl font-bold">{'Turno: ' + (turno)}</span>
                <span className="block text-center mt-5 text-black border w-64 py-2 rounded-xl shadow-xl font-bold">{'El ganador es: ' + (ganador || 'Nadie aún')}</span>
            </div>
            <div className="mt-10 p-5 grid grid-cols-3 gap-4 items-center">
                {cuadros.map((items, indexItem) => (
                    <Cuadrado 
                        key={indexItem} 
                        valor={items}
                        alHacerClick={(valor) => pintaFigura(indexItem, valor)}
                    />
                ))}
            </div>
        </>
    );
};

export default Tablero;