{% extends "base.html" %}
{% from "components/feedback.html" import empty_state, loading_spinner %}

{% block title %}Data Explorer - Analytics{% endblock %}

{% block head %}
<link rel="stylesheet" href="/static/plugins/bi/bi.css">
{% endblock %}

{% block content %}
<div class="studio-shell" style="display:flex;height:100%;overflow:hidden">
    {% include "plugins/bi/partials/bi_sidebar.html" %}

    <div style="flex:1;display:flex;overflow:hidden" x-data="dataExplorer()">
        <!-- Left panel: Source tree -->
        <div style="width:16rem;overflow:auto;border-right:1px solid var(--border)">
            <div style="padding:16px">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-sm font-semibold" style="color:var(--fg-3)">Data Sources</h2>
                    <button @click="refreshSources()" class="btn btn-sm btn-ghost" style="padding:4px">
                        <i data-lucide="refresh-cw"></i>
                    </button>
                </div>

                <template x-if="sources.length === 0">
                    <div class="text-sm" style="padding:16px 0;text-align:center;color:var(--fg-3)">
                        <p>No data sources</p>
                        <button @click="discoverSources()" class="text-xs" style="color:var(--brand);margin-top:8px">
                            Discover Sources
                        </button>
                    </div>
                </template>

                <div style="display:flex;flex-direction:column;gap:4px">
                    <template x-for="source in sources" :key="source.id">
                        <div>
                            <button @click="toggleSource(source)"
                                    class="flex items-center gap-2"
                                    style="width:100%;text-align:left;padding:6px 8px;border-radius:6px;font-size:13px;background:transparent;border:none;cursor:pointer;color:var(--fg-2);font-family:inherit"
                                    :style="selectedSource?.id === source.id ? 'background:var(--surface-2);color:var(--fg)' : 'color:var(--fg-3)'">
                                <i data-lucide="database" class="w-3 h-3 flex-shrink-0"></i>
                                <span class="truncate" x-text="source.name"></span>
                                <span class="text-xs ml-auto" style="color:var(--fg-4)" x-text="source.source_type"></span>
                            </button>

                            <!-- Tables under source -->
                            <div x-show="selectedSource?.id === source.id && sourceTables.length > 0" style="margin-left:20px;margin-top:2px;display:flex;flex-direction:column;gap:2px">
                                <template x-for="table in sourceTables" :key="table">
                                    <button @click="selectTable(source, table)"
                                            class="flex items-center gap-2"
                                            style="width:100%;text-align:left;padding:4px 8px;border-radius:6px;font-size:12px;background:transparent;border:none;cursor:pointer;color:var(--fg-3);font-family:inherit"
                                            :style="selectedTable === table ? 'background:var(--surface-2);color:var(--brand)' : ''">
                                        <i data-lucide="table-2" class="w-3 h-3 flex-shrink-0"></i>
                                        <span class="truncate" x-text="table"></span>
                                    </button>
                                </template>
                            </div>

                            <div x-show="selectedSource?.id === source.id && loadingTables" style="margin-left:20px;padding:8px 0">
                                <div class="animate-spin rounded-full h-3 w-3 border-b" style="border-color:var(--fg-3)"></div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <!-- Right panel: Schema + Preview -->
        <div style="flex:1;display:flex;flex-direction:column;overflow:hidden">
            <template x-if="!selectedTable">
                <div class="flex-1 flex items-center justify-center" style="color:var(--fg-3)">
                    <div class="text-center">
                        <i data-lucide="database" class="w-12 h-12 mx-auto mb-4" style="color:var(--fg-4)"></i>
                        <p class="text-lg">Select a table to explore</p>
                        <p class="text-sm mt-1" style="color:var(--fg-4)">Choose a data source and table from the left panel</p>
                    </div>
                </div>
            </template>

            <template x-if="selectedTable">
                <div style="flex:1;display:flex;flex-direction:column;overflow:hidden">
                    <!-- Table header -->
                    <div class="flex items-center justify-between" style="padding:12px 24px;border-bottom:1px solid var(--border)">
                        <div class="flex items-center gap-2">
                            <i data-lucide="table-2" class="w-4 h-4" style="color:var(--fg-3)"></i>
                            <span class="font-medium" x-text="selectedTable"></span>
                            <span class="text-xs" style="color:var(--fg-4)" x-text="selectedSource?.name"></span>
                        </div>
                        <div class="flex items-center gap-2">
                            <a :href="`/bi/queries/new?source_id=${selectedSource?.id}&table=${selectedTable}`"
                               class="btn btn-brand">
                                <i data-lucide="play"></i> Open in Query Editor
                            </a>
                        </div>
                    </div>

                    <!-- Tabs: Schema / Preview -->
                    <div class="flex" style="border-bottom:1px solid var(--border)">
                        <button @click="explorerTab = 'schema'"
                                class="nav-tab" :class="explorerTab === 'schema' ? 'active' : ''">Schema</button>
                        <button @click="explorerTab = 'preview'; loadPreview()"
                                class="nav-tab" :class="explorerTab === 'preview' ? 'active' : ''">Preview</button>
                    </div>

                    <!-- Schema view -->
                    <div x-show="explorerTab === 'schema'" class="flex-1 overflow-auto">
                        <div x-show="loadingSchema" class="flex items-center justify-center" style="padding:32px">
                            <div class="animate-spin rounded-full h-6 w-6 border-b-2" style="border-color:var(--brand)"></div>
                        </div>
                        <table x-show="!loadingSchema && tableSchema.length > 0" class="dtable">
                            <thead>
                                <tr>
                                    <th>Column</th>
                                    <th>Type</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="(col, idx) in tableSchema" :key="idx">
                                    <tr>
                                        <td class="mono" x-text="col.name"></td>
                                        <td x-text="col.type" style="color:var(--fg-3)"></td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                        <div x-show="!loadingSchema && tableSchema.length === 0" style="padding:32px;text-align:center;color:var(--fg-3)">
                            No schema information available
                        </div>
                    </div>

                    <!-- Preview view -->
                    <div x-show="explorerTab === 'preview'" class="flex-1 overflow-auto">
                        <div x-show="loadingPreview" class="flex items-center justify-center" style="padding:32px">
                            <div class="animate-spin rounded-full h-6 w-6 border-b-2" style="border-color:var(--brand)"></div>
                        </div>
                        <table x-show="!loadingPreview && previewColumns.length > 0" class="dtable">
                            <thead>
                                <tr>
                                    <template x-for="col in previewColumns" :key="col">
                                        <th x-text="col"></th>
                                    </template>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="(row, idx) in previewRows" :key="idx">
                                    <tr>
                                        <template x-for="(val, cidx) in row" :key="cidx">
                                            <td x-text="val"></td>
                                        </template>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                        <div x-show="!loadingPreview && previewColumns.length > 0" class="text-xs" style="padding:8px 12px;color:var(--fg-3);border-top:1px solid var(--border)">
                            Showing first 20 rows
                        </div>
                        <div x-show="!loadingPreview && previewColumns.length === 0 && !previewError" style="padding:32px;text-align:center;color:var(--fg-3)">
                            Click Preview to load data
                        </div>
                        <div x-show="previewError" class="text-sm" style="padding:16px;color:var(--red)" x-text="previewError"></div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/plugins/bi/bi.js"></script>
<script src="/static/plugins/bi/explore.js"></script>
{% endblock %}