import React, { useRef, useState, useEffect } from 'react';
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Send, Paperclip, FileText, X, ChevronLeft, ChevronRight, Sparkles } from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';

export default function AiAssistantInputArea({
    input, handleInputChange, handleKeyDown, handleSend, isThinking,
    attachedFile, setAttachedFile, fileInputRef, handleFileChange,
    showSlashMenu, filteredCommands, slashIndex, applySlashCommand, placeholder,
    suggestions, handleSuggestionClick // <-- NEW PROPS
}) {
    const { t } = useTranslation();
    const scrollRef = useRef(null);
    const [showLeft, setShowLeft] = useState(false);
    const [showRight, setShowRight] = useState(false);

    // Check scroll arrows for suggestions
    const checkScroll = () => {
        if (scrollRef.current) {
            const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
            setShowLeft(scrollLeft > 0);
            setShowRight(Math.ceil(scrollLeft + clientWidth) < scrollWidth - 2);
        }
    };

    useEffect(() => {
        checkScroll();
        window.addEventListener('resize', checkScroll);
        return () => window.removeEventListener('resize', checkScroll);
    }, [suggestions]);

    const scroll = (direction) => {
        if (scrollRef.current) {
            const offset = direction === 'left' ? -150 : 150;
            scrollRef.current.scrollBy({ left: offset, behavior: 'smooth' });
            setTimeout(checkScroll, 200);
        }
    };

    return (
        <div className="p-3 bg-card border-t shrink-0 flex flex-col gap-2 relative rounded-b-2xl">
            
            {/* --- SLASH COMMAND DROPDOWN MENU --- */}
            {showSlashMenu && filteredCommands.length > 0 && (
                <div className="absolute bottom-[calc(100%+8px)] left-3 right-3 bg-card border border-border shadow-2xl rounded-xl overflow-hidden z-[60] animate-in fade-in slide-in-from-bottom-2">
                    <div className="bg-muted/50 px-3 py-2 text-xs font-bold text-muted-foreground border-b uppercase tracking-wider">
                        {t('Select Section to Focus')}
                    </div>
                    <div className="p-1 max-h-48 overflow-y-auto custom-scrollbar">
                        {filteredCommands.map((cmd, idx) => (
                            <button
                                key={cmd.id}
                                type="button"
                                onClick={() => applySlashCommand(cmd)}
                                className={`flex items-center gap-2.5 w-full px-3 py-2 text-sm rounded-lg text-left transition-colors outline-none ${
                                    idx === slashIndex 
                                        ? 'bg-primary/10 text-primary font-bold shadow-sm' 
                                        : 'text-foreground hover:bg-muted'
                                }`}
                            >
                                {cmd.icon && <cmd.icon className={`w-4 h-4 shrink-0 ${idx === slashIndex ? 'text-primary' : 'text-muted-foreground'}`} />}
                                {cmd.label}
                            </button>
                        ))}
                    </div>
                </div>
            )}

            {/* --- SMART SUGGESTIONS (SCROLLABLE) --- */}
            {!showSlashMenu && suggestions && suggestions.length > 0 && (
                <div className="relative group w-full mb-1 animate-in fade-in slide-in-from-bottom-1">
                    
                    {showLeft && (
                        <button 
                            onClick={() => scroll('left')}
                            className="absolute left-0 top-1/2 -translate-y-1/2 z-10 h-full bg-gradient-to-r from-card via-card to-transparent flex items-center justify-start pl-1 text-primary w-8 outline-none"
                        >
                            <ChevronLeft className="w-4 h-4" />
                        </button>
                    )}

                    <div 
                        ref={scrollRef}
                        onScroll={checkScroll}
                        className="flex overflow-x-auto no-scrollbar gap-2 px-1 scroll-smooth"
                    >
                        {suggestions.map((suggestion, idx) => (
                            <button 
                                key={idx}
                                type="button"
                                onClick={() => handleSuggestionClick(suggestion)}
                                disabled={isThinking}
                                className="shrink-0 flex items-center gap-1.5 px-3 py-1.5 bg-muted/40 hover:bg-primary/10 hover:text-primary border border-border/50 hover:border-primary/30 rounded-full text-[10px] font-medium transition-colors outline-none"
                            >
                                <Sparkles className="w-3 h-3 text-primary/70" />
                                {suggestion}
                            </button>
                        ))}
                    </div>

                    {showRight && (
                        <button 
                            onClick={() => scroll('right')}
                            className="absolute right-0 top-1/2 -translate-y-1/2 z-10 h-full bg-gradient-to-l from-card via-card to-transparent flex items-center justify-end pr-1 text-primary w-8 outline-none"
                        >
                            <ChevronRight className="w-4 h-4" />
                        </button>
                    )}
                </div>
            )}

            {/* --- ATTACHED FILE CHIP --- */}
            {attachedFile && (
                <div className="flex items-center justify-between bg-primary/10 border border-primary/20 text-primary px-3 py-2 rounded-lg text-sm">
                    <div className="flex items-center gap-2 overflow-hidden">
                        <FileText className="w-4 h-4 shrink-0" />
                        <span className="truncate font-mono text-xs font-bold">{attachedFile.name}</span>
                    </div>
                    <button type="button" onClick={() => setAttachedFile(null)} className="hover:text-destructive shrink-0 ml-2">
                        <X className="w-4 h-4" />
                    </button>
                </div>
            )}

            {/* --- FORM --- */}
            <form onSubmit={handleSend} className="relative flex items-center gap-2">
                <input type="file" accept=".txt,.csv,.md,.json,.xml" ref={fileInputRef} onChange={handleFileChange} className="hidden" />
                
                <Button 
                    type="button" variant="outline" size="icon" 
                    onClick={() => fileInputRef.current?.click()} 
                    disabled={isThinking} 
                    className="h-11 w-11 rounded-full shrink-0 border-border/50 bg-muted/30 hover:bg-muted"
                >
                    <Paperclip className="w-4 h-4 text-muted-foreground" />
                </Button>
                
                <div className="relative flex-1">
                    <Input 
                        value={input} 
                        onChange={handleInputChange} 
                        onKeyDown={handleKeyDown}
                        placeholder={t(placeholder)} 
                        disabled={isThinking} 
                        className="pr-12 bg-muted/50 border-transparent focus-visible:ring-primary rounded-full h-11" 
                        autoComplete="off"
                    />
                    <Button 
                        type="submit" size="icon" 
                        disabled={(!input.trim() && !attachedFile) || isThinking} 
                        className="absolute right-1 top-1 h-9 w-9 rounded-full bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm transition-transform active:scale-95"
                    >
                        <Send className="w-4 h-4 ml-0.5" />
                    </Button>
                </div>
            </form>
        </div>
    );
}