{/* Back button */} {t('back_to_support', 'Back to Help & Support')} {/* Ticket main card */}

{ticket.ticket_number} {getPriorityBadge(ticket.priority)} {getStatusBadge(ticket.status)}

{t('raised_on', 'Raised on:')} {ticket.created_at}

{ticket.reason && (

Support Category: {ticket.reason}

)}

{ticket.subject}

{t('original_message', 'Original Message')}

{ticket.description}

{ticket.voice_note_url && (

{t('voice_note_attachment', 'Voice Note Attachment')}

)}

{/* Replies header */}

{t('ticket_replies', 'Discussion History')} ({replies.length})

{/* Replies list */}

{replies.map((reply) => { const isSystemDev = reply.is_developer_response; const isAdmin = reply.is_admin; return (

{isSystemDev ? (

) : (

{reply.sender_name.charAt(0)}

)} {reply.sender_name}

{reply.created_at}

{reply.message && (

{reply.message}

)} {reply.voice_note_url && (

)}

); })} {replies.length === 0 && (

{t('no_replies_yet', 'No replies posted yet. Our team is investigating.')}

)}

{/* Reply Form */} {ticket.status !== 'closed' ? (

{t('post_a_reply', 'Post a Reply')}

{t('post_a_reply_desc', 'Need to add info or follow up? Type your response below.')}

setData('message', e.target.value)}
                                    className={`w-full p-3 border rounded-xl bg-slate-50/50 text-slate-800 outline-none focus:bg-white focus:border-[#185FA5] transition-all leading-relaxed ${
                                        errors.message ? 'border-red-400 bg-red-50/20' : 'border-slate-200'
                                    }`}
                                    required={!data.voice_note}
                                />
                                {errors.message && (
                                    <p className="text-[10px] text-red-500 font-semibold mt-1">{errors.message}</p>
                                )}
                            </div>

{/* Voice Note Attachment */}
                            <div className="space-y-1.5">
                                <label className="block text-slate-400 uppercase tracking-widest text-[9px] font-black">{t('voice_note_reply', 'Voice Note Attachment (Optional)')}</label>
                                {!data.voice_note ? (
                                    <div className="border-2 border-dashed border-slate-200 rounded-2xl p-4 text-center space-y-1 relative hover:border-[#185FA5] transition-all bg-slate-50/50">
                                        <UploadCloud className="w-6 h-6 text-slate-400 mx-auto" />
                                        <div className="text-[11px] font-bold text-slate-600">{t('upload_voice_note', 'Upload a voice note or audio file')}</div>
                                        <input 
                                            type="file" 
                                            accept="audio/*"
                                            onChange={e => setData('voice_note', e.target.files[0])}
                                            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" 
                                        />
                                    </div>
                                ) : (
                                    <div className="border border-slate-200 rounded-2xl p-3 bg-slate-50/70 space-y-2">
                                        <div className="flex items-center justify-between">
                                            <div className="flex items-center space-x-2.5 min-w-0">
                                                <Volume2 className="w-4 h-4 text-[#185FA5] flex-shrink-0" />
                                                <div className="min-w-0">
                                                    <p className="text-[11px] font-extrabold text-slate-800 truncate">{data.voice_note.name}</p>
                                                </div>
                                            </div>
                                            <button
                                                type="button"
                                                onClick={() => setData('voice_note', null)}
                                                className="p-1 bg-slate-100 hover:bg-slate-200 rounded-full text-slate-500 transition-colors"
                                            >
                                                <X className="w-3.5 h-3.5" />
                                            </button>
                                        </div>
                                        <audio 
                                            src={URL.createObjectURL(data.voice_note)} 
                                            controls 
                                            className="w-full h-8 outline-none" 
                                        />
                                    </div>
                                )}
                                {errors.voice_note && (
                                    <p className="text-[10px] text-red-500 font-semibold mt-1">{errors.voice_note}</p>
                                )}
                            </div>

<div className="flex justify-end">
                                <button
                                    type="submit"
                                    disabled={processing}
                                    className="px-5 py-2.5 rounded-xl bg-[#185FA5] hover:bg-[#144f8a] text-white transition-all shadow-md disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2 text-xs font-bold"
                                >
                                    {processing ? (
                                        <>
                                            <span className="w-3 h-3 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                                            <span>{t('submitting', 'Posting...')}</span>
                                        </>
                                    ) : (
                                        <>
                                            <span>{t('send_reply', 'Post Reply')}</span>
                                            <Send className="w-3.5 h-3.5" />
                                        </>
                                    )}
                                </button>
                            </div>
                        </form>
                    </div>
                ) : (
                    <div className="bg-slate-100 border border-slate-200 rounded-3xl p-6 flex items-center justify-between gap-4">
                        <div className="flex items-center space-x-3.5">
                            <div className="w-10 h-10 rounded-xl bg-slate-200 text-slate-600 flex items-center justify-center flex-shrink-0 border border-slate-300">
                                <Lock className="w-5 h-5" />
                            </div>
                            <div>
                                <h4 className="font-extrabold text-xs text-slate-800">{t('ticket_closed_title', 'This support ticket has been closed')}</h4>
                                <p className="text-[10px] text-slate-400 font-bold">{t('ticket_closed_desc', 'This discussion is locked. If the problem persists, please create a new support ticket.')}</p>
                            </div>
                        </div>
                    </div>
                )}

</div>
        </EmployerLayout>
    );
}