import { Clock } from 'lucide-react';
import type { DocumentComment } from '@/features/documents/types';
import { useI18n } from '@/hooks/use-i18n';
import { formatCommentDateTimeRo } from '@/lib/datetime';
import { cn } from '@/lib/utils';

type DocumentCommentItemProps = {
    comment: DocumentComment;
    isOwn: boolean;
};

function roleLabel(
    t: (key: string) => string,
    role: string,
    isInternal: boolean,
): string {
    if (isInternal) {
        return t('documents.admin_show.comments.internal_badge');
    }

    if (role === 'client') {
        return t('documents.admin_show.comments.role_client');
    }

    return t('documents.admin_show.comments.role_staff');
}

export function DocumentCommentItem({ comment, isOwn }: DocumentCommentItemProps) {
    const { t } = useI18n();
    const postedAt = formatCommentDateTimeRo(comment.created_at);
    const badgeLabel = roleLabel(t, comment.author_role ?? 'staff', comment.is_internal);

    return (
        <div
            className={cn('flex w-full px-1', isOwn ? 'justify-start' : 'justify-end')}
            data-comment-own={isOwn}
        >
            <article
                className={cn(
                    'relative w-full max-w-[min(100%,20rem)] overflow-hidden rounded-lg shadow-[var(--chat-bubble-shadow)]',
                    isOwn
                        ? 'rounded-bl-sm bg-[var(--chat-bubble-own-bg)] text-[var(--chat-bubble-own-fg)]'
                        : 'rounded-tr-sm bg-[var(--chat-bubble-other-bg)] text-card-foreground',
                )}
            >
                <header
                    className={cn(
                        'flex items-center justify-between gap-2 border-b px-3 py-1.5',
                        isOwn ? 'border-[var(--chat-bubble-own-divider)]' : 'border-border/50',
                    )}
                >
                    <span
                        className={cn(
                            'truncate text-sm font-semibold',
                            isOwn ? 'text-[var(--chat-bubble-own-name)]' : 'text-foreground',
                        )}
                    >
                        {comment.author_name}
                    </span>
                    <span
                        className={cn(
                            'shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-medium leading-none',
                            isOwn
                                ? 'border-[var(--chat-bubble-own-badge-border)] bg-[var(--chat-bubble-own-badge-bg)] text-[var(--chat-bubble-own-badge-fg)]'
                                : 'border-border/70 bg-muted/50 text-muted-foreground',
                        )}
                    >
                        {badgeLabel}
                    </span>
                </header>

                <div className="px-3 py-2.5">
                    <p className="whitespace-pre-wrap break-words text-sm leading-relaxed text-inherit">
                        {comment.body}
                    </p>
                </div>

                {postedAt ? (
                    <footer
                        className={cn(
                            'flex items-center gap-1.5 border-t px-3 py-1.5 text-[11px]',
                            isOwn
                                ? 'border-[var(--chat-bubble-own-divider)] text-[var(--chat-bubble-own-meta)]'
                                : 'border-border/50 text-muted-foreground',
                        )}
                    >
                        <Clock className="h-3 w-3 shrink-0 opacity-70" aria-hidden />
                        <time dateTime={comment.created_at}>{postedAt}</time>
                    </footer>
                ) : null}
            </article>
        </div>
    );
}