import React, { useState } from 'react';
import { Link } from '@inertiajs/react';
import { Avatar, AvatarFallback, AvatarImage } from "@/Components/ui/avatar";
import { Button } from "@/Components/ui/button";
import { Textarea } from "@/Components/ui/textarea";
import { Loader2, Send, Lock } from "lucide-react";
import useTranslation from '@/hooks/useTranslation';

export default function CommentInput({ auth, areCommentsOpen, onPost }) {
    const { t } = useTranslation();
    const [content, setContent] = useState("");
    const [submitting, setSubmitting] = useState(false);

    if (!areCommentsOpen) {
        return (
            <div className="text-center py-4 bg-muted/30 rounded-md border border-dashed text-muted-foreground text-sm flex flex-col items-center gap-2">
                <Lock className="w-5 h-5 opacity-50" />
                <span>{t('_comments_closed', 'Comments are currently turned off.')}</span>
            </div>
        );
    }

    if (!auth?.user) {
        return (
            <div className="text-center py-2 bg-muted/30 rounded-md border border-dashed">
                <p className="text-sm text-muted-foreground mb-2">{t('_login_to_comment', 'Please log in to join the discussion.')}</p>
                <div className="flex justify-center gap-2">
                    <Button variant="outline" size="sm" asChild>
                        <Link href={route('login')}>{t('_login', 'Log In')}</Link>
                    </Button>
                    <Button size="sm" asChild>
                        <Link href={route('register')}>{t('_signup', 'Sign Up')}</Link>
                    </Button>
                </div>
            </div>
        );
    }

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (!content.trim()) return;
        
        setSubmitting(true);
        try {
            await onPost(content);
            setContent("");
        } catch (error) {
            // Handled by parent
        } finally {
            setSubmitting(false);
        }
    };

    return (
        <form onSubmit={handleSubmit} className="flex gap-2 items-end">
            <Avatar className="w-8 h-8 hidden sm:block shrink-0">
                <AvatarImage src={auth.user.avatar} />
                <AvatarFallback>{auth.user.name.charAt(0)}</AvatarFallback>
            </Avatar>
            <div className="flex-1 relative">
                <Textarea 
                    placeholder={t('_add_comment', 'Add a comment...')}
                    value={content}
                    onChange={(e) => setContent(e.target.value)}
                    className="min-h-[40px] max-h-[120px] pe-10 resize-none text-start rtl:text-right"
                />
                <Button 
                    size="icon" 
                    className="absolute bottom-1 end-1 h-7 w-7 rtl:end-auto rtl:left-1" 
                    type="submit"
                    disabled={submitting || !content.trim()}
                >
                    {submitting ? <Loader2 className="w-3 h-3 animate-spin" /> : <Send className="w-3 h-3 rtl:-scale-x-100" />}
                </Button>
            </div>
        </form>
    );
}