import { useForm } from '@inertiajs/react';
import type { FormEvent } from 'react';
import { IconButton } from '@/components/common/IconButton';
import { Textarea } from '@/components/ui/textarea';
import { useI18n } from '@/hooks/use-i18n';
import { cn } from '@/lib/utils';

type AddDocumentCommentFormProps = {
    submitUrl: string;
};

type FormData = {
    body: string;
};

export function AddDocumentCommentForm({ submitUrl }: AddDocumentCommentFormProps) {
    const { t } = useI18n();
    const form = useForm<FormData>({
        body: '',
    });

    const submit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        if (!form.data.body.trim()) {
            return;
        }

        form.post(submitUrl, {
            preserveScroll: true,
            preserveState: true,
            onSuccess: () => {
                form.reset('body');
                form.clearErrors();
            },
        });
    };

    const canSubmit = form.data.body.trim().length > 0 && !form.processing;

    return (
        <form
            onSubmit={submit}
            className="shrink-0 border-t border-[var(--chat-composer-border)] bg-[var(--chat-composer-bg)] px-2 py-2 backdrop-blur-sm"
        >
            <div className="flex items-end gap-1.5">
                <Textarea
                    id="document-comment-body"
                    value={form.data.body}
                    onChange={(event) => form.setData('body', event.target.value)}
                    rows={1}
                    placeholder={t('documents.admin_show.comments.body_placeholder')}
                    disabled={form.processing}
                    className={cn(
                        'max-h-24 min-h-8 flex-1 resize-none rounded-2xl border-input bg-background/80 px-3 py-2 text-[13px] shadow-none dark:bg-card/80',
                        'focus-visible:ring-1',
                    )}
                    onKeyDown={(event) => {
                        if (event.key === 'Enter' && !event.shiftKey) {
                            event.preventDefault();
                            if (canSubmit) {
                                event.currentTarget.form?.requestSubmit();
                            }
                        }
                    }}
                />
                <IconButton
                    type="submit"
                    variant="contained"
                    color="primary"
                    size="sm"
                    className="shrink-0 rounded-full"
                    disabled={!canSubmit}
                    aria-label={t('documents.admin_show.comments.send_aria')}
                    icon="solar:plain-bold-duotone"
                />
            </div>
            {form.errors.body ? <p className="mt-2 text-sm text-destructive">{form.errors.body}</p> : null}
        </form>
    );
}