"use client"
import React, { useState } from 'react'
import { motion, } from 'framer-motion';
import { S } from '@/components/ui/typography';
import { Circle } from 'lucide-react';
import { useTranslations } from 'next-intl';

const OverViewAi = ({ hoverEvent, clickEvent }: { hoverEvent: (status: boolean) => void, clickEvent: () => void }) => {
    const [isClicked, setIsClicked] = useState(false)
    const [isHoverd, setIsHovered] = useState(false)
    const t = useTranslations("")
    return (
        <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ type: "spring", stiffness: 100, damping: 10, delay: 2.5 }} onMouseEnter={() => { if (!isClicked) { hoverEvent(true); setIsHovered(true) } }} onMouseLeave={() => { if (!isClicked) { hoverEvent(false); setIsHovered(false) } }} className={`absolute top-[42%] -right-6  rounded-full flex items-center justify-center       !z-40   `} >

            <svg onClick={() => { clickEvent(); setIsClicked(true) }} width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" className={`z-10  duration-300 w-11 h-11 cursor-pointer ${isClicked && "scale-0 cursor-default pointer-events-none duration-500  "} ${isHoverd && !isClicked && "scale-50 translate-x-[30px] -translate-y-1"} hover:brightness-110`} >
                <rect width="36" height="36" rx="18" fill="url(#paint0_linear_4150_51568)" />
                <path d="M17.3124 26.9999C17.1347 27.0008 16.9609 26.9474 16.8142 26.8469C16.6676 26.7464 16.5551 26.6035 16.4919 26.4374L15.0913 22.7952C15.0629 22.7218 15.0195 22.6552 14.9639 22.5995C14.9082 22.5439 14.8416 22.5005 14.7682 22.4721L11.1249 21.0704C10.959 21.0068 10.8162 20.8942 10.7155 20.7477C10.6149 20.6012 10.561 20.4277 10.561 20.2499C10.561 20.0721 10.6149 19.8986 10.7155 19.7521C10.8162 19.6056 10.959 19.493 11.1249 19.4294L14.7671 18.0287C14.8405 18.0004 14.9072 17.957 14.9628 17.9013C15.0184 17.8457 15.0618 17.779 15.0902 17.7056L16.4919 14.0624C16.5556 13.8964 16.6681 13.7537 16.8146 13.653C16.9611 13.5523 17.1347 13.4984 17.3124 13.4984C17.4902 13.4984 17.6638 13.5523 17.8103 13.653C17.9568 13.7537 18.0693 13.8964 18.133 14.0624L19.5336 17.7046C19.562 17.778 19.6054 17.8446 19.661 17.9003C19.7166 17.9559 19.7833 17.9993 19.8567 18.0277L23.4778 19.4209C23.6505 19.4849 23.7993 19.6006 23.9039 19.7522C24.0085 19.9038 24.0639 20.084 24.0624 20.2682C24.0598 20.4428 24.0047 20.6127 23.9044 20.7557C23.8041 20.8988 23.6632 21.0084 23.4999 21.0704L19.8577 22.4711C19.7844 22.4994 19.7177 22.5428 19.6621 22.5985C19.6064 22.6541 19.563 22.7208 19.5347 22.7942L18.133 26.4374C18.0697 26.6035 17.9573 26.7464 17.8106 26.8469C17.664 26.9474 17.4902 27.0008 17.3124 26.9999ZM13.0937 15.1874C12.9895 15.1874 12.8877 15.1558 12.8018 15.0968C12.7159 15.0378 12.6498 14.9542 12.6124 14.8569L12.0197 13.3157C12.0068 13.282 11.987 13.2514 11.9615 13.2259C11.936 13.2003 11.9054 13.1805 11.8717 13.1677L10.3304 12.5749C10.2332 12.5375 10.1495 12.4715 10.0905 12.3855C10.0316 12.2996 10 12.1979 10 12.0937C10 11.9894 10.0316 11.8877 10.0905 11.8018C10.1495 11.7158 10.2332 11.6498 10.3304 11.6124L11.8717 11.0196C11.9053 11.0067 11.9359 10.9869 11.9614 10.9614C11.9869 10.9359 12.0068 10.9053 12.0197 10.8716L12.6071 9.34408C12.6403 9.25415 12.6973 9.17495 12.772 9.11499C12.8468 9.05503 12.9365 9.01658 13.0315 9.00377C13.1455 8.98991 13.2609 9.01451 13.3593 9.07367C13.4578 9.13284 13.5337 9.22318 13.575 9.33037L14.1677 10.8716C14.1806 10.9053 14.2005 10.9359 14.226 10.9614C14.2515 10.9869 14.282 11.0067 14.3157 11.0196L15.857 11.6124C15.9542 11.6498 16.0378 11.7158 16.0968 11.8018C16.1558 11.8877 16.1874 11.9894 16.1874 12.0937C16.1874 12.1979 16.1558 12.2996 16.0968 12.3855C16.0378 12.4715 15.9542 12.5375 15.857 12.5749L14.3157 13.1677C14.282 13.1805 14.2514 13.2003 14.2259 13.2259C14.2004 13.2514 14.1806 13.282 14.1677 13.3157L13.575 14.8569C13.5375 14.9542 13.4715 15.0378 13.3856 15.0968C13.2997 15.1558 13.1979 15.1874 13.0937 15.1874ZM24.0624 17.9999C23.9487 17.9999 23.8377 17.9654 23.744 17.901C23.6503 17.8366 23.5783 17.7453 23.5376 17.6392L22.7346 15.552C22.7205 15.5152 22.6988 15.4818 22.6709 15.4539C22.643 15.4261 22.6096 15.4044 22.5729 15.3903L20.4856 14.5873C20.3796 14.5464 20.2884 14.4744 20.2241 14.3807C20.1598 14.287 20.1254 14.176 20.1254 14.0624C20.1254 13.9488 20.1598 13.8378 20.2241 13.7441C20.2884 13.6504 20.3796 13.5784 20.4856 13.5375L22.5729 12.7346C22.6096 12.7204 22.643 12.6987 22.6709 12.6709C22.6988 12.643 22.7205 12.6096 22.7346 12.5728L23.5316 10.5004C23.568 10.4024 23.6302 10.3161 23.7118 10.2506C23.7933 10.1852 23.891 10.1431 23.9946 10.1288C24.119 10.1137 24.2449 10.1406 24.3523 10.2053C24.4597 10.2699 24.5424 10.3686 24.5873 10.4856L25.3903 12.5728C25.4044 12.6096 25.4261 12.643 25.454 12.6709C25.4818 12.6987 25.5152 12.7204 25.552 12.7346L27.6392 13.5375C27.7453 13.5784 27.8364 13.6504 27.9008 13.7441C27.9651 13.8378 27.9995 13.9488 27.9995 14.0624C27.9995 14.176 27.9651 14.287 27.9008 14.3807C27.8364 14.4744 27.7453 14.5464 27.6392 14.5873L25.552 15.3903C25.5152 15.4044 25.4818 15.4261 25.454 15.4539C25.4261 15.4818 25.4044 15.5152 25.3903 15.552L24.5873 17.6392C24.5465 17.7453 24.4745 17.8366 24.3808 17.901C24.2871 17.9654 24.1761 17.9999 24.0624 17.9999Z" fill="white" />
                <defs>
                    <linearGradient id="paint0_linear_4150_51568" x1="18" y1="0" x2="18" y2="36" gradientUnits="userSpaceOnUse">
                        <stop stopColor="#0F82EA" />
                        <stop offset="1" stopColor="#71BBFF" />
                    </linearGradient>
                </defs>
            </svg>

            <span className={` max-xl:hidden absolute w-[50px] h-[50px]     bg-white rounded-full z-0 duration-300 shadow-md shadow-black/25     ${isClicked && "scale-0"} ${isHoverd && !isClicked && "opacity-0 !duration-0"}`}></span>

            <span className={` max-xl:hidden absolute w-[40px] h-[40px]   animate-customPing  rounded-full z-0 ${isClicked && "!bg-primary/0" } ${isHoverd && !isClicked  ? "bg-primary/0" : "bg-primary/25"} `}></span>

            <div
                style={{ clipPath: "polygon(0 0, 100% 50, 50% 50%, 100% 100%, 0 100%)" }}
                className={`absolute  max-2xl:-bottom-[95px] max-2xl:right-5 2xl:-top-[95px] 2xl:left-5  pb-3   transform   bg-foreground text-white text-sm px-3 py-2  w-44 rounded shadow-xl shadow-black/25  flex flex-col duration-300  ${isHoverd && !isClicked ? "opacity-100" : "opacity-0 translate-y-1 pointer-events-none"}`}
            >
                <S className='!text-[11px] text-orange-400 flex items-start gap-1 pb-2 text-left  '> {t("Fuel consumption reduction")}      </S>
                <S className='!text-[11px]'>{t("Possible causes:")}</S>
                <S className='!text-[11px] flex items-center min-w-full gap-1'><Circle className='text-transparent bg-destructive rounded-full w-2 h-2' /> {t("Out of service vehicles")}</S>
                <S onClick={() => { clickEvent(); setIsClicked(true) }} className='!text-[12px] text-center pt-2 text-primary brightness-150 hover:text-white cursor-pointer hover:-translate-y-[2px] duration-300 w-fit mx-auto'>{t("Take action !")}</S>
            </div>

        </motion.div>
    )
}

export default OverViewAi