@extends('layouts.app')

@section('title', 'Report Detail - Admin Panel')
@section('page_title', 'Report Details')

@section('styles')
<style>
    .widget-card {
        border-radius: 8px;
        transition: all 0.3s ease;
        margin-bottom: 20px;
    }
    .widget-card:hover {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }
    .metric-item {
        background-color: #f8f9fa;
        padding: 10px 15px;
        border-radius: 6px;
        margin-bottom: 10px;
    }
    .timeline-item {
        border-left: 3px solid #04a9f5;
        padding-left: 15px;
        position: relative;
        margin-bottom: 20px;
    }
    .timeline-item::before {
        content: '';
        width: 12px;
        height: 12px;
        background-color: #04a9f5;
        border-radius: 50%;
        position: absolute;
        left: -8px;
        top: 4px;
    }
    .section-toggle-icon {
        transition: transform 0.2s ease-in-out;
        display: inline-block;
    }
    .card-header:not(.collapsed) .section-toggle-icon {
        transform: rotate(90deg);
    }
    pre {
        word-break: break-all !important;
        white-space: pre-wrap !important;
    }
    .table {
        word-break: break-word;
    }
    @media (max-width: 767.98px) {
        .widget-card .card-header {
            flex-direction: column;
            align-items: flex-start !important;
        }
        .widget-card .card-header > div:last-child {
            margin-top: 12px;
            width: 100%;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
        .widget-card .card-header > div:last-child span,
        .widget-card .card-header > div:last-child button {
            margin-top: 4px;
            margin-bottom: 4px;
        }
    }
</style>
@endsection

@section('content')
<div class="row">
    <!-- Back Button & Actions -->
    <div class="col-12 mb-3">
        <a href="{{ route('reports.index') }}" class="btn btn-secondary btn-sm">
            <i class="feather icon-arrow-left"></i> Back to Reports
        </a>
    </div>

    <!-- Report Metadata & Overview -->
    <div class="col-md-4">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="mb-0">Report Summary</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered table-sm mb-0">
                        <tr>
                            <th class="bg-light pl-3" width="130">UUID</th>
                            <td class="pr-3"><code>{{ $report->uuid }}</code></td>
                        </tr>
                        <tr>
                            <th class="bg-light pl-3">Report ID</th>
                            <td class="pr-3"><strong>#{{ $report->formatted_id }}</strong></td>
                        </tr>
                        <tr>
                            <th class="bg-light pl-3">Profile Name</th>
                            <td class="pr-3">
                                @if($report->palm_profile_json && isset($report->palm_profile_json['first_name']))
                                    {{ $report->palm_profile_json['first_name'] }} {{ $report->palm_profile_json['last_name'] }}
                                    <span class="text-muted text-capitalize">({{ $report->palm_profile_json['gender'] }})</span>
                                @elseif($report->profile)
                                    {{ $report->profile->first_name }} {{ $report->profile->last_name }}
                                    <span class="text-muted text-capitalize">({{ $report->profile->gender }})</span>
                                @else
                                    <span class="text-muted">Unknown Profile</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th class="bg-light pl-3">App User</th>
                            <td class="pr-3">
                                @if($report->user)
                                    <a href="{{ route('app-users.show', $report->user->uuid) }}">
                                        {{ $report->user->name }}
                                    </a>
                                @else
                                    <span class="text-muted">Unknown User</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th class="bg-light pl-3">Category</th>
                            <td class="pr-3">
                                @if($report->categorySetting)
                                    <span class="font-weight-bold">{{ $report->categorySetting->title }}</span>
                                @else
                                    <span class="text-muted">Unknown Category</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th class="bg-light pl-3">Status</th>
                            <td class="pr-3">
                                <x-badge type="status" :value="$report->status" />
                            </td>
                        </tr>
                        @if($report->status_message)
                        <tr>
                            <th class="bg-light pl-3">Message</th>
                            <td class="pr-3 text-muted" style="font-size: 0.85rem;">{{ $report->status_message }}</td>
                        </tr>
                        @endif
                        <tr>
                            <th class="bg-light pl-3">Tokens Used</th>
                            <td class="pr-3">
                                <span class="badge badge-light-primary mr-1" title="Input Tokens">In: {{ number_format($report->input_tokens ?? 0) }}</span><br>
                                <span class="badge badge-light-info mr-1" title="Output Tokens">Out: {{ number_format($report->output_tokens ?? 0) }}</span><br>
                                <span class="badge badge-light-success font-weight-bold" title="Total Tokens">Total: {{ number_format($report->total_tokens ?? 0) }}</span>
                            </td>
                        </tr>
                        <tr>
                            <th class="bg-light pl-3">Language</th>
                            <td class="pr-3 text-uppercase font-weight-bold">{{ $report->language ?? 'EN' }}</td>
                        </tr>
                        <tr>
                            <th class="bg-light pl-3">Generated At</th>
                            <td class="pr-3"><x-date-display :date="$report->created_at" /></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        @if($report->issue_reported_at)
            <div class="card border-danger mt-4">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0 text-white"><i class="feather icon-alert-triangle mr-2"></i>Issue Reported</h5>
                </div>
                <div class="card-body">
                    <p class="mb-1"><strong>Category:</strong></p>
                    <span class="badge badge-danger mb-3" style="font-size: 0.9rem;">{{ $report->issue_category }}</span>
                    
                    @if($report->issue_feedback)
                        <p class="mb-1"><strong>Additional Comments:</strong></p>
                        <div class="bg-light p-2 rounded border text-dark mb-3" style="font-size: 0.9rem; white-space: pre-wrap;">{{ $report->issue_feedback }}</div>
                    @endif
                    
                    <p class="mb-0 text-muted" style="font-size: 0.8rem;">
                        <i class="feather icon-clock"></i> Reported on <x-date-display :date="$report->issue_reported_at" />
                    </p>
                </div>
            </div>
        @endif
    </div>

    <!-- Subsections & Section Details -->
    <div class="col-md-8">
        <h4 class="mb-3 font-weight-bold text-dark">Report Sections</h4>

        @if($report->sections->isEmpty())
            <div class="card">
                <div class="card-body text-center py-5 text-muted">
                    <i class="feather icon-info" style="font-size: 3rem;"></i>
                    <p class="mt-3 mb-0">No sections found for this report.</p>
                </div>
            </div>
        @else
            @foreach($report->sections as $section)
                <div class="card widget-card">
                    <div class="card-header bg-light d-flex justify-content-between align-items-center collapsed" style="cursor: pointer;" data-toggle="collapse" data-target="#sectionCollapse-{{ $section->id }}">
                        <div>
                            <h5 class="mb-0 text-primary font-weight-bold">
                                <i class="feather icon-chevron-right mr-2 section-toggle-icon"></i>
                                {{ $section->section_title }}
                            </h5>
                            @if($section->description)
                                <small class="text-muted d-block mt-1">{{ $section->description }}</small>
                            @endif
                        </div>
                        <div class="d-flex align-items-center" onclick="event.stopPropagation();">
                            @if($section->status === 'completed')
                                <span class="badge badge-light-success mr-2 text-capitalize">Completed</span>
                            @elseif($section->status === 'error')
                                <span class="badge badge-light-danger mr-2 text-capitalize">Error</span>
                            @else
                                <span class="badge badge-light-warning mr-2 text-capitalize">{{ $section->status ?: 'Pending' }}</span>
                            @endif

                            @if($section->status_timestamp)
                                <span class="text-muted mr-2" style="font-size: 0.75rem;" title="Status Timestamp">
                                    <i class="feather icon-clock"></i> <x-date-display :date="$section->status_timestamp" />
                                </span>
                            @endif

                            <span class="badge badge-light-secondary mr-2" style="font-size: 0.75rem;">
                                Tokens: {{ number_format($section->total_tokens ?? 0) }}
                            </span>
                            <button class="btn btn-outline-info btn-sm view-raw-ai" 
                                    data-title="{{ $section->section_title }}"
                                    data-prompt="{{ $section->prompt ?? ($section->categorySection ? $section->categorySection->prompt : 'N/A') }}"
                                    data-output="{{ json_encode($section->output_json, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}"
                                    data-tokens="Input: {{ number_format($section->input_tokens ?? 0) }} | Output: {{ number_format($section->output_tokens ?? 0) }} | Total: {{ number_format($section->total_tokens ?? 0) }}"
                                    data-status="{{ ucfirst($section->status ?? 'unknown') }}"
                                    data-message="{{ $section->status_message ?? 'N/A' }}"
                                    data-timestamp="{{ $section->status_timestamp ? $section->status_timestamp->copy()->setTimezone('Asia/Kolkata')->format('j F, Y h:i A') . ' IST <br> <small class=\'text-muted\'>' . $section->status_timestamp->copy()->setTimezone('UTC')->format('j F, Y h:i A') . ' UTC</small>' : 'N/A' }}">
                                <i class="feather icon-code"></i> View Raw AI Data
                            </button>
                        </div>
                    </div>
                    <div id="sectionCollapse-{{ $section->id }}" class="collapse">
                        <div class="card-body">
                        @if($section->status !== 'completed')
                            <div class="alert alert-warning mb-0">
                                <strong>Status: {{ ucfirst($section->status) }}</strong>
                                @if($section->status_message)
                                    <p class="mb-0 mt-1">{{ $section->status_message }}</p>
                                @endif
                            </div>
                        @elseif(!$section->output_json || !isset($section->output_json['sub_sections']))
                            <div class="alert alert-info mb-0">No readable subsection details generated.</div>
                        @else
                            <!-- Sub Sections Widgets Loop -->
                            @foreach($section->output_json['sub_sections'] as $widget)
                                <div class="border-bottom pb-3 mb-3 last-no-border">
                                    <h6 class="text-secondary font-weight-bold mb-2">
                                        <i class="feather icon-play text-primary mr-1" style="font-size: 0.8rem;"></i> 
                                        {{ $widget['title'] ?? 'Section Details' }} 
                                        <span class="badge badge-pill badge-light-primary text-capitalize ml-1" style="font-size: 0.7rem;">{{ str_replace('_', ' ', $widget['type'] ?? '') }}</span>
                                    </h6>

                                    @if(isset($widget['data']))
                                        @switch($widget['type'] ?? '')
                                            @case('score_card')
                                                <div class="row align-items-center bg-light p-3 rounded mx-0">
                                                    <div class="col-sm-3 text-center">
                                                        <div class="display-4 font-weight-bold text-success">{{ $widget['data']['score'] ?? 'N/A' }}</div>
                                                        <span class="badge badge-success font-weight-bold">Grade: {{ $widget['data']['grade'] ?? 'N/A' }}</span>
                                                    </div>
                                                    <div class="col-sm-9">
                                                        <h6 class="font-weight-bold text-dark">{{ $widget['data']['reading_title'] ?? '' }}</h6>
                                                        <p class="mb-0 text-muted">{{ $widget['data']['summary'] ?? '' }}</p>
                                                    </div>
                                                </div>
                                                @break

                                            @case('text_card')
                                                <div class="bg-light p-3 rounded">
                                                    @if(isset($widget['data']['type']))
                                                        <span class="badge badge-primary mb-2">{{ $widget['data']['type'] }}</span>
                                                    @endif
                                                    <p class="mb-0 text-dark" style="white-space: pre-wrap;">{{ $widget['data']['description'] ?? '' }}</p>
                                                </div>
                                                @break

                                            @case('info_card')
                                                <div class="bg-light p-3 rounded">
                                                    @if(isset($widget['data']['summary']))
                                                        <p class="text-dark font-weight-bold mb-3">{{ $widget['data']['summary'] }}</p>
                                                    @endif
                                                    @if(isset($widget['data']['metrics']))
                                                        <div class="row">
                                                            @foreach($widget['data']['metrics'] as $key => $val)
                                                                <div class="col-md-6 mb-2">
                                                                    <div class="d-flex justify-content-between bg-white border p-2 rounded">
                                                                        <span class="text-muted">{{ $key }}</span>
                                                                        <span class="font-weight-bold text-primary text-capitalize">{{ $val }}</span>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    @endif
                                                </div>
                                                @break

                                            @case('list')
                                                <div class="card shadow-none border mb-0">
                                                    <div class="card-body p-3">
                                                        <ul class="list-group list-group-flush">
                                                            @foreach($widget['data']['items'] ?? [] as $item)
                                                                <li class="list-group-item px-0 py-2 border-0 d-flex align-items-start">
                                                                    @if(isset($widget['data']['is_positive']) && $widget['data']['is_positive'])
                                                                        <i class="feather icon-check-circle text-success mr-2 mt-1"></i>
                                                                    @else
                                                                        <i class="feather icon-alert-circle text-info mr-2 mt-1"></i>
                                                                    @endif
                                                                    <span class="text-dark">{{ $item }}</span>
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                </div>
                                                @break

                                            @case('bar_chart')
                                                <div class="bg-light p-3 rounded">
                                                    @foreach($widget['data']['items'] ?? [] as $item)
                                                        <div class="mb-3">
                                                            <div class="d-flex justify-content-between mb-1">
                                                                <span class="font-weight-bold text-dark">{{ $item['name'] ?? '' }}</span>
                                                                <span class="font-weight-bold text-primary">{{ $item['score'] ?? 0 }}%</span>
                                                            </div>
                                                            <div class="progress" style="height: 10px;">
                                                                <div class="progress-bar bg-primary" role="progressbar" style="width: {{ $item['score'] ?? 0 }}%" aria-valuenow="{{ $item['score'] ?? 0 }}" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                            @if(isset($item['reason']))
                                                                <small class="text-muted d-block mt-1">{{ $item['reason'] }}</small>
                                                            @endif
                                                        </div>
                                                    @endforeach
                                                </div>
                                                @break

                                            @case('progress')
                                                <div class="bg-light p-3 rounded">
                                                    @foreach($widget['data']['metrics'] ?? [] as $name => $pct)
                                                        <div class="mb-3">
                                                            <div class="d-flex justify-content-between mb-1">
                                                                <span class="font-weight-bold text-dark">{{ $name }}</span>
                                                                <span class="font-weight-bold text-primary">{{ $pct }}%</span>
                                                            </div>
                                                            <div class="progress" style="height: 10px;">
                                                                <div class="progress-bar bg-success" role="progressbar" style="width: {{ $pct }}%" aria-valuenow="{{ $pct }}" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                                @break

                                            @case('timeline')
                                                <div class="card shadow-none border mb-0">
                                                    <div class="card-body p-3">
                                                        @foreach($widget['data']['items'] ?? [] as $item)
                                                            <div class="timeline-item">
                                                                <div class="d-flex justify-content-between">
                                                                    <strong class="text-primary">Age: {{ $item['age_range'] ?? '' }}</strong>
                                                                    <span class="badge badge-light-info text-capitalize">{{ $item['outlook'] ?? '' }}</span>
                                                                </div>
                                                                <p class="text-dark mb-0 mt-1">{{ $item['description'] ?? '' }}</p>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                                @break

                                            @case('table')
                                                <div class="table-responsive">
                                                    <table class="table table-bordered table-striped table-sm mb-0">
                                                        @if(isset($widget['data']['headers']))
                                                            <thead class="bg-light">
                                                                <tr>
                                                                    @foreach($widget['data']['headers'] as $header)
                                                                        <th>{{ $header }}</th>
                                                                    @endforeach
                                                                </tr>
                                                            </thead>
                                                        @endif
                                                        <tbody>
                                                            @foreach($widget['data']['rows'] ?? [] as $row)
                                                                <tr>
                                                                    @foreach($row as $cell)
                                                                        <td>{{ $cell }}</td>
                                                                    @endforeach
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                                @break

                                            @case('recommendations')
                                                <div class="bg-light p-3 rounded">
                                                    <ul class="list-unstyled mb-0">
                                                        @foreach($widget['data']['items'] ?? [] as $item)
                                                            <li class="mb-2 d-flex align-items-start">
                                                                <i class="feather icon-star text-warning mr-2 mt-1"></i>
                                                                <span class="text-dark">{{ $item }}</span>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                                @break

                                            @case('action_plan')
                                                <div class="bg-light p-3 rounded">
                                                    @foreach($widget['data']['plans'] ?? [] as $plan)
                                                        <div class="mb-3">
                                                            <h6 class="font-weight-bold text-primary">{{ $plan['timeframe'] ?? '' }}</h6>
                                                            <ul class="mb-0">
                                                                @foreach($plan['tasks'] ?? [] as $task)
                                                                    <li class="text-dark">{{ $task }}</li>
                                                                @endforeach
                                                            </ul>
                                                        </div>
                                                    @endforeach
                                                </div>
                                                @break

                                            @case('gemstone_remedy')
                                                <div class="bg-light p-3 rounded">
                                                    <div class="row">
                                                        <div class="col-md-6 mb-2">
                                                            <strong>Gemstone:</strong> <span class="text-primary font-weight-bold">{{ $widget['data']['gemstone'] ?? 'N/A' }}</span>
                                                        </div>
                                                        <div class="col-md-6 mb-2">
                                                            <strong>Weight:</strong> {{ $widget['data']['weight'] ?? 'N/A' }}
                                                        </div>
                                                        <div class="col-md-6 mb-2">
                                                            <strong>Metal:</strong> {{ $widget['data']['metal'] ?? 'N/A' }}
                                                        </div>
                                                        <div class="col-md-6 mb-2">
                                                            <strong>Wear On Finger:</strong> {{ $widget['data']['finger'] ?? 'N/A' }}
                                                        </div>
                                                        @if(isset($widget['data']['mantra']))
                                                            <div class="col-12 mb-2">
                                                                <strong>Mantra:</strong> <code class="text-dark">{{ $widget['data']['mantra'] }}</code>
                                                            </div>
                                                        @endif
                                                        @if(isset($widget['data']['key_benefits']))
                                                            <div class="col-12">
                                                                <strong>Key Benefits:</strong>
                                                                <ul class="mb-0">
                                                                    @foreach($widget['data']['key_benefits'] as $benefit)
                                                                        <li class="text-dark">{{ $benefit }}</li>
                                                                    @endforeach
                                                                </ul>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                                @break

                                            @default
                                                <div class="bg-light p-3 rounded text-muted">
                                                    <code>{{ json_encode($widget['data']) }}</code>
                                                </div>
                                        @endswitch
                                    @endif
                                </div>
                            @endforeach
                        @endif
                    </div>
                    </div>
                </div>
            @endforeach
        @endif
    </div>
</div>

<!-- Modal for Raw AI Data -->
<div class="modal fade" id="rawAiModal" tabindex="-1" role="dialog" aria-labelledby="rawAiModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="rawAiModalLabel">Raw AI Data</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Navigation Tabs -->
                <ul class="nav nav-tabs mb-3" id="rawAiTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="prompt-tab" data-toggle="tab" href="#prompt" role="tab" aria-controls="prompt" aria-selected="true">Prompt Template</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="output-tab" data-toggle="tab" href="#output" role="tab" aria-controls="output" aria-selected="false">Output JSON</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="metadata-tab" data-toggle="tab" href="#metadata" role="tab" aria-controls="metadata" aria-selected="false">Metadata</a>
                    </li>
                </ul>

                <!-- Tab Content -->
                <div class="tab-content" id="rawAiTabContent">
                    <!-- Prompt Tab -->
                    <div class="tab-pane fade show active" id="prompt" role="tabpanel" aria-labelledby="prompt-tab">
                        <pre class="bg-dark text-white p-3 rounded" style="max-height: 450px; overflow-y: auto; white-space: pre-wrap; font-family: monospace;" id="modalPromptContent"></pre>
                    </div>

                    <!-- Output JSON Tab -->
                    <div class="tab-pane fade" id="output" role="tabpanel" aria-labelledby="output-tab">
                        <pre class="bg-dark text-white p-3 rounded" style="max-height: 450px; overflow-y: auto; white-space: pre-wrap; font-family: monospace;" id="modalOutputContent"></pre>
                    </div>

                    <!-- Metadata Tab -->
                    <div class="tab-pane fade" id="metadata" role="tabpanel" aria-labelledby="metadata-tab">
                        <table class="table table-bordered">
                            <tr>
                                <th width="180">Status</th>
                                <td id="modalMetaStatus"></td>
                            </tr>
                            <tr>
                                <th>Status Message</th>
                                <td id="modalMetaMessage"></td>
                            </tr>
                            <tr>
                                <th>Token Counts</th>
                                <td id="modalMetaTokens"></td>
                            </tr>
                            <tr>
                                <th>Status Timestamp</th>
                                <td id="modalMetaTimestamp"></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $('.view-raw-ai').on('click', function() {
            var title = $(this).data('title');
            var prompt = $(this).data('prompt');
            var output = $(this).data('output');
            var tokens = $(this).data('tokens');
            var status = $(this).data('status');
            var message = $(this).data('message');
            var timestamp = $(this).data('timestamp');

            $('#rawAiModalLabel').text('Raw AI Data: ' + title);
            $('#modalPromptContent').text(prompt);
            
            if (typeof output === 'object' && output !== null) {
                $('#modalOutputContent').text(JSON.stringify(output, null, 4));
            } else {
                try {
                    var jsonObj = JSON.parse(output);
                    $('#modalOutputContent').text(JSON.stringify(jsonObj, null, 4));
                } catch(e) {
                    $('#modalOutputContent').text(output);
                }
            }

            $('#modalMetaStatus').text(status);
            $('#modalMetaMessage').text(message);
            $('#modalMetaTokens').text(tokens);
            $('#modalMetaTimestamp').html(timestamp);

            $('#rawAiModal').modal('show');
        });
    });
</script>
@endsection