import { AddDocumentCommentForm } from '@/features/documents/components/add-document-comment-form';
import { DocumentCommentsList } from '@/features/documents/components/document-comments-list';
import type { DocumentDetail } from '@/features/documents/types';
import { useAuthorization } from '@/hooks/use-authorization';
import { useI18n } from '@/hooks/use-i18n';
import { cn } from '@/lib/utils';

type DocumentCommentsTabProps = {
    document: DocumentDetail;
    className?: string;
};

const chatPanelClass =
    'border-[var(--chat-panel-border)] bg-[var(--chat-panel-bg)] [background-image:radial-gradient(var(--chat-panel-dot)_0.65px,transparent_0.65px)] [background-size:10px_10px]';

export function DocumentCommentsTab({ document, className }: DocumentCommentsTabProps) {
    const { t } = useI18n();
    const { can, hasRole } = useAuthorization();
    const isClient = hasRole('client');
    const canViewDiscussions = can('view document discussions') || hasRole('admin') || hasRole('accountant') || isClient;
    const canAddComments = can('add document comments') || hasRole('admin') || hasRole('accountant') || isClient;
    const commentSubmitUrl = isClient
        ? `/client/documents/${document.id}/comments`
        : `/admin/documents/${document.id}/comments`;

    if (!canViewDiscussions) {
        return (
            <div className="rounded-md border border-dashed p-6 text-sm text-muted-foreground">
                {t('documents.admin_show.comments.no_permission')}
            </div>
        );
    }

    return (
        <div
            className={cn(
                'flex max-h-[min(42vh,20rem)] min-h-[14rem] flex-col overflow-hidden rounded-lg border',
                chatPanelClass,
                className,
            )}
        >
            <DocumentCommentsList comments={document.comments} />
            {canAddComments ? <AddDocumentCommentForm submitUrl={commentSubmitUrl} /> : null}
        </div>
    );
}