"use client";

import { Wand2 } from "lucide-react";
import { FieldHeader, SectionHeader } from "./title";

type Props = {
    useGradient: boolean;
    setUseGradient: React.Dispatch<React.SetStateAction<boolean>>;
    gradientType: "linear" | "radial";
    setGradientType: React.Dispatch<React.SetStateAction<"linear" | "radial">>;
    gradColor1: string;
    setGradColor1: React.Dispatch<React.SetStateAction<string>>;
    gradColor2: string;
    setGradColor2: React.Dispatch<React.SetStateAction<string>>;
    gradAngle: number;
    setGradAngle: React.Dispatch<React.SetStateAction<number>>;
    gradRadius: number;
    setGradRadius: React.Dispatch<React.SetStateAction<number>>;

    useOutline: boolean;
    setUseOutline: React.Dispatch<React.SetStateAction<boolean>>;
    outlineColor: string;
    setOutlineColor: React.Dispatch<React.SetStateAction<string>>;
    outlineWidth: number;
    setOutlineWidth: React.Dispatch<React.SetStateAction<number>>;

    useShadow: boolean;
    setUseShadow: React.Dispatch<React.SetStateAction<boolean>>;
    shadowColor: string;
    setShadowColor: React.Dispatch<React.SetStateAction<string>>;
    shadowBlur: number;
    setShadowBlur: React.Dispatch<React.SetStateAction<number>>;
    shadowOffsetX: number;
    setShadowOffsetX: React.Dispatch<React.SetStateAction<number>>;
    shadowOffsetY: number;
    setShadowOffsetY: React.Dispatch<React.SetStateAction<number>>;
};

export function EffectsPanel ( {
    useGradient,
    setUseGradient,
    gradientType,
    setGradientType,
    gradColor1,
    setGradColor1,
    gradColor2,
    setGradColor2,
    gradAngle,
    setGradAngle,
    gradRadius,
    setGradRadius,
    useOutline,
    setUseOutline,
    outlineColor,
    setOutlineColor,
    outlineWidth,
    setOutlineWidth,
    useShadow,
    setUseShadow,
    shadowColor,
    setShadowColor,
    shadowBlur,
    setShadowBlur,
    shadowOffsetX,
    setShadowOffsetX,
    shadowOffsetY,
    setShadowOffsetY,
}: Props ) {
    return (
        <section className="rounded-3xl border border-white/8 bg-slate-950/70 p-8 shadow-[0_10px_40px_-20px_rgba(0,0,0,.6)] backdrop-blur-xl">
            <div className="rounded-2xl border border-white/8 bg-slate-950/70 p-6">
                <SectionHeader
                    title="Effekte"
                    subtitle="Farbverlauf, Umriss und Schatten feinjustieren."
                    icon={ Wand2 }
                    accent="violet"
                    className="mb-5"
                />

                <div className="mb-6">
                    <FieldHeader
                        title="Farbverlauf"
                        subtitle={ useGradient ? "Aktiv" : "Inaktiv" }
                        accent="indigo"
                        rightSlot={
                            <div className="flex items-center gap-2">
                                <button
                                    onClick={ () => setUseGradient( !useGradient ) }
                                    className={ `rounded-lg border px-3 py-1.5 text-xs ${ useGradient
                                        ? "border-indigo-500 bg-indigo-500/10 text-indigo-300"
                                        : "border-white/10 hover:border-white/20"
                                        }` }
                                >
                                    { useGradient ? "An" : "Aus" }
                                </button>
                                <div className="rounded-lg border border-white/10 p-1 text-xs">
                                    <button
                                        onClick={ () => setGradientType( "linear" ) }
                                        className={ `rounded px-2 py-1 ${ gradientType === "linear" ? "bg-white/10" : "" }` }
                                    >
                                        Linear
                                    </button>
                                    <button
                                        onClick={ () => setGradientType( "radial" ) }
                                        className={ `rounded px-2 py-1 ${ gradientType === "radial" ? "bg-white/10" : "" }` }
                                    >
                                        Radial
                                    </button>
                                </div>
                            </div>
                        }
                    />

                    <div className="grid grid-cols-2 gap-3">
                        <label className="flex items-center justify-between gap-3 text-sm">
                            Farbe 1
                            <input
                                type="color"
                                value={ gradColor1 }
                                onChange={ ( e ) => setGradColor1( e.target.value ) }
                                className="h-9 w-9 rounded border border-white/10"
                            />
                        </label>
                        <label className="flex items-center justify-between gap-3 text-sm">
                            Farbe 2
                            <input
                                type="color"
                                value={ gradColor2 }
                                onChange={ ( e ) => setGradColor2( e.target.value ) }
                                className="h-9 w-9 rounded border border-white/10"
                            />
                        </label>
                    </div>

                    { gradientType === "linear" ? (
                        <div className="mt-3">
                            <div className="mb-1 flex justify-between text-xs text-slate-400">
                                <span>Winkel</span>
                                <span>{ gradAngle }°</span>
                            </div>
                            <div className="relative h-3 rounded-full bg-white/5">
                                <div
                                    className="absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-indigo-600 to-violet-600"
                                    style={ { width: `${ ( gradAngle / 360 ) * 100 }%` } }
                                />
                                <input
                                    type="range"
                                    min={ 0 }
                                    max={ 360 }
                                    value={ gradAngle }
                                    onChange={ ( e ) => setGradAngle( Number( e.target.value ) ) }
                                    className="absolute inset-0 w-full opacity-0"
                                />
                            </div>
                        </div>
                    ) : (
                        <div className="mt-3">
                            <div className="mb-1 flex justify-between text-xs text-slate-400">
                                <span>Radius</span>
                                <span>{ gradRadius }px</span>
                            </div>
                            <div className="relative h-3 rounded-full bg-white/5">
                                <div
                                    className="absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-indigo-600 to-violet-600"
                                    style={ { width: `${ Math.min( 100, ( gradRadius / 400 ) * 100 ) }%` } }
                                />
                                <input
                                    type="range"
                                    min={ 50 }
                                    max={ 400 }
                                    value={ gradRadius }
                                    onChange={ ( e ) => setGradRadius( Number( e.target.value ) ) }
                                    className="absolute inset-0 w-full opacity-0"
                                />
                            </div>
                        </div>
                    ) }
                </div>

                <div className="mb-6">
                    <FieldHeader
                        title="Umriss"
                        subtitle={ `${ useOutline ? "Aktiv" : "Inaktiv" } · ${ outlineWidth }px` }
                        accent="cyan"
                        rightSlot={
                            <button
                                onClick={ () => setUseOutline( !useOutline ) }
                                className={ `rounded-lg border px-3 py-1.5 text-xs ${ useOutline
                                    ? "border-indigo-500 bg-indigo-500/10 text-indigo-300"
                                    : "border-white/10 hover:border-white/20"
                                    }` }
                            >
                                { useOutline ? "An" : "Aus" }
                            </button>
                        }
                    />
                    <div className="mb-3 flex items-center justify-between gap-3">
                        <span className="text-sm">Farbe</span>
                        <input
                            type="color"
                            value={ outlineColor }
                            onChange={ ( e ) => setOutlineColor( e.target.value ) }
                            className="h-9 w-9 rounded border border-white/10"
                        />
                    </div>
                    <div>
                        <div className="mb-1 flex justify-between text-xs text-slate-400">
                            <span>Stärke</span>
                            <span>{ outlineWidth }px</span>
                        </div>
                        <div className="relative h-3 rounded-full bg-white/5">
                            <div
                                className="absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-indigo-600 to-violet-600"
                                style={ { width: `${ Math.min( 100, ( outlineWidth / 20 ) * 100 ) }%` } }
                            />
                            <input
                                type="range"
                                min={ 0 }
                                max={ 20 }
                                value={ outlineWidth }
                                onChange={ ( e ) => setOutlineWidth( Number( e.target.value ) ) }
                                className="absolute inset-0 w-full opacity-0"
                            />
                        </div>
                    </div>
                </div>

                <div>
                    <FieldHeader
                        title="Schatten"
                        subtitle={ `${ useShadow ? "Aktiv" : "Inaktiv" } · Blur ${ shadowBlur }px` }
                        accent="violet"
                        rightSlot={
                            <button
                                onClick={ () => setUseShadow( !useShadow ) }
                                className={ `rounded-lg border px-3 py-1.5 text-xs ${ useShadow
                                    ? "border-indigo-500 bg-indigo-500/10 text-indigo-300"
                                    : "border-white/10 hover:border-white/20"
                                    }` }
                            >
                                { useShadow ? "An" : "Aus" }
                            </button>
                        }
                    />
                    <div className="mb-3 flex items-center justify-between gap-3">
                        <span className="text-sm">Farbe</span>
                        <input
                            type="color"
                            value={ shadowColor }
                            onChange={ ( e ) => setShadowColor( e.target.value ) }
                            className="h-9 w-9 rounded border border-white/10"
                        />
                    </div>
                    <div className="mb-3">
                        <div className="mb-1 flex justify-between text-xs text-slate-400">
                            <span>Weichheit</span>
                            <span>{ shadowBlur }px</span>
                        </div>
                        <div className="relative h-3 rounded-full bg-white/5">
                            <div
                                className="absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-indigo-600 to-violet-600"
                                style={ { width: `${ Math.min( 100, ( shadowBlur / 40 ) * 100 ) }%` } }
                            />
                            <input
                                type="range"
                                min={ 0 }
                                max={ 40 }
                                value={ shadowBlur }
                                onChange={ ( e ) => setShadowBlur( Number( e.target.value ) ) }
                                className="absolute inset-0 w-full opacity-0"
                            />
                        </div>
                    </div>
                    <div className="grid grid-cols-2 gap-3">
                        <div>
                            <div className="mb-1 flex justify-between text-xs text-slate-400">
                                <span>Offset X</span>
                                <span>{ shadowOffsetX }px</span>
                            </div>
                            <div className="relative h-3 rounded-full bg-white/5">
                                <div
                                    className="absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-indigo-600 to-violet-600"
                                    style={ { width: `${ ( ( shadowOffsetX + 40 ) / 80 ) * 100 }%` } }
                                />
                                <input
                                    type="range"
                                    min={ -40 }
                                    max={ 40 }
                                    value={ shadowOffsetX }
                                    onChange={ ( e ) => setShadowOffsetX( Number( e.target.value ) ) }
                                    className="absolute inset-0 w-full opacity-0"
                                />
                            </div>
                        </div>
                        <div>
                            <div className="mb-1 flex justify-between text-xs text-slate-400">
                                <span>Offset Y</span>
                                <span>{ shadowOffsetY }px</span>
                            </div>
                            <div className="relative h-3 rounded-full bg-white/5">
                                <div
                                    className="absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-indigo-600 to-violet-600"
                                    style={ { width: `${ ( ( shadowOffsetY + 40 ) / 80 ) * 100 }%` } }
                                />
                                <input
                                    type="range"
                                    min={ -40 }
                                    max={ 40 }
                                    value={ shadowOffsetY }
                                    onChange={ ( e ) => setShadowOffsetY( Number( e.target.value ) ) }
                                    className="absolute inset-0 w-full opacity-0"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}