{% extends "base.html" %}
{% block title %}Sector & Industry Explorer{% endblock %}

{% block content %}
<div x-data="sectorExplorer()" class="space-y-5">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <a href="/market/assets" class="text-gray-500 hover:text-gray-300 transition">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            <h1 class="text-2xl font-bold text-white">Sector & Industry Explorer</h1>
        </div>
    </div>

    <!-- Mode Toggle -->
    <div class="flex items-center gap-3">
        <button @click="mode='sector'" class="px-4 py-2 rounded-lg text-sm font-medium transition"
                :class="mode==='sector' ? 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/30' : 'bg-gray-800 text-gray-400 border border-gray-700'">
            📊 Sektor
        </button>
        <button @click="mode='industry'" class="px-4 py-2 rounded-lg text-sm font-medium transition"
                :class="mode==='industry' ? 'bg-purple-500/20 text-purple-300 border border-purple-500/30' : 'bg-gray-800 text-gray-400 border border-gray-700'">
            🏭 Industri
        </button>
    </div>

    <!-- Sector Input -->
    <div class="flex items-center gap-3">
        <input x-model="query" @keyup.enter="search()"
               :placeholder="mode === 'sector' ? 'Contoh: technology, healthcare, financial-services...' : 'Contoh: semiconductors, software-application...'"
               class="flex-1 bg-gray-800 border border-gray-700 text-white rounded-lg px-4 py-2 text-sm focus:ring-cyan-500 focus:border-cyan-500 placeholder-gray-500">
        <button @click="search()" :disabled="loading || !query.trim()"
                class="px-5 py-2 bg-cyan-600 hover:bg-cyan-500 text-white rounded-lg text-sm font-medium transition disabled:opacity-50">
            <span x-show="!loading">Cari</span>
            <span x-show="loading" class="inline-flex items-center gap-2">
                <div class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                Loading...
            </span>
        </button>
    </div>

    <!-- Quick Access Chips -->
    <template x-if="mode === 'sector'">
        <div class="flex flex-wrap gap-2">
            <template x-for="s in sectorChips" :key="s">
                <button @click="query = s; search()"
                        class="px-3 py-1 rounded-full text-xs border border-gray-700 text-gray-400 bg-gray-800/50 hover:border-cyan-600 hover:text-cyan-300 transition"
                        x-text="s"></button>
            </template>
        </div>
    </template>
    <template x-if="mode === 'industry'">
        <div class="flex flex-wrap gap-2">
            <template x-for="s in industryChips" :key="s">
                <button @click="query = s; search()"
                        class="px-3 py-1 rounded-full text-xs border border-gray-700 text-gray-400 bg-gray-800/50 hover:border-purple-600 hover:text-purple-300 transition"
                        x-text="s"></button>
            </template>
        </div>
    </template>

    <!-- Error -->
    <template x-if="error">
        <div class="bg-red-900/20 border border-red-700/30 rounded-lg p-4">
            <p class="text-red-400 text-sm" x-text="error"></p>
        </div>
    </template>

    <!-- Results -->
    <template x-if="!loading && data">
        <div class="space-y-4">
            <!-- Overview Card -->
            <div class="glass rounded-xl border border-gray-800 p-5">
                <h3 class="text-lg font-bold text-white mb-2" x-text="data.name || query"></h3>
                <p class="text-xs text-gray-500">Key: <span class="font-mono text-gray-400" x-text="data.key"></span></p>
            </div>

            <!-- Overview -->
            <template x-if="data.overview">
                <div class="glass rounded-xl border border-gray-800 p-5">
                    <h4 class="text-sm font-semibold text-gray-400 mb-3 uppercase tracking-wider">Overview</h4>
                    <template x-if="data.overview.description">
                        <p class="text-gray-400 text-xs mb-4 leading-relaxed" x-text="data.overview.description"></p>
                    </template>
                    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
                        <template x-for="key in Object.keys(data.overview).filter(k => k !== 'description' && k !== 'message_board_id')" :key="key">
                            <div class="bg-gray-800/50 rounded-lg p-3">
                                <p class="text-[10px] text-gray-500 uppercase tracking-wider" x-text="key.replace(/_/g, ' ')"></p>
                                <p class="text-sm font-mono text-white mt-1" x-text="_fmtCell(data.overview[key])"></p>
                            </div>
                        </template>
                    </div>
                </div>
            </template>

            <!-- Top Companies -->
            <template x-if="data.top_companies && data.top_companies.length > 0">
                <div class="glass rounded-xl border border-gray-800 p-5">
                    <h4 class="text-sm font-semibold text-gray-400 mb-3 uppercase tracking-wider">Top Companies</h4>
                    <div class="overflow-x-auto max-h-96 overflow-y-auto">
                        <table class="w-full text-xs">
                            <thead>
                                <tr class="border-b border-gray-800">
                                    <th class="text-left py-2 text-gray-500">#</th>
                                    <template x-for="col in _companyColumns()" :key="col">
                                        <th class="text-left py-2 text-gray-500 px-2" x-text="col"></th>
                                    </template>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="(c, i) in data.top_companies.slice(0, 30)" :key="i">
                                    <tr class="border-b border-gray-800/30 hover:bg-gray-800/30">
                                        <td class="py-1.5 text-gray-600" x-text="i + 1"></td>
                                        <template x-for="col in _companyColumns()" :key="col">
                                            <td class="py-1.5 px-2 font-mono text-gray-300"
                                                x-text="_fmtCell(c[col])"></td>
                                        </template>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
            </template>

            <!-- Top ETFs (sector only) -->
            <template x-if="data.top_etfs && data.top_etfs.length > 0">
                <div class="glass rounded-xl border border-gray-800 p-5">
                    <h4 class="text-sm font-semibold text-gray-400 mb-3 uppercase tracking-wider">Top ETFs</h4>
                    <div class="overflow-x-auto max-h-64 overflow-y-auto">
                        <table class="w-full text-xs">
                            <thead>
                                <tr class="border-b border-gray-800">
                                    <template x-for="col in _etfColumns()" :key="col">
                                        <th class="text-left py-2 text-gray-500 px-2" x-text="col"></th>
                                    </template>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="(e, i) in data.top_etfs.slice(0, 20)" :key="i">
                                    <tr class="border-b border-gray-800/30">
                                        <template x-for="col in _etfColumns()" :key="col">
                                            <td class="py-1.5 px-2 font-mono text-gray-300" x-text="_fmtCell(e[col])"></td>
                                        </template>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
            </template>
        </div>
    </template>

    <!-- Empty state -->
    <template x-if="!loading && !data && !error">
        <div class="text-center py-16">
            <svg class="w-16 h-16 text-gray-700 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
            <p class="text-gray-500 text-sm">Pilih sektor atau industri untuk melihat data pasar.</p>
            <p class="text-gray-600 text-xs mt-1">Data diambil langsung dari Yahoo Finance API.</p>
        </div>
    </template>
</div>

<script>
function sectorExplorer() {
    return {
        mode: 'sector',
        query: '',
        loading: false,
        data: null,
        error: '',
        sectorChips: ['technology', 'healthcare', 'financial-services', 'consumer-cyclical',
                       'communication-services', 'industrials', 'consumer-defensive', 'energy',
                       'basic-materials', 'real-estate', 'utilities'],
        industryChips: ['semiconductors', 'software-application', 'internet-retail', 'drug-manufacturers',
                        'banks-diversified', 'oil-gas-integrated', 'aerospace-defense', 'auto-manufacturers',
                        'restaurants', 'specialty-retail'],

        async search() {
            const q = this.query.trim().toLowerCase().replace(/\s+/g, '-');
            if (!q) return;
            this.loading = true;
            this.error = '';
            this.data = null;
            const endpoint = this.mode === 'sector'
                ? `/api/v1/market/sectors/${q}`
                : `/api/v1/market/industries/${q}`;
            try {
                const r = await fetch(endpoint);
                const j = await r.json();
                if (!r.ok) { this.error = j.error || 'Gagal memuat data'; return; }
                this.data = j;
            } catch(e) {
                this.error = 'Network error: ' + e.message;
            } finally {
                this.loading = false;
            }
        },

        _companyColumns() {
            if (!this.data?.top_companies?.[0]) return [];
            return Object.keys(this.data.top_companies[0]).filter(k => k !== '_index');
        },

        _etfColumns() {
            if (!this.data?.top_etfs?.[0]) return [];
            return Object.keys(this.data.top_etfs[0]).filter(k => k !== '_index');
        },

        _fmtCell(v) {
            if (v == null) return '-';
            if (typeof v === 'number') {
                if (Math.abs(v) >= 1e12) return (v/1e12).toFixed(1) + 'T';
                if (Math.abs(v) >= 1e9) return (v/1e9).toFixed(1) + 'B';
                if (Math.abs(v) >= 1e6) return (v/1e6).toFixed(1) + 'M';
                if (Math.abs(v) >= 1e3) return (v/1e3).toFixed(1) + 'K';
                if (Math.abs(v) < 1 && v !== 0) return (v * 100).toFixed(2) + '%';
                if (Number.isInteger(v)) return v.toLocaleString();
                return v.toFixed(2);
            }
            return String(v);
        },
    };
}
</script>
{% endblock %}