/* V5 Owner portal layout */
(function () {
  const NAV = [
    { key: 'home', label: 'Overview', icon: '◈', href: 'dashboard.html' },
    { key: 'bookings', label: 'Reservations', icon: '◐', href: 'bookings.html' },
    { key: 'financial', label: 'Financials', icon: '$', href: 'financial.html' },
    { key: 'messages', label: 'Messages', icon: '✉', href: 'messages.html' },
    { key: 'support', label: 'Support', icon: '?', href: 'support.html' },
    { key: 'video', label: 'Live calls', icon: '▶', href: 'video.html' },
  ];

  document.addEventListener('DOMContentLoaded', async () => {
    const shell = document.getElementById('app-shell');
    if (!shell) return;
    const active = shell.dataset.active || 'home';
    const title = shell.dataset.title || 'Owner Portal';
    document.title = title + ' · Hostiva Owner';

    const me = await requireLogin();
    if (!me) return;
    if (me.role_name !== 'owner' && me.role_name !== 'super_admin' && !can('owner.portal')) {
      location.href = (HOSTIVA.pagesRoot || '../pages/') + 'dashboard.html';
      return;
    }

    const initials = (me.name || 'O').split(' ').map(s => s[0]).join('').slice(0, 2).toUpperCase();
    const navHtml = NAV.map(n =>
      `<a href="${n.href}" class="${active === n.key ? 'active' : ''}"><span class="ic">${n.icon}</span>${n.label}</a>`
    ).join('');
    const inner = shell.innerHTML;
    shell.outerHTML = `
<div class="app">
  <aside class="sidebar" id="sidebar">
    <div class="brand"><div class="mark">H</div><div class="name">Owner Portal</div></div>
    <div class="nav-section">Your portfolio</div>
    <nav class="nav">${navHtml}</nav>
    <div style="padding:12px;font-size:11px;color:var(--text-muted)">Powered by Hostiva V5</div>
  </aside>
  <div class="main">
    <header class="topbar">
      <button class="icon-btn sidebar-toggle" type="button" onclick="document.getElementById('sidebar').classList.toggle('open')">☰</button>
      <div style="flex:1"><span class="v4-tag">Owner</span></div>
      <button class="icon-btn" type="button" onclick="toggleTheme()">◐</button>
      <button class="icon-btn" type="button" onclick="logoutOwner()">⎋</button>
      <div class="user-chip"><div class="av">${initials}</div><div><div style="font-weight:600;font-size:13px">${escapeHtml(me.name)}</div></div></div>
    </header>
    <main class="content">
      <div class="page-header"><div><h1>${escapeHtml(title)}</h1></div></div>
      <div id="page-body">${inner}</div>
    </main>
  </div>
</div>`;
    window.HOSTIVA.ready = true;
    const root = (HOSTIVA.root || '').replace(/\/?$/, '/');
    ['assets/js/hostiva-realtime.js'].forEach(path => {
      const s = document.createElement('script');
      s.src = root + path;
      s.defer = true;
      document.body.appendChild(s);
    });
    document.dispatchEvent(new CustomEvent('hostiva:ready', { detail: { user: me } }));
  });

  window.logoutOwner = async function () {
    try { await auth.logout(); } catch (e) {}
    location.href = (HOSTIVA.pagesRoot || '../pages/') + 'login.html';
  };
})();
