@extends('layouts.app')

@section('title', 'Generated Reports - Admin Panel')
@section('page_title', 'Generated Reports')

@section('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">
<style>
    .rotate {
        animation: rotation 1.5s infinite linear;
    }
    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(359deg);
        }
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>Generated Reports History</h5>
            </div>
            <div class="card-body table-border-style">
                <div class="table-responsive">
                    <table id="reportsTable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Sr. No.</th>
                                <th>Report ID</th>
                                <th>Profile Name</th>
                                <th>App User</th>
                                <th>Category / Type</th>
                                <th>Status</th>
                                <th>Generated At (UTC)</th>
                                <th>Tokens (In / Out / Total)</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($reports as $report)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>
                                    <a href="{{ route('reports.show', $report->uuid) }}">
                                        <strong>#{{ $report->formatted_id }}</strong>
                                    </a>
                                </td>
                                <td>
                                    @if($report->palm_profile_json && isset($report->palm_profile_json['first_name']))
                                        {{ $report->palm_profile_json['first_name'] }} {{ $report->palm_profile_json['last_name'] }}
                                    @elseif($report->profile)
                                        <a href="{{ route('palm-profiles.index') }}?search={{ $report->profile->first_name }}">
                                            {{ $report->profile->first_name }} {{ $report->profile->last_name }}
                                        </a>
                                    @else
                                        <span class="text-muted">Unknown Profile</span>
                                    @endif
                                </td>
                                <td>
                                    @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>
                                <td>
                                    @if($report->categorySetting)
                                        <span class="font-weight-bold">{{ $report->categorySetting->title }}</span>
                                    @else
                                        <span class="text-muted">Unknown Category</span>
                                    @endif
                                </td>
                                <td>
                                    <x-badge type="status" :value="$report->status" />
                                    @if($report->issue_reported_at)
                                        <span class="badge badge-light-danger mt-1 d-block text-capitalize">Issue Reported</span>
                                    @endif
                                </td>
                                <td><x-date-display :date="$report->created_at" /></td>
                                <td>
                                    <span class="badge badge-light-primary" title="Input Tokens">In: {{ number_format($report->input_tokens ?? 0) }}</span>
                                    <span class="badge badge-light-info" title="Output Tokens">Out: {{ number_format($report->output_tokens ?? 0) }}</span>
                                    <span class="badge badge-light-success font-weight-bold" title="Total Tokens">Total: {{ number_format($report->total_tokens ?? 0) }}</span>
                                </td>
                                <td>
                                    <a href="{{ route('reports.show', $report->uuid) }}" class="btn btn-info btn-sm">
                                        <i class="feather icon-eye"></i> View
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Report Details Modal Placeholder -->
<div class="modal fade" id="reportViewModal" tabindex="-1" role="dialog" aria-labelledby="reportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content" id="reportModalContentPlaceholder">
            <!-- AJAX will inject view-modal content here -->
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap4.min.js"></script>
<script>
    $(document).ready(function() {
        $('#reportsTable').DataTable({
            pageLength: 10,
            order: [[6, 'desc']],
            columnDefs: [{
                targets: [8],
                searchable: false,
                orderable: false
            }]
        });

        $(document).on('click', '.view-report-details', function() {
            var uuid = $(this).data('uuid');
            $('#reportModalContentPlaceholder').html('<div class="text-center p-5"><i class="feather icon-loader rotate text-primary" style="font-size: 30px;"></i></div>');
            $('#reportViewModal').modal('show');
            
            $.ajax({
                url: "{{ url('reports') }}/" + uuid,
                type: "GET",
                success: function(response) {
                    if (response.html) {
                        $('#reportModalContentPlaceholder').html(response.html);
                    } else {
                        $('#reportModalContentPlaceholder').html('<div class="alert alert-danger m-3">Failed to load content.</div>');
                    }
                },
                error: function() {
                    $('#reportModalContentPlaceholder').html('<div class="alert alert-danger m-3">An error occurred while loading content.</div>');
                }
            });
        });
    });
</script>
@endsection