"use client";

import { Palette, Upload } from "lucide-react";
import { AVATAR_IMAGES } from "../_lib/avatar.constants";
import { SectionHeader } from "./title";

type Props = {
    selectedImage: string;
    setSelectedImage: React.Dispatch<React.SetStateAction<string>>;
    customBg: string | null;
    setCustomBg: React.Dispatch<React.SetStateAction<string | null>>;
    customImage: string | null;
    setCustomImage: React.Dispatch<React.SetStateAction<string | null>>;
    isLogoT: boolean;
    fileInputRef: React.RefObject<HTMLInputElement | null>;
    fileKey: number;
    handleFileUpload: ( e: React.ChangeEvent<HTMLInputElement> ) => void;
    resetFileInput: () => void;
};

export function BackgroundPanel ( {
    selectedImage,
    setSelectedImage,
    customBg,
    setCustomBg,
    customImage,
    setCustomImage,
    isLogoT,
    fileInputRef,
    fileKey,
    handleFileUpload,
    resetFileInput,
}: 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">
            <SectionHeader
                title="Hintergrund"
                subtitle="Vorlage wählen oder eigenen Background laden."
                icon={ Palette }
                accent="indigo"
            />

            <div className="mb-6">
                <input
                    key={ fileKey }
                    ref={ fileInputRef }
                    type="file"
                    accept="image/*"
                    onChange={ handleFileUpload }
                    className="hidden"
                />
                <button
                    onClick={ () => fileInputRef.current?.click() }
                    className="group flex w-full items-center justify-center gap-3 rounded-xl bg-linear-to-r from-indigo-600 to-violet-600 px-6 py-4 font-semibold text-white shadow-lg shadow-indigo-700/20 transition-all duration-300 hover:from-indigo-500 hover:to-violet-500 hover:shadow-indigo-600/30"
                >
                    <Upload className="h-5 w-5 transition-transform group-hover:scale-110" />
                    { isLogoT ? "Eigenen Hintergrund hochladen" : "Eigenes Bild hochladen" }
                </button>
            </div>

            <div className="relative">
                <div className="absolute inset-0 rounded-2xl bg-linear-to-r from-indigo-500/10 to-violet-500/10 blur-xl" />
                <div className="relative rounded-2xl border border-white/5 bg-slate-900/50 p-1">
                    <div className="grid grid-cols-4 gap-3 p-2">
                        { AVATAR_IMAGES.map( ( image, i ) => (
                            <button
                                key={ i }
                                onClick={ () => {
                                    setSelectedImage( image );
                                    if ( image === "Logo_T.png" ) setCustomImage( null );
                                    else setCustomBg( null );
                                } }
                                className={ `relative aspect-square overflow-hidden rounded-xl transition-all duration-300 ${ selectedImage === image
                                    ? "scale-105 ring-4 ring-indigo-500 shadow-lg shadow-indigo-700/30"
                                    : "ring-2 ring-slate-700 hover:scale-105 hover:ring-slate-500"
                                    }` }
                            >
                                <img src={ image } alt={ `Vorlage ${ i + 1 }` } className="h-full w-full object-cover" />
                                { selectedImage === image && (
                                    <div className="absolute inset-0 grid place-items-center bg-indigo-500/15">
                                        <div className="grid h-8 w-8 place-items-center rounded-full bg-indigo-500">
                                            <div className="h-3 w-3 rounded-full bg-white" />
                                        </div>
                                    </div>
                                ) }
                            </button>
                        ) ) }
                    </div>
                </div>
            </div>

            <div className="mt-4 flex gap-3">
                { isLogoT && customBg && (
                    <button
                        onClick={ () => {
                            setCustomBg( null );
                            resetFileInput();
                        } }
                        className="flex-1 rounded-lg border border-white/8 bg-slate-900/70 px-4 py-2.5 text-sm text-slate-300 hover:bg-slate-900"
                    >
                        Eigenen Hintergrund entfernen
                    </button>
                ) }

                { !isLogoT && customImage && (
                    <button
                        onClick={ () => {
                            setCustomImage( null );
                            resetFileInput();
                        } }
                        className="flex-1 rounded-lg border border-white/8 bg-slate-900/70 px-4 py-2.5 text-sm text-slate-300 hover:bg-slate-900"
                    >
                        Eigenes Bild entfernen
                    </button>
                ) }
            </div>
        </section>
    );
}