"use client";

import { Droplets, Type } from "lucide-react";
import { COLORS, FONTS } from "../_lib/avatar.constants";
import { FieldHeader, SectionHeader } from "./title";

type Props = {
    text: string;
    setText: React.Dispatch<React.SetStateAction<string>>;
    textColor: string;
    setTextColor: React.Dispatch<React.SetStateAction<string>>;
    font: string;
    setFont: React.Dispatch<React.SetStateAction<string>>;
    fontSize: number;
    setFontSize: React.Dispatch<React.SetStateAction<number>>;
    recentFonts: string[];
    setRecentFonts: React.Dispatch<React.SetStateAction<string[]>>;
    textRotation: number;
    setTextRotation: React.Dispatch<React.SetStateAction<number>>;
};

export function TextPanel ( {
    text,
    setText,
    textColor,
    setTextColor,
    font,
    setFont,
    fontSize,
    setFontSize,
    recentFonts,
    setRecentFonts,
    textRotation,
    setTextRotation,
}: 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="Text & Schrift"
                subtitle="Inhalt, Farbe, Größe, Rotation und Fonts."
                icon={ Type }
                accent="blue"
            />

            <div className="space-y-7">
                <div>
                    <FieldHeader title="Text" subtitle="Max. 30 Zeichen" accent="indigo" />
                    <input
                        type="text"
                        value={ text }
                        onChange={ ( e ) => setText( e.target.value ) }
                        placeholder="Dein Text hier..."
                        maxLength={ 30 }
                        className="w-full rounded-xl border-2 border-slate-800 bg-slate-950/70 px-5 py-3.5 text-base text-white outline-none placeholder:text-slate-500 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/15 md:text-lg"
                    />
                </div>

                <div>
                    <FieldHeader title="Schriftfarbe" subtitle="Presets oder eigene Farbe" accent="cyan" />
                    <div className="grid grid-cols-9 gap-3">
                        { COLORS.map( ( c ) => (
                            <button
                                key={ c.value }
                                title={ c.name }
                                onClick={ () => setTextColor( c.value ) }
                                className={ `size-11 rounded-xl border transition ${ textColor === c.value
                                    ? "border-indigo-500 ring-2 ring-indigo-500/30"
                                    : "border-white/10 hover:border-white/20"
                                    }` }
                                style={ { background: c.value } }
                            />
                        ) ) }
                        <label className="grid size-11 cursor-pointer place-items-center rounded-xl border border-white/10 hover:border-white/20">
                            <input type="color" className="hidden" onChange={ ( e ) => setTextColor( e.target.value ) } />
                            <Droplets className="h-4 w-4 text-slate-300" />
                        </label>
                    </div>
                </div>

                <div>
                    <FieldHeader title="Schriftgröße" subtitle={ `${ fontSize }px` } accent="violet" />
                    <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: `${ ( ( fontSize - 20 ) / 100 ) * 100 }%` } }
                        />
                        <input
                            type="range"
                            min={ 20 }
                            max={ 120 }
                            value={ fontSize }
                            onChange={ ( e ) => setFontSize( Number( e.target.value ) ) }
                            className="absolute inset-0 w-full cursor-pointer opacity-0"
                        />
                    </div>
                </div>

                <div>
                    <FieldHeader title="Rotation" subtitle={ `${ textRotation }°` } accent="indigo" />
                    <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: `${ ( textRotation / 360 ) * 100 }%` } }
                        />
                        <input
                            type="range"
                            min={ 0 }
                            max={ 360 }
                            value={ textRotation }
                            onChange={ ( e ) => setTextRotation( Number( e.target.value ) ) }
                            className="absolute inset-0 w-full cursor-pointer opacity-0"
                        />
                    </div>
                </div>

                <div>
                    <FieldHeader title="Schriftart" subtitle="Klicke zum Anwenden" accent="indigo" />

                    { recentFonts.length > 0 && (
                        <div className="mb-3">
                            <div className="mb-1 text-xs text-slate-400">Zuletzt genutzt</div>
                            <div className="flex flex-wrap gap-2">
                                { recentFonts.map( ( v, i ) => (
                                    <button
                                        key={ `${ v }-${ i }` }
                                        onClick={ () => setFont( v ) }
                                        className={ `rounded-full px-3 py-1.5 text-xs ${ font === v
                                            ? "border border-indigo-500 bg-indigo-500/10 text-indigo-300"
                                            : "border border-slate-800 bg-slate-900/50 text-slate-300 hover:border-slate-600"
                                            }` }
                                        style={ { fontFamily: v } }
                                    >
                                        { v.split( "," )[ 0 ].replace( /["']/g, "" ).trim() }
                                    </button>
                                ) ) }
                            </div>
                        </div>
                    ) }

                    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                        { FONTS.map( ( f ) => (
                            <button
                                key={ f.value }
                                onClick={ () => {
                                    setFont( f.value );
                                    setRecentFonts( ( prev ) => {
                                        const v = f.value;
                                        const next = [ v, ...prev.filter( ( x ) => x !== v ) ];
                                        return next.slice( 0, 6 );
                                    } );
                                } }
                                className={ `rounded-xl border p-3 text-left transition-all duration-200 ${ font === f.value
                                    ? "border-indigo-500 bg-indigo-500/10 shadow-lg shadow-indigo-900/10"
                                    : "border-slate-800 bg-slate-900/40 hover:border-slate-600"
                                    }` }
                            >
                                <div className="mb-1 text-[11px] uppercase tracking-wide text-slate-400">
                                    { f.name }
                                </div>
                                <div className="truncate text-xl leading-snug text-white" style={ { fontFamily: f.value } }>
                                    NEXUS-CORE
                                </div>
                            </button>
                        ) ) }
                    </div>
                </div>
            </div>
        </section>
    );
}