{/* Header */}

{ticket.ticket_no} {ticket.priority} {ticket.status.replace('_', ' ')}

{ticket.title}

{/* Main content */}

{/* Description */} Description

{ticket.description}

{ticket.metadata && Object.keys(ticket.metadata).length > 0 && (

Additional Details

{Object.entries( ticket.metadata, ).map(([key, value]) => (

{key.replace('_', ' ')}: {' '} {String(value)}

))}

)} {/* Attachments */} {(ticket.attachments?.length ?? 0) > 0 && ( Attachments

{att.file_name} ( {( att.file_size / 1024 ).toFixed(1)}{' '} KB)

)} {/* Comments */} Comments {ticket.comments?.map((comment) => (

{comment.user?.name} {new Date( comment.created_at, ).toLocaleString()}

{comment.is_internal && ( Internal Note )}

{comment.body}

))} {(!ticket.comments || ticket.comments.length === 0) && (

No comments yet.

)}

commentForm.setData(
                                                'body',
                                                e.target.value,
                                            )
                                        }
                                        placeholder="Add a comment..."
                                        rows={3}
                                        className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
                                    />
                                    <div className="flex items-center gap-3">
                                        <label className="flex items-center gap-2 text-sm">
                                            <input
                                                type="checkbox"
                                                checked={
                                                    commentForm.data.is_internal
                                                }
                                                onChange={(e) =>
                                                    commentForm.setData(
                                                        'is_internal',
                                                        e.target.checked,
                                                    )
                                                }
                                                className="rounded border-gray-300"
                                            />
                                            Internal note
                                        </label>
                                        <Button
                                            type="submit"
                                            size="sm"
                                            disabled={
                                                commentForm.processing ||
                                                !commentForm.data.body
                                            }
                                        >
                                            Add Comment
                                        </Button>
                                    </div>
                                </form>
                            </CardContent>
                        </Card>

{/* Activity Log */}
                        {(ticket.activities?.length ?? 0) > 0 && (
                            <Card>
                                <CardHeader>
                                    <CardTitle>Activity Log</CardTitle>
                                </CardHeader>
                                <CardContent>
                                    <ul className="space-y-2">
                                        {ticket.activities!.map((activity) => (
                                            <li
                                                key={activity.id}
                                                className="flex items-center justify-between border-b pb-2 text-sm last:border-0"
                                            >
                                                <span>
                                                    {activity.description}
                                                </span>
                                                <span className="text-xs text-muted-foreground">
                                                    {new Date(
                                                        activity.created_at,
                                                    ).toLocaleString()}
                                                </span>
                                            </li>
                                        ))}
                                    </ul>
                                </CardContent>
                            </Card>
                        )}
                    </div>

{/* Sidebar */}
                    <div className="space-y-4">
                        <Card>
                            <CardHeader>
                                <CardTitle>Details</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-3 text-sm">
                                <div className="flex justify-between">
                                    <span className="text-muted-foreground">
                                        Company
                                    </span>
                                    <span className="font-medium">
                                        {ticket.company?.name}
                                    </span>
                                </div>
                                <div className="flex justify-between">
                                    <span className="text-muted-foreground">
                                        System
                                    </span>
                                    <span className="font-medium">
                                        {ticket.system?.name}
                                    </span>
                                </div>
                                <div className="flex justify-between">
                                    <span className="text-muted-foreground">
                                        Category
                                    </span>
                                    <span className="font-medium">
                                        {ticket.category?.name}
                                    </span>
                                </div>
                                <div className="flex justify-between">
                                    <span className="text-muted-foreground">
                                        Source
                                    </span>
                                    <span className="font-medium">
                                        {ticket.source}
                                    </span>
                                </div>
                                <div className="flex justify-between">
                                    <span className="text-muted-foreground">
                                        Created By
                                    </span>
                                    <span className="font-medium">
                                        {ticket.creator?.name}
                                    </span>
                                </div>
                                <div className="flex justify-between">
                                    <span className="text-muted-foreground">
                                        Created
                                    </span>
                                    <span className="font-medium">
                                        {new Date(
                                            ticket.created_at,
                                        ).toLocaleDateString()}
                                    </span>
                                </div>
                                {ticket.due_at && (
                                    <div className="flex justify-between">
                                        <span className="text-muted-foreground">
                                            SLA Due
                                        </span>
                                        <span
                                            className={`font-medium ${new Date(ticket.due_at) < new Date() ? 'text-red-600' : ''}`}
                                        >
                                            {new Date(
                                                ticket.due_at,
                                            ).toLocaleString()}
                                        </span>
                                    </div>
                                )}
                                {ticket.resolved_at && (
                                    <div className="flex justify-between">
                                        <span className="text-muted-foreground">
                                            Resolved
                                        </span>
                                        <span className="font-medium">
                                            {new Date(
                                                ticket.resolved_at,
                                            ).toLocaleString()}
                                        </span>
                                    </div>
                                )}
                            </CardContent>
                        </Card>

<Card>
                            <CardHeader>
                                <CardTitle>Assignment</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-3">
                                <Select
                                    value={assignTo}
                                    onValueChange={setAssignTo}
                                >
                                    <SelectTrigger>
                                        <SelectValue placeholder="Select agent" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {agents.map((a) => (
                                            <SelectItem
                                                key={a.id}
                                                value={String(a.id)}
                                            >
                                                {a.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                                <Button
                                    size="sm"
                                    className="w-full"
                                    onClick={handleAssign}
                                    disabled={!assignTo}
                                >
                                    Assign
                                </Button>
                            </CardContent>
                        </Card>

<Card>
                            <CardHeader>
                                <CardTitle>Change Status</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-2">
                                {[
                                    'open',
                                    'in_progress',
                                    'pending',
                                    'resolved',
                                    'closed',
                                ].map((s) => (
                                    <Button
                                        key={s}
                                        variant={
                                            ticket.status === s
                                                ? 'default'
                                                : 'outline'
                                        }
                                        size="sm"
                                        className="w-full"
                                        onClick={() => handleStatusChange(s)}
                                        disabled={ticket.status === s}
                                    >
                                        {s.replace('_', ' ')}
                                    </Button>
                                ))}
                            </CardContent>
                        </Card>

{/* File Upload */}
                        <Card>
                            <CardHeader>
                                <CardTitle>Upload Attachment</CardTitle>
                            </CardHeader>
                            <CardContent>
                                <form
                                    onSubmit={(e) => {
                                        e.preventDefault();
                                        const formData = new FormData(
                                            e.currentTarget,
                                        );
                                        router.post(
                                            `/tickets/${ticket.id}/attachments`,
                                            Object.fromEntries(formData) as any,
                                            { preserveScroll: true },
                                        );
                                    }}
                                >
                                    <input
                                        type="file"
                                        name="file"
                                        className="mb-2 w-full text-sm"
                                    />
                                    <Button
                                        type="submit"
                                        size="sm"
                                        className="w-full"
                                    >
                                        Upload
                                    </Button>
                                </form>
                            </CardContent>
                        </Card>
                    </div>
                </div>
            </div>
        </>
    );
}