import { useEffect, useState, useRef } from "react";
import { motion } from "motion/react";
import { AuditCanvas } from "@/components/AuditCanvas/AuditCanvas";
import { ProgressionWidget } from "@/components/ProgressionWidget/ProgressionWidget";
import homeData from "@content/pages/home.json";
import { useTool } from "@/hooks/useTool";
import "./Home.scss";
import { ToolCard } from "@/components/ToolCard/ToolCard";
import { ToolModal } from "@/components/ToolModal/ToolModal";
import { HomeData } from "@/types";
import { HomeControls } from "@/components/HomeControls/HomeControls";
import { useContentWithTrad } from "@/hooks/useContentWithTrad";
import { EASE_IN_OUT_QUAD } from "@/constants/ease";
import { DialogWrapper } from "@/components/UI/DialogWrapper/DialogWrapper";
import { useProgression } from "@/hooks/useProgression";
import { useHoveredStep } from "@/hooks/useHoveredStep";
import { useIntro } from "@/hooks/useIntro";
import { ProgressionModal } from "@/components/ProgressionModal/ProgressionModal";
import { FullscreenButton } from "@/components/FullscreenButton/FullscreenButton";
import { useIsFullscreen } from "@/hooks/useIsFullscreen";

export default function Home() {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isLastModalOpen, setIsLastModalOpen] = useState(false);
    const [isRestartModalOpen, setIsRestartModalOpen] = useState(false);
    const { setSelectedTool, resetSelectedTool, selectedTool } = useTool();
    const cardsRef = useRef<HTMLUListElement>(null);
    const [cardContainerHeight, setCardContainerHeight] = useState(0);
    const schemaRef = useRef<{ playSegment: () => void }>(null);
    const { stepValidated } = useProgression();
    const { hoveredStep } = useHoveredStep();
    const { setHasSeenIntro } = useIntro();
    const isFullscreen = useIsFullscreen();

    const data: HomeData = useContentWithTrad(homeData);

    useEffect(() => {
        if (cardsRef.current) {
            setCardContainerHeight(cardsRef.current.offsetHeight);
        }
    }, []);

    const handleStepClick = (toolNb: number) => {
        setSelectedTool(toolNb);
        setIsModalOpen(true);
    };

    const handleOpenModal = () => {
        setIsModalOpen(true);
    };

    const handleOpenLastModal = () => {
        setIsLastModalOpen(true);
    };

    const handleCloseModal = () => {
        setIsModalOpen(false);
        if (schemaRef.current && stepValidated === selectedTool) {
            schemaRef.current.playSegment();
        }
        resetSelectedTool();
    };

    const handleCloseLastModal = () => {
        setIsLastModalOpen(false);
    };

    const handleRestart = () => {
        setIsRestartModalOpen(true);
    };

    const handleRestartModalClosing = () => {
        setTimeout(() => {
            setIsRestartModalOpen(false);
        }, 400);
    };

    const handleDisplayVideo = () => {
        setHasSeenIntro(false);
    };

    const cardOffset = cardContainerHeight / 7;
    const cardHeight = cardOffset * 2;

    const { totalTools } = useTool();
    const tools = Array.from({ length: totalTools }).map((_, index) => (
        <motion.li
            key={index}
            className="home__card"
            style={{ height: cardHeight, marginBottom: -cardOffset }}
            animate={{
                transform:
                    hoveredStep === index + 1
                        ? "translateX(-15%)"
                        : "translateX(0)",
                transition: {
                    duration: 0.35,
                    ease: EASE_IN_OUT_QUAD,
                },
            }}
            whileHover={{
                transform: "translateX(-15%)",
                transition: {
                    duration: 0.35,
                    ease: EASE_IN_OUT_QUAD,
                },
            }}>
            <ToolCard
                toolNumber={index + 1}
                onClick={() => handleStepClick(index + 1)}
            />
        </motion.li>
    ));

    return (
        <div className="home">
            {!isFullscreen && (
                <div className="home__fullscreen-btn-container">
                    <FullscreenButton />
                </div>
            )}
            <section className="home__main-content">
                <div className="home__main-content-wrapper">
                    <h1 className="home__title">{data.title}</h1>
                    <AuditCanvas
                        onOpenModal={handleOpenModal}
                        onOpenLastModal={handleOpenLastModal}
                        ref={schemaRef}
                    />
                </div>
                <HomeControls
                    onRestart={handleRestart}
                    onDisplayVideo={handleDisplayVideo}
                />
                <ProgressionWidget />
            </section>
            <section className="home__tools">
                <h2 className="home__tools-title">{data.tools_title}</h2>
                <ul className="home__cards" ref={cardsRef}>
                    {cardsRef && tools}
                </ul>
            </section>
            {isModalOpen && <ToolModal onClose={handleCloseModal} />}
            {isLastModalOpen && (
                <ProgressionModal onClose={handleCloseLastModal} />
            )}

            {isRestartModalOpen && (
                <DialogWrapper isDemo onClose={handleRestartModalClosing} />
            )}
        </div>
    );
}