frontend/src/components/DataHubModal.vue

<script setup>

import { 

  X, 

  ArrowLeft, 

  LineChart, 

  TrendingUp, 

  Activity, 

  BarChart3, 

  Layers,

  ChevronDown,

  ChevronUp,

  RotateCcw,

  Trash2,

  Save,

  Check,

  Database,

  Search,

  Plus,

  Download,

  CheckCircle2,

  Clock,

  Zap,

  Globe

} from 'lucide-vue-next';

import { ref, onMounted, computed, watch } from 'vue';

import { api } from '../services/api';



const props = defineProps({

  isOpen: Boolean,

  initialTab: String

});



const emit = defineEmits(['close', 'universeUpdated']);



const activeTab = ref('universe'); // universe, features, sync

const tabs = [

  { id: 'universe', name: 'Stock Universe', icon: Globe },

  { id: 'features', name: 'Feature Vault', icon: Activity },

  { id: 'sync', name: 'Feature Sync', icon: Zap }

];



// --- UNIVERSE LOGIC ---

const stockUniverse = ref([]);

const isFetchingUniverse = ref(false);

const symbolQuery = ref('');

const isSearching = ref(false);

const searchResults = ref([]);



const fetchUniverse = async () => {

  isFetchingUniverse.value = true;

  try {

    const data = await api.get('/ai/universe');

    stockUniverse.value = data;

  } catch (error) {

    console.error('Error fetching universe:', error);

  } finally {

    isFetchingUniverse.value = false;

  }

};



const performSearch = async () => {

  if (!symbolQuery.value.trim()) return;

  isSearching.value = true;

  try {

    const data = await api.get(`/search?q=${encodeURIComponent(symbolQuery.value)}`);

    searchResults.value = data.results || [];

  } catch (error) {

    console.error('Search failed:', error);

  } finally {

    isSearching.value = false;

  }

};



const addSymbol = async (item) => {

  try {

    await api.post('/ai/universe', {

      symbol: item.symbol,

      name: item.name

    });

    symbolQuery.value = '';

    searchResults.value = [];

    await fetchUniverse();

    emit('universeUpdated');

    fetchStatus();

  } catch (error) {

    console.error('Error adding to universe:', error);

  }

};



// --- INDICATORS LOGIC ---

const categories = ref([

  {

    id: 'trend',

    name: 'Trend Signals',

    icon: TrendingUp,

    color: 'text-blue-400',

    indicators: [

      { id: 'sma', name: 'SMA (Moving Average)' },

      { id: 'ema', name: 'EMA (Exponential MA)' },

      { id: 'bb', name: 'Bollinger Bands' },

      { id: 'macd', name: 'MACD Convergence' },

      { id: 'ichimoku', name: 'Ichimoku Cloud' }

    ],

    isOpen: true

  },

  {

    id: 'momentum',

    name: 'Momentum Logic',

    icon: Activity,

    color: 'text-emerald-400',

    indicators: [

      { id: 'rsi', name: 'RSI Strength' },

      { id: 'stoch', name: 'Stochastic Osc' },

      { id: 'cci', name: 'Commodity Channel' },

      { id: 'williams', name: 'Williams %R' }

    ],

    isOpen: false

  },

  {

    id: 'volume',

    name: 'Volume Matrices',

    icon: BarChart3,

    color: 'text-amber-400',

    indicators: [

      { id: 'volume', name: 'Market Volume' },

      { id: 'obv', name: 'OBV Flow' },

      { id: 'vwap', name: 'VWAP Price' },

      { id: 'cmf', name: 'Chaikin Flow' }

    ],

    isOpen: false

  },

  {

    id: 'volatility',

    name: 'Volatility Scope',

    icon: Layers,

    color: 'text-rose-400',

    indicators: [

      { id: 'atr', name: 'ATR Range' },

      { id: 'keltner', name: 'Keltner Logic' },

      { id: 'donchian', name: 'Donchian Channels' }

    ],

    isOpen: false

  }

]);



const selectedIndicators = ref(new Set());

const isSaving = ref(false);



const fetchUserIndicators = async () => {

  try {

    const data = await api.get('/user/indicators');

    selectedIndicators.value = new Set(data);

  } catch (error) {

    console.error('Error fetching indicators:', error);

  }

};



const saveIndicators = async () => {

  isSaving.value = true;

  try {

    await api.post('/user/indicators', {

      indicators: Array.from(selectedIndicators.value)

    });

  } catch (error) {

    console.error('Error saving indicators:', error);

  } finally {

    isSaving.value = false;

  }

};



const toggleIndicator = (id) => {

  if (selectedIndicators.value.has(id)) {

    selectedIndicators.value.delete(id);

  } else {

    selectedIndicators.value.add(id);

  }

};



const getActiveCount = (category) => {

  return category.indicators.filter(ind => selectedIndicators.value.has(ind.id)).length;

};



// --- SYNC LOGIC ---

const featuresStatus = ref({ display: '0/0', ready: 0, total: 0 });

const isSyncing = ref(false);



const fetchStatus = async () => {

  try {

    const data = await api.get('/ai/features-status');

    featuresStatus.value = data;

  } catch (error) {

    console.error('Error fetching status:', error);

  }

};



const syncAll = async () => {

  isSyncing.value = true;

  try {

    await api.post('/ai/universe/sync-all');

    await fetchStatus();

  } catch (error) {

    console.error('Sync failed:', error);

  } finally {

    isSyncing.value = false;

  }

};



onMounted(() => {

  fetchUniverse();

  fetchUserIndicators();

  fetchStatus();

});



watch(() => props.isOpen, (newVal) => {

  if (newVal) {

    if (props.initialTab) activeTab.value = props.initialTab;

    fetchUniverse();

    fetchUserIndicators();

    fetchStatus();

  }

});

</script>

<template>
  <div v-if="isOpen" class="fixed inset-0 z-[120] flex items-center justify-center md:p-4 overflow-hidden">
    <!-- Backdrop -->
    <div class="absolute inset-0 bg-slate-950/98 backdrop-blur-xl" @click="$emit('close')"></div>
    
    <!-- Modal Container -->
    <div class="relative w-full h-full md:h-auto md:max-w-4xl bg-[#0b1120] border-0 md:border md:border-slate-800 md:rounded-[2.5rem] shadow-2xl flex flex-col overflow-hidden animate-in fade-in duration-300 md:max-h-[90vh]">
      
      <!-- Header -->
      <div class="flex items-center justify-between px-6 py-5 md:py-8 border-b border-slate-800 bg-slate-900/40">
        <div class="flex items-center gap-4">
            <div class="w-10 h-10 md:w-14 md:h-14 bg-blue-600/10 rounded-xl md:rounded-2xl border border-blue-500/20 flex items-center justify-center text-blue-500">
              <Database class="w-6 h-6 md:w-8 md:h-8" />
            </div>
            <div>
              <h2 class="text-xl md:text-2xl font-black text-white tracking-tight uppercase">Data <span class="text-blue-500">Hub</span></h2>
              <p class="text-[9px] md:text-[10px] text-slate-500 font-black uppercase tracking-[0.2em] mt-0.5">Primary Vector Provisioning Node</p>
            </div>
        </div>
        <button @click="$emit('close')" class="p-2.5 bg-slate-800 hover:bg-slate-700 rounded-xl transition-all">
          <X class="w-5 h-5 text-slate-300" />
        </button>
      </div>

      <!-- NAV TABS -->
      <div class="flex-none flex px-4 md:px-10 gap-2 border-b border-slate-800 bg-slate-950/20 overflow-x-auto custom-scrollbar">
           <button v-for="t in tabs" :key="t.id" @click="activeTab = t.id" 

                   class="px-6 py-5 text-[10px] md:text-xs font-black uppercase tracking-[0.2em] transition-all relative shrink-0"

                   :class="activeTab === t.id ? 'text-blue-400' : 'text-slate-500 hover:text-white'">
              <span class="flex items-center gap-2">
                 <component :is="t.icon" class="w-4 h-4" />
                 {{ t.name }}
              </span>
              <div v-if="activeTab === t.id" class="absolute bottom-0 left-0 right-0 h-1 bg-blue-500 rounded-t-full shadow-[0_0_10px_rgba(59,130,246,0.5)]"></div>
           </button>
      </div>

      <!-- Content -->
      <div class="flex-1 overflow-y-auto custom-scrollbar p-6 md:p-10 bg-[#05080f]/30 min-h-0 overscroll-contain" style="-webkit-overflow-scrolling: touch;">
        
        <!-- ASSET UNIVERSE TAB -->
        <div v-if="activeTab === 'universe'" class="space-y-8 animate-in fade-in duration-500">
           <div class="bg-blue-600/5 border border-blue-500/10 rounded-3xl p-6 flex flex-col sm:flex-row sm:items-center justify-between gap-6">
              <div>
                 <h3 class="text-lg font-black text-white mb-1">Stock Universe</h3>
                 <p class="text-xs text-slate-500">Define the global pool of assets and indices for NEXUS to monitor.</p>
              </div>
              <div class="flex items-center gap-3">
                 <div class="relative">
                    <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
                    <input 

                      v-model="symbolQuery"

                      @keydown.enter="performSearch"

                      type="text" 

                      placeholder="Add Symbol..." 

                      class="bg-slate-950 border border-slate-800 rounded-xl py-2.5 pl-10 pr-4 text-xs text-white focus:border-blue-500 focus:outline-none w-40 sm:w-56"

                    />
                 </div>
                 <button @click="performSearch" class="p-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl transition-all shadow-lg active:scale-95">
                    <Plus class="w-5 h-5" />
                 </button>
              </div>
           </div>

           <!-- SEARCH RESULTS -->
           <div v-if="searchResults.length > 0" class="bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden divide-y divide-slate-800 max-h-60 overflow-y-auto">
              <div v-for="res in searchResults" :key="res.symbol" @click="addSymbol(res)" class="p-4 hover:bg-blue-600/10 cursor-pointer flex items-center justify-between group">
                 <div class="flex items-center gap-4">
                    <span class="text-base font-black text-white">{{ res.symbol }}</span>
                    <span class="text-xs text-slate-500 font-bold truncate">{{ res.name }}</span>
                 </div>
                 <Plus class="w-4 h-4 text-slate-700 group-hover:text-blue-500" />
              </div>
           </div>

           <!-- CURRENT UNIVERSE -->
           <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-3">
              <div v-for="s in stockUniverse" :key="s" class="p-3 bg-slate-900 border border-slate-800 rounded-2xl flex items-center justify-between group hover:border-blue-500/30 transition-all">
                 <span class="text-sm font-black text-white">{{ s }}</span>
                 <CheckCircle2 class="w-3.5 h-3.5 text-emerald-500/40 group-hover:text-emerald-500 transition-colors" />
              </div>
              <div v-if="stockUniverse.length === 0" class="col-span-full py-16 text-center border-2 border-dashed border-slate-800 rounded-[2.5rem]">
                 <Globe class="w-12 h-12 text-slate-800 mx-auto mb-4" />
                 <p class="text-xs font-black text-slate-600 uppercase tracking-widest">No assets provisioned</p>
              </div>
           </div>
        </div>

        <!-- FEATURE VAULT TAB -->
        <div v-if="activeTab === 'features'" class="space-y-8 animate-in fade-in duration-500">
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div v-for="cat in categories" :key="cat.id" class="border border-slate-800 rounded-[2rem] bg-slate-900/40 overflow-hidden">
                 <div @click="cat.isOpen = !cat.isOpen" class="p-5 md:p-6 flex items-center justify-between cursor-pointer hover:bg-white/5 transition-colors">
                    <div class="flex items-center gap-4">
                       <div :class="['w-10 h-10 rounded-xl flex items-center justify-center bg-slate-950', cat.color]">
                          <component :is="cat.icon" class="w-5 h-5" />
                       </div>
                       <span class="font-black text-sm text-white uppercase tracking-widest">{{ cat.name }}</span>
                    </div>
                    <ChevronDown class="w-4 h-4 text-slate-600 transition-transform" :class="cat.isOpen ? 'rotate-180' : ''" />
                 </div>
                 <div v-if="cat.isOpen" class="px-5 pb-5 grid grid-cols-1 gap-1">
                    <button v-for="ind in cat.indicators" :key="ind.id" @click="toggleIndicator(ind.id)" 

                            class="flex items-center justify-between p-3 rounded-xl transition-all border-2"

                            :class="selectedIndicators.has(ind.id) ? 'bg-blue-600/10 border-blue-500/30 text-white' : 'border-transparent text-slate-500 hover:bg-white/5'">
                       <span class="text-xs font-bold">{{ ind.name }}</span>
                       <div class="w-5 h-5 rounded-md border-2 flex items-center justify-center" :class="selectedIndicators.has(ind.id) ? 'bg-blue-600 border-blue-500' : 'border-slate-800 bg-slate-950'">
                          <Check v-if="selectedIndicators.has(ind.id)" class="w-3.5 h-3.5 text-white stroke-[3px]" />
                       </div>
                    </button>
                 </div>
              </div>
           </div>
           <button @click="saveIndicators" :disabled="isSaving" class="w-full py-4 bg-blue-600 hover:bg-blue-500 text-white font-black uppercase tracking-widest rounded-2xl shadow-xl shadow-blue-900/40 active:scale-95 disabled:opacity-50">
              {{ isSaving ? 'Committing Preferences...' : 'Apply Config' }}
           </button>
        </div>

        <!-- NEURAL SYNC TAB -->
        <div v-if="activeTab === 'sync'" class="space-y-8 animate-in fade-in duration-500 h-full flex flex-col justify-center max-w-2xl mx-auto py-10">
           <div class="text-center space-y-4">
              <div class="relative inline-block">
                 <div class="w-24 h-24 md:w-32 md:h-32 border-4 border-slate-800 rounded-[2.5rem] flex items-center justify-center">
                    <Zap class="w-10 h-10 md:w-16 md:h-16 text-blue-500" :class="isSyncing ? 'animate-pulse' : ''" />
                    <div v-if="isSyncing" class="absolute inset-0 border-4 border-blue-500 border-t-transparent rounded-[2.5rem] animate-spin"></div>
                 </div>
                 <div class="absolute -bottom-2 -right-2 w-10 h-10 bg-emerald-500 border-4 border-[#0b1120] rounded-full flex items-center justify-center">
                    <Activity class="w-5 h-5 text-white" />
                 </div>
              </div>
              <h3 class="text-2xl md:text-3xl font-black text-white tracking-tighter">Vault Synchronization</h3>
              <p class="text-sm text-slate-500 font-medium">Reconcile local vector cache with historical market data.</p>
           </div>

           <div class="grid grid-cols-2 gap-4">
              <div class="bg-slate-900 border border-slate-800 p-6 rounded-3xl">
                 <span class="text-[10px] font-black text-slate-600 uppercase tracking-widest mb-1 block">Provisioned</span>
                 <div class="text-3xl font-black text-white">{{ featuresStatus.total }} <span class="text-sm text-slate-600">Assets</span></div>
              </div>
              <div class="bg-slate-900 border border-slate-800 p-6 rounded-3xl">
                 <span class="text-[10px] font-black text-slate-600 uppercase tracking-widest mb-1 block">Vector Integrity</span>
                 <div class="text-3xl font-black text-emerald-400">{{ featuresStatus.ready }} <span class="text-sm text-slate-600">Ready</span></div>
              </div>
           </div>

           <div class="space-y-4">
              <div class="flex justify-between items-center text-[10px] font-black uppercase tracking-widest">
                 <span class="text-slate-500">Global Progress</span>
                 <span class="text-blue-500">{{ Math.round((featuresStatus.ready / featuresStatus.total) * 100) || 0 }}% Synced</span>
              </div>
              <div class="h-2 bg-slate-900 rounded-full border border-slate-800 overflow-hidden shadow-inner">
                 <div class="h-full bg-blue-600 shadow-[0_0_15px_rgba(37,99,235,0.5)] transition-all duration-1000" :style="{ width: (featuresStatus.ready / featuresStatus.total * 100) + '%' }"></div>
              </div>
           </div>

           <div class="pt-6">
              <button @click="syncAll" :disabled="isSyncing" class="w-full py-5 bg-white text-slate-950 font-black uppercase tracking-[.2em] rounded-3xl shadow-2xl hover:scale-[1.02] active:scale-95 transition-all text-xs flex items-center justify-center gap-4">
                 <Download class="w-5 h-5" /> {{ isSyncing ? 'Processing Swarm...' : 'Fetch All Assets' }}
              </button>
              <p class="text-[9px] text-center text-slate-600 font-bold uppercase tracking-widest mt-6 italic">Caution: High bandwidth operation will consume NEXUS quota.</p>
           </div>
        </div>

      </div>
    </div>
  </div>
</template>

<style scoped>

.custom-scrollbar::-webkit-scrollbar { width: 5px; }

.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }

.custom-scrollbar::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }



.animate-in { animation-duration: 0.4s; animation-fill-mode: both; }

@keyframes fadeIn { from { opacity: 0; transform: scale(1.02) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.fade-in { animation-name: fadeIn; }

</style>