import React, { useEffect, useState, useRef } from 'react';
import { API_URL } from '../config.js';
import { authFetch } from '../utils/authFetch.js';
import { HexColorPicker } from "react-colorful";

export default function Lighting() {
    const [state, setState] = useState({ power: '', red: 0, blue: 0, green: 0, brightness: 100 });
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const [success, setSuccess] = useState(false);

    useEffect(() => {
        authFetch(`${API_URL}/lighting/state`)
            .then(res => res.json())
            .then(data => {
                setState(data);
                setLoading(false);
            })
            .catch(() => {
                setError('Failed to fetch lighting state');
                setLoading(false);
            });
    }, []);

    // Live update handler
    const debounceRef = useRef();
    const updateLighting = newState => {
        // If brightness is 0, force power off
        let { power, red, green, blue, brightness } = newState;
        if (brightness === 0) power = 'off';
        const prev = state;
        if (
            power === prev.power &&
            red === prev.red &&
            green === prev.green &&
            blue === prev.blue &&
            brightness === prev.brightness
        ) return;

        setState({ ...newState, power });
        setLoading(true);
        setSuccess(false);
        if (debounceRef.current) clearTimeout(debounceRef.current);
        debounceRef.current = setTimeout(() => {
            const payload = { power, red, green, blue, brightness };
            authFetch(`${API_URL}/lighting/state`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload),
            })
                .then(res => res.json())
                .then(data => {
                    // Only update state if all fields are present, otherwise preserve previous
                    setState(prev => ({
                        power: typeof data.power === 'string' ? data.power : prev.power,
                        red: typeof data.red === 'number' ? data.red : prev.red,
                        green: typeof data.green === 'number' ? data.green : prev.green,
                        blue: typeof data.blue === 'number' ? data.blue : prev.blue,
                        brightness: typeof data.brightness === 'number' ? data.brightness : prev.brightness,
                    }));
                    setLoading(false);
                    setSuccess(true);
                })
                .catch(() => {
                    setError('Failed to update lighting state');
                    setLoading(false);
                });
        }, 400); // 400ms debounce
    };

    const handlePowerToggle = () => {
        const newPower = state.power === 'on' ? 'off' : 'on';
        updateLighting({ ...state, power: newPower });
    };

    const handleColorChange = hex => {
        const rgb = hexToRgb(hex);
        updateLighting({
            power: state.power, // always preserve current power state
            red: rgb.red,
            green: rgb.green,
            blue: rgb.blue
        });
    };

    const handleSubmit = e => {
        e.preventDefault();
        setLoading(true);
        setSuccess(false);
        authFetch(`${API_URL}/lighting/state`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(state),
        })
            .then(res => res.json())
            .then(data => {
                setState(data);
                setLoading(false);
                setSuccess(true);
            })
            .catch(() => {
                setError('Failed to update lighting state');
                setLoading(false);
            });
    };

    // Guard against undefined values
    const colorPreview = `rgb(${state.red ?? 0},${state.green ?? 0},${state.blue ?? 0})`;


    return (
        <div className="w-full min-h-[60vh] flex justify-center items-center mt-12">
            <form
                onSubmit={handleSubmit}
                className="max-w-md w-full p-8 rounded-xl shadow bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 flex flex-col items-center justify-center"
                style={{ margin: '0 auto' }}
            >
                <h2 className="text-2xl font-bold mb-6 text-center text-neutral-800 dark:text-neutral-200">Lighting Controls</h2>

                <div className="flex items-center justify-between mb-8">
                    <span className="font-semibold text-lg mr-4">Power</span>
                    <label className="flex items-center gap-6 cursor-pointer select-none">
                        <div
                            className={`relative w-14 h-8 flex items-center bg-gray-300 dark:bg-gray-700 rounded-full p-1 transition-colors duration-300 ${state.power === 'on' ? 'bg-green-400' : 'bg-red-400'}`}
                            onClick={handlePowerToggle}
                            style={{ cursor: 'pointer' }}
                        >
                            <div
                                className={`absolute left-1 top-1 w-6 h-6 rounded-full bg-white shadow-md transition-transform duration-300`}
                                style={{ transform: state.power === 'on' ? 'translateX(24px)' : 'translateX(0)' }}
                            />
                        </div>
                        <span className={`text-base font-bold min-w-[48px] text-center ${state.power === 'on' ? 'text-green-700' : 'text-red-700'}`}>{state.power === 'on' ? 'On' : 'Off'}</span>
                    </label>
                </div>

                <div className="mb-8 flex flex-col items-center">
                    <label className="font-semibold mb-2">Color</label>
                    <HexColorPicker
                        color={rgbToHex(state.red ?? 0, state.green ?? 0, state.blue ?? 0)}
                        onChange={handleColorChange}
                        style={{ width: '180px', height: '180px', borderRadius: '1rem', boxShadow: '0 2px 16px 0 #0002', marginBottom: '1rem' }}
                    />
                </div>
                <div className="mb-8 flex flex-col items-center w-full">
                    <label className="font-semibold mb-2" htmlFor="brightness">Brightness</label>
                    <input
                        id="brightness"
                        type="range"
                        min={0}
                        max={100}
                        value={state.brightness}
                        onChange={e => updateLighting({ ...state, brightness: Number(e.target.value) })}
                        className="w-full max-w-xs accent-yellow-500"
                    />
                    <span className="mt-2 text-sm font-bold text-yellow-700 dark:text-yellow-400">{state.brightness}</span>
                </div>

                <div className="flex flex-col items-center mb-8">
                    <span className="mb-2 text-sm text-neutral-700 dark:text-neutral-300">Live Color Preview</span>
                    <div
                        className="w-28 h-28 rounded-full border border-neutral-400 dark:border-neutral-700 shadow-xl transition-all duration-500"
                        style={{
                            background: state.power === 'on' ? colorPreview : 'linear-gradient(135deg, #222 60%, #444 100%)',
                            opacity: state.power === 'on' ? 1 : 0.3,
                            boxShadow: state.power === 'on' ? `0 0 32px 0 ${colorPreview}` : 'none',
                            outline: state.power === 'on' ? `2px solid ${colorPreview}` : '2px solid #333',
                            transition: 'background 0.3s, box-shadow 0.3s, outline 0.3s, opacity 0.3s',
                        }}
                    />
                </div>

                {error && <div className="mb-4 text-red-500 text-center font-bold animate-pulse">{error}</div>}
                {success && <div className="mb-4 text-green-600 text-center font-bold animate-bounce">Updated!</div>}
                {loading && <div className="mb-4 text-indigo-500 text-center font-bold animate-pulse">Loading...</div>}
            </form>
        </div>

    );
}

// Helper functions for color conversion
function rgbToHex(r, g, b) {
    r = typeof r === 'number' && !isNaN(r) ? r : 0;
    g = typeof g === 'number' && !isNaN(g) ? g : 0;
    b = typeof b === 'number' && !isNaN(b) ? b : 0;
    return (
        '#' +
        [r, g, b]
            .map(x => {
                const hex = x.toString(16);
                return hex.length === 1 ? '0' + hex : hex;
            })
            .join('')
    );
}

function hexToRgb(hex) {
    hex = hex.replace('#', '');
    if (hex.length === 3) {
        hex = hex.split('').map(x => x + x).join('');
    }
    const num = parseInt(hex, 16);
    return {
        red: (num >> 16) & 255,
        green: (num >> 8) & 255,
        blue: num & 255,
    };
}