/**
 * VisualTools
 * Provides the floating controls for scene lighting, texture visibility, and
 * quick visual resets in the editor viewport.
 */
import React, { useState } from 'react';
import { Button } from "@/components/ui/button";
import { Slider } from "@/components/ui/slider";
import { 
  Sun, Image as ImageIcon, RotateCcw, Box 
} from "lucide-react";
import { useLanguage } from '../../context/LanguageContext';

export default function VisualTools({ state, actions }) {
    const { t } = useLanguage();
    const [activeTab, setActiveTab] = useState(null);
    const settings = state.visualSettings || {};

    const sliderStyles = `
    .visual-slider span:first-child { background-color: rgba(30, 58, 138, 0.8) !important; }
    .visual-slider span:first-child span { background-color: white !important; }
    .visual-slider [role=slider] { background-color: white !important; border: 2px solid #8091c2 !important; width: 14px !important; height: 14px !important; }
  `;

    const panelClass = "absolute left-16 top-0 bg-black/80 backdrop-blur-2xl border border-white/10 p-4 rounded-2xl w-60 shadow-2xl pointer-events-auto space-y-6";

    const handleMasterReset = () => {
        actions.setVisualSettings({
            ...settings,
            showTexture: true,
            smoothAngle: 180,
            wireframe: false,
            pointsMode: false,
        });
        actions.setLightIntensity([2]);
        actions.setLightAngle([0]);
        setActiveTab(null);
    };

    return (
        <div className="absolute top-48 left-6 z-[100] flex flex-col gap-2 pointer-events-auto">
            <style dangerouslySetInnerHTML={{ __html: sliderStyles }} />

            <div className="flex flex-col gap-2 p-2 bg-black/60 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl">
                <ToolIcon 
                    icon={<Sun size={18} />} 
                    active={activeTab === 'light'} 
                    onClick={() => setActiveTab(activeTab === 'light' ? null : 'light')} 
                />

                <ToolIcon 
                    icon={settings.showTexture ? <ImageIcon size={18} /> : <Box size={18} />} 
                    active={false} 
                    className={settings.showTexture ? "text-blue-400" : "text-amber-500"}
                    onClick={() => actions.setVisualSettings({ 
                        ...settings, 
                        showTexture: !settings.showTexture 
                    })} 
                />
                
                <div className="h-px bg-white/10 mx-2 my-1" />
                
                <ToolIcon 
                    icon={<RotateCcw size={18} />} 
                    active={false} 
                    onClick={handleMasterReset} 
                    className="text-red-400 hover:text-red-300 hover:bg-red-500/10"
                />
            </div>

            <div className="relative">
                {activeTab === 'light' && (
                    <div className={panelClass}>
                        <div className="space-y-3">
                            <div className="flex items-center justify-between">
                                <label className="text-[10px] font-black text-white/40 uppercase tracking-widest">
                                    {t('brightness')}
                                </label>
                            </div>
                            <Slider 
                                value={state.lightIntensity} 
                                onValueChange={actions.setLightIntensity} 
                                max={5} 
                                min={0}
                                step={0.1} 
                                className="visual-slider" 
                            />
                        </div>

                        <div className="space-y-3">
                            <div className="flex items-center justify-between">
                                <label className="text-[10px] font-black text-white/40 uppercase tracking-widest">
                                    {t('lightDirection')}
                                </label>
                            </div>
                            <Slider 
                                value={state.lightAngle} 
                                onValueChange={actions.setLightAngle} 
                                min={-Math.PI} 
                                max={Math.PI}  
                                step={0.01} 
                                className="visual-slider" 
                            />
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}

function ToolIcon({ icon, active, onClick, className = "" }) {
    return (
        <Button 
            variant="ghost" 
            size="icon" 
            className={`w-10 h-10 rounded-xl transition-all ${active ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/40' : 'hover:bg-white/10 text-white'} ${className}`} 
            onClick={onClick}
        >
            {icon}
        </Button>
    );
}