// fichaje.eu — Sidebar + Topbar shell

const NAV_GROUPS = [
  { label: 'INICIO', items: [
    { key: 'inicio',    label: 'Inicio',           icon: <IHome size={19}/> },
    { key: 'bandeja',   label: 'Bandeja de entrada', icon: <IInbox size={19}/>, badge: 3 },
    { key: 'calendario',label: 'Calendario',       icon: <ICalendar size={19}/> },
    { key: 'descubrir', label: 'Descubrir',        icon: <ICompass size={19}/> },
  ]},
  { label: 'PERSONAL', items: [
    { key: 'perfil',    label: 'Perfil',           icon: <IShield size={19}/> },
    { key: 'ausencias', label: 'Ausencias',        icon: <ICalendar size={19}/> },
    { key: 'fichaje',   label: 'Fichaje',          icon: <ITimer size={19}/>, live: true },
    { key: 'misdocs',   label: 'Mis documentos',   icon: <IFile size={19}/> },
  ]},
  { label: 'EQUIPO', items: [
    { key: 'tareas',    label: 'Tareas',           icon: <ICheckSquare size={19}/> },
  ]},
  { label: 'EMPRESA', items: [
    { key: 'organizacion', label: 'Organización',  icon: <IUsers size={19}/>, adminOnly: false },
    { key: 'documentos',   label: 'Documentos',    icon: <ILayers size={19}/> },
  ]},
  { label: 'OPERACIONES', items: [
    { key: 'control',   label: 'Control horario',  icon: <ILogIn size={19}/>, adminOnly: true },
    { key: 'protocolos',label: 'Protocolos',       icon: <IShieldCheck size={19}/>, adminOnly: true },
  ]},
  { label: 'CONFIGURACIÓN', items: [
    { key: 'config',    label: 'Configuración',    icon: <ISettings size={19}/> },
  ]},
];

const Sidebar = ({ current, onNav, role, dark = false }) => {
  return (
    <aside style={{
      width: 248, flexShrink: 0,
      background: 'var(--sidebar-bg)',
      borderRight: '1px solid var(--sidebar-border)',
      color: 'var(--sidebar-fg)',
      display: 'flex', flexDirection: 'column',
      height: '100%',
    }}>
      {/* Logo — always on a paper strip so the brand stays readable */}
      <div style={{
        padding: '20px 18px 14px',
        background: dark ? '#FFFFFF' : 'transparent',
        borderBottom: dark ? '1px solid var(--slate-150)' : 'none',
      }}>
        <FichajeLogo size={26} tone="brand"/>
        <div style={{ fontSize: 12, color: dark ? 'var(--slate-500)' : 'var(--sidebar-muted)', marginTop: 4, marginLeft: 36 }}>
          Control horario profesional
        </div>
      </div>

      {/* Nav */}
      <nav style={{ flex: 1, overflow: 'auto', padding: '4px 10px 16px' }}>
        {NAV_GROUPS.map(group => {
          const items = group.items.filter(it => !it.adminOnly || role === 'admin');
          if (!items.length) return null;
          return (
            <div key={group.label} style={{ marginBottom: 10 }}>
              <div style={{
                padding: '12px 10px 6px',
                fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em',
                color: 'var(--sidebar-muted)',
                opacity: 0.7,
              }}>{group.label}</div>
              {items.map(it => (
                <NavItem key={it.key} item={it} active={current === it.key} onClick={() => onNav(it.key)}/>
              ))}
            </div>
          );
        })}
      </nav>

      {/* Bottom: workspace */}
      <div style={{ padding: 12, borderTop: '1px solid var(--sidebar-divider)' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '8px 10px', borderRadius: 'var(--r-md)',
          background: 'var(--sidebar-item-hover)',
          cursor: 'pointer',
        }}>
          <div style={{
            width: 30, height: 30, borderRadius: 8,
            background: 'linear-gradient(135deg, #1E40AF, #2563EB)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontWeight: 700, fontSize: 13,
          }}>iA</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--sidebar-fg)' }}>IABusiness.es</div>
            <div style={{ fontSize: 11, color: 'var(--sidebar-muted)' }}>{COMPANY.employees} miembros</div>
          </div>
          <IChevronDown size={14} style={{ color: 'var(--sidebar-muted)' }}/>
        </div>
      </div>
    </aside>
  );
};

const NavItem = ({ item, active, onClick }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        width: '100%',
        display: 'flex', alignItems: 'center', gap: 12,
        padding: '9px 12px',
        borderRadius: 'var(--r-md)',
        background: active ? 'var(--sidebar-active-bg)' : (hover ? 'var(--sidebar-item-hover)' : 'transparent'),
        color: active ? 'var(--sidebar-active-fg)' : 'var(--sidebar-fg)',
        fontSize: 14, fontWeight: active ? 700 : 500,
        marginBottom: 1,
        transition: 'background .12s',
      }}>
      <span style={{ color: active ? 'var(--sidebar-active-fg)' : 'var(--sidebar-muted)', display: 'inline-flex' }}>{item.icon}</span>
      <span style={{ flex: 1, textAlign: 'left' }}>{item.label}</span>
      {item.badge && (
        <span style={{
          background: 'var(--brand-600)', color: '#fff',
          fontSize: 11, fontWeight: 700,
          padding: '1px 7px', borderRadius: 999,
          minWidth: 18, textAlign: 'center',
        }}>{item.badge}</span>
      )}
      {item.live && (
        <span style={{
          width: 7, height: 7, borderRadius: 999,
          background: 'var(--success-500)',
          boxShadow: '0 0 0 3px var(--success-100)',
        }}/>
      )}
    </button>
  );
};

const Topbar = ({ role, onRoleChange, current, onNav }) => {
  const titleMap = {
    inicio: 'Inicio', bandeja: 'Bandeja de entrada', calendario: 'Calendario',
    descubrir: 'Descubrir', perfil: 'Perfil', ausencias: 'Ausencias',
    fichaje: 'Fichaje', misdocs: 'Mis documentos', tareas: 'Tareas',
    organizacion: 'Organización', documentos: 'Documentos',
    control: 'Control horario', protocolos: 'Protocolos', config: 'Configuración',
  };
  return (
    <header style={{
      height: 62, flexShrink: 0,
      background: 'var(--white)',
      borderBottom: '1px solid var(--slate-150)',
      display: 'flex', alignItems: 'center',
      padding: '0 28px',
      gap: 16,
    }}>
      <div style={{
        fontSize: 17, fontWeight: 700, letterSpacing: '-0.01em', color: 'var(--ink)',
      }}>{titleMap[current] || 'Inicio'}</div>

      <div style={{ flex: 1 }}/>

      {/* Search */}
      <div style={{ position: 'relative', width: 280 }}>
        <Input icon={<ISearch size={15}/>} placeholder="Buscar personas, documentos…" style={{ background: 'var(--slate-50)', borderColor: 'var(--slate-150)' }}/>
        <span style={{
          position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)',
          fontSize: 11, color: 'var(--slate-400)',
          padding: '2px 6px', borderRadius: 4,
          background: 'var(--white)', border: '1px solid var(--slate-200)',
          fontFamily: 'var(--font-mono)',
        }}>⌘K</span>
      </div>

      {/* Role toggle */}
      <div style={{
        display: 'flex', padding: 3,
        background: 'var(--slate-100)', borderRadius: 'var(--r-md)',
        gap: 2,
      }}>
        <button onClick={() => onRoleChange('employee')} style={{
          padding: '5px 12px', fontSize: 12.5, fontWeight: 600,
          borderRadius: 6,
          background: role === 'employee' ? 'var(--white)' : 'transparent',
          color: role === 'employee' ? 'var(--ink)' : 'var(--slate-500)',
          boxShadow: role === 'employee' ? 'var(--shadow-xs)' : 'none',
        }}>Empleado</button>
        <button onClick={() => onRoleChange('admin')} style={{
          padding: '5px 12px', fontSize: 12.5, fontWeight: 600,
          borderRadius: 6,
          background: role === 'admin' ? 'var(--white)' : 'transparent',
          color: role === 'admin' ? 'var(--ink)' : 'var(--slate-500)',
          boxShadow: role === 'admin' ? 'var(--shadow-xs)' : 'none',
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <IShield size={12}/> Admin
        </button>
      </div>

      {/* Notifications */}
      <button onClick={() => onNav('bandeja')} style={{
        width: 36, height: 36, borderRadius: 'var(--r-md)',
        background: 'transparent', border: '1px solid var(--slate-150)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--slate-600)',
        position: 'relative',
      }}>
        <IBell size={17}/>
        <span style={{
          position: 'absolute', top: 6, right: 6,
          width: 7, height: 7, borderRadius: 999,
          background: 'var(--brand-600)',
          border: '1.5px solid var(--white)',
        }}/>
      </button>

      {/* User */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingLeft: 6 }}>
        <Avatar name={ME.name} size={32}/>
        <div style={{ lineHeight: 1.2 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{ME.name.split(' ')[0]}</div>
          <div style={{ fontSize: 11, color: 'var(--slate-500)' }}>{role === 'admin' ? 'Administrador' : ME.role}</div>
        </div>
      </div>
    </header>
  );
};

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