import { ReactiveStore } from "@luna/core";
import { LunaSettings, LunaNumberSetting, LunaSwitchSetting, LunaTextSetting } from "@luna/ui";
import React from "react";

export const settings = await ReactiveStore.getPluginStorage("AudioVisualizer", {
    barCount: 32,
    barColor: "#ffffff",
    barRounding: true,
    customColors: [] as string[]
});

export const Settings = () => {
    const [barCount, setBarCount] = React.useState(settings.barCount);
    const [barColor, setBarColor] = React.useState(settings.barColor);
    const [barRounding, setBarRounding] = React.useState(settings.barRounding);
    const [showColorPicker, setShowColorPicker] = React.useState(false);
    const [isAnimatingIn, setIsAnimatingIn] = React.useState(false);
    const [shouldRender, setShouldRender] = React.useState(false);
    const [customInput, setCustomInput] = React.useState(settings.barColor);
    const [customColors, setCustomColors] = React.useState(settings.customColors);
    const [hoveredColorIndex, setHoveredColorIndex] = React.useState<number | null>(null);

    const closeColorPicker = () => {
        setIsAnimatingIn(false);
        setTimeout(() => {
            setShowColorPicker(false);
            setShouldRender(false);
        }, 200); // Wait for animation to complete because i need to
    };

    const openColorPicker = () => {
        setShowColorPicker(true);
        setShouldRender(true);
        setTimeout(() => setIsAnimatingIn(true), 10);
    };

    React.useEffect(() => {
        if (showColorPicker) {
            setShouldRender(true);
            setTimeout(() => setIsAnimatingIn(true), 10);
        }
    }, [showColorPicker]);

    // Common color presets for cool points :D
    const colorPresets = [
        "#ffffff", "#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff",
        "#ff8800", "#8800ff", "#0088ff", "#88ff00", "#ff0088", "#00ff88",
        "#444444", "#888888", "#cccccc", "#1db954", "#e22134", "#1976d2"
    ];

    const updateColor = (color: string) => {
        setBarColor(color);
        setCustomInput(color);
        settings.barColor = color;
        (window as any).updateAudioVisualizer?.();
    };

    const addCustomColor = () => {
        if (customInput) {
            // Trim whitespace and convert to lowercase
            const trimmedInput = customInput.trim().toLowerCase();
            
            // Validate hex color format
            const hexColorRegex = /^#([0-9a-f]{6}|[0-9a-f]{3})$/i;
            
            if (hexColorRegex.test(trimmedInput) && 
                !colorPresets.includes(trimmedInput) && 
                !customColors.includes(trimmedInput)) {
                const newCustomColors = [...customColors, trimmedInput];
                setCustomColors(newCustomColors);
                settings.customColors = newCustomColors;
            }
        }
    };

    const removeCustomColor = (colorToRemove: string) => {
        const newCustomColors = customColors.filter(color => color !== colorToRemove);
        setCustomColors(newCustomColors);
        settings.customColors = newCustomColors;
        
        // If the removed color was the selected color (reset to white)
        if (barColor === colorToRemove) {
            updateColor("#ffffff");
        }
    };

    const allColors = [...colorPresets, ...customColors];

    return (
        <LunaSettings>
            <LunaSwitchSetting
                title="Bar Roundness"
                desc="Enable rounded corners on visualizer bars"
                checked={barRounding}
                onChange={(_, checked) => {
                    setBarRounding(checked);
                    settings.barRounding = checked;
                    (window as any).updateAudioVisualizer?.();
                }}
            />
            
            <LunaNumberSetting
                title="Bar Count"
                desc="Number of frequency bars to display"
                min={8}
                max={64}
                step={1}
                value={barCount}
                onNumber={(value: number) => {
                    setBarCount(value);
                    settings.barCount = value;
                    (window as any).updateAudioVisualizer?.();
                }}
            />
            
            {/* YUP YOUR EYES WORK... we do be using React code in the settings..*/}
            {/* I'm not sure if this is a good idea, but it works & looks amazing */}
            {/* Sorry @Inrixia <3 */}
            
            <div style={{ 
                padding: "16px 0", 
                display: "flex", 
                justifyContent: "space-between", 
                alignItems: "center" 
            }}>
                <div>
                    <div style={{ fontWeight: "normal", fontSize: "1.075rem", marginBottom: "4px" }}>Bar Color</div>
                    <div style={{ opacity: 0.7, fontSize: "14px" }}>Color of the visualizer bars</div>
                </div>
                <div style={{ display: "flex", gap: "8px", alignItems: "center", position: "relative" }}>
                    <button
                        onClick={() => showColorPicker ? closeColorPicker() : openColorPicker()}
                        style={{ 
                            width: "32px", 
                            height: "32px", 
                            border: "1px solid rgba(255,255,255,0.15)", 
                            borderRadius: "6px",
                            cursor: "pointer",
                            background: barColor,
                            backdropFilter: "blur(10px)",
                            WebkitBackdropFilter: "blur(10px)",
                            position: "relative",
                            overflow: "hidden"
                        }}
                    >
                        <div style={{
                            position: "absolute",
                            inset: 0,
                            background: "rgba(0,0,0,0.1)",
                            backdropFilter: "blur(2px)"
                        }} />
                    </button>
                    
                    {/* Custom Color Picker Modal */}
                    {shouldRender && (
                        <>
                            {/* Backdrop */}
                            <div 
                                style={{
                                    position: "fixed",
                                    top: 0,
                                    left: 0,
                                    right: 0,
                                    bottom: 0,
                                    background: "rgba(0,0,0,0.6)",
                                    zIndex: 1000,
                                    opacity: isAnimatingIn ? 1 : 0,
                                    transition: "opacity 0.2s ease"
                                }}
                                onClick={closeColorPicker}
                            />
                            
                            {/* Color Picker Panel */}
                            <div style={{
                                position: "fixed",
                                top: "50%",
                                left: "50%",
                                background: "rgba(20,20,20,0.98)",
                                backdropFilter: "blur(20px)",
                                WebkitBackdropFilter: "blur(20px)",
                                border: "1px solid rgba(255,255,255,0.15)",
                                borderRadius: "16px",
                                padding: "20px",
                                minWidth: "320px",
                                maxWidth: "90vw",
                                maxHeight: "90vh",
                                zIndex: 1001,
                                boxShadow: "0 20px 40px rgba(0,0,0,0.7)",
                                opacity: isAnimatingIn ? 1 : 0,
                                transform: isAnimatingIn ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0.9)",
                                transition: "all 0.2s ease"
                            }}>
                                <div style={{ marginBottom: "12px", color: "#fff", fontWeight: "bold", fontSize: "14px" }}>
                                    Choose Color
                                </div>
                                
                                                                {/* Color Grid */}
                                <div style={{
                                    display: "grid",
                                    gridTemplateColumns: "repeat(7, 1fr)",
                                    gap: "8px",
                                    marginBottom: "16px"
                                }}>
                                    {allColors.map((color, index) => {
                                        const isCustomColor = customColors.includes(color);
                                        const isHovered = hoveredColorIndex === index;
                                        return (
                                            <div
                                                key={index}
                                                style={{
                                                    position: "relative",
                                                    width: "32px",
                                                    height: "32px",
                                                    cursor: "pointer"
                                                }}
                                                className="color-item"
                                                onMouseEnter={() => setHoveredColorIndex(index)}
                                                onMouseLeave={() => setHoveredColorIndex(null)}
                                            >
                                                <button
                                                    onClick={() => {
                                                        updateColor(color);
                                                        closeColorPicker();
                                                    }}
                                                    style={{
                                                        width: "100%",
                                                        height: "100%",
                                                        borderRadius: "6px",
                                                        border: barColor === color ? "2px solid #fff" : "1px solid rgba(255,255,255,0.2)",
                                                        background: color,
                                                        cursor: "pointer",
                                                        transition: "all 0.2s ease"
                                                    }}
                                                />
                                                {isCustomColor && (
                                                    <button
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            removeCustomColor(color);
                                                        }}
                                                        style={{
                                                            position: "absolute",
                                                            top: "-4px",
                                                            right: "-4px",
                                                            width: "16px",
                                                            height: "16px",
                                                            borderRadius: "50%",
                                                            border: "1px solid rgba(255,255,255,0.8)",
                                                            background: "rgba(0,0,0,0.8)",
                                                            color: "#fff",
                                                            cursor: "pointer",
                                                            fontSize: "10px",
                                                            display: "flex",
                                                            alignItems: "center",
                                                            justifyContent: "center",
                                                            opacity: isHovered ? 1 : 0,
                                                            transition: "opacity 0.2s ease",
                                                            zIndex: 10
                                                        }}
                                                        className="remove-button"
                                                    >
                                                        ×
                                                    </button>
                                                )}
                                            </div>
                                        );
                                    })}
                                </div>
                                
                                {/* Custom Hex Input */}
                                <div style={{ marginBottom: "12px" }}>
                                    <div style={{ color: "rgba(255,255,255,0.7)", fontSize: "12px", marginBottom: "6px" }}>
                                        Add Custom Color
                                    </div>
                                    <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
                                        <input
                                            type="text"
                                            value={customInput}
                                            onChange={(e) => setCustomInput(e.target.value)}
                                            onKeyDown={(e) => {
                                                if (e.key === 'Enter') {
                                                    updateColor(customInput);
                                                    addCustomColor();
                                                }
                                            }}
                                            placeholder="#ffffff"
                                            style={{
                                                flex: 1,
                                                padding: "8px 12px",
                                                borderRadius: "6px",
                                                border: "1px solid rgba(255,255,255,0.2)",
                                                background: "rgba(255,255,255,0.1)",
                                                color: "#fff",
                                                fontSize: "14px",
                                                fontFamily: "monospace",
                                                boxSizing: "border-box"
                                            }}
                                        />
                                        <button
                                            onClick={() => {
                                                updateColor(customInput);
                                                addCustomColor();
                                            }}
                                            style={{
                                                width: "32px",
                                                height: "32px",
                                                borderRadius: "6px",
                                                border: "1px solid rgba(255,255,255,0.3)",
                                                background: "rgba(255,255,255,0.15)",
                                                color: "#fff",
                                                cursor: "pointer",
                                                fontSize: "16px",
                                                display: "flex",
                                                alignItems: "center",
                                                justifyContent: "center",
                                                transition: "all 0.2s ease"
                                            }}
                                            onMouseEnter={(e) => {
                                                e.currentTarget.style.background = "rgba(255,255,255,0.25)";
                                            }}
                                            onMouseLeave={(e) => {
                                                e.currentTarget.style.background = "rgba(255,255,255,0.15)";
                                            }}
                                        >
                                            +
                                        </button>
                                    </div>
                                </div>
                                
                                {/* Close Button (Done) - Also runs when color chosen*/}
                                <button
                                    onClick={closeColorPicker}
                                    style={{
                                        width: "100%",
                                        padding: "8px",
                                        borderRadius: "6px",
                                        border: "1px solid rgba(255,255,255,0.2)",
                                        background: "rgba(255,255,255,0.1)",
                                        color: "#fff",
                                        cursor: "pointer",
                                        fontSize: "12px"
                                    }}
                                >
                                    Done
                                </button>
                            </div>
                        </>
                    )}
                </div>
            </div>
            

        </LunaSettings>
    );
};