// Topbar.jsx — AegisComply

const topbarStyles = {
  topbar: { height: 56, background: 'white', borderBottom: '1px solid #E2E8F0', display: 'flex', alignItems: 'center', padding: '0 24px', gap: 16, position: 'sticky', top: 0, zIndex: 50 },
  title: { fontFamily: "'Helvetica', Arial, sans-serif", fontSize: 17, fontWeight: 700, color: '#0F172A', flex: 1 },
  breadcrumb: { fontSize: 13, color: '#94A3B8', display: 'flex', alignItems: 'center', gap: 6 },
  breadcrumbSep: { color: '#CBD5E1' },
  breadcrumbCurrent: { color: '#334155', fontWeight: 500 },
  actions: { display: 'flex', alignItems: 'center', gap: 8 },
  btn: { display: 'inline-flex', alignItems: 'center', gap: 6, padding: '0 14px', height: 34, borderRadius: 6, fontSize: 13, fontWeight: 600, cursor: 'pointer', border: 'none', fontFamily: "'DM Sans', sans-serif", transition: 'all 150ms' },
  btnPrimary: { background: '#0D9488', color: 'white' },
  btnSecondary: { background: 'white', color: '#334155', border: '1px solid #CBD5E1' },
  bellBtn: { width: 34, height: 34, borderRadius: 6, border: '1px solid #E2E8F0', background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', position: 'relative', color: '#64748B' },
  bellDot: { position: 'absolute', top: 6, right: 6, width: 7, height: 7, borderRadius: '50%', background: '#DC2626', border: '1.5px solid white' },
};

function Topbar({ title, breadcrumb, actions = [], hasAlerts = true, isAdmin = false, onAdminOpen }) {
  return (
    <div style={topbarStyles.topbar}>
      <div style={{ flex: 1 }}>
        {breadcrumb && (
          <div style={topbarStyles.breadcrumb}>
            <span>AegisComply</span>
            <span style={topbarStyles.breadcrumbSep}>›</span>
            <span style={topbarStyles.breadcrumbCurrent}>{breadcrumb}</span>
          </div>
        )}
        <div style={topbarStyles.title}>{title}</div>
      </div>
      <div style={topbarStyles.actions}>
        {isAdmin && (
          <button
            onClick={onAdminOpen}
            style={{ ...topbarStyles.btn, ...topbarStyles.btnSecondary, gap: 6, background: '#0B1F3A', color: '#14B8A6', border: '1px solid #1A3558' }}
            title="Admin Control Panel"
          >
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
            Admin
          </button>
        )}
        {actions.map((a, i) => (
          <button
            key={i}
            style={{ ...topbarStyles.btn, ...(a.primary ? topbarStyles.btnPrimary : topbarStyles.btnSecondary) }}
            onClick={a.onClick}
          >
            {a.icon && a.icon}
            {a.label}
          </button>
        ))}
        <div style={topbarStyles.bellBtn}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
          {hasAlerts && <span style={topbarStyles.bellDot}/>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Topbar });