import React, { useEffect, useState } from 'react';
import { useBronStore } from '@/store/useBronStore';
import StyledButton from "@/components/StyledButton";
import Image from "next/image";
import {
    ModalWrapper,
    Overlay,
    CloseButton,
    SectionTitle,
    Input,
    ChoiceBtn,
    TwoColumns,
    TitleModal,
    StepsModal,
    BackBtn,
    BronBtn,
    MaskedInput, InputLabel,
    TimeSlotGrid,
    TimeSlotBtn
} from "@/styles/modal.styled";
import {gradient} from "@/styles/colors";

export default function BronModal() {
    const today = new Date().toISOString().split('T')[0];
    const { isOpen, screen, close, goTo, formData, setFormData } = useBronStore();
    const [isVisible, setIsVisible] = useState(false);
    const [shouldAnimateIn, setShouldAnimateIn] = useState(false);

    const [selectedDate, setSelectedDate] = useState<string>(today);
    const [selectedTime, setSelectedTime] = useState<string | null>(null);
    const [availableSlots, setAvailableSlots] = useState<Array<{time: string, available: boolean, booked: number, total: number}>>([]);
    const [loadingSlots, setLoadingSlots] = useState(false);

    const [choice, setChoice] = useState<string|null>(null)
    const options = [
        {label:"Играть на пк", value:'pc'},
        {label:"Играть на ps", value:'ps'},
        {label:"Смотреть трансляции", value:'tv'},
        {label:"Пока не определился", value:'zayvka'},
    ]

    const [choiceRoom, setChoiceRoom] = useState<string|null>(null)
    const rooms = [
        {title:"solo", label:"VIP кабины на одного игрока"},
        {title:"duo", label:"vip кабины на двоих игроков"},
        {title:"trio", label:"vip кабины на три игрока"},
        {title:"bootcamp 5", label:"vip кабина на пять игроков"},
        {title:"bootcamp 6", label:"vip кабина на шесть игроков"},
        {title:"Пока не определился", label:""},
    ]

    const [transRoom, setTransRoom] = useState<string|null>(null)
    const transRooms = [
        {title:"PS Big vip", label:"Большие VIP кабины. Компанией до 8 человек"},
        {title:"PS Medium", label:"Средние VIP кабины. Компанией до 4 человек"},
        {title:"PS лаундж", label:"PS зона в общем холле. На 2-4 человека"},
    ]

    const contactOptions: { type: "telegram" | "whatsapp" | "phone"; icon: string }[] = [
        { type: 'telegram', icon: '/icons/tg.png' },
        { type: 'whatsapp', icon: '/icons/whatsapp.png' },
        { type: 'phone', icon: '/icons/phone.png' },
    ];


    const fetchAvailableSlots = async (date: string, room: string) => {
        if (!date || !room) return;
        
        setLoadingSlots(true);
        try {
            const res = await fetch(`/api/bookings/available-slots?date=${date}&room=${room}`);
            if (res.ok) {
                const data = await res.json();
                setAvailableSlots(data.slots || []);
            }
        } catch (e) {
            console.error('Ошибка при получении доступных слотов', e);
        } finally {
            setLoadingSlots(false);
        }
    };

    const handleSend = async (): Promise<boolean> => {
        try {
            // Сначала сохраняем в БД
            if (formData.date && formData.time && formData.room) {
                const bookingRes = await fetch('/api/bookings', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        ...formData,
                        date: formData.date,
                        time: formData.time,
                    }),
                });

                if (!bookingRes.ok) {
                    const error = await bookingRes.json();
                    alert(error.error || 'Ошибка при создании бронирования');
                    return false;
                }
            }

            // Затем отправляем в Telegram
            const res = await fetch('/api/send-to-telegram', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    ...formData,
                    time: formData.time || '—',
                }),
            });

            return res.ok;
        } catch (e) {
            console.error('Ошибка сети', e);
            return false;
        }
    };



    useEffect(() => {
        if (isOpen) {
            setIsVisible(true);
            document.body.style.overflow = 'hidden';
            requestAnimationFrame(() => {
                setShouldAnimateIn(true);
            });
        } else {
            setChoice(null);
            setChoiceRoom(null);
            setTransRoom(null);
            setSelectedDate(today);
            setSelectedTime(null);
            setAvailableSlots([]);

            document.body.style.overflow = '';
            setShouldAnimateIn(false);
            const timeout = setTimeout(() => setIsVisible(false), 300);
            return () => clearTimeout(timeout);
        }
    }, [isOpen]);

    // Загружаем доступные слоты при изменении даты или комнаты
    useEffect(() => {
        if (formData.date && formData.room && (screen === 'pc3' || screen === 'pc3-2')) {
            fetchAvailableSlots(formData.date, formData.room);
        }
    }, [formData.date, formData.room, screen]);



    if (!isOpen && !isVisible) return null;

    return (
        <div>
        {(isOpen || isVisible) && (
            <Overlay>
                <ModalWrapper $animateIn={shouldAnimateIn}>
                    <CloseButton onClick={close}>×</CloseButton>
                    {screen === 'start' && (
                        <>
                            <TitleModal>забронируй место в <span>strike arena</span></TitleModal>
                            <StepsModal>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <p>2</p>
                                <p>3</p>
                                <p>4</p>
                            </StepsModal>
                            <SectionTitle>Выбери чем ты хочешь заняться в клубе</SectionTitle>
                            <TwoColumns>
                                {options.map((option, index) => (
                                    <ChoiceBtn
                                        className={'big_btn'}
                                        key={index}
                                        $selected={choice===option.value}
                                        onClick={()=> {
                                            setChoice(option.value)
                                            setFormData({type: option.value})
                                        }}
                                    >
                                        <span>{option.label}</span>
                                    </ChoiceBtn>
                                ))}
                            </TwoColumns>
                            <StyledButton
                                disabled={!choice}
                                onClick={()=>{
                                    if(choice==='pc') goTo('pc2');
                                    else if(choice==='ps') goTo('playstation');
                                    else if(choice==='tv') goTo('televis');
                                    else if(choice==='zayvka') goTo('zayvka');
                                }}
                                label={"Далее"} padding={"8px 46px"} fontSize={"32px"} />
                            <BronBtn onClick={()=>{goTo('zayvka')}}>Забронировать</BronBtn>
                        </>
                    )}

                    {screen === 'pc2' && (
                        <>
                            <TitleModal>забронируй место в <span>strike arena</span></TitleModal>
                            <StepsModal>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <p>3</p>
                                <p>4</p>
                            </StepsModal>
                            <SectionTitle className={"marginTitle"} style={{marginTop:"140px"}}>в каком зале планируешь играть?</SectionTitle>
                            <TwoColumns>
                                {rooms.map((room, index) => (
                                    <ChoiceBtn
                                        key={index}
                                        $selected={choiceRoom===room.title}
                                        onClick={()=>setChoiceRoom(room.title)}
                                    >
                                        <h3>{room.title}</h3>
                                        <span>{room.label}</span>
                                    </ChoiceBtn>
                                ))}
                            </TwoColumns>
                            <StyledButton
                                disabled={!choiceRoom}
                                onClick={() => {
                                    goTo("pc3");
                                    setFormData({ room: choiceRoom ?? undefined });
                                }}

                                label={"Далее"} padding={"8px 46px"} fontSize={"32px"} />
                            <BronBtn onClick={()=>{goTo('zayvka')}}>Забронировать</BronBtn>
                            <BackBtn onClick={()=>{goTo('start')}}>Назад</BackBtn>
                        </>
                    )}

                    {screen === 'pc3' && (
                        <>
                            <TitleModal>забронируй место в <span>strike arena</span></TitleModal>
                            <StepsModal>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <p>4</p>
                            </StepsModal>
                            <SectionTitle>выбери дату и время</SectionTitle>
                            <Input
                                type="date"
                                value={selectedDate}
                                min={today}
                                style={{ width: "260px", marginBottom: "30px" }}
                                onChange={(e) => {
                                    const value = e.target.value;
                                    setSelectedDate(value);
                                    setSelectedTime(null);
                                    setFormData({ date: value, time: undefined });
                                }}
                            />
                            {formData.date && (
                                <>
                                    <InputLabel style={{ marginBottom: "20px" }}>
                                        {loadingSlots ? 'Загрузка доступных слотов...' : 'Выбери время'}
                                    </InputLabel>
                                    <TimeSlotGrid>
                                        {availableSlots.map((slot) => (
                                            <TimeSlotBtn
                                                key={slot.time}
                                                $selected={selectedTime === slot.time}
                                                $available={slot.available}
                                                disabled={!slot.available}
                                                onClick={() => {
                                                    if (slot.available) {
                                                        setSelectedTime(slot.time);
                                                        setFormData({ time: slot.time });
                                                    }
                                                }}
                                            >
                                                {slot.time}
                                            </TimeSlotBtn>
                                        ))}
                                    </TimeSlotGrid>
                                    {availableSlots.length > 0 && (
                                        <InputLabel style={{ fontSize: "14px", marginTop: "10px" }}>
                                            Занято: {availableSlots.filter(s => !s.available).length} / {availableSlots.length} слотов
                                        </InputLabel>
                                    )}
                                </>
                            )}
                            <StyledButton
                                disabled={!selectedDate || !selectedTime}
                                onClick={() => {
                                    goTo("pc4")
                                    setFormData({ date: selectedDate, time: selectedTime || undefined });
                                }}
                                label="Далее"
                                padding="8px 46px"
                                fontSize="32px"
                            />
                            <BronBtn onClick={()=>{goTo('zayvka')}}>Забронировать</BronBtn>
                            <BackBtn onClick={()=>{goTo('pc2')}}>Назад</BackBtn>
                        </>
                    )}
                    {screen === 'pc3-2' && (
                        <>
                            <TitleModal>забронируй место в <span>strike arena</span></TitleModal>
                            <StepsModal>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <p>4</p>
                            </StepsModal>
                            <SectionTitle>выбери дату и время</SectionTitle>
                            <Input
                                type="date"
                                value={selectedDate}
                                min={today}
                                style={{ width: "260px", marginBottom: "30px" }}
                                onChange={(e) => {
                                    const value = e.target.value;
                                    setSelectedDate(value);
                                    setSelectedTime(null);
                                    setFormData({ date: value, time: undefined });
                                }}
                            />
                            {formData.date && formData.room && (
                                <>
                                    <InputLabel style={{ marginBottom: "20px" }}>
                                        {loadingSlots ? 'Загрузка доступных слотов...' : 'Выбери время'}
                                    </InputLabel>
                                    <TimeSlotGrid>
                                        {availableSlots.map((slot) => (
                                            <TimeSlotBtn
                                                key={slot.time}
                                                $selected={selectedTime === slot.time}
                                                $available={slot.available}
                                                disabled={!slot.available}
                                                onClick={() => {
                                                    if (slot.available) {
                                                        setSelectedTime(slot.time);
                                                        setFormData({ time: slot.time });
                                                    }
                                                }}
                                            >
                                                {slot.time}
                                            </TimeSlotBtn>
                                        ))}
                                    </TimeSlotGrid>
                                    {availableSlots.length > 0 && (
                                        <InputLabel style={{ fontSize: "14px", marginTop: "10px" }}>
                                            Занято: {availableSlots.filter(s => !s.available).length} / {availableSlots.length} слотов
                                        </InputLabel>
                                    )}
                                </>
                            )}
                            <StyledButton
                                disabled={!selectedDate || !selectedTime}
                                onClick={() => {
                                    goTo("trans")
                                    setFormData({ date: selectedDate, time: selectedTime || undefined });
                                }}
                                label="Далее"
                                padding="8px 46px"
                                fontSize="32px"
                            />
                            <BronBtn onClick={()=>{goTo('zayvka')}}>Забронировать</BronBtn>
                            <BackBtn onClick={()=>{goTo('playstation')}}>Назад</BackBtn>
                        </>
                    )}

                    {screen === 'pc4' && (
                        <>
                            <TitleModal>забронируй место в <span>strike arena</span></TitleModal>
                            <StepsModal>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                            </StepsModal>
                            <InputLabel className={"marginTitle"}  style={{ marginTop: '100px' }}>Свяжемся с тобой для подтверждения брони и уточнения времени</InputLabel>
                            <Input
                                placeholder={"Введи свое имя"}
                                onChange={(e) => {
                                    setFormData({ name: e.target.value })
                                }}
                            />
                            <InputLabel>Во что планируешь играть?</InputLabel>
                            <Input
                                placeholder={"Введи игру"}
                                onChange={(e) => {
                                    setFormData({ game: e.target.value })
                                }}
                            />
                            <InputLabel>Введите номер телефона</InputLabel>
                            <MaskedInput
                                mask="+0 (000) 000-00-00"
                                placeholder="+_ (___) ___-__-__"
                                value={formData.contact || ''}
                                onAccept={(value) => setFormData({ contact: value })}
                                unmask={false}
                            />
                            <InputLabel>Выбери удобный способ для связи</InputLabel>
                            <div className={'contacts'} style={{ display: 'flex', gap: '20px', margin: '0px 0 40px' }}>
                                {contactOptions.map((opt) => (
                                    <button
                                        key={opt.type}
                                        onClick={() => setFormData({ contactMethod: opt.type})}
                                        style={{
                                            borderRadius: '12px',
                                            padding: '10px',
                                            background: formData.contactMethod === opt.type ? gradient : 'transparent',
                                            cursor: 'pointer'
                                        }}
                                    >
                                        <Image src={opt.icon} alt={opt.type} width={48} height={48} loading={'lazy'} />
                                    </button>
                                ))}
                            </div>
                            <StyledButton
                                disabled={!formData.name || !formData.contact || !formData.contactMethod}
                                onClick={async () => {
                                    const success = await handleSend();
                                    if(success) {
                                        goTo("ready");
                                    }
                                }}
                                label="Далее"
                                padding="8px 46px"
                                fontSize="32px"
                            />
                            <BronBtn onClick={()=>{goTo('zayvka')}}>Забронировать</BronBtn>
                            <BackBtn onClick={()=>{goTo('pc3')}}>Назад</BackBtn>
                        </>
                    )}

                    {screen === 'trans' && (
                        <>
                            <TitleModal>забронируй место в <span>strike arena</span></TitleModal>
                            <StepsModal>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                            </StepsModal>
                            <InputLabel  style={{ marginTop: '100px' }}>Свяжемся с тобой для подтверждения брони и уточнения времени</InputLabel>
                            <Input
                                placeholder={"Введи свое имя"}
                                onChange={(e) => {
                                    setFormData({ name: e.target.value })
                                }}
                            />
                            <InputLabel>Введите номер телефона</InputLabel>
                            <MaskedInput
                                mask="+0 (000) 000-00-00"
                                placeholder="+_ (___) ___-__-__"
                                value={formData.contact || ''}
                                onAccept={(value) => setFormData({ contact: value })}
                                unmask={false}
                            />
                            <InputLabel>Выбери удобный способ для связи</InputLabel>
                            <div style={{ display: 'flex', gap: '20px', margin: '0px 0 40px' }}>
                                {contactOptions.map((opt) => (
                                    <button
                                        key={opt.type}
                                        onClick={() => setFormData({ contactMethod: opt.type })}
                                        style={{
                                            borderRadius: '12px',
                                            padding: '10px',
                                            background: formData.contactMethod === opt.type ? gradient : 'transparent',
                                            cursor: 'pointer'
                                        }}
                                    >
                                        <Image src={opt.icon} alt={opt.type} width={48} height={48} loading={'lazy'} />
                                    </button>
                                ))}
                            </div>
                            <StyledButton
                                disabled={!formData.name || !formData.contact || !formData.contactMethod}
                                onClick={async () => {
                                    const success = await handleSend();
                                    if (success) {
                                        goTo("ready");
                                    }
                                }}
                                label="Далее"
                                padding="8px 46px"
                                fontSize="32px"
                            />
                            <BronBtn onClick={()=>{goTo('zayvka')}}>Забронировать</BronBtn>
                            <BackBtn onClick={()=>{goTo('pc3-2')}}>Назад</BackBtn>
                        </>
                    )}

                    {screen === 'playstation' && (
                        <>
                            <TitleModal>забронируй место в <span>strike arena</span></TitleModal>
                            <StepsModal>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <p>3</p>
                                <p>4</p>
                            </StepsModal>
                            <SectionTitle className={"marginTitle"} style={{marginTop:"140px"}}>в каком зале планируешь играть?</SectionTitle>
                            {transRooms.map((room, index) => (
                                <ChoiceBtn
                                    key={index}
                                    $selected={transRoom===room.title}
                                    onClick={()=>setTransRoom(room.title)}
                                    style={{marginBottom:"18px", maxWidth:"510px", width:"80%"}}
                                >
                                    <h3>{room.title}</h3>
                                    <span>{room.label}</span>
                                </ChoiceBtn>
                            ))}
                            <StyledButton
                                disabled={!transRoom}
                                onClick={() => {
                                    goTo("pc3");
                                    setFormData({ room: transRoom ?? undefined});
                                }}
                                label={"Далее"} padding={"8px 46px"} fontSize={"32px"} />
                            <BronBtn onClick={()=>{goTo('zayvka')}}>Забронировать</BronBtn>
                            <BackBtn onClick={()=>{goTo('start')}}>Назад</BackBtn>
                        </>
                    )}
                    {screen === 'televis' && (
                        <>
                            <TitleModal>забронируй место в <span>strike arena</span></TitleModal>
                            <StepsModal>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <span> <Image src={"/icons/tick.svg"} alt={'tick'} width={40.5} height={29.5} loading={"lazy"} /> </span>
                                <p>3</p>
                                <p>4</p>
                            </StepsModal>
                            <SectionTitle className={"marginTitle"} style={{marginTop:"140px"}}>в каком зале планируешь играть?</SectionTitle>
                            {transRooms.map((room, index) => (
                                <ChoiceBtn
                                    key={index}
                                    $selected={transRoom===room.title}
                                    onClick={()=>setTransRoom(room.title)}
                                    style={{marginBottom:"18px", maxWidth:"510px", width:"80%"}}
                                >
                                    <h3>{room.title}</h3>
                                    <span>{room.label}</span>
                                </ChoiceBtn>
                            ))}
                            <StyledButton
                                disabled={!transRoom}
                                onClick={() => {
                                    goTo("pc3-2");
                                    setFormData({ room: transRoom ?? undefined});
                                }}
                                label={"Далее"} padding={"8px 46px"} fontSize={"32px"} />
                            <BronBtn onClick={()=>{goTo('zayvka')}}>Забронировать</BronBtn>
                            <BackBtn onClick={()=>{goTo('start')}}>Назад</BackBtn>
                        </>
                    )}

                    {screen === 'zayvka' && (
                        <>
                            <TitleModal style={{position:"relative", top:"20px"}}>забронируй место в <span>strike arena</span></TitleModal>
                            <InputLabel style={{marginBottom:"50px"}}>Оставь заявку и мы тебе перезвоним поможем забронировать место</InputLabel>
                            <Input
                                placeholder={"Введи свое имя"}
                                onChange={(e) => {
                                    setFormData({ name: e.target.value })
                                }}
                            />
                            <MaskedInput
                                mask="+0 (000) 000-00-00"
                                placeholder="+_ (___) ___-__-__"
                                value={formData.contact || ''}
                                onAccept={(value) => setFormData({ contact: value })}
                                unmask={false}
                                style={{marginBottom:"50px"}}
                            />
                            <StyledButton
                                disabled={!formData.name || !formData.contact}
                                onClick={async () => {
                                    const success = await handleSend();
                                    if (success) {
                                        goTo("ready");
                                    }
                                }}
                                label="Оставить заявку"
                                padding="8px 46px"
                                fontSize="24px"
                            />
                            <BackBtn onClick={()=>{goTo('start')}}>Назад</BackBtn>
                        </>
                    )}
                    {screen === 'zayvka-game' && (
                        <>
                            <TitleModal style={{position:"relative", top:"20px"}}>забронируй место в <span>strike arena</span></TitleModal>
                            <InputLabel style={{marginBottom:"50px"}}>Оставь заявку и мы тебе перезвоним поможем забронировать место</InputLabel>
                            <Input
                                placeholder={"Введи свое имя"}
                                onChange={(e) => {
                                    setFormData({ name: e.target.value })
                                }}
                            />
                            <MaskedInput
                                mask="+0 (000) 000-00-00"
                                placeholder="+_ (___) ___-__-__"
                                value={formData.contact || ''}
                                onAccept={(value) => setFormData({ contact: value })}
                                unmask={false}
                                style={{marginBottom:"50px"}}
                            />
                            <StyledButton
                                disabled={!formData.name || !formData.contact}
                                onClick={async () => {
                                    const success = await handleSend();
                                    if (success) {
                                        goTo("ready");
                                    }
                                }}
                                label="Оставить заявку"
                                padding="8px 46px"
                                fontSize="24px"
                            />
                        </>
                    )}

                    {screen === 'ready' && (
                        <>
                            <Image style={{marginBottom:"30px",}} src={"/icons/tick.svg"} alt={"tick"} width={160} height={122} loading={"lazy"} />
                            <TitleModal className={'readyTitle'} style={{position:"relative", top:0}}><span>{formData.name}, спасибо,</span><br/> Мы приняли твою заявку<br/> на бронь</TitleModal>
                            <InputLabel className={'readyText'} style={{fontSize:"24px",marginBottom:"50px"}}>Aдмин клуба STRIKE ARENA свяжется с тобой в ближайшее время для уточнения времени и подтверждения твоей заявки</InputLabel>
                            <StyledButton
                                onClick={close}
                                label="Назад"
                                padding="8px 46px"
                                fontSize="32px"
                            />
                        </>
                    )}
                </ModalWrapper>
            </Overlay>
        )}
        </div>
    );
}
