<?php
/**
 * sidebar.php (TEK DOSYA • ANİMASYONLU • MASAÜSTÜ + MOBİL HAMBURGER)
 */

$active = $active ?? 'panel';
$base   = $base   ?? (function_exists('app_base') ? app_base('seller/') : '/seller/');

$NAV = [
  'panel'        => ['etiket' => 'Panel',              'ikon' => 'house',            'href' => $base . 'dashboard.php'],
  'ilanlar'      => ['etiket' => 'İlanlar',            'ikon' => 'image',            'href' => $base . 'ilanlar.php'],
  'mesajlar'     => ['etiket' => 'Mesajlar',           'ikon' => 'messages-square',  'href' => $base . 'mesajlar.php'],
  'siparisler'   => ['etiket' => 'Sipariş & Teslimat', 'ikon' => 'package',          'href' => $base . 'siparisler.php'],
  'istatistik'   => ['etiket' => 'İstatistik',         'ikon' => 'bar-chart-3',      'href' => $base . 'stats.php'],
  'finans'       => ['etiket' => 'Finans',             'ikon' => 'wallet',           'href' => $base . 'finans.php'],
  'pazarlama'    => ['etiket' => 'Pazarlama',          'ikon' => 'megaphone',        'href' => $base . 'pazarlama.php'],
  'entegrasyon'  => ['etiket' => 'Entegrasyonlar',     'ikon' => 'plug',             'href' => $base . 'integrations.php'],
  'ayarlar'      => ['etiket' => 'Ayarlar',            'ikon' => 'settings',         'href' => $base . 'settings.php'],
];

$userName = $userName ?? (function_exists('current_user') ? (string)(current_user()['name'] ?? 'Hesabım') : 'Hesabım');
$h = function($s){ return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8'); };

if (!defined('SIDEBAR_ASSETS_LOADED')) {
  define('SIDEBAR_ASSETS_LOADED', true);
?>
<style>
  @font-face{
    font-family:"Nexa";
    src:url("../assets/fonts/Nexa-Regular.woff2") format("woff2"),
        url("../assets/fonts/Nexa-Regular.woff") format("woff");
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:"Nexa";
    src:url("../assets/fonts/Nexa-Bold.woff2") format("woff2"),
        url("../assets/fonts/Nexa-Bold.woff") format("woff");
    font-weight:700; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:"Nexa";
    src:url("../assets/fonts/Nexa-Heavy.woff2") format("woff2"),
        url("../assets/fonts/Nexa-Heavy.woff") format("woff");
    font-weight:800; font-style:normal; font-display:swap;
  }

  :root{
    --sb-bg:#fff;
    --sb-text:#0b0c0f;
    --sb-muted:#6b7280;
    --sb-line:#e8eaef;

    --sb-w: 260px;
    --sb-w-collapsed: 84px;
    --sb-iconbox: 52px;

    --mbTopH: 60px;
    --m-panel-w: min(92vw, 420px);

    --font:"Nexa", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    --ease: cubic-bezier(.2,.9,.2,1);
    --t: 260ms;
  }

  *{ box-sizing:border-box; }

  /* ✅ global taşma/scroll kilit */
  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
    overscroll-behavior: none; /* iOS bounce azaltır */
  }

  /* Mobil menü açılınca sayfa scroll kilitle */
  body.mb-open{
    position: fixed;
    width:100%;
    overflow: hidden !important;
    touch-action: none;
  }

  /* SIDEBAR (desktop base) */
  .sb{
    position:fixed;
    inset:0 auto 0 0;
    width: var(--sb-w);
    height: 100dvh;
    background: var(--sb-bg);
    border-right:1px solid var(--sb-line);
    color: var(--sb-text);
    font-family: var(--font);
    display:flex;
    flex-direction:column;
    z-index: 60;
    transition: width var(--t) var(--ease);
    will-change: width;
  }

  .sb-inner{
    padding: 16px 14px 14px;
    display:flex;
    flex-direction:column;
    gap: 14px;
    height:100%;
    min-height:0;
    overflow:hidden;
  }

  /* ÜST ALAN (desktop) */
  .sb-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 2px 2px 10px;
    border-bottom: 1px solid var(--sb-line);
    flex: 0 0 auto;
  }
  .sb-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
  .sb-mark{
    width: 34px; height: 34px;
    border-radius: 12px;
    background: #f3f4f7;
    display:grid; place-items:center;
    flex:0 0 auto;
  }
  .sb-brand b{ font-weight:800; font-size:14px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sb-brand span{ display:block; margin-top:2px; font-size:12px; color:var(--sb-muted); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .sb-collapse{
    width: 38px; height: 38px;
    border-radius: 14px;
    border:1px solid var(--sb-line);
    background:#fff;
    display:grid; place-items:center;
    cursor:pointer;
    transition: transform var(--t) var(--ease);
  }
  body.sb-dar .sb-collapse{ transform: rotate(180deg); }

  /* ARAMA */
  .sb-search{
    position:relative;
    padding: 6px 2px 12px;
    border-bottom: 1px solid var(--sb-line);
    flex: 0 0 auto;
  }
  .sb-search input{
    width:100%;
    border:0;
    outline:0;
    padding: 12px 12px 12px 36px;
    font-family: var(--font);
    font-weight:800;
    font-size: 13px;
    color: var(--sb-text);
    background: transparent;
  }
  .sb-search .ico{
    position:absolute;
    left: 8px;
    top: 16px;
    width:18px; height:18px;
    color: var(--sb-text);
    opacity:.55;
  }

  /* MENÜ */
  .sb-nav{
    display:flex;
    flex-direction:column;
    gap: 6px;
    padding: 6px 0 0;
    overflow:auto;
    min-height:0;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
  }

  .sb-item{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 16px;
    text-decoration:none;
    color: var(--sb-text);
    font-weight:900;
    font-size: 14px;
    border:1px solid transparent;
    background: transparent;
    transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
  }
  .sb-item:hover{ background:#f5f6fa; border-color:#eef0f5; }
  .sb-item .ico{ width:18px; height:18px; color: var(--sb-text); opacity:.9; flex:0 0 auto; }
  .sb-item .txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .sb-item.active{ background:#111; color:#fff; border-color:#111; }
  .sb-item.active .ico{ color:#fff; opacity:1; }

  /* HESAP */
  .sb-foot{
    padding: 10px;
    border:1px solid var(--sb-line);
    border-radius: 18px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex: 0 0 auto;
  }
  .sb-user{ display:flex; align-items:center; gap:10px; min-width:0; }
  .sb-avatar{
    width:36px; height:36px;
    border-radius: 14px;
    border:1px solid var(--sb-line);
    background:#f3f4f7;
    display:grid; place-items:center;
    flex:0 0 auto;
  }
  .sb-user b{ font-weight:900; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sb-user span{ font-size:12px; color: var(--sb-muted); font-weight:800; display:block; }
  .sb-ayar{
    width:38px; height:38px;
    border-radius: 14px;
    border:1px solid var(--sb-line);
    background:#fff;
    display:grid; place-items:center;
    text-decoration:none;
    color: var(--sb-text);
  }

  /* Desktop dar mod */
  body.sb-dar .sb{ width: var(--sb-w-collapsed); }
  body.sb-dar .sb-brand{ display:none; }
  body.sb-dar .sb-search{ display:none; }
  body.sb-dar .sb-nav{ padding-top: 18px; gap: 12px; }
  body.sb-dar .sb-item .txt{ display:none; }
  body.sb-dar .sb-item{
    width: var(--sb-iconbox);
    height: var(--sb-iconbox);
    padding: 0;
    margin: 0 auto;
    justify-content:center;
    border-radius: 16px;
  }
  body.sb-dar .sb-item .ico{ width:20px; height:20px; }
  body.sb-dar .sb-foot{
    border:0 !important;
    background:transparent !important;
    padding:0 !important;
    border-radius:0 !important;
    justify-content:center;
  }
  body.sb-dar .sb-user b,
  body.sb-dar .sb-user span{ display:none; }
  body.sb-dar .sb-ayar{ display:none; }
  body.sb-dar .sb-avatar{
    width: var(--sb-iconbox);
    height: var(--sb-iconbox);
    border-radius: 16px;
  }

  .content-with-sidebar{ margin-left: var(--sb-w); transition: margin-left var(--t) var(--ease); }
  body.sb-dar .content-with-sidebar{ margin-left: var(--sb-w-collapsed); }

  /* MOBİL TOPBAR */
  .mb-topbar{
    position:fixed;
    top:0; left:0; right:0;
    height: var(--mbTopH);
    background:#fff;
    display:none;
    z-index: 90;
    padding: 10px 12px;
    align-items:center;
    justify-content:flex-start;
    border-bottom: 0 !important; /* ✅ çizgi yok */
    box-shadow: none !important;
  }
  .mb-hamb{
    -webkit-appearance:none; appearance:none;
    width:54px; height:54px;
    border-radius: 18px;
    border:1px solid var(--sb-line);
    background:#fff;
    color:#111 !important;
    display:grid; place-items:center;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mb-hamb i, .mb-hamb svg{ color:#111 !important; }

  .mb-overlay{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.35);
    opacity:0;
    pointer-events:none;
    transition: opacity var(--t) var(--ease);
    z-index: 85;
  }

  /* MOBİL PANEL */
  .sb-mobil{
    display:none;
    top: var(--mbTopH);
    height: calc(100dvh - var(--mbTopH));
    width: var(--m-panel-w);
    transform: translateX(-105%);
    transition: transform var(--t) var(--ease);
    will-change: transform;
    z-index: 88;
  }
  body.mb-open .mb-overlay{ opacity:1; pointer-events:auto; }
  body.mb-open .sb-mobil{ transform: translateX(0); }

  @media (max-width: 980px), (hover:none) and (pointer:coarse){
    .sb{ display:none; }
    .mb-topbar{ display:flex; }
    .sb.sb-mobil{ display:flex; }
    body{ padding-top: var(--mbTopH); }
    .content-with-sidebar{ margin-left: 0 !important; }

    /* ✅ mobil panel iç düzen:
       - Hesap bileşeni yukarı taşındı: menünün hemen altına.
       - Aşağı boşluk varsa sayfa scroll oluşmasın. */
    .sb.sb-mobil .sb-inner{
      padding: 16px 14px 14px;
      gap: 12px;
      overflow:hidden;
    }

    .sb.sb-mobil .sb-search input{
      padding: 16px 14px 16px 46px;
      font-size: 16px;
    }
    .sb.sb-mobil .sb-search .ico{
      left: 12px;
      top: 20px;
      width: 22px;
      height: 22px;
    }

    .sb.sb-mobil .sb-item{
      padding: 14px 14px;
      border-radius: 18px;
      font-size: 18px;
      gap: 12px;
    }
    .sb.sb-mobil .sb-item .ico{ width:24px; height:24px; }

    /* ✅ Hesap bileşeni artık “alta yapışmıyor”.
       Menüden sonra geliyor ve hep yakın. */
    .sb.sb-mobil .sb-foot{
      order: 3;            /* nav'dan sonra */
      margin-top: 8px;
      position: relative;  /* sticky yok */
      border-radius: 18px;
      padding: 14px;
      background:#fff;
    }
    .sb.sb-mobil .sb-nav{ order: 2; flex: 0 0 auto; overflow: hidden; } /* içerik azsa scroll yaratmasın */

    .sb.sb-mobil .sb-avatar{
      width:46px; height:46px;
      border-radius: 18px;
    }
    .sb.sb-mobil .sb-ayar{
      width:46px; height:46px;
      border-radius: 18px;
    }
    .sb.sb-mobil .sb-user b{ font-size: 15px; }
    .sb.sb-mobil .sb-user span{ font-size: 13px; }
  }
</style>

<script defer src="https://unpkg.com/lucide@latest"></script>
<script>
  (function(){
    const KEY_DESKTOP = 'sb_dar_anim_v2';

    function applyDesktop(){
      try{
        const v = localStorage.getItem(KEY_DESKTOP);
        if(v === '1') document.body.classList.add('sb-dar');
        else document.body.classList.remove('sb-dar');
      }catch(e){}
    }

    // mobil scroll lock (iOS)
    let _scrollY = 0;
    function lockBody(){
      _scrollY = window.scrollY || 0;
      document.body.style.top = (-_scrollY) + 'px';
      document.body.classList.add('mb-open');
    }
    function unlockBody(){
      document.body.classList.remove('mb-open');
      const top = document.body.style.top;
      document.body.style.top = '';
      const y = top ? Math.abs(parseInt(top, 10) || 0) : _scrollY;
      window.scrollTo(0, y);
    }

    function openMobile(){ lockBody(); }
    function closeMobile(){ unlockBody(); }
    function toggleMobile(){
      if(document.body.classList.contains('mb-open')) closeMobile();
      else openMobile();
    }

    window.addEventListener('DOMContentLoaded', () => {
      if (window.lucide) window.lucide.createIcons();
      applyDesktop();

      const deskBtn = document.querySelector('[data-sb-daralt]');
      if(deskBtn){
        deskBtn.addEventListener('click', () => {
          const on = document.body.classList.toggle('sb-dar');
          try{ localStorage.setItem(KEY_DESKTOP, on ? '1' : '0'); }catch(e){}
        });
      }

      const mbBtns = document.querySelectorAll('[data-mb-open]');
      const ov     = document.querySelector('[data-mb-overlay]');
      mbBtns.forEach(b => b.addEventListener('click', toggleMobile));
      if(ov) ov.addEventListener('click', closeMobile);

      document.addEventListener('keydown', (e) => {
        if(e.key === 'Escape') closeMobile();
      });

      document.addEventListener('click', (e) => {
        const a = e.target && e.target.closest ? e.target.closest('a[data-mb-close]') : null;
        if(a){
          if (window.matchMedia && (window.matchMedia('(max-width: 980px)').matches || window.matchMedia('(hover:none) and (pointer:coarse)').matches)) {
            closeMobile();
          }
        }
      });
    });
  })();
</script>
<?php } ?>

<!-- MOBİL ÜST BAR -->
<div class="mb-topbar" aria-label="Mobil Üst Menü">
  <button class="mb-hamb" type="button" data-mb-open aria-label="Menüyü Aç/Kapat">
    <i data-lucide="menu"></i>
  </button>
</div>

<!-- OVERLAY -->
<div class="mb-overlay" data-mb-overlay aria-hidden="true"></div>

<!-- MASAÜSTÜ SIDEBAR -->
<aside class="sb" aria-label="Kenar Menü (Masaüstü)">
  <div class="sb-inner">
    <div class="sb-top">
      <div class="sb-brand">
        <div class="sb-mark"><i data-lucide="store"></i></div>
        <div class="sb-meta">
          <b>Mağaza Yöneticisi</b>
          <span>Satıcı Paneli</span>
        </div>
      </div>

      <button class="sb-collapse" type="button" data-sb-daralt aria-label="Daralt / Genişlet">
        <i data-lucide="chevrons-left"></i>
      </button>
    </div>

    <div class="sb-search">
      <i data-lucide="search" class="ico"></i>
      <input type="search" placeholder="Ara" aria-label="Ara">
    </div>

    <nav class="sb-nav" aria-label="Menü">
      <?php foreach($NAV as $key => $item): $isActive = ($active === $key); ?>
        <a class="sb-item <?= $isActive ? 'active' : '' ?>" href="<?= $h($item['href']) ?>" title="<?= $h($item['etiket']) ?>">
          <i data-lucide="<?= $h($item['ikon']) ?>" class="ico"></i>
          <span class="txt"><?= $h($item['etiket']) ?></span>
        </a>
      <?php endforeach; ?>
    </nav>

    <div class="sb-foot">
      <div class="sb-user">
        <div class="sb-avatar" title="<?= $h($userName) ?>">
          <i data-lucide="user"></i>
        </div>
        <div class="meta">
          <b><?= $h($userName) ?></b>
          <span>Sanatçı Hesabı</span>
        </div>
      </div>
      <a class="sb-ayar" href="<?= $h($NAV['ayarlar']['href']) ?>" aria-label="Ayarlar">
        <i data-lucide="settings"></i>
      </a>
    </div>
  </div>
</aside>

<!-- MOBİL PANEL -->
<aside class="sb sb-mobil" aria-label="Kenar Menü (Mobil)">
  <div class="sb-inner">
    <div class="sb-search">
      <i data-lucide="search" class="ico"></i>
      <input type="search" placeholder="Ara" aria-label="Ara">
    </div>

    <nav class="sb-nav" aria-label="Menü">
      <?php foreach($NAV as $key => $item): $isActive = ($active === $key); ?>
        <a data-mb-close class="sb-item <?= $isActive ? 'active' : '' ?>" href="<?= $h($item['href']) ?>" title="<?= $h($item['etiket']) ?>">
          <i data-lucide="<?= $h($item['ikon']) ?>" class="ico"></i>
          <span class="txt"><?= $h($item['etiket']) ?></span>
        </a>
      <?php endforeach; ?>
    </nav>

    <div class="sb-foot">
      <div class="sb-user">
        <div class="sb-avatar" title="<?= $h($userName) ?>">
          <i data-lucide="user"></i>
        </div>
        <div class="meta">
          <b><?= $h($userName) ?></b>
          <span>Sanatçı Hesabı</span>
        </div>
      </div>
      <a class="sb-ayar" href="<?= $h($NAV['ayarlar']['href']) ?>" aria-label="Ayarlar">
        <i data-lucide="settings"></i>
      </a>
    </div>
  </div>
</aside>
