/* shell.jsx — Sidebar (multi-inmueble) + Topbar + property switcher */
const { useState: useShellState } = React;

function scoreColor(s) {
  if (s >= 85) return 'var(--c-emerald)';
  if (s >= 60) return 'var(--c-amber)';
  return 'var(--c-red)';
}
function statusBadgeKind(st) {
  return st === 'compliant' ? 'compliant' : st === 'progress' ? 'progress' : st === 'review' ? 'review' : 'missing';
}

function Sidebar({ store }) {
  const { screen, nav, properties, activeProp, setActiveProp } = store;
  const nItems = [
    ['dashboard', 'Inicio', 'dashboard'],
    ['shieldcheck', 'Mis inmuebles', 'dashboard'],
    ['doc', 'Documentos', 'docs'],
    ['kanban', 'Trámites', 'tramites'],
    ['receipt', 'Servicios y pagos', 'services'],
    ['sparkle', 'Asistente IA', 'assistant'],
  ];
  return (
    <aside className="pf-side">
      <div style={{ padding: '0 8px 8px' }}><Logo size={24} /></div>
      <nav className="pf-nav">
        {nItems.map(([ic, label, target], i) => {
          const on = (i === 0 && screen === 'dashboard') ||
                     (i === 1 && screen === 'property') ||
                     (i > 1 && screen === target);
          const badge = target === 'tramites' ? 3 : null;
          return (
            <div key={label} className={'pf-nav-item' + (on ? ' on' : '')} onClick={() => nav(target)}>
              <span className="pf-nav-ico"><Icon name={ic} size={19} /></span>{label}
              {badge && <span className="pf-nav-badge">{badge}</span>}
            </div>
          );
        })}
      </nav>

      <div className="pf-nav-label">Tus inmuebles</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, overflowY: 'auto', flex: 1, minHeight: 0 }}>
        {properties.map(p => (
          <div key={p.id} className={'pf-nav-item' + (activeProp === p.id && screen === 'property' ? ' on' : '')} onClick={() => nav('property', p.id)} style={{ padding: '8px 10px' }}>
            <span style={{ width: 26, height: 26, borderRadius: 8, background: p.thumb, flex: '0 0 auto' }} />
            <span style={{ flex: 1, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontSize: 13 }}>{p.name}</span>
            <span className="pf-num" style={{ fontSize: 12, fontWeight: 700, color: scoreColor(p.score) }}>{p.score}</span>
          </div>
        ))}
        <button className="pf-btn pf-btn-soft pf-btn-sm" style={{ marginTop: 6, justifyContent: 'flex-start', gap: 9 }} onClick={() => nav('add')}>
          <Icon name="plus" size={16} /> Agregar inmueble
        </button>
      </div>

      <div style={{ marginTop: 10, padding: '10px 8px 0', borderTop: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <Avatar name={store.user?.name || 'Usuario'} size={32} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{store.user?.name || 'Usuario'}</div>
          <div style={{ fontSize: 11.5, color: 'var(--faint)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{store.user?.email}</div>
        </div>
        <span className="pf-icon-btn" style={{ width: 30, height: 30, borderRadius: 8 }} title="Cerrar sesión" onClick={store.reset}><Icon name="settings" size={15} /></span>
      </div>
    </aside>
  );
}

function Topbar({ store, title, cta }) {
  const active = store.properties.find(p => p.id === store.activeProp);
  return (
    <div className="pf-top">
      <div style={{ fontWeight: 700, fontSize: 15.5, fontFamily: 'var(--font-display)' }}>{title}</div>
      <div style={{ flex: 1 }} />
      <div className="pf-search"><Icon name="search" size={16} /> Buscar inmueble, documento o trámite…</div>
      <span className="pf-icon-btn" onClick={() => store.nav('assistant')} title="Asistente IA"><Icon name="sparkle" size={18} /></span>
      <span className="pf-icon-btn" title="Notificaciones"><Icon name="bell" size={18} /><span className="pf-dot" /></span>
      {cta}
    </div>
  );
}

Object.assign(window, { Sidebar, Topbar, scoreColor, statusBadgeKind });