import React, {FC} from "react";
import {useNodesStore} from "./store";
import {__} from "../globals";
import classNames from "classnames";
import {useIsMobile} from "./hooks";

export type AutoApplyButtonProps = {
}

export const AutoApplyButton: FC<AutoApplyButtonProps> = ({}) => {
    const isEnabled = useNodesStore(store => store.autoApply)
    const toggle = useNodesStore(store => store.toggleAutoApply)
    const isMobile = useIsMobile()

    // Mobile: compact pill with icon + short label (Auto / Manual)
    if (isMobile) {
        // On lighter, bluish blurred pills we want darker text and a blue accent when enabled
        const mobileColor = isEnabled ? 'rgba(10, 84, 255, 1)' : 'rgba(16, 40, 66, 0.96)'
        return (
            <button
                onClick={toggle}
                className={classNames(
                    'flex items-center gap-2 px-3 py-2 rounded-full transition-all duration-200 text-smaller-1 font-medium bg-transparent',
                    {
                        // colors applied inline via style
                    }
                )}
                style={{ color: mobileColor }}
                title={isEnabled ? __('Automatically Applied') : __('Manually Applied')}
                aria-label={isEnabled ? __('Automatically Applied') : __('Manually Applied')}
            >
                {isEnabled ? (
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
                        <path strokeLinecap="round" strokeLinejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
                    </svg>
                ) : (
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672Zm-7.518-.267A8.25 8.25 0 1 1 20.25 10.5M8.288 14.212A5.25 5.25 0 1 1 17.25 10.5" />
                    </svg>
                )}
                <span className="whitespace-nowrap text-smaller-1" style={{color: mobileColor}}>{isEnabled ? __('Auto') : __('Manual')}</span>
            </button>
        )
    }

    return <button onClick={toggle} className={classNames('w-full flex items-center justify-center gap-2 ' +
        'text-base font-medium  rounded-2 px-3 py-2  transition-all transition-ease ', {
        'text-gray-500 bg-transparent hover:bg-gray-150': !isEnabled,
        'text-blue-normal bg-blue-10 bg-opacity-30': isEnabled,
    })}>
        {isEnabled? <>
            <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="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
            </svg>
            <span>{__('Automatically Applied')}</span>
        </> : <>
            <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.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672Zm-7.518-.267A8.25 8.25 0 1 1 20.25 10.5M8.288 14.212A5.25 5.25 0 1 1 17.25 10.5" />
            </svg>
            <span>{__('Manually Applied')}</span>
        </>}
    </button>
}