<?php
declare(strict_types=1);
/**
 * 메인(/) gov-portal 디자인 대시보드 — 종량제 실데이터만 표시.
 *
 * @var string $lgLabel
 * @var string $mbName
 * @var string $mbId
 * @var string $levelName
 * @var int $totalQty
 * @var int $itemCount
 * @var int $orderCount
 * @var int $pendingApprovals
 * @var array $stockMix
 * @var array $lowStock
 * @var array $recentActivity
 */
$stockMix       = is_array($stockMix ?? null) ? $stockMix : [];
$lowStock       = is_array($lowStock ?? null) ? $lowStock : [];
$recentActivity = is_array($recentActivity ?? null) ? $recentActivity : [];

// 도넛 conic-gradient 누적 계산
$donutStops = [];
$acc = 0;
foreach ($stockMix as $m) {
    $start = $acc;
    $acc += (int) $m['value'];
    $donutStops[] = $m['color'] . ' ' . $start . '% ' . $acc . '%';
}
$donutCss = $donutStops !== [] ? implode(', ', $donutStops) : '#e5e7eb 0% 100%';
?>
<div class="space-y-4">
  <!-- 프로필 + KPI -->
  <section class="grid grid-cols-1 lg:grid-cols-4 gap-4">
    <div class="rounded-xl bg-slate-700 text-white p-4 shadow-sm">
      <p class="text-xs text-white/70">안녕하세요.</p>
      <p class="text-lg font-bold mt-1"><?= esc($mbName) ?>님</p>
      <p class="text-[11px] text-white/70 mt-1 leading-relaxed">
        <?= esc($levelName) ?><?= $lgLabel !== '' ? ' · ' . esc($lgLabel) : '' ?><br/>
        아이디 <?= esc($mbId) ?><br/>최근접속 <?= date('Y.m.d H:i') ?>
      </p>
      <div class="flex gap-1.5 mt-3">
        <a href="<?= base_url('bag/manual') ?>" class="text-[11px] px-2 py-1 rounded bg-white/10 hover:bg-white/20 border border-white/30">매뉴얼</a>
        <a href="<?= base_url('logout') ?>" class="text-[11px] px-2 py-1 rounded bg-white/10 hover:bg-white/20 border border-white/30">로그아웃</a>
      </div>
    </div>

    <div class="rounded-xl bg-white border border-gray-200 p-4 shadow-sm">
      <p class="text-xs text-gray-500"><i class="fa-solid fa-boxes-stacked text-blue-600 mr-1"></i>봉투 재고 총량</p>
      <p class="text-2xl font-bold text-gray-900 mt-1"><?= number_format($totalQty) ?><span class="text-sm font-medium text-gray-400 ml-1">개</span></p>
      <p class="text-[11px] text-gray-500 mt-1"><?= esc($lgLabel !== '' ? $lgLabel : '전체') ?> · 품목 <?= (int) $itemCount ?>종</p>
    </div>

    <div class="rounded-xl bg-white border border-gray-200 p-4 shadow-sm">
      <p class="text-xs text-gray-500"><i class="fa-solid fa-receipt text-sky-600 mr-1"></i>주문 접수(정상)</p>
      <p class="text-2xl font-bold text-sky-700 mt-1"><?= (int) $orderCount ?><span class="text-sm font-medium text-gray-400 ml-1">건</span></p>
      <p class="text-[11px] text-gray-500 mt-1">전화·지정판매소 주문 누계</p>
    </div>

    <div class="rounded-xl bg-white border border-gray-200 p-4 shadow-sm">
      <p class="text-xs text-gray-500"><i class="fa-solid fa-user-check text-violet-600 mr-1"></i>승인 대기</p>
      <p class="text-2xl font-bold text-violet-700 mt-1"><?= (int) $pendingApprovals ?><span class="text-sm font-medium text-gray-400 ml-1">명</span></p>
      <p class="text-[11px] text-gray-500 mt-1">회원 가입 승인 요청</p>
    </div>
  </section>

  <!-- 지도(2/3) + 메뉴검색(1/3) -->
  <section class="grid grid-cols-1 lg:grid-cols-3 gap-4 items-stretch">
    <div class="lg:col-span-2">
      <?= view('bag/_dashboard_kakao_map', [
          'kakaoJsKey' => $kakaoJsKey ?? '',
          'lgLabel'    => $lgLabel,
          'mapShops'   => $mapShops ?? [],
      ]) ?>
    </div>
    <div class="lg:col-span-1 flex">
      <!-- 메뉴검색 (자동완성) -->
      <div class="rounded-xl bg-[#009688] text-white p-4 shadow-sm w-full h-full flex flex-col">
        <strong class="text-sm font-bold flex items-center gap-1.5"><i class="fa-solid fa-magnifying-glass"></i> 메뉴검색</strong>
        <div class="relative mt-2" id="menuSearchWrap">
          <input type="search" id="mainMenuSearch" autocomplete="off" placeholder="메뉴명 입력 (예: 재고, 발주, 통계)"
                 class="w-full rounded-lg px-3 py-2 pr-9 text-sm text-gray-800 border-0 focus:outline-none focus:ring-2 focus:ring-white/50"/>
          <i class="fa-solid fa-magnifying-glass absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs pointer-events-none"></i>
          <!-- 자동완성 목록 -->
          <ul id="mainMenuSearchList" class="hidden absolute left-0 right-0 top-full mt-1 z-30 max-h-60 overflow-y-auto bg-white text-gray-800 rounded-lg shadow-lg border border-gray-200 py-1"></ul>
        </div>
        <!-- 최근 방문 메뉴 (기본 표시) — 높이 고정·스크롤 -->
        <div id="recentMenus" class="mt-3 overflow-y-auto" style="max-height:105px;"></div>
        <p class="text-[11px] text-white/70 pt-2 mt-auto shrink-0">메뉴명을 입력하면 자동완성에서 선택하거나, 전체 이름 입력 후 Enter 로 이동합니다.</p>
      </div>
    </div>
  </section>

  <script>
  (function () {
    var FLAT = <?= json_encode($menuFlat ?? [], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS) ?>;
    var input = document.getElementById('mainMenuSearch');
    var list  = document.getElementById('mainMenuSearchList');
    if (!input || !list) return;
    var active = -1, current = [];

    function norm(s) { return String(s || '').toLowerCase().replace(/\s+/g, ''); }
    function esc(s) { return String(s || '').replace(/</g, '&lt;'); }
    function pathOf(u) { try { return (new URL(u, location.origin).pathname || '').replace(/\/+$/, '') || '/'; } catch (e) { return u; } }

    // 최근 방문 메뉴 (localStorage 기록을 menuFlat 메뉴로 매핑)
    function recentMenuList() {
      var arr = [];
      try { arr = JSON.parse(localStorage.getItem('jrj_recent_menus') || '[]'); } catch (e) {}
      if (!Array.isArray(arr)) return [];
      var out = [], seen = {};
      arr.forEach(function (x) {
        var p = x && x.p;
        if (!p) return;
        var m = FLAT.find(function (f) { return pathOf(f.url) === p; })
             || FLAT.find(function (f) { var fp = pathOf(f.url); return p.indexOf(fp + '/') === 0; });
        if (m && !seen[m.url]) { seen[m.url] = 1; out.push(m); }
      });
      return out.slice(0, 8);
    }

    function renderRecent() {
      var box = document.getElementById('recentMenus');
      if (!box) return;
      var r = recentMenuList();
      if (!r.length) {
        box.innerHTML = '<p class="text-[11px] text-white/55 mt-1">최근 방문한 메뉴가 여기에 표시됩니다.</p>';
        return;
      }
      var html = '<p class="text-[11px] text-white/70 mb-1.5"><i class="fa-regular fa-clock mr-1"></i>최근 방문 메뉴</p>';
      r.forEach(function (m) {
        html += '<a href="' + m.url + '" data-title="' + esc(m.name) + '" class="js-tab-link block text-[12px] px-2 py-1.5 rounded bg-white/12 hover:bg-white/25 mb-1 truncate" title="' + esc(m.name) + '">' + esc(m.name) +
          (m.parent ? ' <span class="text-white/55">· ' + esc(m.parent) + '</span>' : '') + '</a>';
      });
      box.innerHTML = html;
    }

    function matches(q) {
      var nq = norm(q);
      if (!nq) return [];
      return FLAT.filter(function (m) {
        return norm(m.name).indexOf(nq) !== -1 || norm(m.parent + m.name).indexOf(nq) !== -1;
      }).slice(0, 10);
    }

    function render(q) {
      current = matches(q); active = -1;
      list.innerHTML = '';
      if (!current.length) { list.classList.add('hidden'); return; }
      current.forEach(function (m, i) {
        var li = document.createElement('li');
        li.setAttribute('data-url', m.url);
        li.setAttribute('data-i', i);
        li.className = 'px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 flex flex-col';
        li.innerHTML = '<span class="font-semibold text-gray-800">' +
          (m.name || '').replace(/</g, '&lt;') + '</span>' +
          (m.parent ? '<span class="text-[11px] text-gray-400">' + m.parent.replace(/</g, '&lt;') + '</span>' : '');
        list.appendChild(li);
      });
      list.classList.remove('hidden');
    }

    // 워크스페이스(부모) 안이면 새 탭으로 열기, 아니면 현재 화면 이동
    function openInTab(url, name) {
      try {
        if (window.parent && window.parent !== window && typeof window.parent.wsOpenTab === 'function') {
          window.parent.wsOpenTab(url, name || '');
          return true;
        }
      } catch (e) {}
      return false;
    }
    function go(url, name) { if (!openInTab(url, name) && url) window.location.href = url; }

    // 자주 가는 화면·최근 방문 메뉴 링크 → 새 탭으로 열기
    document.addEventListener('click', function (e) {
      var a = e.target.closest ? e.target.closest('a.js-tab-link') : null;
      if (!a) return;
      var url = a.getAttribute('href');
      if (!url || url.charAt(0) === '#') return;
      if (openInTab(url, a.getAttribute('data-title') || (a.textContent || '').trim())) {
        e.preventDefault(); e.stopPropagation();
      }
    }, true);

    function highlight() {
      Array.prototype.forEach.call(list.children, function (li, i) {
        li.classList.toggle('bg-blue-50', i === active);
      });
    }

    input.addEventListener('input', function () { render(input.value); });
    input.addEventListener('focus', function () { if (input.value.trim()) render(input.value); });

    input.addEventListener('keydown', function (e) {
      if (e.key === 'ArrowDown') { e.preventDefault(); if (current.length) { active = (active + 1) % current.length; highlight(); } return; }
      if (e.key === 'ArrowUp')   { e.preventDefault(); if (current.length) { active = (active - 1 + current.length) % current.length; highlight(); } return; }
      if (e.key === 'Escape') { list.classList.add('hidden'); return; }
      if (e.key === 'Enter') {
        e.preventDefault();
        var q = input.value.trim();
        if (active >= 0 && current[active]) { go(current[active].url, current[active].name); return; }
        // 전체 이름 정확히 일치 우선
        var exact = FLAT.filter(function (m) { return norm(m.name) === norm(q); });
        if (exact.length) { go(exact[0].url, exact[0].name); return; }
        if (current.length) { go(current[0].url, current[0].name); return; }
        var any = matches(q);
        if (any.length) { go(any[0].url, any[0].name); return; }
        alert('일치하는 메뉴가 없습니다.');
      }
    });

    list.addEventListener('mousedown', function (e) {
      var li = e.target.closest('li[data-url]');
      if (li) { e.preventDefault(); var i = +li.getAttribute('data-i'); go(li.getAttribute('data-url'), current[i] && current[i].name); }
    });

    document.addEventListener('click', function (e) {
      if (!document.getElementById('menuSearchWrap').contains(e.target)) { list.classList.add('hidden'); }
    });

    renderRecent(); // 기본: 최근 방문 메뉴 표시
    // 뒤로가기(bfcache 복원)·탭 복귀 시에도 최근 목록 갱신
    window.addEventListener('pageshow', renderRecent);
    document.addEventListener('visibilitychange', function () { if (!document.hidden) renderRecent(); });
    // 다른 탭(iframe)에서 메뉴를 방문해 기록이 바뀌면 즉시 반영
    window.addEventListener('storage', function (e) { if (e.key === 'jrj_recent_menus') renderRecent(); });
  })();
  </script>

  <section class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    <?php if ($stockMix !== []): ?>
    <!-- 재고 구성 -->
    <div class="rounded-xl bg-white border border-gray-200 p-4 shadow-sm">
      <h2 class="text-sm font-bold text-gray-900 mb-3"><i class="fa-solid fa-chart-pie text-blue-600 mr-1"></i>재고 구성</h2>
      <div class="flex items-center gap-4">
        <div class="w-20 h-20 rounded-full shrink-0" style="background: conic-gradient(<?= $donutCss ?>);">
          <div class="w-10 h-10 bg-white rounded-full mx-auto" style="margin-top:1.25rem;"></div>
        </div>
        <ul class="text-[11px] text-gray-600 space-y-1 min-w-0">
          <?php foreach ($stockMix as $m): ?>
          <li class="flex items-center gap-2">
            <span class="inline-block w-2.5 h-2.5 rounded-full shrink-0" style="background-color: <?= esc($m['color'], 'attr') ?>"></span>
            <span class="truncate"><?= esc($m['name']) ?> <?= (int) $m['value'] ?>%</span>
          </li>
          <?php endforeach; ?>
        </ul>
      </div>
    </div>
    <?php endif; ?>

    <?php if ($lowStock !== []): ?>
    <!-- 부족 재고 -->
    <div class="rounded-xl bg-white border border-gray-200 p-4 shadow-sm">
      <h2 class="text-sm font-bold text-gray-900 mb-3"><i class="fa-solid fa-box-open text-amber-600 mr-1"></i>재고 적은 품목</h2>
      <div class="space-y-2">
        <?php foreach ($lowStock as $item): ?>
        <div>
          <div class="flex justify-between text-[11px] text-gray-600 mb-1">
            <span class="truncate"><?= esc($item['name']) ?></span>
            <span class="shrink-0 ml-2"><?= number_format((int) $item['qty']) ?>개</span>
          </div>
          <div class="h-2 rounded bg-gray-100 overflow-hidden">
            <div class="h-full rounded bg-amber-500" style="width: <?= (int) $item['percent'] ?>%"></div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
    <?php endif; ?>

    <?php if ($recentActivity !== []): ?>
    <!-- 최근 활동 (activity_log) -->
    <div class="rounded-xl bg-white border border-gray-200 p-4 shadow-sm">
      <h2 class="text-sm font-bold text-gray-900 mb-3"><i class="fa-solid fa-clock-rotate-left text-emerald-600 mr-1"></i>최근 처리 내역</h2>
      <ul class="space-y-2">
        <?php foreach ($recentActivity as $ev): ?>
        <li class="flex items-start gap-2 text-[12px]">
          <span class="text-[11px] font-semibold text-gray-400 shrink-0 w-20"><?= esc($ev['time']) ?></span>
          <span class="text-gray-700"><?= esc($ev['text']) ?></span>
        </li>
        <?php endforeach; ?>
      </ul>
    </div>
    <?php endif; ?>
  </section>

  <!-- 자주 가는 화면 (실제 메뉴 링크) -->
  <section class="rounded-xl bg-white border border-gray-200 p-4 shadow-sm">
    <h2 class="text-sm font-bold text-gray-900 mb-3"><i class="fa-solid fa-location-arrow text-blue-600 mr-1"></i>자주 가는 화면</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
      <?php
      $links = [
          ['bag/inventory', '창고 재고 조회', '품목별 현재 재고', 'fa-boxes-stacked', 'emerald'],
          ['bag/order/create', '발주 등록', '봉투 발주·구매신청', 'fa-cart-shopping', 'sky'],
          ['bag/flow', '봉투 수불 현황', '입고·출고 내역', 'fa-arrow-right-arrow-left', 'orange'],
          ['bag/sales', '판매 관리', '판매/반품 내역', 'fa-receipt', 'indigo'],
          ['bag/reports/daily-summary', '일계표', '일일 판매 요약', 'fa-table-list', 'violet'],
          ['bag/manual', '사용자 매뉴얼', '업무별 사용 안내', 'fa-book', 'slate'],
      ];
      foreach ($links as [$path, $label, $desc, $icon, $c]):
      ?>
      <a href="<?= base_url($path) ?>" data-title="<?= esc($label, 'attr') ?>" class="js-tab-link group flex items-center gap-3 px-3 py-2 rounded border border-gray-200 hover:border-blue-500 hover:bg-blue-50/40 transition">
        <div class="h-8 w-8 rounded-full bg-<?= $c ?>-50 text-<?= $c ?>-600 flex items-center justify-center shrink-0">
          <i class="fa-solid <?= $icon ?>"></i>
        </div>
        <div class="min-w-0">
          <p class="text-xs font-semibold text-gray-900 group-hover:text-blue-800"><?= esc($label) ?></p>
          <p class="text-[11px] text-gray-500 truncate"><?= esc($desc) ?></p>
        </div>
      </a>
      <?php endforeach; ?>
    </div>
  </section>
</div>
