@extends('layouts.master')

@section('styles')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
@endsection

@section('content')
    {{-- Page Header --}}
    <div class="page-header d-flex align-items-center justify-content-between mb-4 mt-3">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 mt-1">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Users & Growth</li>
                </ol>
            </nav>
          <h6 class="fw-semibold mb-0">Users & Growth Analytics</h6>

        </div>
        <div class="d-flex align-items-center">
            <select id="userRange" class="form-select form-select-sm" style="width:auto">
                <option value="7">Last 7 Days</option>
                <option selected value="30">Last 30 Days</option>
                <option value="90">Last 90 Days</option>
            </select>
            <button id="userRefresh" class="btn btn-primary btn-sm ms-2">Refresh</button>
        </div>
    </div>

    {{-- KPI Cards --}}
    <div id="user-kpi-row" class="row g-3 mb-4">
        {{-- Dynamic cards will be rendered via JS --}}
    </div>

    {{-- Charts --}}
    <div class="row g-3 mb-4">
        <div class="col-md-6">
            <div class="card custom-card">
                <div class="card-body">
                    <h6 class="card-title">New User Registrations</h6>
                    <div id="userGrowthChart" style="height: 320px"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card custom-card">
                <div class="card-body">
                    <h6 class="card-title">Active Users (DAU vs WAU)</h6>
                    <div id="activeUsersChart" style="height: 320px"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- Country & Source --}}
    <div class="row g-3">
        <div class="col-lg-6">
            <div class="card custom-card">
                <div class="card-body">
                    <h6 class="card-title">Top Countries</h6>
                    <div id="userCountryChart" style="height: 350px"></div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card custom-card">
                <div class="card-body">
                    <h6 class="card-title">Signup Sources</h6>
                    <div id="signupSourceChart" style="height: 350px"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @include('layouts.components.scripts')
    @include('layouts.components.common-script')

  <script> 

document.addEventListener('DOMContentLoaded', function () {
  const rangeEl = document.getElementById('userRange');
  const refreshBtn = document.getElementById('userRefresh');

  // chart instance holders (reuse to avoid duplicate charts)
  let userGrowthChart = null;
  let revenueChart = null;
  let activeUsersChart = null;
  let countryChart = null;
  let signupChart = null;

  // helpers
  const el = id => document.getElementById(id);
  const exists = sel => !!document.querySelector(sel);

  function safeLabels(labels){
    if(!labels) return [];
    if(Array.isArray(labels)) return labels.map(String);
    if(typeof labels === 'object') return Object.keys(labels).map(String);
    return [String(labels)];
  }

  function toNumberSeries(rows, valueKey) {
    if(!rows) return [];
    if(Array.isArray(rows) && rows.every(x => typeof x === 'number')) return rows.slice();
    if(Array.isArray(rows) && rows.length && typeof rows[0] === 'object') {
      const key = valueKey || (rows[0].hasOwnProperty('count') ? 'count' : (rows[0].hasOwnProperty('total') ? 'total' : null));
      if(key) return rows.map(r => Number(r[key] ?? 0));
      return rows.map(r => {
        const v = Object.values(r).find(x => typeof x === 'number' || !isNaN(Number(x)));
        return v !== undefined ? Number(v) : 0;
      });
    }
    if(typeof rows === 'object' && !Array.isArray(rows)) return Object.values(rows).map(v => Number(v ?? 0));
    return [];
  }

  function metaToKpis(meta){
    if(!meta) return [];
    return [
      { key:'totalUsers', title:'Total Users', value: meta.totalUsers ?? 0, icon: 'ri-group-line' },
      { key:'active24h', title:'Active (24h)', value: meta.active24h ?? 0, icon: 'ri-time-line' },
      { key:'coins', title:'Coins Distributed', value: meta.totalCoinsDistributed ?? 0, icon: 'ri-coins-line' },
      { key:'pendingPayouts', title:'Pending Payouts', value: meta.pendingPayouts ?? 0, icon: 'ri-bank-line' },
      { key:'diamonds', title:'Diamonds Sold', value: meta.diamondsSold ?? 0, icon: 'ri-gem-line' },
      { key:'revenueMonth', title:'Revenue (Month)', value: meta.adminRevenueMonth ?? 0, icon: 'ri-wallet-line' },
      { key:'activeOffers', title:'Active Offers', value: meta.activeOffers ?? 0, icon: 'ri-advertisement-line' },
      { key:'leaderboards', title:'Leaderboards', value: meta.runningLeaderboards ?? 0, icon: 'ri-trophy-line' },
    ];
  }

  // KPI renderer: KEEP UI classes same. Renders HTML (not Blade).
  function renderKPIs(kpis){
    const container = el('user-kpi-row');
    if(!container) return;
    container.innerHTML = '';

    if(!Array.isArray(kpis) || kpis.length === 0){
      container.insertAdjacentHTML('beforeend', `
        <div class="col-12">
          <div class="alert alert-info py-2 mb-0">No KPI data available</div>
        </div>`);
      return;
    }

    kpis.forEach(k => {
      const title = k.title ?? '—';
      const value = (k.value !== undefined && k.value !== null) ? k.value : '0';
      const icon = k.icon ?? 'ri-user-line';

      const colorMap = {
        totalUsers: 'rgba(99,102,241,1)',
        active24h: 'rgba(34,197,94,1)',
        coins: 'rgba(245,158,11,1)',
        pendingPayouts: 'rgba(239,68,68,1)',
        diamonds: 'rgba(111,66,193,1)',
        revenueMonth: 'rgba(20,184,166,1)',
        activeOffers: 'rgba(59,130,246,1)',
        leaderboards: 'rgba(236,72,153,1)'
      };
      const color = colorMap[k.key] || 'rgba(99,102,241,1)';

      const html = `
        <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-6">
          <div class="card custom-card overflow-hidden h-100">
            <div class="m-3 bg-light rounded-1 border">
              <div class="card-body pb-4 mb-2 d-flex align-items-center justify-content-between">
                <div>
                  <p class="mb-1 text-muted fw-medium">${title}</p>
                  <h4 class="mb-0 fw-medium">${value}</h4>
                </div>
                <div class="text-end">
                  <div class="text-muted fs-12">Last ${rangeEl.value === '24h' ? '24 hours' : (rangeEl.value === 'yesterday' ? 'Yesterday' : rangeEl.value + ' days')}</div>
                  <div class="mt-1"><i class="${icon} fs-4" style="color: ${color};"></i></div>
                </div>
              </div>
              <div class="apexchart-mini" style="height:36px;"></div>
            </div>
          </div>
        </div>`;
      container.insertAdjacentHTML('beforeend', html);
    });
  }

  // --- Apex render/update helpers (prevent duplicate charts) ---
  function renderOrUpdatePie(targetSelector, labels, series, chartRefHolder) {
    if(!exists(targetSelector)) return;
    const opts = { chart:{type:'pie', height:350}, labels: labels, series: series, colors:['#6366f1','#10b981','#f59e0b','#ef4444','#3b82f6'] };

    if(chartRefHolder && chartRefHolder.instance){
      try {
        chartRefHolder.instance.updateOptions({ labels: labels }, false, false);
        chartRefHolder.instance.updateSeries(series);
      } catch(e){
        // fallback recreate if update fails
        chartRefHolder.instance.destroy();
        chartRefHolder.instance = new ApexCharts(document.querySelector(targetSelector), opts);
        chartRefHolder.instance.render();
      }
    } else {
      chartRefHolder.instance = new ApexCharts(document.querySelector(targetSelector), opts);
      chartRefHolder.instance.render();
    }
  }

  function renderOrUpdateDonut(targetSelector, labels, series, chartRefHolder) {
    if(!exists(targetSelector)) return;
    const opts = { chart:{type:'donut', height:350}, labels: labels, series: series, colors:['#6366f1','#10b981','#f59e0b'] };

    if(chartRefHolder && chartRefHolder.instance){
      try {
        chartRefHolder.instance.updateOptions({ labels: labels }, false, false);
        chartRefHolder.instance.updateSeries(series);
      } catch(e){
        chartRefHolder.instance.destroy();
        chartRefHolder.instance = new ApexCharts(document.querySelector(targetSelector), opts);
        chartRefHolder.instance.render();
      }
    } else {
      chartRefHolder.instance = new ApexCharts(document.querySelector(targetSelector), opts);
      chartRefHolder.instance.render();
    }
  }

  // User Growth chart (area)
  function renderUserGrowth(labels, series){
    if(!exists('#userGrowthChart')) return;
    const opts = {
      chart:{ type:'area', height:320, toolbar:{show:false} },
      series:[ { name:'New Users', data: series } ],
      xaxis:{ categories: labels },
      stroke:{ curve:'smooth' },
      colors:['#6366f1']
    };
    if(userGrowthChart){
      try { userGrowthChart.updateOptions(opts); userGrowthChart.updateSeries([{ name:'New Users', data: series }]); }
      catch(e){ userGrowthChart.destroy(); userGrowthChart = new ApexCharts(document.querySelector('#userGrowthChart'), opts); userGrowthChart.render(); }
    } else { userGrowthChart = new ApexCharts(document.querySelector('#userGrowthChart'), opts); userGrowthChart.render(); }
  }

  // Revenue chart (line) - only render when series exists
  function renderRevenueChart(labels, series){
    if(!exists('#revenueChart')) return;
    const opts = {
      chart:{ type:'line', height:320, toolbar:{show:false} },
      series:[ { name:'Revenue', data: series } ],
      xaxis:{ categories: labels },
      stroke:{ curve:'smooth' },
      colors:['#0ea5a4']
    };
    if(revenueChart){
      try { revenueChart.updateOptions(opts); revenueChart.updateSeries([{ name:'Revenue', data: series }]); }
      catch(e){ revenueChart.destroy(); revenueChart = new ApexCharts(document.querySelector('#revenueChart'), opts); revenueChart.render(); }
    } else { revenueChart = new ApexCharts(document.querySelector('#revenueChart'), opts); revenueChart.render(); }
  }

  // Active users (bar)
  function renderActiveUsers(labels, dauArr, wauArr){
    if(!exists('#activeUsersChart')) return;
    const opts = {
      chart:{ type:'bar', height:320, toolbar:{show:false} },
      series:[ { name:'DAU', data: dauArr }, { name:'WAU', data: wauArr } ],
      xaxis:{ categories: labels },
      plotOptions:{ bar:{ horizontal:false, columnWidth:'60%' } },
      stroke:{ show:true, width:2, colors:['transparent'] },
      dataLabels:{ enabled:false },
      colors:['#34d399','#60a5fa']
    };
    if(activeUsersChart){
      try { activeUsersChart.updateOptions(opts); activeUsersChart.updateSeries([{ name:'DAU', data: dauArr }, { name:'WAU', data: wauArr }]); }
      catch(e){ activeUsersChart.destroy(); activeUsersChart = new ApexCharts(document.querySelector('#activeUsersChart'), opts); activeUsersChart.render(); }
    } else { activeUsersChart = new ApexCharts(document.querySelector('#activeUsersChart'), opts); activeUsersChart.render(); }
  }

  // Recent transactions render
  function renderRecentTx(rows){
    const tbody = document.querySelector('#recentTxTable tbody');
    if(!tbody) return;
    tbody.innerHTML = '';
    (rows || []).forEach(r => {
      const tr = document.createElement('tr');
      tr.innerHTML = `<td>${r.id ?? ''}</td><td>${r.user_id ?? ''}</td><td>${r.type ?? ''}</td><td>${r.amount ?? ''}</td><td>${r.task ?? r.offer_id ?? '-'}</td><td>${r.created_at ?? ''}</td>`;
      tbody.appendChild(tr);
    });
  }

  // convert backend filter selection to params
  function mapRangeValue(selected) {
    if(selected === '24h') return { range: 1, mode: '24h' };
    if(selected === 'yesterday') return { range: 1, mode: 'yesterday' };
    return { range: Number(selected), mode: 'days' };
  }

  // MAIN fetch (parses payload shapes you posted)
  function fetchUserData(){
    const sel = rangeEl ? rangeEl.value : '30';
    const mapped = mapRangeValue(sel);

    axios.get("{{ route('admin.dashboard.users.data') }}", { params: { range: mapped.range, mode: mapped.mode } })
      .then(resp => {
        const payload = resp.data || {};
        console.log('XHR response payload:', payload);

        // KPIs
        let kpis = [];
        if(Array.isArray(payload.kpis)) kpis = payload.kpis;
        else if(payload.meta) kpis = metaToKpis(payload.meta);
        renderKPIs(kpis);

        // CHARTS: labels (you provided charts.labels array of dates)
        const labels = safeLabels((payload.charts && payload.charts.labels) || payload.labels || []);

        // user_trend: from your payload it's array of {day: "...", count: N}
        // Build a map day->count, then series by labels order
        const userTrendRows = (payload.charts && payload.charts.user_trend) || payload.user_trend || [];
        const userMap = {};
        if(Array.isArray(userTrendRows)){
          userTrendRows.forEach(r => {
            const day = r.day ?? r.date ?? r[0] ?? null;
            const cnt = Number(r.count ?? r.total ?? Object.values(r).find(v => typeof v === 'number') ?? 0);
            if(day) userMap[String(day)] = cnt;
          });
        } else if(typeof userTrendRows === 'object'){
          // if object map
          Object.keys(userTrendRows).forEach(k => userMap[k] = Number(userTrendRows[k] ?? 0));
        }
        const userSeries = labels.map(l => Number(userMap[l] ?? 0));
        renderUserGrowth(labels, userSeries);

        // revenue trend (might be empty)
        const revRows = (payload.charts && payload.charts.revenue_trend) || payload.revenue_trend || [];
        let revSeries = [];
        if(Array.isArray(revRows) && revRows.length){
          // if array of objects maybe {day,total}
          revSeries = toNumberSeries(revRows, 'total');
          // if payload provides labels separately, align by labels
          if(Array.isArray(labels) && revRows.length && typeof revRows[0] === 'object' && revRows[0].day){
            const revMap = {};
            revRows.forEach(r => revMap[String(r.day)] = Number(r.total ?? 0));
            revSeries = labels.map(l => Number(revMap[l] ?? 0));
          }
        } else {
          revSeries = Array(labels.length).fill(0);
        }
        // render revenueChart separately to keep it distinct
        renderRevenueChart(labels, revSeries);

        // Active users: try charts.active_users else fallback to meta
        const active = (payload.charts && payload.charts.active_users) || payload.active_users || {};
        const aLabels = safeLabels(active.labels || labels);
        const dau = Array.isArray(active.dau) ? active.dau : Array(aLabels.length || 1).fill(Number(active.dau ?? payload.meta?.active24h ?? 0));
        const wau = Array.isArray(active.wau) ? active.wau : Array(aLabels.length || 1).fill(Number(active.wau ?? payload.meta?.active7d ?? 0));
        renderActiveUsers(aLabels, dau, wau);

        // Top countries: payload.charts.top_countries appears as array of objects: [{country_code:'IN', cnt:4}]
        let countries = (payload.charts && payload.charts.top_countries) || payload.top_countries || payload.countries || [];
        let countryLabels = [], countryValues = [];
        if(Array.isArray(countries)){
          countries.forEach(c => {
            countryLabels.push(c.country_code ?? c.label ?? 'Unknown');
            countryValues.push(Number(c.cnt ?? c.value ?? 0));
          });
        } else if(countries && typeof countries === 'object' && countries.labels && countries.values){
          countryLabels = countries.labels; countryValues = countries.values;
        }
        renderOrUpdatePie('#userCountryChart', countryLabels, countryValues, { get instance(){ return countryChart; }, set instance(v){ countryChart = v; } });

        // Signup sources
        let sources = (payload.charts && payload.charts.signup_sources) || payload.signup_sources || payload.sources || [];
        let sourceLabels = [], sourceValues = [];
        if(Array.isArray(sources)){
          sources.forEach(s => {
            sourceLabels.push(s.account_type ?? s.label ?? 'Unknown');
            sourceValues.push(Number(s.cnt ?? s.value ?? 0));
          });
        } else if(sources && typeof sources === 'object' && sources.labels && sources.values){
          sourceLabels = sources.labels; sourceValues = sources.values;
        }
        renderOrUpdateDonut('#signupSourceChart', sourceLabels, sourceValues, { get instance(){ return signupChart; }, set instance(v){ signupChart = v; } });

        // recent transactions
        renderRecentTx(payload.recent?.transactions || payload.recent_transactions || payload.transactions || payload.recent?.transactions || []);
      })
      .catch(err => {
        console.error('Failed to fetch users data', err);
      });
  }

  // ensure dropdown options exist and include requested filters
  (function ensureRangeOptions(){
    if(!rangeEl) return;
    const cur = rangeEl.value;
    rangeEl.innerHTML = '';
    const opts = [
      {v:'24h', t:'Last 24 hours'},
      {v:'yesterday', t:'Yesterday'},
      {v:'7', t:'Last 7 days'},
      {v:'15', t:'Last 15 days'},
      {v:'30', t:'Last 30 days'}
    ];
    opts.forEach(o => {
      const option = document.createElement('option'); option.value = o.v; option.text = o.t;
      rangeEl.appendChild(option);
    });
    rangeEl.value = Array.from(rangeEl.options).some(op => op.value === cur) ? cur : '30';
  })();

  if(refreshBtn) refreshBtn.addEventListener('click', fetchUserData);
  if(rangeEl) rangeEl.addEventListener('change', fetchUserData);

  // initial load
  fetchUserData();
});

</script>
@endsection