<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Column Visibility Control Test</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-gray-50">
    <div id="app">
        <h1 class="text-2xl font-bold mb-6">Column Visibility Control Test</h1>
        
        <div class="bg-white p-6 rounded-lg shadow mb-6">
            <h2 class="text-lg font-semibold mb-4">Updated Column Control (Select UI)</h2>
            <div class="mb-4">
                <!-- Simulated ColumnVisibilityControl -->
                <div class="flex items-center gap-2">
                    <select v-model="selectedColumn" @change="handleColumnToggle" class="w-48 px-3 py-2 border border-gray-300 rounded-md">
                        <option value="toggle">Toggle Columns</option>
                        <optgroup label="Basic Columns">
                            <option value="name" @click="toggleColumn('name')">
                                ☑️ Name ({{ visibleColumns.name ? 'Visible' : 'Hidden' }})
                            </option>
                            <option value="category" @click="toggleColumn('category')">
                                {{ visibleColumns.category ? '☑️' : '☐' }} Category
                            </option>
                            <option value="status" @click="toggleColumn('status')">
                                {{ visibleColumns.status ? '☑️' : '☐' }} Status
                            </option>
                        </optgroup>
                        <optgroup label="Task Status Columns">
                            <option value="modeling" @click="toggleColumn('modeling')">
                                {{ visibleColumns.modeling ? '☑️' : '☐' }} Modeling
                            </option>
                            <option value="surfacing" @click="toggleColumn('surfacing')">
                                {{ visibleColumns.surfacing ? '☑️' : '☐' }} Surfacing
                            </option>
                            <option value="rigging" @click="toggleColumn('rigging')">
                                {{ visibleColumns.rigging ? '☑️' : '☐' }} Rigging
                            </option>
                        </optgroup>
                        <optgroup label="Other Columns">
                            <option value="thumbnail" @click="toggleColumn('thumbnail')">
                                {{ visibleColumns.thumbnail ? '☑️' : '☐' }} Thumbnail
                            </option>
                            <option value="description" @click="toggleColumn('description')">
                                {{ visibleColumns.description ? '☑️' : '☐' }} Description
                            </option>
                            <option value="updatedAt" @click="toggleColumn('updatedAt')">
                                {{ visibleColumns.updatedAt ? '☑️' : '☐' }} Updated
                            </option>
                        </optgroup>
                    </select>
                </div>
            </div>
            
            <div class="space-y-2">
                <h3 class="font-medium">Column Visibility Status:</h3>
                <div class="grid grid-cols-3 gap-4 text-sm">
                    <div v-for="(visible, column) in visibleColumns" :key="column" 
                         :class="visible ? 'text-green-600' : 'text-red-600'">
                        {{ column }}: {{ visible ? 'Visible' : 'Hidden' }}
                    </div>
                </div>
            </div>
            
            <div class="mt-4">
                <button @click="toggleAllColumns" 
                        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
                    Toggle All Columns
                </button>
                <button @click="showAllColumns" 
                        class="ml-2 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
                    Show All
                </button>
                <button @click="hideAllColumns" 
                        class="ml-2 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">
                    Hide All
                </button>
            </div>
        </div>
        
        <div class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-lg font-semibold mb-4">Simulated Asset Table</h2>
            <div class="overflow-x-auto">
                <table class="min-w-full border-collapse border border-gray-300">
                    <thead>
                        <tr class="bg-gray-50">
                            <th v-if="visibleColumns.name" class="border border-gray-300 px-4 py-2 text-left">Name</th>
                            <th v-if="visibleColumns.category" class="border border-gray-300 px-4 py-2 text-left">Category</th>
                            <th v-if="visibleColumns.status" class="border border-gray-300 px-4 py-2 text-left">Status</th>
                            <th v-if="visibleColumns.thumbnail" class="border border-gray-300 px-4 py-2 text-left">Thumbnail</th>
                            <th v-if="visibleColumns.modeling" class="border border-gray-300 px-4 py-2 text-left">Modeling</th>
                            <th v-if="visibleColumns.surfacing" class="border border-gray-300 px-4 py-2 text-left">Surfacing</th>
                            <th v-if="visibleColumns.rigging" class="border border-gray-300 px-4 py-2 text-left">Rigging</th>
                            <th v-if="visibleColumns.description" class="border border-gray-300 px-4 py-2 text-left">Description</th>
                            <th v-if="visibleColumns.updatedAt" class="border border-gray-300 px-4 py-2 text-left">Updated</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="asset in sampleAssets" :key="asset.id">
                            <td v-if="visibleColumns.name" class="border border-gray-300 px-4 py-2">{{ asset.name }}</td>
                            <td v-if="visibleColumns.category" class="border border-gray-300 px-4 py-2">{{ asset.category }}</td>
                            <td v-if="visibleColumns.status" class="border border-gray-300 px-4 py-2">{{ asset.status }}</td>
                            <td v-if="visibleColumns.thumbnail" class="border border-gray-300 px-4 py-2">{{ asset.thumbnail }}</td>
                            <td v-if="visibleColumns.modeling" class="border border-gray-300 px-4 py-2">
                                <span :class="getStatusColor(asset.modeling)">{{ asset.modeling }}</span>
                            </td>
                            <td v-if="visibleColumns.surfacing" class="border border-gray-300 px-4 py-2">
                                <span :class="getStatusColor(asset.surfacing)">{{ asset.surfacing }}</span>
                            </td>
                            <td v-if="visibleColumns.rigging" class="border border-gray-300 px-4 py-2">
                                <span :class="getStatusColor(asset.rigging)">{{ asset.rigging }}</span>
                            </td>
                            <td v-if="visibleColumns.description" class="border border-gray-300 px-4 py-2">{{ asset.description }}</td>
                            <td v-if="visibleColumns.updatedAt" class="border border-gray-300 px-4 py-2">{{ asset.updatedAt }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref } = Vue;

        createApp({
            setup() {
                const selectedColumn = ref('toggle');
                
                const visibleColumns = ref({
                    name: true,
                    category: true,
                    status: true,
                    thumbnail: false,
                    modeling: true,
                    surfacing: true,
                    rigging: false,
                    description: false,
                    updatedAt: true
                });

                const sampleAssets = ref([
                    {
                        id: 1,
                        name: 'Hero Character',
                        category: 'Character',
                        status: 'Active',
                        thumbnail: '🎭',
                        modeling: 'approved',
                        surfacing: 'in_progress',
                        rigging: 'not_started',
                        description: 'Main character for the scene',
                        updatedAt: '2024-01-15'
                    },
                    {
                        id: 2,
                        name: 'Magic Sword',
                        category: 'Prop',
                        status: 'Active',
                        thumbnail: '⚔️',
                        modeling: 'submitted',
                        surfacing: 'approved',
                        rigging: 'not_started',
                        description: 'Enchanted weapon with glowing effects',
                        updatedAt: '2024-01-14'
                    },
                    {
                        id: 3,
                        name: 'Castle Environment',
                        category: 'Environment',
                        status: 'Active',
                        thumbnail: '🏰',
                        modeling: 'in_progress',
                        surfacing: 'not_started',
                        rigging: 'not_started',
                        description: 'Medieval castle background',
                        updatedAt: '2024-01-13'
                    }
                ]);

                const handleColumnToggle = (event) => {
                    const value = event.target.value;
                    if (value !== 'toggle') {
                        toggleColumn(value);
                    }
                    // Reset selection
                    selectedColumn.value = 'toggle';
                };

                const toggleColumn = (column) => {
                    visibleColumns.value[column] = !visibleColumns.value[column];
                };

                const toggleAllColumns = () => {
                    const allVisible = Object.values(visibleColumns.value).every(v => v);
                    Object.keys(visibleColumns.value).forEach(key => {
                        visibleColumns.value[key] = !allVisible;
                    });
                };

                const showAllColumns = () => {
                    Object.keys(visibleColumns.value).forEach(key => {
                        visibleColumns.value[key] = true;
                    });
                };

                const hideAllColumns = () => {
                    Object.keys(visibleColumns.value).forEach(key => {
                        visibleColumns.value[key] = false;
                    });
                };

                const getStatusColor = (status) => {
                    const colors = {
                        'not_started': 'text-gray-500 bg-gray-100 px-2 py-1 rounded text-xs',
                        'in_progress': 'text-blue-700 bg-blue-100 px-2 py-1 rounded text-xs',
                        'submitted': 'text-yellow-700 bg-yellow-100 px-2 py-1 rounded text-xs',
                        'approved': 'text-green-700 bg-green-100 px-2 py-1 rounded text-xs',
                        'retake': 'text-red-700 bg-red-100 px-2 py-1 rounded text-xs'
                    };
                    return colors[status] || 'text-gray-500';
                };

                return {
                    selectedColumn,
                    visibleColumns,
                    sampleAssets,
                    handleColumnToggle,
                    toggleColumn,
                    toggleAllColumns,
                    showAllColumns,
                    hideAllColumns,
                    getStatusColor
                };
            }
        }).mount('#app');
    </script>
</body>
</html>