// shell.jsx — outer rounded app container, sidebar, topbar, support tab

const NAV_GROUPS = [
  {
    title: 'Vertrieb',
    items: [
      { key: 'dashboard',  label: 'Dashboard',         icon: 'dashboard' },
      { key: 'pipeline',   label: 'Pipeline',          icon: 'pipeline' },
      { key: 'objekte',    label: 'Objekte',           icon: 'building' },
      { key: 'kunden',     label: 'Kunden',            icon: 'users' },
      { key: 'partner',    label: 'Vertriebspartner',  icon: 'handshake' },
    ],
  },
  {
    title: 'Verkauf',
    items: [
      { key: 'expose',         label: 'Exposés',          icon: 'fileText' },
      { key: 'selbstauskunft', label: 'Selbstauskunft',   icon: 'fileCheck' },
      { key: 'dokumente',      label: 'Dokumente',        icon: 'paperclip' },
      { key: 'rechner',        label: 'Rechner',          icon: 'calculator' },
      { key: 'provision',      label: 'Provisionen',      icon: 'receipt' },
    ],
  },
  {
    title: 'Kommunikation',
    items: [
      { key: 'kampagnen', label: 'E-Mail-Kampagnen', icon: 'envelope' },
      { key: 'aichat',    label: 'AI-Assistent',     icon: 'bot' },
    ],
  },
];

function NavItem({ item, active, onPick }) {
  const on = active === item.key;
  const Ic = Icon[item.icon];
  return (
    <button onClick={() => onPick(item.key)} style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '8px 12px', margin: '1px 0', borderRadius: 10,
      background: on ? 'var(--accent-soft)' : 'transparent',
      border: 0, cursor: 'pointer', textAlign: 'left',
      color: on ? 'var(--wholix-amber-800)' : 'var(--fg-2)',
      fontFamily: 'var(--font-sans)', fontSize: 13,
      fontWeight: on ? 600 : 500, transition: 'background 140ms', width: '100%',
    }}
    onMouseOver={e => { if (!on) e.currentTarget.style.background = 'var(--surface-sunken)'; }}
    onMouseOut={e => { if (!on) e.currentTarget.style.background = 'transparent'; }}>
      <span style={{ color: on ? 'var(--wholix-amber-700)' : 'var(--fg-3)', display: 'inline-flex' }}>
        <Ic size={16} />
      </span>
      {item.label}
    </button>
  );
}

function Sidebar({ active, onPick }) {
  return (
    <aside style={{
      width: 232, flexShrink: 0, display: 'flex', flexDirection: 'column',
      padding: '22px 14px 18px', borderRight: '1px solid var(--border-default)',
      background: '#fff', position: 'relative',
    }}>
      <div style={{ padding: '0 8px 18px', display: 'flex', alignItems: 'center', gap: 8 }}>
        <img src="assets/logo-wholix-light.svg" alt="Wholix" style={{ width: 96, display: 'block' }} />
        <span style={{
          fontSize: 9, letterSpacing: '0.14em', fontWeight: 700,
          color: 'var(--wholix-amber-800)', background: 'var(--accent-soft)',
          padding: '3px 6px', borderRadius: 4, textTransform: 'uppercase',
        }}>Immo</span>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, overflowY: 'auto', minHeight: 0 }}>
        {NAV_GROUPS.map(group => (
          <div key={group.title} style={{ display: 'flex', flexDirection: 'column' }}>
            <div style={{
              fontSize: 10, letterSpacing: '0.09em', textTransform: 'uppercase',
              fontWeight: 600, color: 'var(--fg-4)', padding: '6px 12px 6px',
            }}>{group.title}</div>
            {group.items.map(it => (
              <NavItem key={it.key} item={it} active={active} onPick={onPick} />
            ))}
          </div>
        ))}
      </div>

      <div style={{ flex: 1 }} />

      <div style={{ padding: '14px 4px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{
          fontSize: 10, letterSpacing: '0.09em', textTransform: 'uppercase',
          fontWeight: 600, color: 'var(--fg-4)',
        }}>Workspace</div>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
          padding: '8px 12px', border: '1px solid var(--border-default)', borderRadius: 10,
          background: '#fff', fontSize: 13, color: 'var(--fg-1)', cursor: 'pointer',
        }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--accent)' }}></span>
            Office Vertrieb
          </span>
          <Icon.chevronDown size={14} />
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10, padding: '6px 4px',
          borderRadius: 10,
        }}>
          <Avatar name="Sandra Kersten" size={32} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-1)' }}>Sandra K.</div>
            <div style={{ fontSize: 11, color: 'var(--fg-4)' }}>Senior Beraterin</div>
          </div>
          <IconButton icon={<Icon.sun size={16} />} size={28} title="Hell/Dunkel" />
          <IconButton icon={<Icon.bell size={16} />} size={28} badge={4} title="Benachrichtigungen" />
        </div>
      </div>
    </aside>
  );
}

function TopBar({ title, subtitle, actions, breadcrumb }) {
  return (
    <div style={{
      padding: '20px 28px 18px', borderBottom: '1px solid var(--border-default)',
      display: 'flex', alignItems: 'center', gap: 16, background: '#fff',
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        {breadcrumb && (
          <div style={{ fontSize: 12, color: 'var(--fg-4)', marginBottom: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
            {breadcrumb.map((b, i) => (
              <React.Fragment key={i}>
                {i > 0 && <Icon.chevronRight size={11} />}
                <span style={{ color: i === breadcrumb.length - 1 ? 'var(--fg-2)' : 'var(--fg-4)' }}>{b}</span>
              </React.Fragment>
            ))}
          </div>
        )}
        <div style={{
          fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700,
          letterSpacing: '-0.01em', color: 'var(--fg-1)',
        }}>{title}</div>
        {subtitle && <div style={{ fontSize: 13, color: 'var(--fg-3)', marginTop: 4 }}>{subtitle}</div>}
      </div>
      {actions && <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>{actions}</div>}
    </div>
  );
}

function SupportTab({ onClick }) {
  return (
    <button onClick={onClick} style={{
      position: 'absolute', right: 0, top: '50%',
      background: 'var(--accent)', color: 'var(--fg-on-amber)',
      padding: '14px 6px', borderRadius: '8px 0 0 8px',
      writingMode: 'vertical-rl', transform: 'translateY(-50%) rotate(180deg)',
      fontSize: 11, fontWeight: 700, letterSpacing: '0.12em',
      textTransform: 'uppercase', cursor: 'pointer', zIndex: 10,
      boxShadow: 'var(--shadow-sm)', border: 0,
    }}>Support</button>
  );
}

function Toast({ text }) {
  if (!text) return null;
  return (
    <div style={{
      position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)',
      background: 'var(--wholix-ink-900)', color: '#fff', padding: '10px 18px',
      borderRadius: 10, fontSize: 13, boxShadow: 'var(--shadow-lg)', zIndex: 1000,
    }}>{text}</div>
  );
}

function Shell({ children, sidebar, copilot, isPublic }) {
  if (isPublic) {
    return <div style={{ minHeight: '100vh', background: 'var(--surface-app)' }}>{children}</div>;
  }
  return (
    <div style={{
      minHeight: '100vh', background: 'var(--surface-app)',
      padding: 14, boxSizing: 'border-box', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        flex: 1, background: '#fff', border: '1px solid var(--border-default)',
        borderRadius: 22, boxShadow: 'var(--shadow-md)', overflow: 'hidden',
        display: 'flex', position: 'relative', minHeight: 0,
      }}>
        {sidebar}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, position: 'relative' }}>
          {children}
        </div>
        {copilot}
      </div>
    </div>
  );
}

Object.assign(window, { Sidebar, TopBar, SupportTab, Toast, Shell, NAV_GROUPS });