{conversation.category_label}

{conversation.subject}

{t(':count messages', { count: conversation.messages_count, })}

{conversation.messages.map((message) => ( ))}

{isClosed ? (

{t('This conversation is closed.')}

) : (

form.setData('body', event.target.value)
                                    }
                                    className="min-h-32 rounded-md border bg-background px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
                                    maxLength={2000}
                                />
                            </Field>
                            <Field label="Attachments">
                                <Input
                                    ref={fileInputRef}
                                    type="file"
                                    multiple
                                    onChange={(event) =>
                                        setAttachments(event.target.files)
                                    }
                                />
                                {form.data.attachments.length > 0 && (
                                    <div className="grid gap-1 text-xs text-muted-foreground">
                                        {form.data.attachments.map((file) => (
                                            <span
                                                key={`${file.name}-${file.size}`}
                                                className="flex min-w-0 items-center gap-2"
                                            >
                                                <FileUp className="size-3.5 shrink-0" />
                                                <span className="truncate">
                                                    {file.name}
                                                </span>
                                            </span>
                                        ))}
                                    </div>
                                )}
                                {form.progress && (
                                    <progress
                                        value={form.progress.percentage}
                                        max="100"
                                        className="h-1.5 w-full"
                                    />
                                )}
                                <SupportAttachmentErrors errors={form.errors} />
                            </Field>
                            <Button
                                type="submit"
                                disabled={form.processing}
                                className="w-fit"
                            >
                                <Send className="size-4" />
                                Send reply
                            </Button>
                        </form>
                    )}
                </section>
            </div>
        </>
    );
}

SupportShow.layout = {
    breadcrumbs: [
        {
            title: 'Contact admin',
            href: supportIndex(),
        },
    ],
};

function MessageBubble({ message }: { message: SupportMessage }) {
    const isAdmin = message.author.is_admin;
    const { t } = useTranslation();

return (
        <article
            className={cn(
                'grid max-w-3xl gap-3 rounded-md border bg-card p-4 shadow-sm',
                !isAdmin && 'justify-self-end border-primary/30',
            )}
        >
            <div className="flex flex-wrap items-center gap-2 text-sm">
                <span className="font-medium">{message.author.name}</span>
                <span className="rounded-md border px-2 py-0.5 text-xs text-muted-foreground">
                    {isAdmin ? t('ADMIN') : t('YOU')}
                </span>
                {message.created_at && (
                    <span className="text-xs text-muted-foreground">
                        {formatDateTime(message.created_at)}
                    </span>
                )}
            </div>
            <p className="text-sm leading-6 break-words whitespace-pre-wrap">
                {message.body}
            </p>
            {message.attachments && message.attachments.length > 0 && (
                <AttachmentList attachments={message.attachments} />
            )}
        </article>
    );
}

function AttachmentList({ attachments }: { attachments: SupportAttachment[] }) {
    return (
        <div className="flex flex-wrap gap-2">
            {attachments.map((attachment) => (
                <a
                    key={attachment.id}
                    href={showAttachment.url(attachment.id)}
                    className="inline-flex max-w-full items-center gap-2 rounded-md border bg-background px-2 py-1 text-xs hover:bg-accent hover:text-accent-foreground"
                >
                    <FileDown className="size-3.5 shrink-0" />
                    <span className="truncate">{attachment.original_name}</span>
                    <span className="shrink-0 text-muted-foreground">
                        {formatBytes(attachment.size)}
                    </span>
                </a>
            ))}
        </div>
    );
}

function StatusBadge({ status }: { status: 'open' | 'closed' }) {
    const { t } = useTranslation();

return (
        <span
            className={cn(
                'rounded-md border px-2 py-0.5 text-xs font-medium',
                status === 'open'
                    ? 'border-success/40 bg-success/10 text-success'
                    : 'text-muted-foreground',
            )}
        >
            {status === 'open' ? t('OPEN') : t('CLOSED')}
        </span>
    );
}

function formatDateTime(value: string): string {
    return new Date(value).toLocaleString([], {
        dateStyle: 'medium',
        timeStyle: 'short',
    });
}

function formatBytes(value: number): string {
    if (value < 1024) {
        return `${value} B`;
    }

if (value < 1024 * 1024) {
        return `${Math.round(value / 102.4) / 10} KB`;
    }

return `${Math.round(value / 1024 / 102.4) / 10} MB`;
}