// LPR Platform — Chrome (sidebar + topbar) + screen router shell

const NAV_ITEMS = [
  { id: 'dashboard', label: 'Dashboard',         icon: 'Home' },
  { id: 'patients',  label: 'Pacientes',         icon: 'Users' },
  { id: 'patient',   label: 'Mariana Corrêa',    icon: 'User',     indent: true, hidden: false },
  { id: 'domains',   label: 'Domínios clínicos', icon: 'Layers' },
  { id: 'exams',     label: 'Exames',            icon: 'Upload' },
  { id: 'questionnaires', label: 'Questionários', icon: 'FileText' },
  { id: 'alerts',    label: 'Alertas',           icon: 'Bell' },
  { id: 'evolution', label: 'Evolução',          icon: 'TrendUp' },
  { id: 'report',    label: 'Relatório',         icon: 'FileText' },
  { id: 'safety',    label: 'Safety Engine',     icon: 'Shield' },
  { id: 'protocol',  label: 'Protocolo',         icon: 'GitBranch' },
  { id: 'rules',     label: 'Regras Safety',     icon: 'Settings' },
];

function Sidebar({ T, active, onNavigate, alertsCount = 3 }) {
  const dark = T.theme === 'dark';
  return (
    <aside style={{
      width: 232, flexShrink: 0, background: T.sidebar, borderRight: `1px solid ${T.border}`,
      display: 'flex', flexDirection: 'column', height: '100%', position: 'relative', zIndex: 1,
    }}>
      <div style={{ padding: '18px 18px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <LPRMark size={18} T={T} />
      </div>

      <div style={{ padding: '4px 12px 8px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8, padding: '7px 10px',
          background: T.bg, border: `1px solid ${T.border}`, borderRadius: 8,
          cursor: 'pointer',
        }}>
          <Avatar name="Helena Marques" size={22} T={T} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: T.text, lineHeight: 1.2 }}>Dr. Helena Marques</div>
            <div style={{ fontSize: 10.5, color: T.textMute, lineHeight: 1.2, marginTop: 1 }}>Longevium · CRM 142.387</div>
          </div>
          <Icons.ChevronD size={12} color={T.textMute}/>
        </div>
      </div>

      <nav style={{ padding: '6px 8px', flex: 1, overflow: 'auto' }} className="lpr-scroll">
        {NAV_ITEMS.map((it) => {
          if (it.hidden) return null;
          const Ic = Icons[it.icon] || Icons.Activity;
          const on = active === it.id;
          return (
            <button key={it.id} onClick={() => onNavigate && onNavigate(it.id)} className="lpr-btn"
              style={{
                display: 'flex', alignItems: 'center', gap: 10, width: '100%',
                padding: it.indent ? '7px 10px 7px 28px' : '7px 10px',
                marginBottom: 1, borderRadius: 7, border: 0, cursor: 'pointer',
                background: on ? T.sidebarActive : 'transparent',
                color: on ? T.p700 : T.textSoft, textAlign: 'left',
                fontFamily: T.fontUI, fontSize: 13, fontWeight: on ? 600 : 500,
                position: 'relative',
              }}
              onMouseEnter={(e) => { if (!on) e.currentTarget.style.background = T.surfaceAlt; }}
              onMouseLeave={(e) => { if (!on) e.currentTarget.style.background = 'transparent'; }}>
              {on && !it.indent ? <span style={{
                position: 'absolute', left: 0, top: 6, bottom: 6, width: 2.5, borderRadius: 2, background: T.p600,
              }}/> : null}
              <Ic size={15} color={on ? T.p600 : T.textMute}/>
              <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.label}</span>
              {it.id === 'alerts' && alertsCount > 0 ? (
                <span style={{
                  fontSize: 10, fontWeight: 700, padding: '1px 6px', borderRadius: 999,
                  background: T.error, color: '#fff',
                }}>{alertsCount}</span>
              ) : null}
            </button>
          );
        })}
      </nav>

      <div style={{ padding: 12, borderTop: `1px solid ${T.border}`, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{
          padding: 10, borderRadius: 8, background: T.bg, border: `1px solid ${T.border}`,
          display: 'flex', flexDirection: 'column', gap: 6,
        }}>
          <div style={{ fontSize: 11, color: T.textMute, fontWeight: 500, letterSpacing: 0.1, textTransform: 'uppercase' }}>Protocolo ativo</div>
          <div style={{ fontSize: 12, fontWeight: 600, color: T.text }}>LPR — Lifestyle Precision Reset</div>
          <div style={{ fontSize: 11, color: T.textMute }}>v1.4.2 · Publicado</div>
        </div>
      </div>
    </aside>
  );
}

function TopBar({ T, title, breadcrumbs = [], right, onSearch }) {
  return (
    <header style={{
      display: 'flex', alignItems: 'center', gap: 16, padding: '12px 24px',
      borderBottom: `1px solid ${T.border}`, background: T.bg, height: 56, flexShrink: 0,
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        {breadcrumbs.length ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11.5, color: T.textMute, marginBottom: 1 }}>
            {breadcrumbs.map((b, i) => (
              <React.Fragment key={i}>
                {i > 0 ? <Icons.ChevronR size={11} color={T.textFaint}/> : null}
                <span>{b}</span>
              </React.Fragment>
            ))}
          </div>
        ) : null}
        <div style={{ fontFamily: T.fontDisplay, fontSize: 17, fontWeight: 600, color: T.text, letterSpacing: -0.2 }}>{title}</div>
      </div>
      <Input T={T} icon={<Icons.Search/>} placeholder="Buscar paciente, exame, protocolo…"
             onChange={onSearch} style={{ width: 320 }}/>
      <button className="lpr-btn" style={{
        position: 'relative', width: 34, height: 34, borderRadius: 8, border: `1px solid ${T.border}`,
        background: T.bg, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Icons.Bell size={15} color={T.textSoft}/>
        <span style={{
          position: 'absolute', top: 7, right: 7, width: 7, height: 7, borderRadius: '50%',
          background: T.error, border: `2px solid ${T.bg}`,
        }}/>
      </button>
      {right}
    </header>
  );
}

// Page wrapper for screens
function Page({ T, children, padding = 24, maxWidth }) {
  return (
    <div className="lpr-scroll" style={{
      flex: 1, overflow: 'auto', background: T.surface,
      padding,
    }}>
      <div style={{ maxWidth, margin: maxWidth ? '0 auto' : undefined }}>
        {children}
      </div>
    </div>
  );
}

// Whole app shell — sidebar + topbar + page; receives `screen` & `onNavigate`
function AppShell({ T, screen, onNavigate, title, breadcrumbs, topRight, children, noPad }) {
  return (
    <div style={{
      display: 'flex', height: '100%', width: '100%',
      background: T.bg, color: T.text, fontFamily: T.fontUI,
    }}>
      <Sidebar T={T} active={screen} onNavigate={onNavigate} alertsCount={3}/>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <TopBar T={T} title={title} breadcrumbs={breadcrumbs} right={topRight}/>
        <Page T={T} padding={noPad ? 0 : 24}>
          {children}
        </Page>
      </div>
    </div>
  );
}

Object.assign(window, { Sidebar, TopBar, Page, AppShell, NAV_ITEMS });