{% extends "base.html" %}

{% block title %}Records{% endblock %}

{% block content %}
<div x-data="recordsData('{{ collection_name }}')" x-init="await loadCollection(); await loadRecords()">
    <div class="px-4 sm:px-0 flex justify-between items-start">
        <div>
            <div class="flex items-center space-x-3">
                <a href="/admin/collections" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <h1 class="text-3xl font-bold text-gray-900">
                    <span x-text="collection?.name || '{{ collection_name }}'"></span> Records
                </h1>
            </div>
            <p class="mt-2 text-sm text-gray-700">
                Manage records in this collection
            </p>
        </div>
        <div class="flex space-x-3">
            <a
                href="/admin/collections/{{ collection_name }}/api"
                class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
            >
                <i class="fas fa-code mr-2"></i>
                View API
            </a>
            <!-- CSV Export Button -->
            <button
                @click="exportCSV"
                class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
            >
                <i class="fas fa-download mr-2"></i>
                Export CSV
            </button>
            <!-- CSV Import Button (only for non-view collections) -->
            <button
                x-show="collection?.type !== 'view'"
                @click="showImportModal = true"
                class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
            >
                <i class="fas fa-upload mr-2"></i>
                Import CSV
            </button>
            <!-- Only show Create button for non-view collections -->
            <a
                x-show="collection?.type !== 'view'"
                :href="`/admin/collections/{{ collection_name }}/records/new`"
                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700"
            >
                <i class="fas fa-plus mr-2"></i>
                Create Record
            </a>
            <!-- Info badge for view collections -->
            <span
                x-show="collection?.type === 'view'"
                class="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-700 bg-blue-100 rounded-md"
            >
                <i class="fas fa-info-circle mr-2"></i>
                View Collection (Read-Only)
            </span>
        </div>
    </div>

    <!-- Records Table -->
    <div class="mt-6 bg-white shadow overflow-hidden sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
            <!-- Search Box -->
            <div class="mb-4">
                <div class="relative">
                    <input
                        type="text"
                        x-model="searchQuery"
                        @input="searchRecords"
                        placeholder="Search across all text fields..."
                        class="block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                    />
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-search text-gray-400"></i>
                    </div>
                    <button
                        x-show="searchQuery"
                        @click="clearSearch"
                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
                    >
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <p x-show="searchQuery" class="mt-2 text-sm text-gray-600">
                    Showing results for "<span x-text="searchQuery"></span>"
                </p>
            </div>

            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-4">
                    <div class="text-sm text-gray-500">
                        Total: <span class="font-medium text-gray-900" x-text="pagination.total"></span> records
                    </div>
                    <!-- Bulk Actions -->
                    <div x-show="selectedRecords.length > 0 && collection?.type !== 'view'" class="flex items-center space-x-2">
                        <span class="text-sm text-gray-600">
                            <span x-text="selectedRecords.length"></span> selected
                        </span>
                        <button @click="bulkDeleteSelected"
                            class="px-3 py-1 text-sm bg-red-600 text-white rounded hover:bg-red-700">
                            <i class="fas fa-trash mr-1"></i> Delete Selected
                        </button>
                        <button @click="showBulkUpdateModal = true"
                            class="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700">
                            <i class="fas fa-edit mr-1"></i> Update Selected
                        </button>
                    </div>
                </div>
                <div class="flex items-center space-x-2">
                    <button @click="prevPage" :disabled="pagination.page === 1"
                        class="px-3 py-1 text-sm bg-gray-200 rounded hover:bg-gray-300 disabled:opacity-50">
                        Previous
                    </button>
                    <span class="text-sm text-gray-600">
                        Page <span x-text="pagination.page"></span> of <span x-text="pagination.total_pages"></span>
                    </span>
                    <button @click="nextPage" :disabled="pagination.page >= pagination.total_pages"
                        class="px-3 py-1 text-sm bg-gray-200 rounded hover:bg-gray-300 disabled:opacity-50">
                        Next
                    </button>
                </div>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <!-- Checkbox column for bulk selection (only for non-view collections) -->
                        <th x-show="collection?.type !== 'view'" class="px-3 py-3 text-left">
                            <input type="checkbox"
                                @change="toggleSelectAll($event.target.checked)"
                                :checked="selectedRecords.length === records.length && records.length > 0"
                                class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                        <template x-for="field in collection?.schema?.slice(0, 5)" :key="field.name">
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" x-text="field.name"></th>
                        </template>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <template x-for="record in records" :key="record.id">
                        <tr class="hover:bg-gray-50" :class="{ 'bg-indigo-50': selectedRecords.includes(record.id) }">
                            <!-- Checkbox column (only for non-view collections) -->
                            <td x-show="collection?.type !== 'view'" class="px-3 py-4 whitespace-nowrap">
                                <input type="checkbox"
                                    :value="record.id"
                                    @change="toggleRecordSelection(record.id, $event.target.checked)"
                                    :checked="selectedRecords.includes(record.id)"
                                    class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <code class="text-xs text-gray-600" x-text="record.id.substring(0, 8) + '...'"></code>
                            </td>
                            <template x-for="field in collection?.schema?.slice(0, 5)" :key="field.name">
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    <span x-text="formatFieldValue(record.data[field.name], field.type)"></span>
                                </td>
                            </template>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span x-text="new Date(record.created).toLocaleDateString()"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <!-- View collections: only show View button -->
                                <template x-if="collection?.type === 'view'">
                                    <span class="text-gray-500 italic text-xs">Read-only</span>
                                </template>
                                <!-- Regular collections: show all actions -->
                                <template x-if="collection?.type !== 'view'">
                                    <div>
                                        <a :href="`/admin/collections/{{ collection_name }}/records/${record.id}`"
                                           class="text-indigo-600 hover:text-indigo-900 mr-3">
                                            View
                                        </a>
                                        <a :href="`/admin/collections/{{ collection_name }}/records/${record.id}/edit`"
                                           class="text-gray-600 hover:text-gray-900 mr-3">
                                            Edit
                                        </a>
                                        <button @click="deleteRecord(record)" class="text-red-600 hover:text-red-900">
                                            Delete
                                        </button>
                                    </div>
                                </template>
                            </td>
                        </tr>
                    </template>
                    <tr x-show="records.length === 0">
                        <td :colspan="(collection?.schema?.length || 0) + 3" class="px-6 py-12 text-center">
                            <div class="text-gray-500">
                                <i class="fas fa-inbox text-4xl mb-4 block"></i>
                                <template x-if="collection?.type === 'view'">
                                    <p class="mb-2">No results from this view query</p>
                                </template>
                                <template x-if="collection?.type !== 'view'">
                                    <div>
                                        <p class="mb-2">No records yet</p>
                                        <a :href="`/admin/collections/{{ collection_name }}/records/new`"
                                           class="text-indigo-600 hover:text-indigo-500">
                                            Create your first record
                                        </a>
                                    </div>
                                </template>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- CSV Import Modal -->
    <div x-show="showImportModal"
         x-cloak
         class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
         @click.self="showImportModal = false">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">Import CSV</h3>
                <button @click="showImportModal = false" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Select CSV File
                </label>
                <input
                    type="file"
                    accept=".csv"
                    @change="handleFileSelect"
                    class="block w-full text-sm text-gray-500
                           file:mr-4 file:py-2 file:px-4
                           file:rounded-md file:border-0
                           file:text-sm file:font-semibold
                           file:bg-indigo-50 file:text-indigo-700
                           hover:file:bg-indigo-100"
                />
            </div>

            <div class="mb-4">
                <label class="flex items-center">
                    <input
                        type="checkbox"
                        x-model="skipValidation"
                        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="ml-2 text-sm text-gray-600">Skip validation (import as text)</span>
                </label>
            </div>

            <div x-show="importProgress" class="mb-4">
                <div class="text-sm text-gray-600 mb-2">
                    <span x-text="importProgress"></span>
                </div>
            </div>

            <div class="flex justify-end space-x-3">
                <button
                    @click="showImportModal = false"
                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
                >
                    Cancel
                </button>
                <button
                    @click="importCSV"
                    :disabled="!selectedFile || isImporting"
                    class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                    <span x-show="!isImporting">Import</span>
                    <span x-show="isImporting">
                        <i class="fas fa-spinner fa-spin mr-2"></i>
                        Importing...
                    </span>
                </button>
            </div>
        </div>
    </div>

    <!-- Bulk Update Modal -->
    <div x-show="showBulkUpdateModal"
         x-cloak
         class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
         @click.self="showBulkUpdateModal = false">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">Bulk Update Records</h3>
                <button @click="showBulkUpdateModal = false" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="mb-4">
                <p class="text-sm text-gray-600 mb-4">
                    Updating <span class="font-semibold" x-text="selectedRecords.length"></span> selected record(s)
                </p>

                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Select Field to Update
                </label>
                <select
                    x-model="bulkUpdateField"
                    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                >
                    <option value="">-- Select Field --</option>
                    <template x-for="field in collection?.schema" :key="field.name">
                        <option :value="field.name" x-text="field.name"></option>
                    </template>
                </select>
            </div>

            <div class="mb-4" x-show="bulkUpdateField">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    New Value
                </label>
                <input
                    type="text"
                    x-model="bulkUpdateValue"
                    placeholder="Enter new value"
                    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                />
            </div>

            <div class="flex justify-end space-x-3">
                <button
                    @click="showBulkUpdateModal = false"
                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
                >
                    Cancel
                </button>
                <button
                    @click="bulkUpdateRecords"
                    :disabled="!bulkUpdateField || !bulkUpdateValue"
                    class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                    Update Records
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function recordsData(collectionName) {
        return {
            collection: null,
            records: [],
            pagination: {
                page: 1,
                per_page: 20,
                total: 0,
                total_pages: 0
            },
            // CSV Import/Export state
            showImportModal: false,
            selectedFile: null,
            skipValidation: false,
            isImporting: false,
            importProgress: '',
            // Bulk operations state
            selectedRecords: [],
            showBulkUpdateModal: false,
            bulkUpdateField: '',
            bulkUpdateValue: '',
            // Search state
            searchQuery: '',

            async loadCollection() {
                try {
                    // Use the name endpoint to get collection by name
                    this.collection = await apiRequest(`/collections/name/${collectionName}`);
                    console.log('Loaded collection:', this.collection.name, 'Type:', this.collection.type);
                } catch (error) {
                    console.error('Failed to load collection:', error);
                }
            },

            async loadRecords() {
                try {
                    // Wait for collection to be loaded first
                    if (!this.collection) {
                        console.warn('Collection not loaded yet, waiting...');
                        await this.loadCollection();
                    }

                    // Use different endpoint for view collections
                    let endpoint;
                    if (this.collection?.type === 'view') {
                        console.log('Loading view collection records from /views endpoint');
                        endpoint = `/views/${collectionName}/records?page=${this.pagination.page}&per_page=${this.pagination.per_page}`;
                    } else {
                        console.log('Loading regular collection records');
                        endpoint = `/collections/${collectionName}/records?page=${this.pagination.page}&per_page=${this.pagination.per_page}`;
                    }

                    // Add search parameter if present
                    if (this.searchQuery) {
                        endpoint += `&search=${encodeURIComponent(this.searchQuery)}`;
                    }

                    const data = await apiRequest(endpoint);
                    this.records = data.items;
                    this.pagination = {
                        page: data.page,
                        per_page: data.per_page,
                        total: data.total,
                        total_pages: data.total_pages
                    };
                } catch (error) {
                    console.error('Failed to load records:', error);
                    showToast('Failed to load records', 'error');
                }
            },

            async deleteRecord(record) {
                const confirmed = confirm(`Delete this record? This action cannot be undone.`);
                if (!confirmed) return;

                try {
                    await apiRequest(`/collections/${collectionName}/records/${record.id}`, {
                        method: 'DELETE'
                    });
                    showToast('Record deleted successfully', 'success');
                    await this.loadRecords();
                } catch (error) {
                    console.error('Failed to delete record:', error);
                }
            },

            formatFieldValue(value, type) {
                if (value === null || value === undefined) return '—';
                if (type === 'bool') return value ? '✓' : '✗';
                if (type === 'json') return JSON.stringify(value).substring(0, 30) + '...';
                if (typeof value === 'string' && value.length > 50) {
                    return value.substring(0, 50) + '...';
                }
                return value;
            },

            async nextPage() {
                if (this.pagination.page < this.pagination.total_pages) {
                    this.pagination.page++;
                    await this.loadRecords();
                }
            },

            async prevPage() {
                if (this.pagination.page > 1) {
                    this.pagination.page--;
                    await this.loadRecords();
                }
            },

            // Search functionality
            async searchRecords() {
                // Reset to page 1 when searching
                this.pagination.page = 1;
                await this.loadRecords();
            },

            async clearSearch() {
                this.searchQuery = '';
                this.pagination.page = 1;
                await this.loadRecords();
            },

            // CSV Export
            async exportCSV() {
                try {
                    const token = localStorage.getItem('access_token');
                    const response = await fetch(`/api/v1/collections/${collectionName}/records/export/csv`, {
                        headers: {
                            'Authorization': `Bearer ${token}`
                        }
                    });

                    if (!response.ok) {
                        throw new Error('Failed to export CSV');
                    }

                    // Create a blob from the response
                    const blob = await response.blob();
                    const url = window.URL.createObjectURL(blob);

                    // Create a temporary link and trigger download
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `${collectionName}_export.csv`;
                    document.body.appendChild(a);
                    a.click();

                    // Cleanup
                    window.URL.revokeObjectURL(url);
                    document.body.removeChild(a);

                    showToast('CSV exported successfully', 'success');
                } catch (error) {
                    console.error('Failed to export CSV:', error);
                    showToast('Failed to export CSV', 'error');
                }
            },

            // CSV Import
            handleFileSelect(event) {
                this.selectedFile = event.target.files[0];
            },

            async importCSV() {
                if (!this.selectedFile) {
                    showToast('Please select a CSV file', 'error');
                    return;
                }

                this.isImporting = true;
                this.importProgress = 'Uploading...';

                try {
                    const token = localStorage.getItem('access_token');
                    const formData = new FormData();
                    formData.append('file', this.selectedFile);

                    const url = `/api/v1/collections/${collectionName}/records/import/csv${this.skipValidation ? '?skip_validation=true' : ''}`;

                    const response = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'Authorization': `Bearer ${token}`
                        },
                        body: formData
                    });

                    if (!response.ok) {
                        const error = await response.json();
                        throw new Error(error.detail || 'Failed to import CSV');
                    }

                    const result = await response.json();

                    // Show results
                    let message = `Successfully imported ${result.imported} of ${result.total} records`;
                    if (result.errors && result.errors.length > 0) {
                        message += `. ${result.errors.length} errors occurred.`;
                        console.error('Import errors:', result.errors);
                    }

                    showToast(message, result.errors && result.errors.length > 0 ? 'warning' : 'success');

                    // Close modal and reload records
                    this.showImportModal = false;
                    this.selectedFile = null;
                    this.skipValidation = false;
                    await this.loadRecords();
                } catch (error) {
                    console.error('Failed to import CSV:', error);
                    showToast(error.message || 'Failed to import CSV', 'error');
                } finally {
                    this.isImporting = false;
                    this.importProgress = '';
                }
            },

            // Bulk Operations
            toggleSelectAll(checked) {
                if (checked) {
                    this.selectedRecords = this.records.map(r => r.id);
                } else {
                    this.selectedRecords = [];
                }
            },

            toggleRecordSelection(recordId, checked) {
                if (checked) {
                    if (!this.selectedRecords.includes(recordId)) {
                        this.selectedRecords.push(recordId);
                    }
                } else {
                    this.selectedRecords = this.selectedRecords.filter(id => id !== recordId);
                }
            },

            async bulkDeleteSelected() {
                if (this.selectedRecords.length === 0) {
                    showToast('No records selected', 'warning');
                    return;
                }

                const confirmed = confirm(`Delete ${this.selectedRecords.length} record(s)? This action cannot be undone.`);
                if (!confirmed) return;

                try {
                    const response = await apiRequest(`/collections/${collectionName}/records/bulk-delete`, {
                        method: 'POST',
                        body: JSON.stringify({
                            record_ids: this.selectedRecords
                        })
                    });

                    let message = `Successfully deleted ${response.success} record(s)`;
                    if (response.failed > 0) {
                        message += `. ${response.failed} failed.`;
                        console.error('Bulk delete errors:', response.errors);
                    }

                    showToast(message, response.failed > 0 ? 'warning' : 'success');

                    // Clear selection and reload records
                    this.selectedRecords = [];
                    await this.loadRecords();
                } catch (error) {
                    console.error('Failed to bulk delete:', error);
                    showToast('Failed to delete records', 'error');
                }
            },

            async bulkUpdateRecords() {
                if (this.selectedRecords.length === 0) {
                    showToast('No records selected', 'warning');
                    return;
                }

                if (!this.bulkUpdateField || !this.bulkUpdateValue) {
                    showToast('Please select a field and enter a value', 'warning');
                    return;
                }

                try {
                    const updateData = {
                        [this.bulkUpdateField]: this.bulkUpdateValue
                    };

                    const response = await apiRequest(`/collections/${collectionName}/records/bulk-update`, {
                        method: 'POST',
                        body: JSON.stringify({
                            record_ids: this.selectedRecords,
                            data: updateData
                        })
                    });

                    let message = `Successfully updated ${response.success} record(s)`;
                    if (response.failed > 0) {
                        message += `. ${response.failed} failed.`;
                        console.error('Bulk update errors:', response.errors);
                    }

                    showToast(message, response.failed > 0 ? 'warning' : 'success');

                    // Close modal, clear selection and reload records
                    this.showBulkUpdateModal = false;
                    this.bulkUpdateField = '';
                    this.bulkUpdateValue = '';
                    this.selectedRecords = [];
                    await this.loadRecords();
                } catch (error) {
                    console.error('Failed to bulk update:', error);
                    showToast('Failed to update records', 'error');
                }
            }
        };
    }
</script>
{% endblock %}