/* global React */
// — Shared shell, icons, primitives —

// — Inline SVG icon set —
const Icon = ({ name, size = 16, stroke = 2 }) => {
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'search':       return <svg {...props}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case 'binoculars':   return <svg {...props}><path d="M5 4h3l1 4M19 4h-3l-1 4"/><circle cx="6.5" cy="15" r="3.5"/><circle cx="17.5" cy="15" r="3.5"/><path d="M10 15h4M9 8l-2.5 4M15 8l2.5 4"/></svg>;
    case 'list':         return <svg {...props}><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>;
    case 'users':        return <svg {...props}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>;
    case 'megaphone':    return <svg {...props}><path d="M3 11v3a1 1 0 0 0 1 1h4l5 4V6L8 10H4a1 1 0 0 0-1 1z"/><path d="M16 8a5 5 0 0 1 0 8"/><path d="M19 5a9 9 0 0 1 0 14"/></svg>;
    case 'chart':        return <svg {...props}><path d="M3 3v18h18"/><path d="m7 14 4-4 4 4 4-6"/></svg>;
    case 'network':      return <svg {...props}><circle cx="6" cy="12" r="2.4"/><circle cx="18" cy="6" r="2.4"/><circle cx="18" cy="18" r="2.4"/><path d="M8.1 11 15.9 6.9M8.1 13 15.9 17.1"/></svg>;
    case 'dollar':       return <svg {...props}><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>;
    case 'help':         return <svg {...props}><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/></svg>;
    case 'plus':         return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    case 'chevron-down': return <svg {...props}><path d="m6 9 6 6 6-6"/></svg>;
    case 'chevron-right':return <svg {...props}><path d="m9 18 6-6-6-6"/></svg>;
    case 'chevron-left': return <svg {...props}><path d="m15 18-6-6 6-6"/></svg>;
    case 'arrow-up':     return <svg {...props}><path d="M5 12l7-7 7 7M12 5v14"/></svg>;
    case 'arrow-down':   return <svg {...props}><path d="M19 12l-7 7-7-7M12 19V5"/></svg>;
    case 'arrow-right':  return <svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'check':        return <svg {...props}><path d="m20 6-11 11-5-5"/></svg>;
    case 'x':            return <svg {...props}><path d="M18 6 6 18M6 6l12 12"/></svg>;
    case 'kebab':        return <svg {...props}><circle cx="12" cy="5" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="12" cy="19" r="1.4"/></svg>;
    case 'cog':          return <svg {...props}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.65 1.65 0 0 0-1.8-.3 1.65 1.65 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.65 1.65 0 0 0-1-1.5 1.65 1.65 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.65 1.65 0 0 0 .3-1.8 1.65 1.65 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.65 1.65 0 0 0 1.8.3H9a1.65 1.65 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.65 1.65 0 0 0 1 1.5 1.65 1.65 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.65 1.65 0 0 0-.3 1.8V9a1.65 1.65 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.65 1.65 0 0 0-1.5 1z"/></svg>;
    case 'cloud-down':   return <svg {...props}><path d="M20 16.2A4.5 4.5 0 0 0 17.5 8h-1.8A7 7 0 1 0 4 14.9"/><path d="M12 12v9M8 17l4 4 4-4"/></svg>;
    case 'share':        return <svg {...props}><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>;
    case 'bell':         return <svg {...props}><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>;
    case 'refresh':      return <svg {...props}><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>;
    case 'sort':         return <svg {...props}><path d="M3 6h18M6 12h12M9 18h6"/></svg>;
    case 'sort-desc':    return <svg {...props}><path d="M3 6h13M3 12h9M3 18h5"/><path d="M19 5v14m0 0 3-3m-3 3-3-3"/></svg>;
    case 'filter':       return <svg {...props}><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>;
    case 'star':         return <svg {...props}><polygon points="12 2 15 8.5 22 9.3 17 14 18.2 21 12 17.8 5.8 21 7 14 2 9.3 9 8.5 12 2"/></svg>;
    case 'cols':         return <svg {...props}><rect x="3" y="3" width="7" height="18" rx="2"/><rect x="14" y="3" width="7" height="18" rx="2"/></svg>;
    case 'tag':          return <svg {...props}><path d="M20.59 13.41 13 21l-9-9V4h8l9 9c.79.78.79 2.05 0 2.83l-.41.58z"/><circle cx="8" cy="8" r="1.4"/></svg>;
    case 'thumb-up':     return <svg {...props}><path d="M7 11V21H4a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h3zM7 11l5-8a3 3 0 0 1 3 3v4h5a2 2 0 0 1 2 2.2l-1.5 7A2 2 0 0 1 18.5 21H7"/></svg>;
    case 'thumb-down':   return <svg {...props}><path d="M17 13V3h3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-3zM17 13l-5 8a3 3 0 0 1-3-3v-4H4a2 2 0 0 1-2-2.2L3.5 4.8A2 2 0 0 1 5.5 3H17"/></svg>;
    case 'comment':      return <svg {...props}><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>;
    case 'briefcase':    return <svg {...props}><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>;
    case 'verified':     return <svg {...props}><path d="m9 12 2 2 4-4"/><path d="M12 2 4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z"/></svg>;
    case 'eye':          return <svg {...props}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'eye-off':      return <svg {...props}><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24M1 1l22 22"/></svg>;
    case 'copy':         return <svg {...props}><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>;
    case 'duplicate':    return <svg {...props}><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M4 16V6a2 2 0 0 1 2-2h10"/></svg>;
    case 'trash':        return <svg {...props}><path d="M3 6h18M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/></svg>;
    case 'history':      return <svg {...props}><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><polyline points="3 3 3 8 8 8"/><path d="M12 7v5l3 2"/></svg>;
    case 'send':         return <svg {...props}><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>;
    case 'edit':         return <svg {...props}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>;
    case 'grid':         return <svg {...props}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>;
    case 'upload':       return <svg {...props}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>;
    case 'link':         return <svg {...props}><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>;
    case 'sparkles':     return <svg {...props}><path d="M12 3v3m0 12v3M3 12h3m12 0h3M5.6 5.6 7.7 7.7m8.6 8.6 2.1 2.1M5.6 18.4 7.7 16.3m8.6-8.6 2.1-2.1"/></svg>;
    default:             return <svg {...props}><circle cx="12" cy="12" r="9"/></svg>;
  }
};

// — Platform glyph (uses brand color square) —
const PlatformIcon = ({ id, size = 18 }) => {
  const p = (window.PLATFORMS || {})[id];
  if (!p) return null;
  return (
    <span className="platform-icon" style={{ background: p.color, width: size, height: size, fontSize: Math.max(9, size*0.55) }}>
      {p.short[0]}
    </span>
  );
};

// — Generic Button —
const Btn = ({ variant='ghost', size='', icon, iconRight, children, ...rest }) => (
  <button className={`btn btn-${variant} ${size==='sm'?'btn-sm':''}`} {...rest}>
    {icon && <Icon name={icon} size={14}/>}
    {children}
    {iconRight && <Icon name={iconRight} size={14}/>}
  </button>
);

// — Sidebar Rail (pink) —
const RAIL = [
  { id:'search',     icon:'search' },
  { id:'discover',   icon:'binoculars' },
  { id:'lists',      icon:'list' },
  { id:'audiences',  icon:'users' },
  { id:'campaigns',  icon:'megaphone' },
  { id:'reports',    icon:'network' },
  { id:'payments',   icon:'dollar' },
];

const Rail = ({ activeId, onNavigate, market, onChangeMarket }) => (
  <aside className="rail" aria-label="Workspace navigation">
    <div className="brand" aria-label="Pandora">
      <svg width="40" height="46" viewBox="0 0 40 46" aria-hidden="true" fill="none" stroke="#241f1d" strokeWidth="2.8" strokeLinecap="round">
        <circle cx="20" cy="28" r="9.6"/>
        <path d="M14.5 9.5 16.4 14"/>
        <path d="M20 7.5V13"/>
        <path d="M25.5 9.5 23.6 14"/>
      </svg>
    </div>
    <div className="rail-icons">
      {RAIL.map(item => {
        // Lists → also active when the user is on a list detail. Campaigns → also active for plans (since plans live in campaigns tab).
        const live = activeId === item.id;
        return (
          <button key={item.id} className={`rail-btn ${live ? 'active' : ''}`} onClick={() => onNavigate(item.id)} title={item.id}>
            <Icon name={item.icon} size={20}/>
          </button>
        );
      })}
    </div>
    <div className="rail-foot">
      {onChangeMarket && (
        <button className="rail-btn" style={{fontSize:9,fontWeight:700,letterSpacing:'.04em'}} title={`Market: ${market ? market.country : '—'} · click to change`} onClick={onChangeMarket}>
          RESET
        </button>
      )}
      <button className="rail-btn" title="Help"><Icon name="help" size={18}/></button>
      <div className="rail-avatar" title="Sara">SJ</div>
    </div>
  </aside>
);

// — Top header bar —
const TopBar = ({ title, breadcrumb, actions, accent }) => (
  <div className="top" style={accent ? {background: accent} : null}>
    {breadcrumb ? (
      <div className="row gap-2" style={{minWidth:0}}>
        {breadcrumb}
      </div>
    ) : <h1 className="truncate">{title}</h1>}
    <div className="top-actions">
      {actions}
      <button className="icon-btn" title="Notifications"><Icon name="bell" size={18}/></button>
      <button className="icon-btn" title="Account"><div className="rail-avatar" style={{width:30,height:30,fontSize:11,borderWidth:1}}>SJ</div></button>
    </div>
  </div>
);

// — Drawer wrapper —
const Drawer = ({ open, title, onClose, children, footer, width=480 }) => (
  <>
    <div className={`drawer-scrim ${open ? 'open' : ''}`} onClick={onClose}/>
    <div className={`drawer ${open ? 'open' : ''}`} style={{width}}>
      <div className="drawer-head">
        <h2>{title}</h2>
        <button className="btn-icon" onClick={onClose} title="Close"><Icon name="x" size={18}/></button>
      </div>
      <div className="drawer-body">{children}</div>
      {footer ? <div className="drawer-foot">{footer}</div> : null}
    </div>
  </>
);

// — Avatar (initials-based) —
const Avatar = ({ name='', color='#dbe1ee', size='md' }) => {
  const init = name.split(' ').map(w=>w[0]).filter(Boolean).slice(0,2).join('').toUpperCase() || '?';
  return <span className={`avatar ${size==='sm'?'avatar-sm':size==='lg'?'avatar-lg':''}`} style={{background:color,color:'#3a2810'}}>{init}</span>;
};

// — Verified badge —
const VerifiedBadge = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="#2c80f6" style={{verticalAlign:'-2px'}}><path d="M12 2 9 5 5 4 4 8 1 12l3 4 1 4 4-1 3 3 3-3 4 1 1-4 3-4-3-4-1-4-4 1-3-3z" stroke="#2c80f6" strokeLinejoin="round"/><path d="m8 12 3 3 5-6" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
);

Object.assign(window, { Icon, PlatformIcon, Btn, Rail, TopBar, Drawer, Avatar, VerifiedBadge });