@props(['report'])

<div class="modal-header">
    <h5 class="modal-title" id="reportModalLabel">Report Details: {{ $report->categorySetting ? $report->categorySetting->title : 'Unknown' }}</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    @if($report->issue_reported_at)
        <div class="alert alert-danger border-danger mb-3 p-3">
            <h6 class="text-danger font-weight-bold mb-2"><i class="feather icon-alert-triangle mr-2"></i>Issue Reported</h6>
            <div class="row">
                <div class="col-md-4">
                    <strong>Category:</strong> <span class="badge badge-danger">{{ $report->issue_category }}</span>
                </div>
                <div class="col-md-8">
                    @if($report->issue_feedback)
                        <strong>Comments:</strong> <span class="text-dark">{{ $report->issue_feedback }}</span>
                    @endif
                </div>
            </div>
            <div class="mt-2 text-muted" style="font-size: 0.75rem;">
                <i class="feather icon-clock"></i> Reported on <x-date-display :date="$report->issue_reported_at" />
            </div>
        </div>
    @endif
    <div class="row">
        <!-- Details Table -->
        <div class="col-md-12">
            <table class="table table-bordered table-sm">
                <tr>
                    <th width="180" class="bg-light">Report UUID</th>
                    <td><code>{{ $report->uuid }}</code></td>
                </tr>
                <tr>
                    <th class="bg-light">Profile Name</th>
                    <td>
                        @if($report->palm_profile_json && isset($report->palm_profile_json['first_name']))
                            <strong>{{ $report->palm_profile_json['first_name'] }} {{ $report->palm_profile_json['last_name'] }}</strong>
                            <span class="text-muted">({{ ucfirst($report->palm_profile_json['gender']) }})</span>
                        @elseif($report->profile)
                            <strong>{{ $report->profile->first_name }} {{ $report->profile->last_name }}</strong>
                            <span class="text-muted">({{ ucfirst($report->profile->gender) }})</span>
                        @else
                            <span class="text-muted">Unknown Profile</span>
                        @endif
                    </td>
                </tr>
                <tr>
                    <th class="bg-light">App User</th>
                    <td>
                        @if($report->user)
                            <strong>{{ $report->user->name }}</strong> (<code>{{ $report->user->email ?? 'N/A' }}</code>)
                        @else
                            <span class="text-muted">Unknown User</span>
                        @endif
                    </td>
                </tr>
                <tr>
                    <th class="bg-light">Category / Setting</th>
                    <td>
                        @if($report->categorySetting)
                            <strong>{{ $report->categorySetting->title }}</strong>
                        @else
                            <span class="text-muted">Unknown Category</span>
                        @endif
                    </td>
                </tr>
                <tr>
                    <th class="bg-light">Generation Status</th>
                    <td>
                        <x-badge type="status" :value="$report->status" />
                    </td>
                </tr>
                @if($report->status_message)
                <tr>
                    <th class="bg-light">Status Message / Error</th>
                    <td class="{{ $report->status === 2 ? 'text-danger font-weight-bold' : 'text-muted' }}">
                        {{ $report->status_message }}
                    </td>
                </tr>
                @endif
                <tr>
                    <th class="bg-light">Token Usage</th>
                    <td>
                        <span class="badge badge-light-primary mr-1">Input: {{ number_format($report->input_tokens ?? 0) }}</span>
                        <span class="badge badge-light-info mr-1">Output: {{ number_format($report->output_tokens ?? 0) }}</span>
                        <span class="badge badge-light-success font-weight-bold">Total: {{ number_format($report->total_tokens ?? 0) }}</span>
                    </td>
                </tr>
                <tr>
                    <th class="bg-light">Status Timestamp</th>
                    <td><x-date-display :date="$report->status_timestamp" /></td>
                </tr>
                <tr>
                    <th class="bg-light">Created At</th>
                    <td><x-date-display :date="$report->created_at" /></td>
                </tr>
            </table>
        </div>
    </div>

    <!-- Collapsible Prompt Section -->
    <div class="row mt-3">
        <div class="col-12">
            <div class="card shadow-none border mb-2">
                <div class="card-header p-2 bg-light d-flex justify-content-between align-items-center" id="promptHeading">
                    <h6 class="mb-0 text-dark font-weight-bold">
                        <i class="feather icon-terminal mr-1 text-primary"></i> Gemini Request Prompt
                    </h6>
                    <button class="btn btn-link btn-sm p-0 font-weight-bold" type="button" data-toggle="collapse" data-target="#promptCollapse" aria-expanded="false" aria-controls="promptCollapse">
                        Toggle Prompt Details
                    </button>
                </div>
                <div id="promptCollapse" class="collapse" aria-labelledby="promptHeading">
                    <div class="card-body bg-dark text-white p-3 rounded-bottom" style="max-height: 250px; overflow-y: auto;">
                        <pre class="m-0 text-success" style="white-space: pre-wrap; font-family: monospace;">{{ $report->prompt }}</pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Collapsible Response JSON Section -->
    <div class="row mt-2">
        <div class="col-12">
            <div class="card shadow-none border mb-0">
                <div class="card-header p-2 bg-light d-flex justify-content-between align-items-center" id="responseHeading">
                    <h6 class="mb-0 text-dark font-weight-bold">
                        <i class="feather icon-file-text mr-1 text-primary"></i> Gemini Output Report JSON
                    </h6>
                    <button class="btn btn-link btn-sm p-0 font-weight-bold" type="button" data-toggle="collapse" data-target="#responseCollapse" aria-expanded="false" aria-controls="responseCollapse">
                        Toggle Output Details
                    </button>
                </div>
                <div id="responseCollapse" class="collapse" aria-labelledby="responseHeading">
                    <div class="card-body bg-dark text-white p-3 rounded-bottom" style="max-height: 350px; overflow-y: auto;">
                        @if($report->response)
                            <pre class="m-0"><code class="text-success">{{ json_encode($report->response, JSON_PRETTY_PRINT) }}</code></pre>
                        @else
                            <span class="text-muted">No Response Data Available</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>