'use client'
import React, {useEffect, useState} from 'react';
import styled from "styled-components";
import {blackColor, darkGreenColor, lightGreenColor} from "@/styles/colors";
import {PriceHeader_btn} from "@/app/main.styled";

type PriceRow = {
    day_type: string
    hour_1: string
    hour_3: string
    hour_5: string
    night: string
}

const PriceHeader = styled.div`
    display: flex;
    justify-content: space-between;
    align-items: center;
    h2{
        font-size: 64px;
        margin: 0;
        width: max-content;
        line-height: 1;
        text-align: start;
    }
    @media (max-width: 1400px) {
        width: 90%;
        margin: 0 auto;
    }
    @media (max-width: 1080px) {
        width: 80%;
        h2 {
            font-size: 40px;
        }
        div {
            display: flex;
            margin-top: 0;
            justify-content: center;
            align-items: center;
            gap: 24px;
        }
    }
    @media (max-width: 900px) {
        h2{
            font-size: 40px;
        }
    }
    @media (max-width: 600px) {
        h2 {
            font-size: 42px;
        }
        div {
            gap: 1px;
            button {
                font-size: 24px;
                padding: 8px 16px;
            }
        }
    }
    @media (max-width: 420px) {
        flex-direction: column;
        gap: 24px;
        h2 {
            font-size: 36px;
        }
        div {
            gap: 0px;
            width: 100%;
            flex-direction: row;
            button {
                font-size: 24px;
                padding: 6px 12px;
            }
        }
    }
`

const PriceControl = styled.div`
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 80px auto;
    button{
        margin-left: 0;
        font-size: 40px;
        width: 100%;
        text-align: center;
        &::after{
            width: 100%;
            left: 0;
            transform: translateX(0);
        }
    }
    @media (max-width: 1400px) {
        width: 90%;
        button{
            font-size: 34px;
        }
    }
    @media (max-width: 1080px) {
        width: 80%;
        margin: 60px auto;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        button {
            font-size: 24px;
            flex: 1;
            width: max-content;
            white-space: nowrap;
            padding: 12px 0 0;
            transition: all 0.3s ease;

            &::after{
                width: 130%;
            }
        }
    }
    @media (max-width: 800px) {
        gap: 8px;
        button {
            font-size: 20px;
            padding: 0;
            &::after{
                width: 110%;
            }
        }
    }
    @media (max-width: 600px) {
        gap: 6px;
        button {
            font-size: 16px;
            padding: 0;
            min-width: 0;
        }
    }
    @media (max-width: 500px) {
        gap: 6px;
        margin: 50px auto 40px;
        button {
            font-size: 16px;
            padding: 6px 10px;
            min-width: 100px;
            margin-bottom: 20px;
        }
    }
    @media (max-width: 400px) {
        gap: 4px;
        button {
            font-size: 16px;
            padding: 6px 10px;
            min-width: 80px;
        }
    }
`
const PriceContent = styled.div`
    position: relative;
    font-size: 40px;
    th{
        width: 300px;
        height:150px;
        line-height: 1;
        text-align: center;
        background: transparent;
        font-weight: normal;
    }
    td{
        width: 300px;
        height:150px;
        background: ${blackColor};
        text-align: center;
    }
    .tableBottom{
        border-bottom-right-radius: 20px;
    }
    
    &::after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(to right, ${lightGreenColor}, ${darkGreenColor});
        width: 100%;
        height: 100%;
        z-index: -1;
        border: none;
        border-radius: 0 0 20px 0px;
    }
    .customTable {
        all: unset;
        transition: all 0.3s ease;

        th, td {
            min-width: 180px; 
            height: 150px;
            padding: 16px;
            text-align: center;
            border: 1px solid ${darkGreenColor};
            transition: all 0.3s ease;
        }
        
        td{
            border: 1px solid ${darkGreenColor};
            padding: 16px;
        }
        thead th:nth-child(1){
            border: none;
        }
        thead th{
            border-left: 1px solid ${darkGreenColor};
        }
        tbody th{
            border-top: 1px solid ${darkGreenColor};
        }
    }
    @media(max-width: 1400px) {
        display: flex;
        justify-content:center;
        font-size: 34px;
        width: 90%;
        margin: 0 auto;
        th{
            width: 220px;
            height:100px;
        }
        td{
            width: 220px;
            height:100px;
        }
        .customTable {
            th, td {
                height: 130px;
                padding: 16px;
            }
        }
    }
    @media (max-width: 1080px) {
        font-size: 28px;
        width: 80%;
        .customTable {
            th, td {
                min-width: 160px;
                height: 110px;
                padding: 12px;
            }
        }
    }
    @media (max-width: 1000px) {
        font-size: 24px;
        .customTable{
            th, td {
                min-width: 100px;
                height: 90px;
                padding: 8px;
            }
        }
    }
    @media (max-width: 800px) {
        font-size: 20px;
        .customTable{
            th, td {
                min-width: 80px;
                height: 90px;
                padding: 8px;
            }
        }
    }
    @media (max-width: 600px) {
        font-size: 16px;
        .customTable{
            th, td {
                
                height: 70px;
                padding: 6px;
            }
        }
    }
    @media (max-width: 400px) {
        font-size: 16px;
        .customTable{
            th, td {
                min-width: 80px;
                height: 60px;
                padding: 2px;
            }
        }
    }
`
const TableWrapper = styled.div`
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 auto;
    width: 100%;
    transition: all 0.3s ease;
    

    table {
        min-width: 600px;
    }
    &::-webkit-scrollbar {
        height: 8px;
    }
    &::-webkit-scrollbar-thumb {
        background-color: ${darkGreenColor};
        border-radius: 4px;
    }
    
    @media (max-width: 1080px) {
        &::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 40px;
            background: linear-gradient(to right, transparent, rgba(0,0,0,0.2));
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        &:hover::after {
            opacity: 1;
        }
    }
    
    @media (max-width: 600px) {
        &::-webkit-scrollbar {
            height: 6px;
        }
    }
    
    @media (max-width: 400px) {
        &::-webkit-scrollbar {
            height: 4px;
        }
    }
`


const PriceList = () => {
    const [gameType, setGameType] = useState('ПК')
    const [roomType, setRoomType] = useState('solo')
    const [prices, setPrices] = useState<PriceRow[]>([])

    const [isMobileView, setIsMobileView] = useState(false);

    useEffect(() => {
        const checkMobile = () => {
            setIsMobileView(window.innerWidth < 500);
        };

        checkMobile();
        window.addEventListener("resize", checkMobile);

        return () => window.removeEventListener("resize", checkMobile);
    }, []);

    useEffect(() => {
        async function fetchPrices() {
            const res = await fetch(`/api/prices?gameType=${gameType}&roomType=${roomType}`);
            const data = await res.json();
            setPrices(data);
        }

        fetchPrices();
    }, [gameType, roomType]);
    return (
        <div>
            <PriceHeader>
                <h2>Прайс</h2>
                <div>
                    <PriceHeader_btn
                        onClick={() => {
                            setGameType('ПК')
                            setRoomType('solo')
                        }}
                        className={gameType === 'ПК' ? 'active' : ''}
                    >
                        Пк игры:
                    </PriceHeader_btn>
                    <PriceHeader_btn
                        onClick={() => {
                            setGameType('PS')
                            setRoomType('lounge')
                        }}
                        className={gameType === 'PS' ? 'active' : ''}
                    >
                        PS игры:
                    </PriceHeader_btn>
                </div>
            </PriceHeader>
            <PriceControl>
                {gameType === 'ПК' ? (
                    <>
                        <PriceHeader_btn
                            onClick={() => setRoomType('solo')}
                            className={roomType === 'solo' ? 'active' : ''}
                        >
                            room solo
                        </PriceHeader_btn>
                        <PriceHeader_btn
                            onClick={() => setRoomType('duo')}
                            className={roomType === 'duo' ? 'active' : ''}
                        >
                            room duo
                        </PriceHeader_btn>
                        <PriceHeader_btn
                            onClick={() => setRoomType('trio')}
                            className={roomType === 'trio' ? 'active' : ''}
                        >
                            room trio
                        </PriceHeader_btn>
                        <PriceHeader_btn
                            onClick={() => setRoomType('five')}
                            className={roomType === 'five' ? 'active' : ''}
                        >
                            room five
                        </PriceHeader_btn>
                        <PriceHeader_btn
                            onClick={() => setRoomType('six')}
                            className={roomType === 'six' ? 'active' : ''}
                        >
                            room six
                        </PriceHeader_btn>
                    </>
                ) : (
                    <>
                        <PriceHeader_btn
                            onClick={() => setRoomType('lounge')}
                            className={roomType === 'lounge' ? 'active' : ''}
                        >
                            playstation<br/>lounge
                        </PriceHeader_btn>
                        <PriceHeader_btn
                            onClick={() => setRoomType('vip_normal')}
                            className={roomType === 'vip_normal' ? 'active' : ''}
                        >
                            playstation<br/>vip средний
                        </PriceHeader_btn>
                        <PriceHeader_btn
                            onClick={() => setRoomType('vip_big')}
                            className={roomType === 'vip_big' ? 'active' : ''}
                        >
                            playstation<br/>vip большой
                        </PriceHeader_btn>
                    </>
                )}
            </PriceControl>
            <PriceContent>
                <TableWrapper>
                    {isMobileView ?
                        (<table className="customTable">
                            <thead>
                            {gameType === 'ПК' && (
                                <tr>
                                    <th></th>
                                    {prices.map((row, idx) => (
                                        <th key={idx}>{row.day_type}</th>
                                    ))}
                                </tr>
                            )}
                            </thead>
                            <tbody>
                            {gameType === 'ПК' ? (
                                <>
                                    <tr>
                                        <th>1 ЧАС</th>
                                        {prices.map((row, idx) => (
                                            <td key={idx}>{row.hour_1}</td>
                                        ))}
                                    </tr>
                                    <tr>
                                        <th>3 ЧАСА</th>
                                        {prices.map((row, idx) => (
                                            <td key={idx}>{row.hour_3}</td>
                                        ))}
                                    </tr>
                                    <tr>
                                        <th>5 ЧАСОВ</th>
                                        {prices.map((row, idx) => (
                                            <td key={idx}>{row.hour_5}</td>
                                        ))}
                                    </tr>
                                    <tr>
                                        <th>НОЧЬ</th>
                                        {prices.map((row, idx) => (
                                            <td key={idx}>{row.night}</td>
                                        ))}
                                    </tr>
                                </>
                            ) : (
                                <>
                                    <tr>
                                        <th>1 ЧАС</th>
                                        {prices.map((row, idx) => (
                                            <td key={idx}>{row.day_type}</td>
                                        ))}
                                    </tr>
                                    <tr>
                                        <th>3 ЧАСА</th>
                                        {prices.map((row, idx) => (
                                            <td key={idx}>{row.hour_1}</td>
                                        ))}
                                    </tr>
                                    <tr>
                                        <th>3 ЧАСА + КАЛЬЯН</th>
                                        {prices.map((row, idx) => (
                                            <td key={idx}>{row.hour_3}</td>
                                        ))}
                                    </tr>
                                    <tr>
                                        <th>5 ЧАСОВ</th>
                                        {prices.map((row, idx) => (
                                            <td key={idx}>{row.hour_5}</td>
                                        ))}
                                    </tr>
                                    <tr>
                                        <th>5 ЧАСОВ + КАЛЬЯН</th>
                                        {prices.map((row, idx) => (
                                            <td key={idx} className={idx === prices.length - 1 ? 'tableBottom' : ''}>{row.night}</td>
                                        ))}
                                    </tr>
                                </>
                            )}
                            </tbody>
                        </table>)
                        :
                        (<table className="customTable">
                            <thead>
                            {gameType === 'ПК' ? (
                                <tr>
                                    <th></th>
                                    <th>1 ЧАС</th>
                                    <th>3 ЧАСА</th>
                                    <th>5 ЧАСОВ</th>
                                    <th>НОЧЬ</th>
                                </tr>
                            ) : (
                                <tr>
                                    <th>1 ЧАС</th>
                                    <th>3 ЧАСА</th>
                                    <th>3 ЧАСА + Кальян</th>
                                    <th>5 ЧАСОВ</th>
                                    <th>5 ЧАСОВ + Кальян</th>
                                </tr>
                            )}
                            </thead>
                            <tbody>
                            {prices.map((row, idx) => (
                                <tr key={idx}>
                                    {gameType === 'ПК' ? (<th>{row.day_type}</th>) : (<td>{row.day_type}</td>)}
                                    <td>{row.hour_1}</td>
                                    <td>{row.hour_3}</td>
                                    <td>{row.hour_5}</td>
                                    <td className={idx === prices.length - 1 ? 'tableBottom' : ''}>{row.night}</td>
                                </tr>
                            ))}
                            </tbody>
                        </table>)
                    }
                </TableWrapper>
            </PriceContent>

        </div>
    );
};

export default PriceList;