@extends('layouts.admin')

@section('header')
    Reports & Export Builder
@endsection

@section('content')
<div class="flex flex-col gap-6" x-data="reportBuilder()">
    
    <!-- Top Section: Sidebar & Builder -->
    <div class="flex flex-col lg:flex-row gap-6">
        <!-- Sidebar: Saved Reports -->
        <div class="w-full lg:w-1/4">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
                    <h3 class="font-semibold text-gray-700">Saved Reports</h3>
                </div>
                <div class="p-4">
                    @if($reports->isEmpty())
                        <p class="text-sm text-gray-500 italic">No saved reports yet.</p>
                    @else
                        <div class="max-h-72 overflow-y-auto pr-2 -mr-2 border border-gray-200 rounded-lg p-2 bg-gradient-to-b from-white to-gray-50">
                            <ul class="space-y-2">
                                @foreach($reports as $report)
                                    <li class="flex items-center justify-between group p-2 hover:bg-gray-50 rounded-md transition-colors">
                                        <button type="button" @click="loadReport({{ $report->id }}, '{{ addslashes($report->name) }}', {{ json_encode($report->config) }})" class="text-sm text-gray-700 font-medium hover:text-indigo-600 truncate flex-1 text-left">
                                            {{ $report->name }}
                                        </button>
                                        <form action="{{ route('reports.destroy', $report) }}" method="POST" class="ml-2 opacity-0 group-hover:opacity-100 transition-opacity" onsubmit="return confirm('Are you sure?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-red-400 hover:text-red-600">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                                            </button>
                                        </form>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <button @click="reset()" class="w-full text-center text-sm text-indigo-600 hover:text-indigo-800 font-medium">
                            + Start New Report
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Builder Area -->
        <div class="w-full lg:w-3/4">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg h-full">
                <!-- Header / Actions -->
                <div class="p-6 border-b border-gray-200 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                    <div class="w-full sm:w-auto flex-1">
                        <label class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-1">Report Name</label>
                        <input type="text" x-model="config.name" class="block w-full text-lg font-semibold text-gray-900 border-none p-0 focus:ring-0 placeholder-gray-300" placeholder="Untitled Report">
                    </div>
                    <div class="flex gap-3">
                        <button  @click="saveReport" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                            Save
                        </button>
                        <button @click="exportReport" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
                            Export to Excel
                        </button>
                    </div>
                </div>

                <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-8">
                    <!-- Columns Selection -->
                    <div class="md:col-span-2">
                        <h4 class="text-sm font-bold text-gray-700 mb-3 flex items-center gap-2">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" /></svg>
                            1. Select Columns
                        </h4>
                        <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                <template x-for="field in availableFields" :key="field.key">
                                    <label class="flex items-center space-x-2 cursor-pointer p-1 hover:bg-gray-100 rounded">
                                        <input type="checkbox" :value="field.key" x-model="config.columns" @change="updatePreview" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 flex-shrink-0">
                                        <span class="text-sm text-gray-700 leading-tight" x-text="field.label"></span>
                                    </label>
                                </template>
                            </div>
                        </div>
                        <p class="text-xs text-gray-500 mt-2">Uncheck to remove. The order you tick them here controls the export order.</p>
                    </div>

                    <!-- Groups Selection -->
                <div class="md:col-span-1">
                    <h4 class="text-sm font-bold text-gray-700 mb-3 flex items-center gap-2">
                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
                        2. Filter by Group
                    </h4>
                    
                    @if($groups->isEmpty())
                        <p class="text-sm text-gray-500 italic">No member groups found.</p>
                    @else
                        <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 max-h-60 overflow-y-auto">
                            <div class="space-y-2">
                                @foreach($groups as $group)
                                    <label class="flex items-center space-x-2 cursor-pointer p-1 hover:bg-gray-100 rounded">
                                        <input type="checkbox" value="{{ $group->id }}" x-model="config.groups" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                                        <span class="text-sm text-gray-700">{{ $group->name }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                        <p class="text-xs text-gray-500 mt-2">Check groups to include members from.</p>
                    @endif
                </div>
            </div>
        </div>
        </div>
    </div>

    <!-- Preview (Full Width) -->
    <div class="w-full">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-4 bg-gray-50 border-b border-gray-200 flex justify-between items-center">
                <h4 class="text-sm font-bold text-gray-700">Preview Results</h4>
                <span class="text-xs text-gray-500" x-show="!loading" x-text="'Showing first ' + previewData.length + ' rows'"></span>
            </div>
            <div class="overflow-x-auto min-h-[200px]" :class="{'opacity-50 pointer-events-none': loading}">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <template x-for="colKey in config.columns" :key="colKey">
                                <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 group select-none" @click="sortBy(colKey)">
                                    <div class="flex items-center space-x-1">
                                        <span x-text="getFieldLabel(colKey)"></span>
                                        <!-- Sort Icons -->
                                        <span class="text-gray-400 group-hover:text-gray-600">
                                            <!-- Up (Ascending) -->
                                            <svg x-show="config.sort_by === colKey && config.sort_direction === 'asc'" class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" /></svg>
                                            <!-- Down (Descending) -->
                                            <svg x-show="config.sort_by === colKey && config.sort_direction === 'desc'" class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                                            <!-- Default (Both) -->
                                            <svg x-show="config.sort_by !== colKey" class="w-4 h-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" /></svg>
                                        </span>
                                    </div>
                                </th>
                            </template>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <template x-for="(row, idx) in previewData" :key="idx">
                            <tr>
                                <template x-for="(cell, idx2) in row" :key="idx2">
                                    <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900" x-text="cell"></td>
                                </template>
                            </tr>
                        </template>
                        <tr x-show="previewData.length === 0 && !loading">
                            <td :colspan="config.columns.length" class="px-6 py-10 text-center text-gray-500">
                                No data matches your criteria.
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div x-show="loading" class="flex justify-center items-center py-10">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
                </div>
            </div>
            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6 border-t border-gray-200">
                <button @click="exportReport" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
                    Export to Excel
                </button>
            </div>
        </div>
    </div>

    <!-- Hidden form for saving report -->
    <form id="save-form" method="POST" action="{{ route('reports.store') }}" class="hidden">
        @csrf
        <input type="hidden" name="name" x-model="config.name">
        <input type="hidden" name="config" :value="JSON.stringify(prepareConfigForSave())">
    </form>
    
    <!-- Hidden form for updating report -->
    <form id="update-form" method="POST" :action="'/reports/' + currentReportId" class="hidden">
        @csrf
        @method('PUT')
        <input type="hidden" name="name" x-model="config.name">
        <input type="hidden" name="config" :value="JSON.stringify(prepareConfigForSave())">
    </form>
    
    <!-- Hidden form for exporting report -->
    <form id="export-form" method="POST" action="{{ route('reports.export') }}" target="_blank" class="hidden">
        @csrf
        <input type="hidden" name="name" x-model="config.name">
        <input type="hidden" name="config" :value="JSON.stringify(prepareConfigForSave())">
    </form>
</div>

<script>
function reportBuilder() {
    return {
        availableFields: [
            { key: 'name', label: 'Name' },
            { key: 'rank', label: 'Rank' },
            @if(auth()->user()->club->member_reference_description)
                { key: 'reference', label: '{{ auth()->user()->club->member_reference_description }}' },
            @endif
            @if(auth()->user()->club->member_reference_description_2)
                { key: 'reference_number_2', label: '{{ auth()->user()->club->member_reference_description_2 }}' },
            @endif
            { key: 'groups', label: 'Group(s)' },
            { key: 'age', label: 'Age' },
            { key: 'last_graded', label: 'Last Graded' },
            { key: 'days_since_grading', label: 'Days since last Grading' },
            { key: 'sessions_since_grading', label: 'Sessions since last Grading' },
            { key: 'days_since_session', label: 'Days since last Session' },
            { key: 'renewal_date', label: 'Renewal Date' },
            { key: 'emergency_contact', label: 'Emergency Contact' },
            { key: 'emergency_phone', label: 'Emergency Phone' },
            { key: 'email', label: 'Email' }
        ],
        config: {
            name: '',
            columns: ['name', 'rank', 'reference'], // Defaults
            groups: [],
            sort_by: 'name',
            sort_direction: 'asc'
        },
        currentReportId: null,
        previewData: [],
        loading: false,
        debounceTimeout: null,

        init() {
            this.updatePreview();
            this.$watch('config.groups', () => this.updatePreview());
            this.$watch('config.columns', () => this.updatePreview());
            this.$watch('config.sort_by', () => this.updatePreview());
            this.$watch('config.sort_direction', () => this.updatePreview());
        },

        sortBy(column) {
            if (this.config.sort_by === column) {
                this.config.sort_direction = this.config.sort_direction === 'asc' ? 'desc' : 'asc';
            } else {
                this.config.sort_by = column;
                this.config.sort_direction = 'asc';
            }
            // Watchers will trigger updatePreview
        },

        getFieldLabel(key) {
            const field = this.availableFields.find(f => f.key === key);
            return field ? field.label : key;
        },

        loadReport(id, name, savedConfig) {
            this.currentReportId = id;
            this.config.name = name;
            // Ensure compatibility (if saved config structure changes)
            this.config.columns = savedConfig.columns || [];
            this.config.groups = savedConfig.groups || []; // Handle groups, default to empty
            this.config.sort_by = savedConfig.sort_by || 'name';
            this.config.sort_direction = savedConfig.sort_direction || 'asc';
            // updatePreview triggered by watchers
        },

        reset() {
            this.currentReportId = null;
            this.config = {
                name: '',
                columns: ['name', 'rank', 'reference'],
                groups: [],
                sort_by: 'name',
                sort_direction: 'asc'
            };
            this.updatePreview();
        },

        updatePreview() {
            this.loading = true;
            clearTimeout(this.debounceTimeout);
            
            // Debounce for filter typing
            this.debounceTimeout = setTimeout(() => {
                fetch('{{ route('reports.preview') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ config: this.config })
                })
                .then(res => res.json())
                .then(data => {
                    this.previewData = data.data;
                    this.loading = false;
                })
                .catch(err => {
                    console.error(err);
                    this.loading = false;
                });
            }, 600);
        },

        prepareConfigForSave() {
            return {
                columns: this.config.columns,
                groups: this.config.groups,
                sort_by: this.config.sort_by,
                sort_direction: this.config.sort_direction
            };
        },

        saveReport() {
            if (!this.config.name) {
                alert('Please name your report.');
                return;
            }

            if (this.currentReportId) {
                if (confirm('Overwrite existing report "' + this.config.name + '"?\n\nClick OK to Overwrite.\nClick Cancel to create a New Report.')) {
                    // Update existing
                    document.getElementById('update-form').submit();
                } else {
                    // Save as new
                    let newName = prompt("Enter a name for the new report:", this.config.name + " (Copy)");
                    if (newName) {
                        this.config.name = newName;
                        this.currentReportId = null; // Ensure it sends as new
                        // Wait for x-model
                        setTimeout(() => {
                            document.getElementById('save-form').submit();
                        }, 50);
                    }
                }
            } else {
                document.getElementById('save-form').submit();
            }
        },

        exportReport() {
            document.getElementById('export-form').submit();
        }
    }
}
</script>
@endsection