<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Favorites - MySQL to Sheets Sync</title>
    <style>
        :root {
            --primary: #2563eb;
            --primary-hover: #1d4ed8;
            --success: #16a34a;
            --error: #dc2626;
            --warning: #ca8a04;
            --bg: #f8fafc;
            --card-bg: #ffffff;
            --border: #e2e8f0;
            --text: #1e293b;
            --text-muted: #64748b;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.5;
            padding: 2rem;
        }

        .container { max-width: 1200px; margin: 0 auto; }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        h1 { font-size: 1.5rem; font-weight: 600; }
        .version { color: var(--text-muted); font-size: 0.875rem; }

        nav {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
            border-bottom: 1px solid var(--border);
            padding-bottom: 1rem;
        }

        nav a {
            color: var(--text-muted);
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
        }

        nav a:hover { background: var(--border); color: var(--text); }
        nav a.active { background: var(--primary); color: white; }

        .card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .card h2 { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border: 1px solid var(--border);
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            background: var(--card-bg);
            color: var(--text);
            text-decoration: none;
        }

        .btn:hover { background: var(--bg); }
        .btn-primary { background: var(--primary); color: white; border-color: var(--primary); }
        .btn-primary:hover { background: var(--primary-hover); }
        .btn-success { background: var(--success); color: white; border-color: var(--success); }
        .btn-danger { background: var(--error); color: white; border-color: var(--error); }
        .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; }

        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
        th { font-weight: 500; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; }
        tr:hover { background: var(--bg); }

        .badge {
            display: inline-flex;
            padding: 0.25rem 0.5rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .badge-success { background: #dcfce7; color: #166534; }
        .badge-warning { background: #fef3c7; color: #92400e; }
        .badge-info { background: #dbeafe; color: #1e40af; }
        .badge-muted { background: #f1f5f9; color: #64748b; }

        .tabs {
            display: flex;
            gap: 0;
            margin-bottom: 1.5rem;
            border-bottom: 2px solid var(--border);
        }

        .tab {
            padding: 0.75rem 1.5rem;
            cursor: pointer;
            border: none;
            background: transparent;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-muted);
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
        }

        .tab:hover { color: var(--text); }
        .tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }

        .tab-content { display: none; }
        .tab-content.active { display: block; }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .modal.active { display: flex; }

        .modal-content {
            background: var(--card-bg);
            border-radius: 0.5rem;
            padding: 1.5rem;
            width: 100%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .modal-header h3 { font-size: 1.125rem; font-weight: 600; }
        .modal-close { cursor: pointer; font-size: 1.5rem; color: var(--text-muted); }

        .form-group { margin-bottom: 1rem; }
        label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; }

        input[type="text"],
        textarea,
        select {
            width: 100%;
            padding: 0.5rem 0.75rem;
            border: 1px solid var(--border);
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-family: inherit;
        }

        textarea { min-height: 100px; font-family: monospace; }

        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .form-actions {
            display: flex;
            gap: 0.5rem;
            justify-content: flex-end;
            margin-top: 1.5rem;
        }

        .form-row {
            display: flex;
            gap: 1rem;
        }

        .form-row .form-group { flex: 1; }

        .empty-state {
            text-align: center;
            padding: 3rem;
            color: var(--text-muted);
        }

        .alert {
            padding: 0.75rem 1rem;
            border-radius: 0.375rem;
            margin-bottom: 1rem;
        }

        .alert-error { background: #fee2e2; border: 1px solid #fecaca; color: var(--error); }
        .alert-success { background: #dcfce7; border: 1px solid #bbf7d0; color: var(--success); }

        .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            gap: 0.5rem;
        }

        .toolbar-actions {
            display: flex;
            gap: 0.5rem;
        }

        .truncate {
            max-width: 250px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        input[type="checkbox"] {
            width: 1rem;
            height: 1rem;
        }

        .tags {
            display: flex;
            gap: 0.25rem;
            flex-wrap: wrap;
        }

        .tag {
            display: inline-block;
            padding: 0.125rem 0.5rem;
            background: #e2e8f0;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .use-count {
            font-weight: 500;
            color: var(--text-muted);
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div>
                <h1>Favorites</h1>
                <span class="version">{{ current_user.organization_name }}</span>
            </div>
            <div>
                <span style="margin-right: 1rem;">{{ current_user.email }}</span>
                <a href="{{ url_for('auth.logout') }}" class="btn btn-sm">Logout</a>
            </div>
        </header>

        <nav>
            <a href="{{ url_for('dashboard.index') }}">Dashboard</a>
            <a href="{{ url_for('dashboard.schedules') }}">Schedules</a>
            <a href="{{ url_for('dashboard.users') }}">Users</a>
            <a href="{{ url_for('dashboard.configs_page') }}">Configs</a>
            <a href="{{ url_for('dashboard.webhooks_page') }}">Webhooks</a>
            <a href="{{ url_for('dashboard.favorites_page') }}" class="active">Favorites</a>
            <a href="{{ url_for('dashboard.worksheets_page') }}">Worksheets</a>
        </nav>

        <div id="alertContainer"></div>

        <div class="card">
            <div class="tabs">
                <button class="tab active" onclick="switchTab('queries')">Saved Queries</button>
                <button class="tab" onclick="switchTab('sheets')">Saved Sheets</button>
            </div>

            <!-- Queries Tab -->
            <div id="queries-tab" class="tab-content active">
                <div class="toolbar">
                    <h2>Saved Queries ({{ queries|length }})</h2>
                    <div class="toolbar-actions">
                        <button class="btn btn-primary" onclick="openQueryModal()">Add Query</button>
                    </div>
                </div>

                {% if queries %}
                <table>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Query Preview</th>
                            <th>Visibility</th>
                            <th>Uses</th>
                            <th>Last Used</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="queryList">
                        {% for q in queries %}
                        <tr data-query-id="{{ q.id }}">
                            <td>
                                <strong>{{ q.name }}</strong>
                                {% if q.description %}
                                <div class="truncate" style="color: var(--text-muted); font-size: 0.75rem;">{{ q.description }}</div>
                                {% endif %}
                                {% if q.tags %}
                                <div class="tags" style="margin-top: 0.25rem;">
                                    {% for tag in q.tags %}
                                    <span class="tag">{{ tag }}</span>
                                    {% endfor %}
                                </div>
                                {% endif %}
                            </td>
                            <td class="truncate" style="font-family: monospace; font-size: 0.75rem;">{{ q.sql_query[:60] }}...</td>
                            <td>
                                <span class="badge {% if q.is_private %}badge-muted{% else %}badge-info{% endif %}">
                                    {{ 'Private' if q.is_private else 'Shared' }}
                                </span>
                            </td>
                            <td class="use-count">{{ q.use_count }}</td>
                            <td style="font-size: 0.75rem; color: var(--text-muted);">
                                {% if q.last_used_at %}
                                {{ q.last_used_at[:10] }}
                                {% else %}
                                Never
                                {% endif %}
                            </td>
                            <td>
                                <button class="btn btn-sm" onclick="openQueryModal({{ q|tojson }})">Edit</button>
                                <button class="btn btn-sm btn-danger" onclick="deleteQuery({{ q.id }}, '{{ q.name }}')">Delete</button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <div class="empty-state">
                    <p>No saved queries found.</p>
                    <p style="margin-top: 0.5rem;">Click "Add Query" to save your first SQL query.</p>
                </div>
                {% endif %}
            </div>

            <!-- Sheets Tab -->
            <div id="sheets-tab" class="tab-content">
                <div class="toolbar">
                    <h2>Saved Sheets ({{ sheets|length }})</h2>
                    <div class="toolbar-actions">
                        <button class="btn btn-primary" onclick="openSheetModal()">Add Sheet</button>
                    </div>
                </div>

                {% if sheets %}
                <table>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Sheet ID</th>
                            <th>Worksheet</th>
                            <th>Visibility</th>
                            <th>Uses</th>
                            <th>Verified</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="sheetList">
                        {% for s in sheets %}
                        <tr data-sheet-id="{{ s.id }}">
                            <td>
                                <strong>{{ s.name }}</strong>
                                {% if s.description %}
                                <div class="truncate" style="color: var(--text-muted); font-size: 0.75rem;">{{ s.description }}</div>
                                {% endif %}
                                {% if s.tags %}
                                <div class="tags" style="margin-top: 0.25rem;">
                                    {% for tag in s.tags %}
                                    <span class="tag">{{ tag }}</span>
                                    {% endfor %}
                                </div>
                                {% endif %}
                            </td>
                            <td class="truncate" style="font-family: monospace; font-size: 0.75rem;">{{ s.sheet_id[:20] }}...</td>
                            <td>{{ s.default_worksheet }}</td>
                            <td>
                                <span class="badge {% if s.is_private %}badge-muted{% else %}badge-info{% endif %}">
                                    {{ 'Private' if s.is_private else 'Shared' }}
                                </span>
                            </td>
                            <td class="use-count">{{ s.use_count }}</td>
                            <td style="font-size: 0.75rem; color: var(--text-muted);">
                                {% if s.last_verified_at %}
                                {{ s.last_verified_at[:10] }}
                                {% else %}
                                Never
                                {% endif %}
                            </td>
                            <td>
                                <button class="btn btn-sm btn-success" onclick="verifySheet({{ s.id }})">Verify</button>
                                <button class="btn btn-sm" onclick="openSheetModal({{ s|tojson }})">Edit</button>
                                <button class="btn btn-sm btn-danger" onclick="deleteSheet({{ s.id }}, '{{ s.name }}')">Delete</button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <div class="empty-state">
                    <p>No saved sheets found.</p>
                    <p style="margin-top: 0.5rem;">Click "Add Sheet" to save your first Google Sheet reference.</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Query Modal -->
    <div class="modal" id="queryModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="queryModalTitle">Add Favorite Query</h3>
                <span class="modal-close" onclick="closeModal('queryModal')">&times;</span>
            </div>
            <form id="queryForm" onsubmit="saveQuery(event)">
                <input type="hidden" id="queryId" name="id">
                <div class="form-group">
                    <label for="queryName">Name</label>
                    <input type="text" id="queryName" name="name" required placeholder="e.g., Daily Users Report">
                </div>
                <div class="form-group">
                    <label for="queryDescription">Description</label>
                    <input type="text" id="queryDescription" name="description" placeholder="What does this query do?">
                </div>
                <div class="form-group">
                    <label for="querySql">SQL Query</label>
                    <textarea id="querySql" name="sql_query" required placeholder="SELECT * FROM ..."></textarea>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="queryTags">Tags (comma-separated)</label>
                        <input type="text" id="queryTags" name="tags" placeholder="reports, daily">
                    </div>
                    <div class="form-group">
                        <label for="queryPrivate">Visibility</label>
                        <select id="queryPrivate" name="is_private">
                            <option value="false">Shared (visible to team)</option>
                            <option value="true">Private (only you)</option>
                        </select>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn" onclick="closeModal('queryModal')">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Sheet Modal -->
    <div class="modal" id="sheetModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="sheetModalTitle">Add Favorite Sheet</h3>
                <span class="modal-close" onclick="closeModal('sheetModal')">&times;</span>
            </div>
            <form id="sheetForm" onsubmit="saveSheet(event)">
                <input type="hidden" id="sheetId" name="id">
                <div class="form-group">
                    <label for="sheetName">Name</label>
                    <input type="text" id="sheetName" name="name" required placeholder="e.g., Sales Report Sheet">
                </div>
                <div class="form-group">
                    <label for="sheetDescription">Description</label>
                    <input type="text" id="sheetDescription" name="description" placeholder="What is this sheet used for?">
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="sheetGoogleId">Google Sheet ID</label>
                        <input type="text" id="sheetGoogleId" name="sheet_id" required placeholder="From URL: docs.google.com/spreadsheets/d/<ID>/...">
                    </div>
                    <div class="form-group">
                        <label for="sheetWorksheet">Default Worksheet</label>
                        <input type="text" id="sheetWorksheet" name="default_worksheet" value="Sheet1">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="sheetTags">Tags (comma-separated)</label>
                        <input type="text" id="sheetTags" name="tags" placeholder="reports, sales">
                    </div>
                    <div class="form-group">
                        <label for="sheetPrivate">Visibility</label>
                        <select id="sheetPrivate" name="is_private">
                            <option value="false">Shared (visible to team)</option>
                            <option value="true">Private (only you)</option>
                        </select>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn" onclick="closeModal('sheetModal')">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function showAlert(message, type = 'success') {
            const container = document.getElementById('alertContainer');
            container.innerHTML = `<div class="alert alert-${type}">${message}</div>`;
            setTimeout(() => container.innerHTML = '', 5000);
        }

        function switchTab(tab) {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

            document.querySelector(`.tab[onclick="switchTab('${tab}')"]`).classList.add('active');
            document.getElementById(`${tab}-tab`).classList.add('active');
        }

        function closeModal(id) {
            document.getElementById(id).classList.remove('active');
        }

        // Query functions
        function openQueryModal(query = null) {
            document.getElementById('queryModalTitle').textContent = query ? 'Edit Favorite Query' : 'Add Favorite Query';
            document.getElementById('queryForm').reset();

            if (query) {
                document.getElementById('queryId').value = query.id;
                document.getElementById('queryName').value = query.name;
                document.getElementById('queryDescription').value = query.description || '';
                document.getElementById('querySql').value = query.sql_query;
                document.getElementById('queryTags').value = query.tags ? query.tags.join(', ') : '';
                document.getElementById('queryPrivate').value = query.is_private ? 'true' : 'false';
            } else {
                document.getElementById('queryId').value = '';
            }

            document.getElementById('queryModal').classList.add('active');
        }

        async function saveQuery(e) {
            e.preventDefault();
            const form = e.target;
            const id = document.getElementById('queryId').value;
            const isEdit = !!id;

            const tagsValue = document.getElementById('queryTags').value;
            const tags = tagsValue ? tagsValue.split(',').map(t => t.trim()).filter(t => t) : [];

            const data = {
                name: document.getElementById('queryName').value,
                description: document.getElementById('queryDescription').value,
                sql_query: document.getElementById('querySql').value,
                tags: tags,
                is_private: document.getElementById('queryPrivate').value === 'true',
            };

            try {
                const url = isEdit ? `/api/favorites/queries/${id}` : '/api/favorites/queries';
                const method = isEdit ? 'PUT' : 'POST';
                const res = await fetch(url, {
                    method,
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(data),
                });
                const result = await res.json();
                if (result.success) {
                    showAlert(isEdit ? 'Query updated' : 'Query saved');
                    closeModal('queryModal');
                    location.reload();
                } else {
                    showAlert(result.message || 'Failed to save', 'error');
                }
            } catch (err) {
                showAlert('An error occurred', 'error');
            }
        }

        async function deleteQuery(id, name) {
            if (!confirm(`Are you sure you want to delete "${name}"?`)) return;

            try {
                const res = await fetch(`/api/favorites/queries/${id}`, { method: 'DELETE' });
                const result = await res.json();
                if (result.success) {
                    showAlert('Query deleted');
                    location.reload();
                } else {
                    showAlert(result.message || 'Failed to delete', 'error');
                }
            } catch (err) {
                showAlert('An error occurred', 'error');
            }
        }

        // Sheet functions
        function openSheetModal(sheet = null) {
            document.getElementById('sheetModalTitle').textContent = sheet ? 'Edit Favorite Sheet' : 'Add Favorite Sheet';
            document.getElementById('sheetForm').reset();

            if (sheet) {
                document.getElementById('sheetId').value = sheet.id;
                document.getElementById('sheetName').value = sheet.name;
                document.getElementById('sheetDescription').value = sheet.description || '';
                document.getElementById('sheetGoogleId').value = sheet.sheet_id;
                document.getElementById('sheetWorksheet').value = sheet.default_worksheet;
                document.getElementById('sheetTags').value = sheet.tags ? sheet.tags.join(', ') : '';
                document.getElementById('sheetPrivate').value = sheet.is_private ? 'true' : 'false';
            } else {
                document.getElementById('sheetId').value = '';
                document.getElementById('sheetWorksheet').value = 'Sheet1';
            }

            document.getElementById('sheetModal').classList.add('active');
        }

        async function saveSheet(e) {
            e.preventDefault();
            const form = e.target;
            const id = document.getElementById('sheetId').value;
            const isEdit = !!id;

            const tagsValue = document.getElementById('sheetTags').value;
            const tags = tagsValue ? tagsValue.split(',').map(t => t.trim()).filter(t => t) : [];

            const data = {
                name: document.getElementById('sheetName').value,
                description: document.getElementById('sheetDescription').value,
                sheet_id: document.getElementById('sheetGoogleId').value,
                default_worksheet: document.getElementById('sheetWorksheet').value,
                tags: tags,
                is_private: document.getElementById('sheetPrivate').value === 'true',
            };

            try {
                const url = isEdit ? `/api/favorites/sheets/${id}` : '/api/favorites/sheets';
                const method = isEdit ? 'PUT' : 'POST';
                const res = await fetch(url, {
                    method,
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(data),
                });
                const result = await res.json();
                if (result.success) {
                    showAlert(isEdit ? 'Sheet updated' : 'Sheet saved');
                    closeModal('sheetModal');
                    location.reload();
                } else {
                    showAlert(result.message || 'Failed to save', 'error');
                }
            } catch (err) {
                showAlert('An error occurred', 'error');
            }
        }

        async function deleteSheet(id, name) {
            if (!confirm(`Are you sure you want to delete "${name}"?`)) return;

            try {
                const res = await fetch(`/api/favorites/sheets/${id}`, { method: 'DELETE' });
                const result = await res.json();
                if (result.success) {
                    showAlert('Sheet deleted');
                    location.reload();
                } else {
                    showAlert(result.message || 'Failed to delete', 'error');
                }
            } catch (err) {
                showAlert('An error occurred', 'error');
            }
        }

        async function verifySheet(id) {
            showAlert('Verifying sheet access...');

            try {
                const res = await fetch(`/api/favorites/sheets/${id}/verify`, { method: 'POST' });
                const result = await res.json();
                if (result.success) {
                    showAlert(`Access verified! Spreadsheet: "${result.spreadsheet_title}"`);
                    location.reload();
                } else {
                    showAlert(result.message || 'Verification failed', 'error');
                }
            } catch (err) {
                showAlert('An error occurred', 'error');
            }
        }
    </script>
</body>
</html>
