{# 
    Dashboard Template - Preact Version
    Clean implementation with proper data handling
#}
{% extends "base_preact.html" %}

{% block title %}Session Dashboard - DocuPDF{% endblock %}

{% block head %}
<style>
    .dashboard-container {
        padding: 2rem 0;
    }
    .filter-tabs {
        margin-bottom: 1.5rem;
    }
    .bulk-actions {
        margin-bottom: 1rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div id="dashboard-root"></div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}

<script>
    // Server data passed to Preact
    window.DASHBOARD_INITIAL_DATA = {
        sessions: {{ sessions | tojson | default('[]') }},
        filterType: '{{ filter_type | default("all") }}',
        showSize: {{ 'true' if show_size else 'false' }},
        csrfToken: '{{ csrf_token() if csrf_token else "" }}'
    };
</script>

<script type="module">
    import { h, render } from 'https://esm.sh/preact@10.19.3';
    import { useState, useMemo, useCallback } from 'https://esm.sh/preact@10.19.3/hooks';
    import htm from 'https://esm.sh/htm@3.1.1';

    const html = htm.bind(h);

    // === Filter Tabs Component ===
    function FilterTabs({ activeFilter, onFilterChange }) {
        const filters = [
            { value: 'all', label: 'All' },
            { value: 'standard', label: 'Standard Sessions' },
            { value: 'collections', label: 'NEETprep Collections' }
        ];

        return html`
            <ul class="nav nav-pills filter-tabs">
                ${filters.map(filter => html`
                    <li class="nav-item">
                        <button
                            class="nav-link ${activeFilter === filter.value ? 'active' : ''}"
                            onClick=${() => onFilterChange(filter.value)}
                        >
                            ${filter.label}
                        </button>
                    </li>
                `)}
            </ul>
        `;
    }

    // === Bulk Actions Bar ===
    function BulkActions({ selectedCount, onDelete, onSetGroup, onClear }) {
        if (selectedCount === 0) return null;

        return html`
            <div class="alert alert-info d-flex align-items-center justify-content-between bulk-actions">
                <span>
                    <i class="bi bi-check-circle-fill me-2"></i>
                    <strong>${selectedCount}</strong> session${selectedCount > 1 ? 's' : ''} selected
                </span>
                <div class="btn-group">
                    <button class="btn btn-outline-danger btn-sm" onClick=${onDelete}>
                        <i class="bi bi-trash me-1"></i>Delete
                    </button>
                    <button class="btn btn-outline-info btn-sm" onClick=${onSetGroup}>
                        <i class="bi bi-folder me-1"></i>Set Group
                    </button>
                    <button class="btn btn-outline-secondary btn-sm" onClick=${onClear}>
                        <i class="bi bi-x-lg me-1"></i>Clear
                    </button>
                </div>
            </div>
        `;
    }

    // === Session Table ===
    function SessionTable({ sessions, showSize, onTogglePersist, onRename, onSetGroup }) {
        const [editingName, setEditingName] = useState(null);
        const [editingGroup, setEditingGroup] = useState(null);
        const [nameValue, setNameValue] = useState('');
        const [groupValue, setGroupValue] = useState('');

        const startEditName = (session) => {
            setEditingName(session.id);
            setNameValue(session.name || session.original_filename || '');
        };

        const saveEditName = async (sessionId) => {
            if (nameValue.trim()) {
                await fetch(`/rename_session/${sessionId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': window.DASHBOARD_INITIAL_DATA.csrfToken
                    },
                    body: JSON.stringify({ new_name: nameValue.trim() })
                });
                window.location.reload();
            }
            setEditingName(null);
        };

        const startEditGroup = (session) => {
            setEditingGroup(session.id);
            setGroupValue(session.group_name || '');
        };

        const saveEditGroup = async (sessionId) => {
            await fetch('/sessions/update_group', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': window.DASHBOARD_INITIAL_DATA.csrfToken
                },
                body: JSON.stringify({ session_id: sessionId, group_name: groupValue.trim() || null })
            });
            window.location.reload();
        };

        const columns = useMemo(() => {
            const cols = [
                { key: 'serial', header: 'S.No.', style: 'width: 3%' },
                { key: 'select', header: '', style: 'width: 3%' },
                { key: 'name', header: 'Name' },
                { key: 'group', header: 'Group' },
                { key: 'created_at', header: 'Created At' },
                { key: 'page_count', header: 'Pages' },
                { key: 'question_count', header: 'Questions' }
            ];
            if (showSize) {
                cols.push({ key: 'size', header: 'Size' });
            }
            cols.push(
                { key: 'status', header: 'Status' },
                { key: 'actions', header: 'Actions' }
            );
            return cols;
        }, [showSize]);

        return html`
            <div class="table-responsive">
                <table class="table table-hover table-striped">
                    <thead>
                        <tr>
                            ${columns.map(col => html`
                                <th scope="col" style="${col.style || ''}">${col.header}</th>
                            `)}
                        </tr>
                    </thead>
                    <tbody>
                        ${sessions.length === 0 ? html`
                            <tr>
                                <td colSpan=${columns.length} class="text-center py-4 text-muted">
                                    No sessions found
                                </td>
                            </tr>
                        ` : sessions.map((session, index) => html`
                            <tr key=${session.id} data-session-id=${session.id}>
                                <td>${index + 1}</td>
                                <td>
                                    <input type="checkbox" class="form-check-input session-checkbox" value=${session.id} />
                                </td>
                                <td>
                                    ${editingName === session.id ? html`
                                        <div class="input-group input-group-sm">
                                            <input
                                                type="text"
                                                class="form-control"
                                                value=${nameValue}
                                                onInput=${(e) => setNameValue(e.target.value)}
                                                onBlur=${() => saveEditName(session.id)}
                                                onKeyDown=${(e) => {
                                                    if (e.key === 'Enter') saveEditName(session.id);
                                                    if (e.key === 'Escape') setEditingName(null);
                                                }}
                                                autoFocus
                                            />
                                        </div>
                                    ` : html`
                                        <span 
                                            class="editable-name" 
                                            style="cursor: pointer;"
                                            onClick=${() => startEditName(session)}
                                        >
                                            ${session.name || session.original_filename || 'Untitled'}
                                        </span>
                                        <i class="fas fa-pencil-alt ms-2 text-muted" style="font-size: 0.8rem; cursor: pointer;" onClick=${() => startEditName(session)}></i>
                                    `}
                                </td>
                                <td>
                                    ${editingGroup === session.id ? html`
                                        <div class="input-group input-group-sm">
                                            <input
                                                type="text"
                                                class="form-control"
                                                value=${groupValue}
                                                onInput=${(e) => setGroupValue(e.target.value)}
                                                onBlur=${() => saveEditGroup(session.id)}
                                                onKeyDown=${(e) => {
                                                    if (e.key === 'Enter') saveEditGroup(session.id);
                                                    if (e.key === 'Escape') setEditingGroup(null);
                                                }}
                                                autoFocus
                                            />
                                        </div>
                                    ` : html`
                                        <span 
                                            class="text-muted"
                                            style="cursor: pointer;"
                                            onClick=${() => startEditGroup(session)}
                                        >
                                            ${session.group_name || 'None'}
                                        </span>
                                        <i class="fas fa-pencil-alt ms-2 text-muted" style="font-size: 0.8rem; cursor: pointer;" onClick=${() => startEditGroup(session)}></i>
                                    `}
                                </td>
                                <td>
                                    <span class="badge bg-secondary">${session.created_at}</span>
                                </td>
                                <td>${session.page_count || 0}</td>
                                <td>${session.question_count || 0}</td>
                                ${showSize ? html`
                                    <td class="size-column fw-bold text-info">
                                        ${session.total_size_formatted || 'N/A'}
                                    </td>
                                ` : ''}
                                <td>
                                    <span class="badge ${session.persist ? 'bg-success' : 'bg-secondary'}">
                                        ${session.persist ? 'Persisted' : 'Not Persisted'}
                                    </span>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        ${session.session_type === 'neetprep_collection' ? html`
                                            <a href="/neetprep/collections/${session.id}" class="btn btn-warning btn-sm text-dark">
                                                <i class="bi bi-eye-fill"></i> View Collection
                                            </a>
                                        ` : html`
                                            <a href="/question_entry_v2/${session.id}" class="btn btn-primary btn-sm">
                                                <i class="bi bi-list-check"></i> View
                                            </a>
                                            <a href="/cropv2/${session.id}/0" class="btn btn-secondary btn-sm">
                                                <i class="bi bi-pencil"></i> Crop
                                            </a>
                                            ${session.has_classified ? html`
                                                <a href="/neetprep/collections/${session.id}" class="btn btn-warning btn-sm text-dark">
                                                    <i class="bi bi-star-fill"></i> Collection
                                                </a>
                                            ` : ''}
                                        `}
                                        <button 
                                            class="btn btn-info btn-sm"
                                            title="Toggle Persistence"
                                            onClick=${() => onTogglePersist(session.id)}
                                        >
                                            <i class="bi bi-shield-lock"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        `)}
                    </tbody>
                </table>
            </div>
        `;
    }

    // === Group Modal ===
    function GroupModal({ show, count, onClose, onConfirm }) {
        const [groupName, setGroupName] = useState('');

        if (!show) return null;

        return html`
            <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Set Group</h5>
                            <button type="button" class="btn-close" onClick=${onClose}></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label">Group Name</label>
                                <input
                                    type="text"
                                    class="form-control"
                                    value=${groupName}
                                    onInput=${(e) => setGroupName(e.target.value)}
                                    placeholder="Enter group name (leave empty to remove)"
                                    autoFocus
                                />
                            </div>
                            <p class="text-muted mb-0">This will update <strong>${count}</strong> sessions</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" onClick=${onClose}>Cancel</button>
                            <button type="button" class="btn btn-primary" onClick=${() => onConfirm(groupName)}>Set Group</button>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    // === Main Dashboard App ===
    function DashboardApp({ initialSessions, initialFilter, showSize }) {
        const [sessions, setSessions] = useState(initialSessions);
        const [filter, setFilter] = useState(initialFilter);
        const [selectedIds, setSelectedIds] = useState([]);
        const [showGroupModal, setShowGroupModal] = useState(false);

        // Filter sessions
        const filteredSessions = useMemo(() => {
            if (filter === 'standard') {
                return sessions.filter(s => !s.session_type || s.session_type === 'standard');
            } else if (filter === 'collections') {
                return sessions.filter(s => s.session_type === 'neetprep_collection');
            }
            return sessions;
        }, [sessions, filter]);

        // Toggle selection
        const toggleSelectAll = (e) => {
            const checkboxes = document.querySelectorAll('.session-checkbox');
            if (e.target.checked) {
                setSelectedIds(filteredSessions.map(s => s.id));
            } else {
                setSelectedIds([]);
            }
            checkboxes.forEach(cb => cb.checked = e.target.checked);
        };

        const toggleSelect = (id) => {
            const checkbox = document.querySelector(`.session-checkbox[value="${id}"]`);
            if (selectedIds.includes(id)) {
                setSelectedIds(selectedIds.filter(sid => sid !== id));
                if (checkbox) checkbox.checked = false;
            } else {
                setSelectedIds([...selectedIds, id]);
                if (checkbox) checkbox.checked = true;
            }
        };

        // Toggle persist
        const handleTogglePersist = useCallback(async (sessionId) => {
            await fetch(`/toggle_persist/${sessionId}`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': window.DASHBOARD_INITIAL_DATA.csrfToken
                }
            });
            window.location.reload();
        }, []);

        // Batch delete
        const handleDelete = useCallback(async () => {
            if (!confirm(`Delete ${selectedIds.length} sessions?`)) return;
            
            await fetch('/sessions/batch_delete', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': window.DASHBOARD_INITIAL_DATA.csrfToken
                },
                body: JSON.stringify({ ids: selectedIds })
            });
            window.location.reload();
        }, [selectedIds]);

        // Set group for selected
        const handleSetGroup = useCallback(async (groupName) => {
            await fetch('/sessions/batch_update_group', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': window.DASHBOARD_INITIAL_DATA.csrfToken
                },
                body: JSON.stringify({ ids: selectedIds, group_name: groupName.trim() || null })
            });
            window.location.reload();
        }, [selectedIds]);

        return html`
            <div class="dashboard-container">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h2>Session Dashboard</h2>
                </div>

                <${FilterTabs} 
                    activeFilter=${filter} 
                    onFilterChange=${setFilter} 
                />

                <${BulkActions} 
                    selectedCount=${selectedIds.length}
                    onDelete=${handleDelete}
                    onSetGroup=${() => setShowGroupModal(true)}
                    onClear=${() => setSelectedIds([])}
                />

                <div class="mb-3">
                    <input 
                        type="checkbox" 
                        class="form-check-input" 
                        id="select-all"
                        onChange=${toggleSelectAll}
                    />
                    <label class="form-check-label ms-2" for="select-all">Select All</label>
                </div>

                <${SessionTable} 
                    sessions=${filteredSessions}
                    showSize=${showSize}
                    onTogglePersist=${handleTogglePersist}
                />

                <${GroupModal}
                    show=${showGroupModal}
                    count=${selectedIds.length}
                    onClose=${() => setShowGroupModal(false)}
                    onConfirm=${handleSetGroup}
                />
            </div>
        `;
    }

    // Render the app
    const data = window.DASHBOARD_INITIAL_DATA;
    render(
        html`<${DashboardApp} 
            initialSessions=${data.sessions}
            initialFilter=${data.filterType}
            showSize=${data.showSize}
        />`,
        document.getElementById('dashboard-root')
    );
</script>
{% endblock %}