{ticket.title}

{(canManage || ticket.requester?.id === auth.user.id) && ( )} {!canManage && ticket.requester?.id === auth.user.id && ticket.status !== 'closed' && ticket.status !== 'resolved' && ( )}

{/* Main Content */}

{/* Description */} Description

{ticket.description}

{/* Comments */} Activity ({ticket.comments?.length || 0}) {ticket.comments && ticket.comments.length > 0 ? ( ticket.comments.map((comment) => (

{comment.user.name[0]}

{comment.user.name} {comment.user.role && comment.user.role !== 'user' && ( {comment.user.role} )}

{new Date(comment.created_at).toLocaleString()} {comment.is_internal && ( Internal )}

{comment.body}

)) ) : (

No comments yet. Be the first to comment.

)} {/* Add Comment */}

commentForm.setData('body', e.target.value)}
                                        placeholder="Write a comment..."
                                        rows={3}
                                        className="text-sm"
                                    />
                                    <div className="flex items-center justify-between">
                                        <div>
                                            {canManage && (
                                                <Button
                                                    type="button"
                                                    variant="ghost"
                                                    size="sm"
                                                    onClick={() => {
                                                        setShowInternalInput(!showInternalInput);
                                                        commentForm.setData('is_internal', !commentForm.data.is_internal);
                                                    }}
                                                    className={`text-xs gap-1 ${commentForm.data.is_internal
                                                        ? 'text-amber-600'
                                                        : ''
                                                        }`}
                                                >
                                                    {commentForm.data.is_internal ? (
                                                        <>
                                                            <EyeOff className="h-3 w-3" />
                                                            Internal Note
                                                        </>
                                                    ) : (
                                                        <>
                                                            <Eye className="h-3 w-3" />
                                                            Public Comment
                                                        </>
                                                    )}
                                                </Button>
                                            )}
                                        </div>
                                        <Button
                                            type="submit"
                                            size="sm"
                                            disabled={commentForm.processing || !commentForm.data.body.trim()}
                                            className="gap-1"
                                        >
                                            <Send className="h-3 w-3" />
                                            Send
                                        </Button>
                                    </div>
                                </form>
                            </CardContent>
                        </Card>
                    </div>

{/* Sidebar Info */}
                    <div className="space-y-6">
                        {/* Ticket Info */}
                        <Card>
                            <CardHeader className="pb-3">
                                <CardTitle className="text-base">Details</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div className="space-y-3 text-sm">
                                    <div className="flex items-center gap-3">
                                        <User2 className="h-4 w-4 text-muted-foreground shrink-0" />
                                        <div>
                                            <p className="text-xs text-muted-foreground">Requester</p>
                                            <p className="font-medium">{ticket.requester?.name}</p>
                                            {ticket.requester?.department && (
                                                <p className="text-xs text-muted-foreground">
                                                    {ticket.requester.department}
                                                </p>
                                            )}
                                        </div>
                                    </div>

<div className="flex items-center gap-3">
                                        <Monitor className="h-4 w-4 text-muted-foreground shrink-0" />
                                        <div>
                                            <p className="text-xs text-muted-foreground">Category</p>
                                            <p className="font-medium">
                                                {categoryLabels[ticket.category] || ticket.category}
                                            </p>
                                        </div>
                                    </div>

{ticket.location && (
                                        <>
                                            <Separator />
                                            <div className="flex items-center gap-3">
                                                <MapPin className="h-4 w-4 text-muted-foreground shrink-0" />
                                                <div>
                                                    <p className="text-xs text-muted-foreground">Location</p>
                                                    <p className="font-medium">{ticket.location}</p>
                                                </div>
                                            </div>
                                        </>
                                    )}

{ticket.equipment_type && (
                                        <>
                                            <Separator />
                                            <div className="flex items-center gap-3">
                                                <Monitor className="h-4 w-4 text-muted-foreground shrink-0" />
                                                <div>
                                                    <p className="text-xs text-muted-foreground">Equipment</p>
                                                    <p className="font-medium">{ticket.equipment_type}</p>
                                                </div>
                                            </div>
                                        </>
                                    )}

<div className="flex items-center gap-3">
                                        <Calendar className="h-4 w-4 text-muted-foreground shrink-0" />
                                        <div>
                                            <p className="text-xs text-muted-foreground">Created</p>
                                            <p className="font-medium">
                                                {new Date(ticket.created_at).toLocaleString()}
                                            </p>
                                        </div>
                                    </div>

{ticket.resolved_at && (
                                        <>
                                            <Separator />
                                            <div className="flex items-center gap-3">
                                                <Clock className="h-4 w-4 text-muted-foreground shrink-0" />
                                                <div>
                                                    <p className="text-xs text-muted-foreground">Resolved</p>
                                                    <p className="font-medium">
                                                        {new Date(ticket.resolved_at).toLocaleString()}
                                                    </p>
                                                </div>
                                            </div>
                                        </>
                                    )}
                                </div>
                            </CardContent>
                        </Card>

{/* Management Panel - Staff Only */}
                        {canManage && (
                            <Card className="border-primary/30">
                                <CardHeader className="pb-3">
                                    <CardTitle className="text-base">Manage Ticket</CardTitle>
                                    <CardDescription>Staff controls</CardDescription>
                                </CardHeader>
                                <CardContent className="space-y-4">
                                    <div className="space-y-2">
                                        <label className="text-xs font-medium text-muted-foreground">
                                            Status
                                        </label>
                                        <Select
                                            value={manageForm.data.status}
                                            onValueChange={(v) => updateTicket('status', v)}
                                        >
                                            <SelectTrigger>
                                                <SelectValue />
                                            </SelectTrigger>
                                            <SelectContent>
                                                {Object.entries(statuses).map(([key, label]) => (
                                                    <SelectItem key={key} value={key}>
                                                        {label}
                                                    </SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                    </div>

<div className="space-y-2">
                                        <label className="text-xs font-medium text-muted-foreground">
                                            Priority
                                        </label>
                                        <Select
                                            value={manageForm.data.priority}
                                            onValueChange={(v) => updateTicket('priority', v)}
                                        >
                                            <SelectTrigger>
                                                <SelectValue />
                                            </SelectTrigger>
                                            <SelectContent>
                                                {Object.entries(priorities).map(([key, label]) => (
                                                    <SelectItem key={key} value={key}>
                                                        {label}
                                                    </SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                    </div>

<div className="space-y-2">
                                        <label className="text-xs font-medium text-muted-foreground">
                                            Assign To
                                        </label>
                                        <Select
                                            value={manageForm.data.assigned_to}
                                            onValueChange={(v) => updateTicket('assigned_to', v)}
                                        >
                                            <SelectTrigger>
                                                <SelectValue placeholder="Unassigned" />
                                            </SelectTrigger>
                                            <SelectContent>
                                                {technicians.map((tech) => (
                                                    <SelectItem key={tech.id} value={tech.id.toString()}>
                                                        {tech.name}
                                                    </SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                    </div>
                                </CardContent>
                            </Card>
                        )}
                    </div>
                </div>
            </div>
        </AppLayout>
    );
}