'use client'
import {FormEvent, useState, useEffect} from 'react'
import {useMultistepForm} from './Hooks/useMultistepForm'
import {LogoNameForm} from './components/LogoNameForm'
import {LogoIndustryForm} from './components/LogoIndustryForm'
import {LogoColorSchemeForm} from './components/LogoColorSchemeForm'
import {BriefForm} from './components/BriefForm'
import {LogoStyleForm} from './components/LogoStyleForm'
import {ResultForm} from './components/ResultForm'

import Header from './components/Header'
import Footer from './components/Footer'
import Cookie from "js-cookie";
// import ChatWidget from './components/ChatWidget';

import Image from 'next/image'
import '/public/css/font.css'
import {ColorRing} from "react-loader-spinner";
import {getToken} from "./services/global";
import {redirect} from "next/navigation";
import {useRouter} from "next/navigation";

type FormData = {
    logoName: string
    slogan: string
    industry: string
    color: string
    style: string[],
    brief: string,
    logo: string
}

type Spinner = {}

const INITIAL_DATA: FormData = {
    logoName: '',
    slogan: '',
    industry: '',
    color: '',
    style: [],
    brief: '',
    logo: '',
}

export default function Home() {


    const [data, setData] = useState(INITIAL_DATA)
    const [logoImg, setLogoImg] = useState('')
    const [colorRingVis, setColorRingVis] = useState(false)
    const [isImageGenerated, setIsImageGenerated] = useState(false)
    // const router = useRouter()

    // console.log(router)
    useEffect(() => {

    }, [setLogoImg])

    // useEffect(() => {
    //     const token = getToken();
    //
    //     if (!token) {
    //         // Redirect to the login page if no token is present
    //         // redirect('/login');
    //         router.push('/login')
    //     }
    // }, []);

    useEffect(() => {
        const loadScript = () => {
            if (document.getElementById('widget-script')) {
                return;
            }

            const script = document.createElement('script');
            script.id = 'widget-script';
            script.src = 'https://localhost/chat-widget/index.js';
            script.async = true;

            document.body.appendChild(script);
        };

        //loadScript();

        return () => {
            const script = document.getElementById('widget-script');
            if (script) {
                document.body.removeChild(script);
            }
        };
    }, [])

    function updateFields(fields: Partial<FormData>) {
        setData((prev) => {
            return {...prev, ...fields}
        })
    }

    const {steps, currentStepIndex, step, isFirstStep, isLastStep, back, next, goTo} = useMultistepForm([
        <LogoNameForm key="logoName" {...data} updateFields={updateFields}/>,
        <LogoIndustryForm key="logoIndustry" {...data} updateFields={updateFields}/>,
        <LogoColorSchemeForm key="logoColorScheme" {...data} updateFields={updateFields}/>,
        <LogoStyleForm key="logoStyle" {...data} updateFields={updateFields}/>,
        <BriefForm key="logoStyle" {...data} logo={logoImg} spinner={colorRingVis} generated={isImageGenerated}
                   updateFields={updateFields}/>,
    ])

    async function onSubmit(e: FormEvent) {
        e.preventDefault()
        if (!isLastStep) return next()
        console.log(data)
        const adjustedColor = {
            primary_color: data.primary_color  || 'matching color',
            secondary_color: data.secondary_color  || 'matching color',
            background_color: data.background_color  || 'matching color',
        };

        const newLogo = {
            "name": data.logoName,
            "slogan": data.slogan,
            "industry": data.industry,
            "color": adjustedColor,
            "font": data.style[0],
            "logo_type": "iconic",
            "logo_strength": "not too busy",
            "requirement": "leave the text space empty",
            "avoid word": "picture of logo, logo concept",
            "brief": data.brief
        };
        console.log(data, newLogo)

        try {
            setColorRingVis(true)
            // http://service.demowebsitelinks.com:5000/record
            const response = await fetch("http://service.demowebsitelinks.com:5000/record", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(newLogo),
            });

            if (!response.ok) {
                setColorRingVis(false)
                // Handle non-successful responses
                throw new Error(`HTTP error! Status: ${response.status}`);
            }

            // Parse the response JSON
            const responseData = await response.json();
            setLogoImg(responseData.data)
            setData(responseData.data)
            updateFields({logo: responseData.data})
            setColorRingVis(false)
            setIsImageGenerated(true)

            // Log or use the response data
            console.log(responseData.data);
        } catch (error: any) {
            setColorRingVis(false)
            // Handle fetch error or other errors
            console.error("Error during fetch:", error.message);
            window.alert(error.message);
        }
    }

    return (
        <section className="logo-maker relative min-h-screen">
            {isFirstStep && (
                <>
                    <div className="imgOverlay">
                        <h1 className="textWrapper">Enter your logo name</h1>
                        <Image
                            className="w-full h-screen object-cover absolute inset-0"
                            src="/images/firstBanner.jpg" // Path is relative to the public directory
                            alt="Description of the image"
                            width={1920}
                            height={1200}
                        />
                    </div>
                </>
            )}
            <form onSubmit={onSubmit}>
                <div className={isFirstStep ? '' : 'grid grid-cols-2 gap-1'}>
                    {currentStepIndex % 2 !== 0 && !isFirstStep && (
                        <div className="imgCont">
                            <Image src={`/images/slide${currentStepIndex}.jpg`} alt="Description of the image"
                                   width={1920} height={1080}/>
                        </div>
                    )}

                    <div className="relative h-screen ">
                        <Header/>


                        <div className="formCont">
                            {step}
                            <div className="flex justify-center items-center gap-2 w-[450px]">
                                {!isFirstStep && (!isImageGenerated || colorRingVis) && (
                                    <button type="button" onClick={back} className="themeBtn alternate">
                                        Back
                                    </button>
                                )}

                                {isImageGenerated ? (

                                    <button type="button" className="themeBtn" onClick={() => goTo(0)}>
                                        Generate Again
                                    </button>

                                ) : (
                                    <button
                                        type="submit"
                                        className="themeBtn"
                                        disabled={isLastStep && colorRingVis}
                                    >
                                        {isLastStep ? (isLastStep && colorRingVis ? 'Generating' : 'Generate') : 'Next'}
                                    </button>
                                )}
                            </div>
                        </div>

                        <Footer/>
                    </div>
                    {currentStepIndex % 2 === 0 && !isFirstStep && (
                        <div className="imgCont">
                            <Image src={`/images/slide${currentStepIndex}.jpg`} alt="Description of the image"
                                   width={1920} height={1080}/>
                        </div>
                    )}
                </div>
            </form>
        </section>
    )
}