// MakerSights Web App — Shell components
// App header, sidebar, page toolbar, primary nav
const { useState } = React;

function AppHeader({ brand = 'MakerSights', user = 'Di Iorio' }) {
  return (
    <header style={appShellStyles.header}>
      <div style={appShellStyles.headerLeft}>
        <div style={appShellStyles.logoTile}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#050301" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
        </div>
        <div style={appShellStyles.brandChip}>
          <div style={appShellStyles.brandMark}>{brand[0]}</div>
          <span>{brand}</span>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
        </div>
      </div>
      <div style={appShellStyles.headerRight}>
        <button style={appShellStyles.iconBtn} title="Search">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </button>
        <button style={appShellStyles.iconBtn} title="Notifications">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
          <span style={appShellStyles.dot}/>
        </button>
        <div style={appShellStyles.avatar}>{user.split(' ').map(p=>p[0]).join('')}</div>
      </div>
    </header>
  );
}

function Sidebar({ active = 'studies', onNavigate, onSettingsClick, collapsed: collapsedProp, onToggleCollapsed }) {
  const [internalCollapsed, setInternalCollapsed] = useState(() => localStorage.getItem('ms.sidebar.collapsed') === '1');
  const collapsed = collapsedProp != null ? collapsedProp : internalCollapsed;
  const toggle = () => {
    if (onToggleCollapsed) return onToggleCollapsed(!collapsed);
    setInternalCollapsed(v => {
      const next = !v;
      localStorage.setItem('ms.sidebar.collapsed', next ? '1' : '0');
      return next;
    });
  };
  const items = [
    { id: 'home', label: 'Add study', icon: <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></> },
    { id: 'favorites', label: 'Favorites', icon: <polygon points="12 2 15.1 8.6 22 9.6 17 14.5 18.2 21.5 12 18.2 5.8 21.5 7 14.5 2 9.6 8.9 8.6 12 2"/> },
    { id: 'studies', label: 'Studies', icon: <><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></> },
    { id: 'products', label: 'Assets', icon: <><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></> },
    { id: 'library', label: 'Taste Profiles', icon: <><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></> },
  ];
  return (
    <aside style={{...appShellStyles.sidebar, width: collapsed ? 60 : 220, transition: 'width 200ms cubic-bezier(0.2,0,0,1)'}}>
      <div style={appShellStyles.sideGroup}>
        {items.map(i => (
          <button
            key={i.id}
            onClick={() => onNavigate?.(i.id)}
            title={collapsed ? i.label : undefined}
            style={{
              ...appShellStyles.sideItem,
              ...(active === i.id ? appShellStyles.sideItemActive : {}),
              justifyContent: collapsed ? 'center' : 'flex-start',
              padding: collapsed ? '10px 0' : '8px 12px'
            }}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{flex:'none'}}>
              {i.icon}
            </svg>
            {!collapsed && <span style={{whiteSpace:'nowrap', overflow:'hidden'}}>{i.label}</span>}
          </button>
        ))}
      </div>
      <div style={appShellStyles.sideFoot}>
        <button onClick={() => onSettingsClick?.()} title={collapsed ? 'Settings' : undefined} style={{...appShellStyles.sideItem, ...(active === 'settings' ? appShellStyles.sideItemActive : {}), width:'100%', justifyContent: collapsed ? 'center' : 'flex-start', padding: collapsed ? '10px 0' : '8px 12px'}}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{flex:'none'}}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          {!collapsed && <span>Settings</span>}
        </button>
        <button onClick={toggle} title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'} style={{
          display:'flex', alignItems:'center', justifyContent: collapsed ? 'center' : 'flex-start', gap:12,
          padding: collapsed ? '10px 0' : '8px 12px', border:'none', background:'transparent',
          color:'#636c79', fontSize:13, cursor:'pointer', borderRadius:6,
          fontFamily:'inherit', width:'100%', marginTop:4, textAlign:'left'
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{flex:'none', transform: collapsed ? 'rotate(180deg)' : 'none', transition:'transform 200ms'}}><polyline points="15 18 9 12 15 6"/></svg>
          {!collapsed && <span>Collapse</span>}
        </button>
      </div>
    </aside>
  );
}

function PageToolbar({ title, meta, actions }) {
  return (
    <div style={appShellStyles.toolbar}>
      <div style={{display:'flex', alignItems:'center', gap:16, minWidth:0}}>
        <div style={{minWidth:0}}>
          <div style={appShellStyles.toolbarTitle}>{title}</div>
          {meta && <div style={appShellStyles.toolbarMeta}>{meta}</div>}
        </div>
      </div>
      <div style={{display:'flex', gap:8}}>{actions}</div>
    </div>
  );
}

const appShellStyles = {
  header: {
    height: 56, background: '#050301', color: '#fff',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '0 20px', fontFamily: "'PP Telegraf', sans-serif", fontSize: 14
  },
  headerLeft: { display: 'flex', alignItems: 'center', gap: 16 },
  logoTile: {
    width: 28, height: 28, background: '#fff', borderRadius: 6,
    display: 'flex', alignItems: 'center', justifyContent: 'center'
  },
  wordmark: { fontFamily: "'PP Telegraf'", fontWeight: 700, fontSize: 15, letterSpacing: '-0.01em' },
  brandChip: {
    display: 'flex', alignItems: 'center', gap: 8,
    background: 'rgba(255,255,255,0.08)', padding: '4px 10px 4px 4px',
    borderRadius: 900, fontSize: 13, color: '#fff', cursor: 'pointer',
    marginLeft: 8
  },
  brandMark: { width: 22, height: 22, borderRadius: 999, background: '#fff', color: '#050301', display:'flex', alignItems:'center', justifyContent:'center', fontFamily: "'PP Telegraf'", fontWeight: 700, fontSize: 11 },
  headerRight: { display: 'flex', alignItems: 'center', gap: 8 },
  iconBtn: {
    position: 'relative',
    background: 'transparent', border: 'none', color: '#fff',
    width: 34, height: 34, borderRadius: 999, cursor: 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center'
  },
  dot: { position:'absolute', top: 9, right: 9, width: 6, height: 6, borderRadius: 999, background: '#d63f2b', border: '1.5px solid #050301' },
  avatar: { width: 32, height: 32, borderRadius: 999, background: '#3a8518', color: '#fff', fontWeight: 600, fontSize: 12, display:'flex', alignItems:'center', justifyContent:'center', marginLeft: 4 },

  sidebar: {
    width: 220, background: '#fff', borderRight: '1px solid #e5ebf1',
    padding: 12, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
    fontFamily: "'PP Telegraf', sans-serif"
  },
  sideGroup: { display: 'flex', flexDirection: 'column', gap: 2 },
  sideItem: {
    display: 'flex', alignItems: 'center', gap: 12,
    padding: '8px 12px', border: 'none', background: 'transparent',
    color: '#050301', fontSize: 14, cursor: 'pointer', borderRadius: 6,
    fontFamily: 'inherit', textAlign: 'left'
  },
  sideItemActive: { background: '#eef2f6', color: '#050301', fontWeight: 600 },
  sideFoot: { paddingTop: 12, borderTop: '1px solid #e5ebf1' },

  toolbar: {
    height: 56, background: '#fff', borderBottom: '1px solid #e5ebf1',
    padding: '0 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    fontFamily: "'PP Telegraf', sans-serif"
  },
  toolbarTitle: { fontFamily: "'PP Telegraf'", fontWeight: 700, fontSize: 18, color: '#050301' },
  toolbarMeta: { fontSize: 12, color: '#636c79', marginTop: 2 }
};

Object.assign(window, { AppHeader, Sidebar, PageToolbar });