"use client";

import { useEffect, useRef, useState } from 'react';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { Send, StopCircle, Sparkles } from 'lucide-react';
import { useChatStore } from '@/store/use-chat';

export function ChatInput() {
    const { sendMessage, isTyping, phase, generateDraft } = useChatStore();
    const [input, setInput] = useState('');
    const textareaRef = useRef<HTMLTextAreaElement>(null);

    // Auto-resize textarea
    useEffect(() => {
        if (textareaRef.current) {
            textareaRef.current.style.height = 'auto';
            textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 120)}px`;
        }
    }, [input]);

    const handleSend = async () => {
        if (!input.trim() || isTyping) return;
        const msg = input;
        setInput(''); // Clear immediately for UX
        await sendMessage(msg);
    };

    const handleKeyDown = (e: React.KeyboardEvent) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            handleSend();
        }
    };

    return (
        <div className="p-4 bg-card/80 backdrop-blur-md border-t border-border sticky bottom-0 z-10 w-full transition-all duration-300">
            <div className="flex gap-2 items-end max-w-3xl mx-auto">
                <Textarea
                    ref={textareaRef}
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    onKeyDown={handleKeyDown}
                    placeholder={phase === 'elicitation' ? "Answer the question..." : "Record your thoughts..."}
                    className="resize-none min-h-[44px] max-h-[120px] py-3 rounded-xl border-input focus:ring-ring shadow-sm bg-background/50"
                    rows={1}
                />
                <Button
                    onClick={handleSend}
                    disabled={!input.trim() || isTyping}
                    size="icon"
                    className="h-11 w-11 rounded-xl shrink-0 bg-slate-800 hover:bg-slate-700 transition-colors shadow-sm"
                >
                    {isTyping ? <StopCircle className="h-5 w-5 animate-pulse" /> : <Send className="h-5 w-5" />}
                </Button>
            </div>

            {/* Contextual Action Button (e.g. Draft) */}
            {phase === 'elicitation' && !isTyping && (
                <div className="absolute -top-14 left-1/2 -translate-x-1/2 animate-in slide-in-from-bottom-2 fade-in">
                    <Button
                        onClick={() => generateDraft()}
                        variant="secondary"
                        size="sm"
                        className="shadow-lg border-indigo-200 bg-indigo-50 hover:bg-indigo-100 text-indigo-700 gap-2 rounded-full px-6"
                    >
                        <Sparkles className="w-4 h-4" />
                        Summarize & Draft
                    </Button>
                </div>
            )}
        </div>
    );
}
