import React, {FC} from "react";
import classNames from "classnames";
import {
    atomsStore,
    CurrentDashboardSectionIdAtom,
    leftSidebarWidthAtom,
    MobileSidebarOpenAtom,
    ModelAtom, ModelBaseAtom,
    sidebarEdgeOffsetAtom
} from "./atoms";
import {useAtomValue} from "jotai";
import {TreeDashboardSection} from "./TreeDashboardSections";
import {useAtom} from "jotai/index";
import {EmulatedButton} from "./EmulatedButton";
import {__, CouponsPlus, hasProInstalled} from "../globals";
import {useIsMobile, useViewPortDimensionsStyle} from "./hooks";

export type TreeSidebarLeftProps = {}

export const TreeSidebarLeft: FC<TreeSidebarLeftProps> = ({}) => {
    const width = useAtomValue(leftSidebarWidthAtom)
    const edgeOffset = useAtomValue(sidebarEdgeOffsetAtom)
    const [currentSectionId, setCurrentSectionId] = useAtom(CurrentDashboardSectionIdAtom)
    const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useAtom(MobileSidebarOpenAtom)
    const isMobile = useIsMobile()
    const {top: wpAdminBarTop, left: wpAdminMenuLeft} = useViewPortDimensionsStyle()

    const menuItems = [
        {
            id: TreeDashboardSection.Offers,
            label: __('Offers'),
            icon: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                       stroke="currentColor" className="min-w-5 min-h-5 max-w-5 max-h-5">
                <path strokeLinecap="round" strokeLinejoin="round"
                      d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z"/>
            </svg>
        },
        {
            id: TreeDashboardSection.Presets,
            label: __('Presets'),
            icon: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                       stroke="currentColor" className="min-w-5 min-h-5 max-w-5 max-h-5">
                <path strokeLinecap="round" strokeLinejoin="round"
                      d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0-3-3m3 3 3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"/>
            </svg>
        },
        {
            id: TreeDashboardSection.Url,
            label: 'URL',
            icon: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                       stroke="currentColor" className="min-w-5 min-h-5 max-w-5 max-h-5">
                <path strokeLinecap="round" strokeLinejoin="round"
                      d="m6.115 5.19.319 1.913A6 6 0 0 0 8.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 0 0 2.288-4.042 1.087 1.087 0 0 0-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 0 1-.98-.314l-.295-.295a1.125 1.125 0 0 1 0-1.591l.13-.132a1.125 1.125 0 0 1 1.3-.21l.603.302a.809.809 0 0 0 1.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 0 0 1.528-1.732l.146-.292M6.115 5.19A9 9 0 1 0 17.18 4.64M6.115 5.19A8.965 8.965 0 0 1 12 3c1.929 0 3.716.607 5.18 1.64"/>
            </svg>
        },
        {
            id: TreeDashboardSection.Advanced,
            label: __('Preferences'),
            icon: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                       stroke="currentColor" className="min-w-5 min-h-5 max-w-5 max-h-5">
                <path strokeLinecap="round" strokeLinejoin="round"
                      d="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495"/>
            </svg>
        },
    ]

    const handleMenuItemClick = (id: TreeDashboardSection) => {
        setCurrentSectionId(id)
        if (isMobile) {
            setIsMobileSidebarOpen(false)
        }
    }

    const sidebarContent = (
        <>
            {false && <div className="flex items-center gap-2">
                <div className="text-4x pl-4 font-black text-gray-250 tracking-[-0.3px]">
                    Coupons+
                </div>
                {hasProInstalled && <div
                    className="flex items-center text-smaller-1 uppercase font-bold bg-gray-100 bg-opacity-80 text-gray-550 rounded-5 px-2 h-6">Pro</div>}
            </div>}
            <div className={classNames('flex items-center gap-[6px] overflow-hidden h-8', {
                'pl-3': hasProInstalled,
                'pl-4': !hasProInstalled
            })}>
                <svg width="266" height="59" viewBox="0 0 266 59" fill="none" xmlns="http://www.w3.org/2000/svg" className={classNames({
                    'max-w-28 min-w-28':  hasProInstalled,
                    'max-w-29 min-w-29': !hasProInstalled
                })}>
                    <rect y="6.5" width="46" height="46" rx="16" fill="url(#paint0_linear_337_15)"/>
                    <rect y="6.5" width="46" height="46" rx="16" fill="#EFF0F2" fillOpacity="0.92"/>
                    <path opacity="0.8" d="M31.7701 43.0404L38.0762 28.3428L38.0671 28.329L25.702 28.3093L24.2742 31.6448L31.7701 43.0404Z" fill="#616C76" fillOpacity="0.8"/>
                    <path opacity="0.8" d="M30.5665 16.9264L14.5778 16.9042L22.0737 28.2997L25.7019 28.3094L30.5802 16.9472L30.5665 16.9264Z" fill="#616C76" fillOpacity="0.8"/>
                    <path opacity="0.8" d="M14.5648 43.5497L30.5579 43.5791L23.062 32.1835L19.4268 32.1784L14.5556 43.5359L14.5648 43.5497Z" fill="#616C76" fillOpacity="0.8"/>
                    <path opacity="0.8" d="M13.3657 17.4427L7.05983 32.1403L7.06897 32.1542L19.427 32.1784L20.8617 28.8384L13.3657 17.4427Z" fill="#616C76" fillOpacity="0.8"/>
                    <path opacity="0.8" d="M38.067 28.3289L30.5802 16.9472L25.7019 28.3093L38.067 28.3289Z" fill="#616C76"/>
                    <path opacity="0.8" d="M7.06875 32.1543L14.5556 43.536L19.427 32.1783L7.06875 32.1543Z" fill="#616C76"/>
                    <path d="M76.236 45.528C73.156 45.528 70.5013 44.868 68.272 43.548C66.0427 42.1987 64.3267 40.336 63.124 37.96C61.9507 35.5547 61.364 32.7827 61.364 29.644C61.364 26.476 61.9507 23.704 63.124 21.328C64.3267 18.9227 66.0427 17.0453 68.272 15.696C70.5013 14.3467 73.156 13.672 76.236 13.672C79.9027 13.672 82.8947 14.5813 85.212 16.4C87.5587 18.1893 89.0253 20.7267 89.612 24.012H83.804C83.4227 22.252 82.5867 20.888 81.296 19.92C80.0053 18.9227 78.304 18.424 76.192 18.424C74.2267 18.424 72.54 18.8787 71.132 19.788C69.724 20.668 68.6387 21.9587 67.876 23.66C67.1133 25.332 66.732 27.3267 66.732 29.644C66.732 31.9613 67.1133 33.956 67.876 35.628C68.6387 37.2707 69.724 38.5467 71.132 39.456C72.54 40.3653 74.2267 40.82 76.192 40.82C78.304 40.82 79.9907 40.3507 81.252 39.412C82.5427 38.444 83.3933 37.0947 83.804 35.364H89.656C89.04 38.5613 87.5587 41.0547 85.212 42.844C82.8947 44.6333 79.9027 45.528 76.236 45.528ZM102.88 45.528C100.709 45.528 98.7438 45.0587 96.9838 44.12C95.2531 43.152 93.8745 41.8027 92.8478 40.072C91.8211 38.3413 91.3078 36.3467 91.3078 34.088C91.3078 31.8 91.8211 29.8053 92.8478 28.104C93.8745 26.3733 95.2678 25.0387 97.0278 24.1C98.7878 23.132 100.738 22.648 102.88 22.648C105.08 22.648 107.045 23.132 108.776 24.1C110.506 25.0387 111.885 26.3733 112.912 28.104C113.938 29.8053 114.452 31.8 114.452 34.088C114.452 36.3467 113.938 38.3413 112.912 40.072C111.885 41.8027 110.492 43.152 108.732 44.12C107.001 45.0587 105.05 45.528 102.88 45.528ZM102.88 40.952C103.994 40.952 105.006 40.7027 105.916 40.204C106.854 39.676 107.602 38.9133 108.16 37.916C108.717 36.8893 108.996 35.6133 108.996 34.088C108.996 32.5627 108.717 31.3013 108.16 30.304C107.602 29.2773 106.854 28.5147 105.916 28.016C105.006 27.488 104.009 27.224 102.924 27.224C101.809 27.224 100.782 27.488 99.8438 28.016C98.9051 28.5147 98.1571 29.2773 97.5998 30.304C97.0425 31.3013 96.7638 32.5627 96.7638 34.088C96.7638 35.6133 97.0425 36.8893 97.5998 37.916C98.1571 38.9133 98.8905 39.676 99.7998 40.204C100.738 40.7027 101.765 40.952 102.88 40.952ZM124.939 45.528C122.475 45.528 120.51 44.692 119.043 43.02C117.606 41.3187 116.887 38.84 116.887 35.584V23.176H122.123V35.056C122.123 37.0213 122.505 38.5173 123.267 39.544C124.03 40.5413 125.13 41.04 126.567 41.04C128.181 41.04 129.442 40.468 130.351 39.324C131.29 38.18 131.759 36.552 131.759 34.44V23.176H137.039V45H131.759V41.7C131.114 42.9027 130.219 43.8413 129.075 44.516C127.931 45.1907 126.553 45.528 124.939 45.528ZM140.615 54.68V23.176H145.895V26.388C146.599 25.3907 147.552 24.5253 148.755 23.792C149.958 23.0293 151.483 22.648 153.331 22.648C155.414 22.648 157.262 23.1467 158.875 24.144C160.488 25.1413 161.75 26.5053 162.659 28.236C163.598 29.9667 164.067 31.932 164.067 34.132C164.067 36.3027 163.598 38.2533 162.659 39.984C161.75 41.7147 160.488 43.0787 158.875 44.076C157.262 45.044 155.414 45.528 153.331 45.528C151.659 45.528 150.192 45.2053 148.931 44.56C147.67 43.9147 146.658 43.02 145.895 41.876V54.68H140.615ZM152.275 40.908C153.536 40.908 154.651 40.6147 155.619 40.028C156.587 39.4413 157.335 38.6493 157.863 37.652C158.42 36.6253 158.699 35.452 158.699 34.132C158.699 32.7827 158.42 31.5947 157.863 30.568C157.335 29.512 156.587 28.7053 155.619 28.148C154.651 27.5613 153.536 27.268 152.275 27.268C151.014 27.268 149.899 27.5613 148.931 28.148C147.963 28.7053 147.2 29.4973 146.643 30.524C146.086 31.5507 145.807 32.7387 145.807 34.088C145.807 35.4373 146.086 36.6253 146.643 37.652C147.2 38.6493 147.963 39.4413 148.931 40.028C149.899 40.6147 151.014 40.908 152.275 40.908ZM177.476 45.528C175.305 45.528 173.34 45.0587 171.58 44.12C169.849 43.152 168.471 41.8027 167.444 40.072C166.417 38.3413 165.904 36.3467 165.904 34.088C165.904 31.8 166.417 29.8053 167.444 28.104C168.471 26.3733 169.864 25.0387 171.624 24.1C173.384 23.132 175.335 22.648 177.476 22.648C179.676 22.648 181.641 23.132 183.372 24.1C185.103 25.0387 186.481 26.3733 187.508 28.104C188.535 29.8053 189.048 31.8 189.048 34.088C189.048 36.3467 188.535 38.3413 187.508 40.072C186.481 41.8027 185.088 43.152 183.328 44.12C181.597 45.0587 179.647 45.528 177.476 45.528ZM177.476 40.952C178.591 40.952 179.603 40.7027 180.512 40.204C181.451 39.676 182.199 38.9133 182.756 37.916C183.313 36.8893 183.592 35.6133 183.592 34.088C183.592 32.5627 183.313 31.3013 182.756 30.304C182.199 29.2773 181.451 28.5147 180.512 28.016C179.603 27.488 178.605 27.224 177.52 27.224C176.405 27.224 175.379 27.488 174.44 28.016C173.501 28.5147 172.753 29.2773 172.196 30.304C171.639 31.3013 171.36 32.5627 171.36 34.088C171.36 35.6133 171.639 36.8893 172.196 37.916C172.753 38.9133 173.487 39.676 174.396 40.204C175.335 40.7027 176.361 40.952 177.476 40.952ZM191.835 45V23.176H197.115V26.564C197.849 25.3613 198.831 24.408 200.063 23.704C201.325 23 202.762 22.648 204.375 22.648C207.074 22.648 209.171 23.4987 210.667 25.2C212.163 26.872 212.911 29.336 212.911 32.592V45H207.631V33.12C207.631 31.1547 207.221 29.6733 206.399 28.676C205.607 27.6493 204.39 27.136 202.747 27.136C201.134 27.136 199.785 27.708 198.699 28.852C197.643 29.996 197.115 31.624 197.115 33.736V45H191.835ZM225.391 45.528C222.575 45.528 220.243 44.868 218.395 43.548C216.547 42.228 215.491 40.4093 215.227 38.092H220.639C220.845 39.1187 221.387 39.94 222.267 40.556C223.177 41.1427 224.277 41.436 225.567 41.436C226.887 41.436 227.899 41.1867 228.603 40.688C229.337 40.16 229.703 39.5147 229.703 38.752C229.703 38.136 229.454 37.6667 228.955 37.344C228.486 36.992 227.635 36.728 226.403 36.552C225.934 36.464 225.347 36.376 224.643 36.288C223.969 36.1707 223.382 36.0533 222.883 35.936C221.739 35.7307 220.669 35.3787 219.671 34.88C218.674 34.352 217.867 33.648 217.251 32.768C216.665 31.888 216.371 30.8027 216.371 29.512C216.371 27.576 217.09 25.948 218.527 24.628C219.994 23.308 222.077 22.648 224.775 22.648C227.474 22.648 229.63 23.2493 231.243 24.452C232.857 25.6253 233.781 27.356 234.015 29.644H228.867C228.779 28.676 228.339 27.9573 227.547 27.488C226.785 27.0187 225.861 26.784 224.775 26.784C223.602 26.784 222.693 27.0187 222.047 27.488C221.402 27.928 221.079 28.4853 221.079 29.16C221.079 30.3627 222.091 31.14 224.115 31.492C224.409 31.5507 224.775 31.624 225.215 31.712C225.685 31.7707 226.154 31.844 226.623 31.932C227.093 31.9907 227.489 32.0493 227.811 32.108C228.603 32.196 229.395 32.372 230.187 32.636C231.009 32.9 231.757 33.2667 232.431 33.736C233.106 34.176 233.634 34.7627 234.015 35.496C234.426 36.2293 234.631 37.1533 234.631 38.268C234.631 39.7053 234.265 40.9667 233.531 42.052C232.827 43.1373 231.786 43.988 230.407 44.604C229.029 45.22 227.357 45.528 225.391 45.528Z" fill="#EFF0F2" fillOpacity="0.92"/>
                    <path d="M248.712 44.432V21.968H253.608V44.432H248.712ZM240.264 35.6V30.8H262.056V35.6H240.264Z" fill="#EFF0F2"/>
                    <defs>
                        <linearGradient id="paint0_linear_337_15" x1="23" y1="6.5" x2="23" y2="52.5" gradientUnits="userSpaceOnUse">
                            <stop stopColor="#545454"/>
                            <stop offset="1" stopColor="#2A2A2A"/>
                        </linearGradient>
                    </defs>
                </svg>
                {(hasProInstalled) && <div
                    className="flex items-center text-smaller-2 uppercase font-bold bg-gray-100 bg-opacity-80 text-gray-550 rounded-5 px-1 h-5">Pro</div>}
            </div>
            <ul className="flex flex-col gap-y-1">
                {menuItems.map(item => (
                    <li key={item.id} className={'flex w-full m-0'}>
                        <EmulatedButton
                            className={classNames("w-full flex items-center gap-3 py-2 px-4 hover:bg-gray-100 hover:bg-opacity-[0.10] rounded-2 cursor-pointer font-medium text-1x !m-0 transition-all ease", {
                                'text-gray-250': item.id !== currentSectionId,
                                'bg-gray-100 bg-opacity-[0.18] text-gray-150': item.id === currentSectionId
                            })} onClick={() => handleMenuItemClick(item.id)}>
                            {item.icon}
                            <span>{item.label}</span>
                        </EmulatedButton>
                    </li>
                ))}
                <li  className={'flex w-full border-t border-gray-700 pt-2 border-opacity-50 m-0'} onClick={switchToClassic}>
                    <EmulatedButton
                        className={classNames("w-full flex items-center gap-3 py-2 px-4 rounded-2 cursor-pointer font-medium text-1x !m-0 transition-all ease", {
                            'text-gray-250 bg-gray-800 bg-opacity-[.25] hover:bg-opacity-40': true,
                        })} onClick={() => {}}>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="min-w-5 min-h-5 max-w-5 max-h-5">
                            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M12 9l-3 3m0 0 3 3m-3-3h12.75" />
                        </svg>
                        <span>{__('Use classic')}</span>
                    </EmulatedButton>
                </li>
                {CouponsPlus?.compatibility?.legacy?.isLegacyInstallation && <li className={'flex w-full m-0'} onClick={switchToLegacy}>
                    <EmulatedButton
                        className={classNames("w-full flex items-center gap-3 py-2 px-4 rounded-2 cursor-pointer font-medium text-smaller-1 !m-0 transition-all ease", {
                            'text-gray-250 text-opacity-60': true,
                        })} onClick={() => {
                    }}>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                             stroke="currentColor" className="min-w-5 min-h-5 max-w-5 max-h-5">
                            <path strokeLinecap="round" strokeLinejoin="round"
                                  d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M12 9l-3 3m0 0 3 3m-3-3h12.75"/>
                        </svg>
                        <span>{__('Use rows (legacy)')}</span>
                    </EmulatedButton>
                </li>}
            </ul>
        </>
    )

    // Mobile: iOS-style bottom tab bar with frosted glass
    if (isMobile) {
        return (
            <div
                className="absolute bottom-0 left-0 right-0 z-[100000] flex items-center justify-around px-2 pt-2 pb-5"
                style={{
                    backgroundColor: 'rgba(249, 250, 251, 0.72)',
                    backdropFilter: 'saturate(180%) blur(20px)',
                    WebkitBackdropFilter: 'saturate(180%) blur(20px)',
                    borderTop: '0.5px solid rgba(0, 0, 0, 0.12)'
                }}
            >
                {menuItems.map(item => (
                    <button
                        key={item.id}
                        onClick={() => handleMenuItemClick(item.id)}
                        className={classNames(
                            "flex flex-col items-center gap-0.5 px-3 py-1.5 rounded-2 transition-all duration-200 min-w-[60px]",
                            {
                                "text-blue-normal": item.id === currentSectionId,
                                "text-gray-500": item.id !== currentSectionId,
                            }
                        )}
                    >
                        <div className={classNames("transition-transform duration-200", {
                            "scale-110": item.id === currentSectionId
                        })}>
                            {item.icon}
                        </div>
                        <span className="text-smaller-2 font-medium">{item.label}</span>
                    </button>
                ))}
            </div>
        )
    }

    // Desktop: Original sidebar
    return <div
        className={'absolute rounded-1 flex flex-col gap-y-4 bg-gray-800 bg-opacity-[0.80] border-gray-400 border-px ring-[2px] ring-gray-100 ring-opacity-60 ring-offset-1  z-[100000] --h-[98%] p-4'}
        style={{
            width: width,
            top: edgeOffset,
            left: edgeOffset,
            backdropFilter: 'blur(25px)',
        }}>
        {sidebarContent}
    </div>

};


export const switchToClassic = () => {
    atomsStore.set(ModelAtom, 'classic')
}
const switchToLegacy = () => {
    atomsStore.set(ModelAtom, 'rows')
}