const { Icon, Badge, Progress, Button } = window.BeyonddoDesignSystem_2c6c3a;

const APP_NAV = [
  { key: 'dashboard', label: 'Übersicht', icon: 'layout-dashboard', route: '/app' },
  { key: 'compass', label: 'Karriere-Kompass', icon: 'compass', route: '/app/career-compass' },
  { key: 'opportunities', label: 'Chancen', icon: 'search', route: '/app/opportunities' },
  { key: 'funding', label: 'Förder-Navigator', icon: 'landmark', route: '/app/foerder-navigator' },
  { key: 'wallet', label: 'Karriere-Mappe', icon: 'wallet', route: '/app/wallet' },
  { key: 'applications', label: 'Bewerbungen', icon: 'file-text', route: '/app/applications' },
  { key: 'privacy', label: 'Datenschutz', icon: 'lock', route: '/app/settings/privacy' },
];

function AppSidebar({ active, onNavigate }) {
  return (
    <aside style={{ width: 'var(--sidebar-width)', flex: 'none', background: 'var(--surface)', borderRight: '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column', position: 'sticky', top: 0, height: '100vh' }}>
      <div style={{ height: 'var(--header-height)', display: 'flex', alignItems: 'center', padding: '0 var(--space-6)', borderBottom: '1px solid var(--border-subtle)' }}>
        <span style={{ fontWeight: 800, fontSize: 20, letterSpacing: '-0.035em', color: 'var(--ink-900)' }}>Beyondd<span style={{ color: 'var(--primary)' }}>o</span></span>
      </div>
      <nav style={{ padding: 'var(--space-4) var(--space-3)', display: 'flex', flexDirection: 'column', gap: 2, flex: 1 }}>
        {APP_NAV.map((n) => {
          const on = active === n.key;
          return (
            <a key={n.key} href={n.route} onClick={(e) => { e.preventDefault(); onNavigate(n.key); }}
              aria-current={on ? 'page' : undefined}
              style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', height: 44, padding: '0 var(--space-3)', borderRadius: 'var(--radius-md)', textDecoration: 'none', fontSize: 'var(--text-body)', fontWeight: on ? 600 : 400, color: on ? 'var(--rose-800)' : 'var(--text-body)', background: on ? 'var(--primary-tint)' : 'transparent' }}>
              <Icon name={n.icon} size={18} style={{ color: on ? 'var(--primary)' : 'var(--ink-500)' }} />
              {n.label}
            </a>
          );
        })}
      </nav>
      <div style={{ padding: 'var(--space-5)', borderTop: '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
        <Progress value={70} label="Profil vollständig" />
        <Button size="sm" variant="outline" fullWidth>Profil vervollständigen</Button>
      </div>
    </aside>
  );
}

function AppTopBar({ title, subtitle, actions }) {
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 10, minHeight: 'var(--header-height)', background: 'var(--glass-surface)', backdropFilter: 'var(--glass-blur)', WebkitBackdropFilter: 'var(--glass-blur)', borderBottom: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', gap: 'var(--space-6)', padding: 'var(--space-3) var(--space-8)' }}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
        <h1 style={{ fontSize: 'var(--text-h2)' }}>{title}</h1>
        {subtitle ? <span style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>{subtitle}</span> : null}
      </div>
      {actions}
      <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
        <button aria-label="Benachrichtigungen" style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', border: '1px solid var(--border-default)', background: 'var(--surface)', cursor: 'pointer', display: 'grid', placeItems: 'center' }}>
          <Icon name="bell" size={18} style={{ color: 'var(--ink-600)' }} />
        </button>
        <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ width: 36, height: 36, borderRadius: 'var(--radius-pill)', background: 'var(--ink-900)', color: 'var(--sand-50)', display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 600 }}>AK</span>
          <span style={{ display: 'flex', flexDirection: 'column' }}>
            <span style={{ fontSize: 'var(--text-sm)', fontWeight: 600, color: 'var(--text-heading)' }}>Anna Krüger</span>
            <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>Privatperson · Bremen</span>
          </span>
        </span>
      </span>
    </header>
  );
}

function Section({ title, action, children }) {
  return (
    <section style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 'var(--space-4)' }}>
        <h2 style={{ fontSize: 'var(--text-h3)' }}>{title}</h2>
        {action}
      </div>
      {children}
    </section>
  );
}

function AppPage({ children }) {
  return <div style={{ maxWidth: 'var(--container-app)', margin: '0 auto', padding: 'var(--space-8)', display: 'flex', flexDirection: 'column', gap: 'var(--space-8)' }}>{children}</div>;
}

Object.assign(window, { AppSidebar, AppTopBar, Section, AppPage, APP_NAV });