// Shared chrome — shadcn/ui aesthetic
const ICON_PATHS = {
  board: '<rect x="3" y="3" width="7" height="18" rx="1.5"/><rect x="14" y="3" width="7" height="11" rx="1.5"/>',
  home: '<path d="M3 11.5L12 4l9 7.5V20a1 1 0 01-1 1h-5v-7h-6v7H4a1 1 0 01-1-1v-8.5z"/>',
  settings: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 01-4 0v-.1a1.7 1.7 0 00-1.1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 010-4h.1a1.7 1.7 0 001.5-1.1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3H9a1.7 1.7 0 001-1.5V3a2 2 0 014 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8V9a1.7 1.7 0 001.5 1H21a2 2 0 010 4h-.1a1.7 1.7 0 00-1.5 1z"/>',
  plus: '<path d="M12 5v14M5 12h14"/>',
  close: '<path d="M18 6L6 18M6 6l12 12"/>',
  check: '<path d="M20 6L9 17l-5-5"/>',
  chev: '<path d="M9 18l6-6-6-6"/>',
  chevDown: '<path d="M6 9l6 6 6-6"/>',
  chevLeft: '<path d="M15 18l-6-6 6-6"/>',
  clock: '<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>',
  msg: '<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z"/>',
  user: '<circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0116 0"/>',
  users: '<circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0114 0"/><circle cx="17" cy="7" r="3"/><path d="M22 21a5 5 0 00-7-4.6"/>',
  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>',
  moon: '<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>',
  monitor: '<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>',
  mail: '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7l-10 7L2 7"/>',
  lock: '<rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/>',
  arrow: '<path d="M5 12h14M13 5l7 7-7 7"/>',
  calendar: '<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>',
  trash: '<path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/>',
  logout: '<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/>',
};
const Icon = ({ name, size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0}}
    dangerouslySetInnerHTML={{ __html: ICON_PATHS[name] || '' }}/>
);

const AVATAR_COLORS = ['#e11d48','#7c3aed','#0891b2','#16a34a','#ea580c','#db2777','#0ea5e9'];
const Avatar = ({ name, size = 28 }) => {
  const idx = (name || '?').charCodeAt(0) % AVATAR_COLORS.length;
  const bg = AVATAR_COLORS[idx];
  return (
    <div className="avatar" style={{
      width: size, height: size, fontSize: Math.max(10, size * 0.4),
      background: bg, color: '#fff'
    }}>
      {(name || '?').slice(0,1).toUpperCase()}
    </div>
  );
};

const Logo = ({ size = 22 }) => (
  <div style={{display:'flex',alignItems:'center',gap:8}}>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <rect x="3" y="3" width="8" height="18" rx="1.5" fill="currentColor"/>
      <rect x="13" y="3" width="8" height="11" rx="1.5" fill="currentColor" opacity="0.5"/>
    </svg>
    <span style={{fontWeight:600, letterSpacing:'-0.02em', fontSize:16}}>Trello Clone</span>
  </div>
);

const Sidebar = ({ active, onNav }) => (
  <aside className="sidebar">
    <div style={{padding:'4px 8px 16px'}}><Logo /></div>
    <div className={`nav-item ${active==='home'?'active':''}`} onClick={()=>onNav('home')}><Icon name="home"/> Home</div>
    <div className={`nav-item ${active==='boards'?'active':''}`} onClick={()=>onNav('boards')}><Icon name="board"/> My boards</div>
    <div style={{marginTop:'auto', paddingTop:16, borderTop:'1px solid var(--border-c)'}}>
      <div className={`nav-item ${active==='settings'?'active':''}`} onClick={()=>onNav('settings')}><Icon name="settings"/> Settings</div>
      <div className="nav-item" style={{marginTop:4}}>
        <Avatar name="Linh" size={22}/>
        <span style={{flex:1, color:'var(--fg)'}}>Linh Tran</span>
      </div>
    </div>
  </aside>
);

const Topbar = ({ title, breadcrumb, actions }) => (
  <div className="topbar">
    <div className="row" style={{gap:8}}>
      {breadcrumb && <span className="muted" style={{fontSize:14}}>{breadcrumb}</span>}
      <span className="h2">{title}</span>
    </div>
    <div className="row" style={{gap:8}}>{actions}</div>
  </div>
);

Object.assign(window, { Icon, Avatar, Logo, Sidebar, Topbar });