// Shared primitives
const Badge = ({tone='neutral', children, dot=true}) => (
  <span className={`badge badge-${tone}`}>{dot && <span className="d"/>}{children}</span>
);

const StatusBadge = ({status}) => {
  const s = STATUS_LABELS[status];
  return <span className={`badge ${s.tone}`}><span className="d"/>{s.label}</span>;
};

const UrgencyBadge = ({u}) => {
  const x = URGENCY[u];
  return <span className={`badge ${x.b}`}><span className="d"/>{x.l}</span>;
};

const RoleBadge = ({role}) => {
  const map = {
    verwaltung:{c:'admin', l:'Verwaltung'},
    admin:{c:'admin', l:'Admin'},
    sach:{c:'sach', l:'Sachbearbeiter'},
    hauswart:{c:'hauswart', l:'Hauswart'},
    mieter:{c:'mieter', l:'Mieter'}
  };
  const r = map[role] || {c:'admin', l: role||'—'};
  return <span className={`rolebadge ${r.c}`}>{r.l}</span>;
};

const Avatar = ({initials, tone='', size=''}) => (
  <span className={`avatar ${tone} ${size}`}>{initials}</span>
);

const Button = ({variant='', size='', children, leftIcon, rightIcon, onClick, className=''}) => (
  <button
    className={`btn ${variant?`btn-${variant}`:''} ${size?`btn-${size}`:''} ${className}`}
    onClick={onClick}
  >
    {leftIcon && <Icon name={leftIcon}/>}
    {children}
    {rightIcon && <Icon name={rightIcon}/>}
  </button>
);

const SidebarItem = ({icon, label, count, dot, active, onClick}) => (
  <div className={`sb-item ${active?'is-active':''}`} onClick={onClick}>
    <Icon name={icon} size={15}/>
    <span>{label}</span>
    {count !== undefined && <span className="sb-count">{count}</span>}
    {dot && <span className="dot"/>}
  </div>
);

const SidebarSection = ({title, children}) => (
  <>
    <div className="sb-section">{title}</div>
    {children}
  </>
);

const PageHeader = ({eyebrow, title, sub, actions}) => (
  <div className="pageheader">
    <div>
      {eyebrow && <div className="page-eyebrow">{eyebrow}</div>}
      <h1 className="page-title">{title}</h1>
      {sub && <div className="page-sub">{sub}</div>}
    </div>
    {actions && <div className="page-actions">{actions}</div>}
  </div>
);

const Card = ({title, action, children, className=''}) => (
  <div className={`card ${className}`}>
    {title && (
      <div className="card-head">
        <div className="card-title">{title}</div>
        {action}
      </div>
    )}
    <div className="card-body">{children}</div>
  </div>
);

const KPI = ({label, value, unit, delta, deltaDir}) => (
  <div className="kpi">
    <div className="kpi-label">{label}</div>
    <div className="kpi-val">{value}{unit && <span className="unit">{unit}</span>}</div>
    {delta && <div className={`kpi-delta ${deltaDir||''}`}>{delta}</div>}
  </div>
);

const Sparkline = ({points, color='currentColor'}) => {
  const w=100, h=34;
  const min=Math.min(...points), max=Math.max(...points);
  const d = points.map((p,i)=>{
    const x = (i/(points.length-1))*w;
    const y = h - ((p-min)/(max-min||1))*h;
    return `${i?'L':'M'}${x.toFixed(1)} ${y.toFixed(1)}`;
  }).join(' ');
  return (
    <svg className="spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <path d={d} fill="none" stroke={color} strokeWidth="1.5" vectorEffect="non-scaling-stroke"/>
    </svg>
  );
};

const Search = ({placeholder='Suchen...', value, onChange}) => (
  <div className="search">
    <Icon name="search" size={14} stroke={1.6}/>
    <input placeholder={placeholder} value={value||''} onChange={e=>onChange?.(e.target.value)}/>
    <kbd>⌘K</kbd>
  </div>
);

const Placeholder = ({label, h=120}) => (
  <div className="stripe" style={{height:h, borderRadius:'var(--r-3)'}}>{label}</div>
);

Object.assign(window, {
  Badge, StatusBadge, UrgencyBadge, RoleBadge, Avatar,
  Button, SidebarItem, SidebarSection, PageHeader, Card, KPI, Sparkline, Search, Placeholder
});