import React, {ChangeEvent, useEffect, useState} from "react";

interface TextAreaInputProps {
    value: string;
    setValue: (e: ChangeEvent<HTMLTextAreaElement>) => void;
    placeholder: string;
    maxLength?: number;
}

export default function TextAreaInput(
    {
        value,
        setValue,
        placeholder,
        maxLength
    }: TextAreaInputProps) {
    const [prevLength, setPrevLength] = useState(value.length);
    const [isGrowing, setIsGrowing] = useState(false);
    
    useEffect(() => {
        if (value.length > prevLength) {
            setIsGrowing(true);
            setTimeout(() => setIsGrowing(false), 200);
        }
        setPrevLength(value.length);
    }, [value.length, prevLength]);
    
    const getProgressPercentage = () => {
        if (!maxLength) return 0;
        return Math.min((value.length / maxLength) * 100, 100);
    };
    
    const getStatusStyles = () => {
        if (!maxLength) return {};
        const percentage = getProgressPercentage();

        if (percentage >= 100) return {
            textColor: 'text-error',
            bgColor: 'bg-error/10',
            borderColor: 'border-error/30',
            progressColor: 'bg-error'
        };

        if (percentage >= 90) return {
            textColor: 'text-warning',
            bgColor: 'bg-warning/10',
            borderColor: 'border-warning/30',
            progressColor: 'bg-warning'
        };

        if (percentage >= 75) return {
            textColor: 'text-warning',
            bgColor: 'bg-warning/10',
            borderColor: 'border-warning/30',
            progressColor: 'bg-warning'
        };

        return {
            textColor: 'text-success',
            bgColor: 'bg-success/10',
            borderColor: 'border-success/30',
            progressColor: 'bg-success'
        };
    };
    
    const styles = getStatusStyles();
    
    return (
        <div className="flex-grow flex-col flex h-full">
            <textarea
                value={value}
                onChange={setValue}
                placeholder={placeholder}
                rows={3}
                className={`w-full flex-grow text-text-primary p-3 lg:p-4 rounded-xl border-2 outline-none resize-none transition-all duration-300 placeholder:text-muted/60 ${
                    maxLength && value.length >= maxLength
                        ? 'border-error focus:ring-4 focus:ring-error/20 bg-error/10 hover:bg-error/15'
                        : 'bg-secondary/50 border-secondary/50 focus:ring-4 focus:ring-primary/20 focus:border-primary focus:bg-secondary hover:bg-secondary hover:border-secondary'
                }`}
                style={{height: '100%', minHeight: '200px'}}
            />
            
            {maxLength && (
                <div className="flex items-center justify-end gap-3 mt-3">
                    {/* Compteur avec effet de croissance */}
                    <div className={`flex items-center gap-3 px-4 py-2 rounded-lg border transition-all duration-300 ${
                        isGrowing ? 'scale-110 shadow-lg' : 'scale-100'
                    } ${styles.bgColor} ${styles.borderColor}`}>
                        
                        {/* Progress bar visible */}
                        <div className="flex items-center gap-2">
                            <span className="text-xs text-muted font-medium">Progression</span>
                            <div className="w-20 h-2 bg-secondary/50 rounded-full overflow-hidden shadow-inner">
                                <div
                                    className={`h-full rounded-full transition-all duration-500 ease-out ${styles.progressColor} shadow-md`}
                                    style={{width: `${getProgressPercentage()}%`}}
                                ></div>
                            </div>
                        </div>
                        
                        {/* Compteur de caractères */}
                        <div className="flex items-center gap-2">
                            <div className={`text-sm font-semibold transition-all duration-200 ${
                                isGrowing ? 'scale-125' : 'scale-100'
                            } ${styles.textColor}`}>
                                {value.length}
                                <span className="text-muted mx-1">/</span>
                                <span className="text-text-secondary">{maxLength}</span>
                            </div>
                            <span className="text-xs text-muted font-medium">caractères</span>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}