/* App shell: sidebar + topbar. Renders children content. */
(function () {
  const { useState } = React;
  const Icon = window.Icon, Logo = window.Logo, Avatar = window.Avatar;
  const D = window.YEIDA;

  const NAV = [
    { k: 'dashboard', label: 'Dashboard', icon: 'dashboard' },
    { k: 'plot', label: 'My Plot', icon: 'plot' },
    { k: 'myjourney', label: 'My Journey', icon: 'flag' },
    { k: 'sampleplans', label: 'Sample Plans', icon: 'grid' },
    { k: 'construction', label: 'Construction', icon: 'construction' },
    { k: 'payments', label: 'Payments', icon: 'payments', badge: '1' },
    { k: 'documents', label: 'Documents', icon: 'documents' },
    { k: 'notices', label: 'Notices', icon: 'notices', badge: '2' },
    { k: 'sectormaps', label: 'Sector Maps', icon: 'map' },
    { k: 'transfer', label: 'Transfer Plot', icon: 'transfer' },
    { k: 'assistant', label: 'AI Assistant', icon: 'assistant' },
  ];
  const NAV2 = [
    { k: 'support', label: 'Support', icon: 'support' },
    { k: 'profile', label: 'Profile', icon: 'profile' },
  ];

  function Shell({ route, go, children, dark, setDark }) {
    const [q, setQ] = useState('');
    const titleMap = {
      dashboard: 'My Plot Dashboard', plot: 'My Plot', construction: 'Construction',
      payments: 'Payments', documents: 'Document Center', notices: 'Notices & Announcements',
      sectormaps: 'Sector Maps', transfer: 'Transfer Plot', assistant: 'AI Assistant',
      support: 'Support Center', profile: 'Profile', sampleplans: 'Sample Plans & Virtual Tours',
      journey: 'Get Started', myjourney: 'My Construction Journey',
    };
    return (
      <div style={{ display: 'flex', minHeight: '100vh', background: 'var(--bg)' }}>
        {/* ---- Sidebar ---- */}
        <aside style={{
          width: 'var(--sidebar-w)', flex: 'none', position: 'sticky', top: 0, height: '100vh',
          background: 'linear-gradient(185deg,#0b2548,#081a39)', display: 'flex', flexDirection: 'column',
          padding: '20px 14px', borderRight: '1px solid rgba(255,255,255,.06)',
        }}>
          <div style={{ padding: '4px 8px 18px' }}><Logo light size={36} /></div>

          {/* property capsule */}
          <div style={{
            margin: '0 2px 16px', padding: '12px 13px', borderRadius: 13,
            background: 'rgba(255,255,255,.05)', border: '1px solid rgba(255,255,255,.08)',
          }}>
            <div className="row gap-3">
              <span style={{ width: 36, height: 36, borderRadius: 9, flex: 'none', display: 'grid', placeItems: 'center', background: 'linear-gradient(150deg,var(--blue-500),var(--blue-600))', color: '#fff' }}>
                <Icon name="building" size={19} />
              </span>
              <div style={{ minWidth: 0 }}>
                <div style={{ color: '#fff', fontWeight: 700, fontSize: 13.5 }}>Plot {D.user.plot}, {D.user.sector}</div>
                <div style={{ color: 'rgba(186,202,226,.7)', fontSize: 11.5 }}>{D.user.size} · {D.user.category}</div>
              </div>
            </div>
          </div>

          <nav style={{ display: 'flex', flexDirection: 'column', gap: 3, overflowY: 'auto', flex: 1 }} className="nav-scroll">
            {NAV.map(n => (
              <button key={n.k} className={'nav-item' + (route === n.k ? ' active' : '')} onClick={() => go(n.k)}>
                <Icon name={n.icon} />
                <span>{n.label}</span>
                {n.badge && <span className="nav-badge">{n.badge}</span>}
              </button>
            ))}
            <div style={{ height: 1, background: 'rgba(255,255,255,.07)', margin: '10px 8px' }} />
            {NAV2.map(n => (
              <button key={n.k} className={'nav-item' + (route === n.k ? ' active' : '')} onClick={() => go(n.k)}>
                <Icon name={n.icon} /><span>{n.label}</span>
              </button>
            ))}
          </nav>

          <button className="nav-item" style={{ color: '#f2a9a9' }} onClick={() => go('welcome')}>
            <Icon name="logout" /><span>Logout</span>
          </button>
        </aside>

        {/* ---- Main ---- */}
        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
          {/* topbar */}
          <header style={{
            height: 'var(--topbar-h)', flex: 'none', position: 'sticky', top: 0, zIndex: 50,
            background: 'rgba(255,255,255,.85)', backdropFilter: 'blur(12px)', borderBottom: '1px solid var(--line)',
            display: 'flex', alignItems: 'center', gap: 16, padding: '0 28px',
          }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: 'var(--ink)' }}>{titleMap[route]}</div>
            <div className="input-icon" style={{ marginLeft: 14, width: 340, maxWidth: '34vw' }}>
              <Icon name="search" />
              <input className="input" style={{ height: 40, background: 'var(--bg)' }} placeholder="Search plots, dues, documents…" value={q} onChange={e => setQ(e.target.value)} />
              <kbd style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', fontSize: 11, fontWeight: 600, color: 'var(--faint)', background: '#fff', border: '1px solid var(--line)', borderRadius: 6, padding: '2px 6px' }}>⌘K</kbd>
            </div>
            <div className="row gap-2" style={{ marginLeft: 'auto' }}>
              <button className="icon-btn" title="Help" onClick={() => go('support')}><Icon name="support" /></button>
              <button className="icon-btn" title="Language"><Icon name="globe" /></button>
              <button className="icon-btn" title="Notifications" onClick={() => go('notices')}><Icon name="bell" /><span className="notif-dot" /></button>
              <div style={{ width: 1, height: 26, background: 'var(--line)', margin: '0 4px' }} />
              <button onClick={() => go('profile')} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '5px 7px 5px 5px', borderRadius: 99, border: '1px solid var(--line)', background: '#fff', cursor: 'pointer' }}>
                <Avatar initials={D.user.initials} size={32} />
                <div style={{ textAlign: 'left', lineHeight: 1.1, paddingRight: 4 }}>
                  <div style={{ fontWeight: 700, fontSize: 13 }}>{D.user.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--muted)' }}>{D.user.relationship} · {D.user.isAllottee ? 'Allottee' : 'Representative'}</div>
                </div>
              </button>
            </div>
          </header>

          <main style={{ flex: 1, overflow: 'auto', padding: '28px 36px 48px' }} key={route}>
            <div className="anim-fade-in" style={{ maxWidth: 1600, margin: '0 auto' }}>{children}</div>
          </main>
        </div>
        {route !== 'assistant' && window.FloatingAssistant && React.createElement(window.FloatingAssistant, { go })}
      </div>
    );
  }

  window.Shell = Shell;
})();