'use client'
import React, {useEffect, useState} from 'react';
import styled from "styled-components";
import {PriceHeader_btn} from "@/app/main.styled";
import Image from "next/image";
import Link from "next/link";
import {lightGreenColor} from "@/styles/colors";
import {useBronStore} from "@/store/useBronStore";

const GameHeader = styled.div`
    display: flex;
    justify-content: center;
    gap: 170px;
    align-items: center;
    button{
        margin-left: 0;
    }
    @media (max-width: 800px) {
        gap: 40px;
        flex-direction: row;
        button {
            font-size: 42px;
            width: auto;
            padding: 0 20px;
            &::after {
                width: 100%;
            }
        }
    }
    @media (max-width: 500px) {
        gap: 20px;
        button {
            font-size: 36px;
            padding: 0 15px;
        }
    }
    @media (max-width: 400px) {
        button {
            font-size: 32px;
        }
    }
`
const GameContent = styled.div`
    display: grid;
    margin-top: 100px;
    grid-template-columns: repeat(4, 270px);
    justify-content: center;
    align-items: center;
    gap: 45px;
    position: relative;
    -webkit-transform: translateZ(0);
    will-change: transform;
    &::after{
        content: "";
        position: absolute;
        bottom: 0;
        right: -30%;
        background: ${lightGreenColor};
        width: 200px;
        height: 400px;
        filter: blur(120px);
        opacity: .6;
        z-index: -1;
    }
    @media (max-width: 1300px) {
        grid-template-columns: repeat(3, 270px);
    }
    @media (max-width: 1000px) {
        grid-template-columns: repeat(3, 200px);
    }
    @media (max-width: 800px) {
        grid-template-columns: repeat(2, 240px);
        gap: 30px;
        margin-top: 60px;
    }
    @media (max-width: 550px) {
        grid-template-columns: repeat(2, 180px);
        gap: 20px;
    }
    @media (max-width: 400px) {
        grid-template-columns: repeat(2, 150px);
        gap: 15px;
    }
`
const GameBlock = styled.div`
    cursor: pointer;
    p{
        font-size: 30px;
        margin-bottom: 6px;
        line-height: 1;
        text-transform: none;
    }
    img {
        width: 300px;
        height: 155px;
        border-radius: 15px;
        object-fit: cover;
        display: block;
    }
    @media (max-width: 800px) {
        img {
            width: 100%;
            height: 130px;
        }
        p {
            font-size: 22px;
        }
    }
    @media (max-width: 550px) {
        img {
            height: 100px;
        }
        p {
            font-size: 18px;
        }
    }
    @media (max-width: 400px) {
        img {
            height: 85px;
        }
        p {
            font-size: 16px;
        }
    }
`
const GameText = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 80px;
    div{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }
    h3{
        line-height: 1;
        font-size: 36px;
        text-align: center;
        text-transform: none;
        span{
            background: #8921ff;
            text-transform: uppercase;
            padding: 4px 18px;
        }
    }
    @media (max-width: 800px) {
        flex-direction: column;
        gap: 25px;
        margin-top: 60px;
        h3 {
            font-size: 32px;
            max-width: 80%;
            margin: 0 auto;
        }
        div {
            gap: 25px;
        }
    }
    @media (max-width: 550px) {
        gap: 20px;
        margin-top: 50px;
        h3 {
            font-size: 28px;
            max-width: 90%;
        }
        div {
            gap: 20px;
            img {
                width: 65px;
                height: 65px;
            }
        }
    }
    @media (max-width: 400px) {
        gap: 15px;
        margin-top: 40px;
        h3 {
            font-size: 24px;
        }
        div {
            gap: 15px;
            img {
                width: 55px;
                height: 55px;
            }
        }
    }
`

interface Game{
    id: number;
    title: string;
    image_url: string;
    platform: string;
}
type Links = {
    tg?: string;
    whatsapp?: string;
}

const GameList:React.FC<Links> = ({tg, whatsapp}) => {
    const [platform, setPlatform] = useState<'pc'|'ps'>('pc')
    const [games, setGames] = useState<Game[]>([]);
    const open = useBronStore((s) => s.open);

    useEffect(()=>{
        fetch(`/api/games?platform=${platform}`)
            .then(res=>res.json())
            .then(setGames)
    }, [platform])

    const [showAll, setShowAll] = useState(false)
    const [isMobile, setIsMobile] = useState(false)

    useEffect(() => {
        const checkMobile = () => setIsMobile(window.innerWidth <= 760)
        checkMobile()
        window.addEventListener('resize', checkMobile)
        return () => window.removeEventListener('resize', checkMobile)
    }, [])

    return (
        <div>
            <GameHeader>
                <PriceHeader_btn onClick={()=> setPlatform('pc')} className={platform==='pc' ? 'active' : ''}>
                    Пк игры:
                </PriceHeader_btn>
                <PriceHeader_btn onClick={()=> setPlatform('ps')} className={platform==='ps' ? 'active' : ''}>
                    Ps игры:
                </PriceHeader_btn>
            </GameHeader>
            <GameContent>
                {(isMobile && !showAll ? games.slice(0, 8) : games).map((game) => (
                    <GameBlock key={game.id} onClick={() => open('zayvka-game')}>
                        <p>{game.title}</p>
                        <Image
                            src={`/api/uploads/games/${game.image_url}`}
                            alt={game.title}
                            width={270}
                            height={140}
                            loading="lazy"
                        />
                    </GameBlock>
                ))}
            </GameContent>
            {isMobile && games.length >8 && (
                <div style={{ textAlign: 'center', marginTop: '42px', width:"100%"}}>
                    <button
                        onClick={() => setShowAll(prev => !prev)}
                        style={{
                            fontSize: '20px',
                            padding: '12px 24px',
                            borderRadius: '12px',
                            border: 'none',
                            background: lightGreenColor,
                            color: '#000',
                            cursor: 'pointer'
                        }}
                    >
                        {showAll ? 'Скрыть' : 'Показать все'}
                    </button>
                </div>
            )}
            <GameText>
                <h3><span>Не нашел нужную игру?</span><br/>Напиши нам и мы ее скачаем!</h3>
                <div>
                    {tg ? (
                        <Link href={tg} target={"_blank"}>
                            <Image src={'/icons/tg_primary.png'} alt={'tg'} width={78} height={78} loading={"lazy"} />
                        </Link>
                    ) : (
                        <Link href={'/'}>
                            <Image src={'/icons/tg_primary.png'} alt={'tg'} width={78} height={78} loading={"lazy"} />
                        </Link>
                    )}
                    {whatsapp ? (
                        <Link href={whatsapp} target={"_blank"}>
                            <Image src={'/icons/wa_primary.png'} alt={'whatsapp'} width={81} height={81} loading={"lazy"} />
                        </Link>
                    ) : (
                        <Link href={'/'}>
                            <Image src={'/icons/wa_primary.png'} alt={'whatsapp'} width={81} height={81} loading={"lazy"} />
                        </Link>
                    )}
                </div>
            </GameText>
        </div>
    );
};

export default GameList;