import API_URL from "../../config/api";
import styles from "./styles.module.css";
import { LuUser, LuMenu, LuSearch, LuLogOut, LuUsers, LuMail, LuGraduationCap, LuTvMinimalPlay, LuLayoutDashboard, LuCircleUser, LuPanelLeftClose, LuClock3, LuCalendar } from "react-icons/lu";
import { useEffect, useState } from "react";
import { useNavigate, Link, NavLink } from "react-router";
import { Button, Offcanvas } from "react-bootstrap";
import type { Workshop } from "../../types";
import type { Video } from "../../types";
import { CgSpinner } from "react-icons/cg";
import { useDebounce } from "../../hooks/useDebounce";
import { useGetVideos } from "../../hooks/useGetVideos";
import { useGetVideosSearch } from "../../hooks/useGetVideosSearch";
import { PiCheckCircleFill } from "react-icons/pi";
import { useGetWorkshopsSearch } from "../../hooks/useGetWorkshopsSearch";
import { imageSkeletonFadeStyle, onImageSkeletonLoad } from "../../utils/imageSkeleton";
import { motion, AnimatePresence } from "framer-motion";
/* import { useGetCurrentUser } from "../../hooks/useGetCurrentUser"; */


export default function Header() {
    const [showMenu, setShowMenu] = useState(false);
    const [showSearch, setShowSearch] = useState(false);
    const [search, setSearch] = useState("");
    const [loading, setLoading] = useState(false);
    const [searchCompleted, setSearchCompleted] = useState(false);
    const [videosSearched, setVideosSearched] = useState<Video[]>([]);
    const [workshopsSearched, setWorkshopsSearched] = useState<Workshop[]>([]);
    const debouncedSearch = useDebounce(search, 500);
    const [showDropdown, setShowDropdown] = useState(false);
    const { getVideos } = useGetVideos();
    const { getVideosSearch } = useGetVideosSearch();
    const { getWorkshopsSearch } = useGetWorkshopsSearch();
    /* const { getCurrentUser } = useGetCurrentUser(); */
    const [role, _setRole] = useState(0);
    const [videosWatched, setVideosWatched] = useState(0);
    const [videosCount, setVideosCount] = useState(0);
    
    const navigate = useNavigate();
    
    useEffect(() => {
        const fetchAll = async () => {
            const videosWatched = localStorage.getItem("videosWatched");
            setVideosWatched(videosWatched ? parseInt(videosWatched) : 0);
            const videosCount = localStorage.getItem("videosCount");
            setVideosCount(videosCount ? parseInt(videosCount) : 0);
            /* const userData = await getCurrentUser();
                setRole(userData.data.role_id); */
        };
        fetchAll();
    }, []);

    const handleCloseMenu = () => setShowMenu(false);
    const handleShowMenu = () => setShowMenu(true);
    const handleCloseSearch = () => setShowSearch(false);
    const handleShowSearch = () => setShowSearch(true);

    useEffect(() => {

        if (debouncedSearch.trim() === "") {
            setVideosSearched([]);
            setWorkshopsSearched([]);
            setLoading(false);
            setSearchCompleted(false);
            return;
        }

        setLoading(true);
        setSearchCompleted(false);

        const fetchAll = async () => {

            try {

                const [_videosData, videosSearchedData, workshopsData] = await Promise.all([
                    getVideos({ page: 1 }),
                    getVideosSearch(debouncedSearch),
                    getWorkshopsSearch(debouncedSearch),
                ]);

                if ("videos" in videosSearchedData) {
                    setVideosSearched(videosSearchedData.videos);
                } else {
                    setVideosSearched([]);
                }

                if ("workshops" in workshopsData) {
                    setWorkshopsSearched(workshopsData.workshops);
                } else {
                    setWorkshopsSearched([]);
                }

                setSearchCompleted(true);

            } catch (e) {

                setVideosSearched([]);
                setWorkshopsSearched([]);
                setSearchCompleted(true);

            } finally {
                setLoading(false);
            }
        };

        fetchAll();

    }, [debouncedSearch]);

    function handleSearch(event: React.FormEvent<HTMLFormElement>) {
        event.preventDefault();
        const q = search.trim();

        if (q === "") {
            setShowSearch(false);
            return;
        }

        navigate(`/search?q=${encodeURIComponent(q)}`);
        setShowSearch(false);
    }

    return (
        <header className={`${styles.header} d-flex justify-content-between justify-content-xl-end align-items-center ps-4`} >

            <>
                <button type="button" className={`${styles.sidebarOpen} align-items-center justify-content-center d-xl-none`} onClick={handleShowMenu}>
                    <LuMenu size={30} />
                </button>

                <Offcanvas show={showMenu} onHide={handleCloseMenu} responsive="xl" className="d-xl-none">
                    <Offcanvas.Header >
                        <Offcanvas.Title className={"w-100 d-flex justify-content-between"}>
                            <Link className={`${styles.logoLink} justify-content-start`} to="/dashboard">
                                <img
                                    className={styles.logo}
                                    src="/src/assets/logo.png"
                                    alt="Logo"
                                    onClick={handleCloseMenu}
                                />
                            </Link>
                            <button type="button" className={`${styles.sidebarClose} align-items-center justify-content-center d-xl-none`} onClick={handleCloseMenu}> <LuPanelLeftClose size={24} /> </button>
                        </Offcanvas.Title>
                    </Offcanvas.Header>

                    <Offcanvas.Body className="d-flex flex-column">
                        <nav className={`${styles.nav} flex-grow-1`}>
                            <ul className={styles.navList}>
                                <li className={`${styles.navItem} text-start`}>
                                    <NavLink className={styles.navLink} to="/dashboard" onClick={handleCloseMenu}> <LuLayoutDashboard className="me-2" size={24} />Dashboard</NavLink>
                                </li>
                                <li className={`${styles.navItem} text-start`}>
                                    <NavLink className={styles.navLink} to="/videos" onClick={handleCloseMenu}> <LuTvMinimalPlay className="me-2" size={24} />Videos</NavLink>
                                </li>
                                <li className={`${styles.navItem} text-start`}>
                                    <NavLink className={styles.navLink} to="/workshops" onClick={handleCloseMenu}> <LuGraduationCap className="me-2" size={24} />Workshops</NavLink>
                                </li>
                                {role === 1 && (
                                    <li className={`${styles.navItem} text-start`}>
                                        <NavLink className={styles.navLink} to="/admin/users" onClick={handleCloseMenu}> <LuUsers className="me-2" size={24} />Utilizadores</NavLink>
                                    </li>
                                )}
                                <li className={`${styles.navItem} text-start`}>
                                    <NavLink className={styles.navLink} to="/contactos" onClick={handleCloseMenu}> <LuMail className="me-2" size={24} />Contactos</NavLink>
                                </li>
                            </ul>
                        </nav>

                        {role !== 1 && videosCount > 0 && (
                            <div className="d-flex d-sm-none justify-content-center">
                                <span className="fw-semibold">Vídeos assistidos</span>
                                <span className={`${styles.badge} badge align-content-center ms-3`}>{videosWatched}/{videosCount}</span>
                            </div>
                        )}

                        <div className={`${styles.logoutWrapper} text-center`}>
                            <Link className={styles.logoutButton} to="/logout"> <LuLogOut className="me-2" size={24} />Logout</Link>
                        </div>
                    </Offcanvas.Body>
                </Offcanvas>
            </>

            <nav className="navbar px-3">
                <div className={styles.headerRight}>
                    {role !== 1 && videosCount > 0 && (
                        <>
                            <div className="d-none d-sm-flex align-items-center gap-1 text-muted">
                                <span className="fw-semibold">Vídeos assistidos</span>
                                <span className={`${styles.badge} badge align-content-center`}>{videosWatched}/{videosCount}</span>
                            </div>
                        </>
                    )}

                    <div className="">
                        <Button className={`${styles.searchButton} me-2`} variant="link" onClick={handleShowSearch}>
                            <LuSearch size={30} />
                        </Button>
                        <Offcanvas show={showSearch} onHide={handleCloseSearch} placement="top" style={{ height: "fit-content" }}>
                            <Offcanvas.Header className={`${styles.offcanvasHeader} position-relative d-flex flex-column py-4 text-start`} closeButton>
                                <Offcanvas.Title className="align-self-start mb-3">Efetuar pesquisa</Offcanvas.Title>
                                <form onSubmit={handleSearch} className="mb-0 w-100">
                                    <div className="input-group mb-2">
                                        <input type="text" className="form-control border-1" placeholder="Digite para pesquisar"
                                            value={search}
                                            onChange={(e) => {
                                                setSearch(e.target.value);
                                            }} />
                                        <button type="submit" className="btn btn-primary">Pesquisar</button>
                                    </div>

                                </form>
                            </Offcanvas.Header>
                            <Offcanvas.Body className="py-0">
                                {loading ? (
                                    <div className="d-flex align-items-center gap-2 my-3">
                                        <CgSpinner className={`${styles.animateSpin} text-2xl fs-3`} />
                                        <span>A procurar...</span>
                                    </div>

                                ) : (
                                    <>
                                        {(videosSearched.length > 0 || workshopsSearched.length > 0) && searchCompleted ? (
                                            <>

                                                {videosSearched.length > 0 ? (
                                                    <div className="d-flex flex-column">
                                                        <span className="fs-1 text-center fw-bold mb-1 mt-3">Vídeos</span>

                                                        <div className="row">
                                                            {videosSearched.length > 0 && (
                                                                <span className="text-muted text-start d-block">Vídeos encontrados: {videosSearched.length}</span>
                                                            )}

                                                            {videosSearched.map((video) => (
                                                                <div className="col-12 col-sm-6 col-lg-4 col-xl-3 p-2">
                                                                    <Link to={`/video/${video.id}`} className={`${styles.linkVideo} text-decoration-none text-black pb-2`} key={video.id} onClick={handleCloseSearch}>
                                                                        <div className={`${styles.boxVideo} position-relative`} >
                                                                            <img
                                                                                className={`${styles.videoThumbnail} position-absolute top-0 start-0 bottom-0 h-100`}
                                                                                src={`${API_URL}/storage/${video.thumbnail}`}
                                                                                alt={video.title}
                                                                                style={imageSkeletonFadeStyle}
                                                                                onLoad={onImageSkeletonLoad}
                                                                            />
                                                                            <div className={`${styles.boxVideoInfo} px-3 py-2 text-start text-truncate position-absolute bottom-0`}>
                                                                                <h2 className={`${styles.titleVideo} mb-1`}>{video.title}</h2>
                                                                            </div>
                                                                            {video.watched && <span className="d-block badge text-success text-start fs-6 position-absolute top-0 start-0 bg-success-subtle text-success px-3 py-2" style={{ borderRadius: "0 0 var(--border-radius) 0" }}><PiCheckCircleFill className="mb-1 me-1" /> Visto</span>}
                                                                        </div>
                                                                    </Link>
                                                                </div>
                                                            ))}

                                                        </div>
                                                    </div>

                                                ) : null}

                                                {workshopsSearched.length > 0 ? (
                                                    <div className="d-flex flex-column">
                                                        <span className="fs-1 text-center fw-bold mb-1 mt-3">Workshops</span>
                                                        <div className="row g-3 mb-3">
                                                            {workshopsSearched.length > 0 && (
                                                                <span className="text-muted text-start d-block">Workshops encontrados: {workshopsSearched.length}</span>
                                                            )}
                                                            {workshopsSearched.map((workshop) => (
                                                                <div className="col-12 col-sm-6 col-lg-4 col-xl-3 mt-0 p-2 position-relative">
                                                                    <div className={`${styles.boxWorkshop} text-start pb-3`}>
                                                                        <Link to={`/workshop/${workshop.id}`} className="text-decoration-none text-black" onClick={handleCloseSearch}>
                                                                            <div className={`${styles.thumbnailWorkshop} position-relative`}>
                                                                                <img
                                                                                    src={`${API_URL}/storage/${workshop.image}`}
                                                                                    alt={workshop.title}
                                                                                    className={styles.thumbnailWorkshop}
                                                                                    style={imageSkeletonFadeStyle}
                                                                                    onLoad={onImageSkeletonLoad}
                                                                                />
                                                                                <div className="position-absolute w-100 bottom-0 justify-content-evenly d-none d-md-flex d-xl-none d-xxl-flex mb-2">
                                                                                    <p className={`${styles.dateWorkshop}`}><LuCalendar className={`${styles.icon} mb-1 me-2`} />{workshop.date.split('-').reverse().join('-')}</p>
                                                                                    <p className={`${styles.timeWorkshop}`}><LuClock3 className={`${styles.icon} mb-1 me-2`} />{workshop.time_start.slice(0, 5)} - {workshop.time_end.slice(0, 5)}</p>
                                                                                </div>
                                                                            </div>
                                                                            <div className="px-3">
                                                                                <h2 className={`${styles.titleWorkshop} d-block text-start mt-3`}>{workshop.title}</h2>
                                                                                <div className="position-relative d-flex flex-column d-md-none d-xl-flex d-xxl-none mt-3">
                                                                                    <span className={`${styles.dateWorkshopMobile} text-start mb-1`}><LuCalendar className={`${styles.icon} mb-1 me-2`} />{workshop.date.split('-').reverse().join('-')}</span>
                                                                                    <span className={`${styles.timeWorkshopMobile} text-start`}><LuClock3 className={`${styles.icon} mb-1 me-2`} />{workshop.time_start.slice(0, 5).split(':').join('h')} - {workshop.time_end.slice(0, 5).split(':').join('h')}</span>
                                                                                </div>
                                                                            </div>
                                                                            <button type="button" className={`${styles.linkWorkshop} btn text-center mt-3 py-2 px-5 mx-auto text-decoration-none`}>
                                                                                Detalhes
                                                                            </button>
                                                                        </Link>
                                                                    </div>
                                                                </div>


                                                            ))}

                                                        </div>
                                                    </div>
                                                ) : null}
                                            </>

                                        ) : (videosSearched.length === 0 && workshopsSearched.length === 0) && searchCompleted ? (
                                            <div className="d-flex flex-column">
                                                <span className="text-muted text-start my-3">Sem resultados</span>
                                            </div>
                                        ) : null}
                                    </>
                                )}

                            </Offcanvas.Body>
                        </Offcanvas>
                    </div>

                    <div className="btn-group" onMouseEnter={() => setShowDropdown(true)} onMouseLeave={() => setShowDropdown(false)}>
                        <button type="button" className={`${styles.headerDropdownToggle} btn dropdown-toggle`} >
                            <LuUser size={30} />
                        </button>

                        <AnimatePresence>
                            {showDropdown && (
                                <motion.ul
                                    initial={{ opacity: 0, y: -10, scale: 0.98 }}
                                    animate={{ opacity: 1, y: 0, scale: 1 }}
                                    exit={{ opacity: 0, y: -10, scale: 0.98 }}
                                    transition={{ duration: 0.2, ease: "easeOut" }}
                                    className="dropdown-menu dropdown-menu-end"
                                    style={{  display: "block", zIndex: 2000, right: 0, top: "100%", marginTop: "0.25rem" }}>
                                    <li><Link className="dropdown-item" to="/profile"><LuCircleUser className="mb-1 me-2" size={24} />A minha conta</Link></li>
                                    <li><Link className="dropdown-item mt-2" to="/logout" style={{ color: "var(--text-primary-color)" }}> <LuLogOut className="mb-1 me-2" size={24} />Sair</Link></li>
                                </motion.ul>
                            )}
                        </AnimatePresence>
                    </div>
                </div>
            </nav>
        </header >
    );
}