// App chrome: TopHeader, LeftRail, StatusBar.

const NAV_ITEMS = [
  { id: 'sources',    label: 'Sources',    icon: 'Upload',         badge: null },
  { id: 'draft',      label: 'Course architecture', icon: 'Layers',  badge: null },
  { id: 'library',    label: 'Layout library', icon: 'Grid',      badge: null },
  { id: 'roles',      label: 'Organisations & roles', icon: 'Users', badge: null },
  { id: 'content-mapping', label: 'Content mapping', icon: 'Table', badge: null },
  { id: 'localisation', label: 'Localisation', icon: 'Globe',      badge: { dot: 'warning', count: 2 } },
  { id: 'assessments',label: 'Assessments',icon: 'ClipboardCheck', badge: { dot: 'error', count: 1 } },
  { id: 'brand',      label: 'Course settings', icon: 'Palette',  badge: null },
  { id: 'export',     label: 'Export',     icon: 'Package',        badge: null },
];

// ── TopHeader ───────────────────────────────────────────────────────────────
function TopHeader({ course, currentSurface, currentOrg, onCmdK, onPreview, onLogoClick, onSwitchOrg }) {
  const [editingTitle, setEditingTitle] = React.useState(false);
  const [title, setTitle] = React.useState(course.title);
  const [orgMenuOpen, setOrgMenuOpen] = React.useState(false);
  const isHome = currentSurface === 'home';
  const isDynamoHome = currentSurface === 'dynamo-home';
  const isNewCourse = currentSurface === 'new-course' || currentSurface === 'generating';
  const isLanding = isHome || isDynamoHome || isNewCourse;

  return (
    <header style={{
      gridArea: 'header',
      display: 'flex', alignItems: 'center',
      padding: '0 16px',
      background: 'var(--surface)',
      borderBottom: '1px solid var(--border)',
      height: 52,
      position: 'relative',
      zIndex: 10,
    }}>
      {/* Left: logo + course title */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 240 }}>
        <button onClick={onLogoClick} className="focusable"
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '4px 6px', margin: '-4px -6px', borderRadius: 4,
            background: 'transparent', border: 0, cursor: 'default',
            color: 'var(--text)', fontFamily: 'inherit',
          }}
          onMouseOver={e => e.currentTarget.style.background = 'var(--surface-inset)'}
          onMouseOut={e => e.currentTarget.style.background = 'transparent'}
          title="Back to courses home">
          <DynamoLogo />
          <span style={{ fontWeight: 600, fontSize: 13, color: 'var(--text)' }}>Dynamo</span>
          <span style={{ fontSize: 11, color: 'var(--text-faint)', padding: '1px 5px',
            background: 'var(--surface-inset)', borderRadius: 3, fontWeight: 500 }}>Authoring</span>
        </button>
      </div>

      <div style={{ width: 1, height: 24, background: 'var(--border)', marginRight: 12 }} />

      {/* Org + Course breadcrumb */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1, minWidth: 0 }}>
        {/* Org switcher — hidden on Dynamo home (no org chosen yet) */}
        {!isDynamoHome && (
          <div style={{ position: 'relative' }}>
          <button onClick={() => setOrgMenuOpen(o => !o)}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '3px 6px 3px 4px', borderRadius: 4,
              background: 'transparent', border: 0, cursor: 'default',
              color: 'var(--text-muted)', fontFamily: 'inherit', fontSize: 12.5,
              fontWeight: 500,
            }}
            onMouseOver={e => e.currentTarget.style.background = 'var(--surface-inset)'}
            onMouseOut={e => e.currentTarget.style.background = 'transparent'}>
            <OrgGlyph org={currentOrg} size={20} />
            <span>{currentOrg.name}</span>
            <I.ChevronDown size={11} style={{ opacity: 0.6 }} />
          </button>
          {orgMenuOpen && <OrgSwitcherMenu currentOrg={currentOrg}
            onClose={() => setOrgMenuOpen(false)} onSwitch={onSwitchOrg} />}
        </div>
        )}

        {!isLanding && (
          <>
            <I.ChevronRight size={13} style={{ color: 'var(--text-faint)' }} />
            {editingTitle ? (
              <input className="field" value={title} autoFocus
                onChange={e => setTitle(e.target.value)}
                onBlur={() => setEditingTitle(false)}
                onKeyDown={e => { if (e.key === 'Enter' || e.key === 'Escape') setEditingTitle(false); }}
                style={{ fontSize: 14, fontWeight: 600, height: 28, padding: '0 8px' }} />
            ) : (
              <button onClick={() => setEditingTitle(true)}
                style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '4px 8px', borderRadius: 4,
                  background: 'transparent', border: 0, cursor: 'default',
                  color: 'var(--text)', fontSize: 14, fontWeight: 600,
                  fontFamily: 'inherit', whiteSpace: 'nowrap',
                }}
                onMouseOver={e => e.currentTarget.style.background = 'var(--surface-inset)'}
                onMouseOut={e => e.currentTarget.style.background = 'transparent'}>
                {title}
                <I.Edit size={11} style={{ opacity: 0.5 }} />
              </button>
            )}
          </>
        )}
      </div>

      {/* Right-side header actions */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        {!isLanding && (
          <>
            <SaveIndicator state="saved" timestamp={course.lastSaved} />
            <div style={{ width: 1, height: 24, background: 'var(--border)' }} />
          </>
        )}
        <AiSpendIndicator spend={course.aiSpend} />
        <div style={{ width: 1, height: 24, background: 'var(--border)' }} />
        <button className="btn sm ghost" onClick={onCmdK} title="Command palette · ⌘K"
          style={{ fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center' }}>
          <I.Search size={13} />
        </button>
        {!isLanding && (
          <button className="btn sm" onClick={onPreview}>
            Preview
          </button>
        )}
        <UserMenu currentOrg={currentOrg} />
      </div>
    </header>
  );
}

// ── OrgSwitcherMenu ─────────────────────────────────────────────────────────
function OrgSwitcherMenu({ currentOrg, onClose, onSwitch }) {
  return (
    <>
      <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 50 }} />
      <div className="slide-in" style={{
        position: 'absolute', top: 'calc(100% + 6px)', left: -4,
        width: 360, background: 'var(--surface)',
        border: '1px solid var(--border)', borderRadius: 'var(--radius-md)',
        boxShadow: 'var(--shadow-xl)', zIndex: 51, padding: 8,
      }}>
        <div style={{ padding: '6px 8px', fontSize: 10.5, fontWeight: 600,
          color: 'var(--text-faint)', letterSpacing: '.06em', textTransform: 'uppercase' }}>
          Your organizations
        </div>
        {window.SAMPLE_ORGS.map(org => (
          <button key={org.id} onClick={() => { onSwitch(org.id); onClose(); }}
            style={{
              display: 'flex', alignItems: 'center', gap: 10, width: '100%',
              padding: '8px 8px', textAlign: 'left',
              background: org.id === currentOrg.id ? 'var(--surface-inset)' : 'transparent',
              border: 0, borderRadius: 'var(--radius)', cursor: 'default',
              fontFamily: 'inherit', color: 'var(--text)', marginBottom: 2,
            }}
            onMouseOver={e => e.currentTarget.style.background = 'var(--surface-inset)'}
            onMouseOut={e => e.currentTarget.style.background = org.id === currentOrg.id ? 'var(--surface-inset)' : 'transparent'}>
            <OrgGlyph org={org} size={32} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{org.full}</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)' }} className="truncate">
                {org.stats.courses} courses · {org.stats.editors} editors
              </div>
            </div>
            {org.id === currentOrg.id && <I.Check size={14} style={{ color: 'var(--accent)' }} />}
          </button>
        ))}
        <div style={{ borderTop: '1px solid var(--border)', margin: '4px -8px 0', padding: 8 }}>
          <button className="btn sm ghost" style={{ width: '100%', justifyContent: 'flex-start' }}>
            <I.Plus size={12} />Join another organization
          </button>
          <button className="btn sm ghost" style={{ width: '100%', justifyContent: 'flex-start' }}>
            <I.Settings size={12} />Organization settings
          </button>
        </div>
      </div>
    </>
  );
}

function DynamoLogo() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="2" y="2" width="20" height="20" rx="5" fill="var(--text)" />
      <path d="M8 7 L8 17 L13 17 C15.5 17 17 15 17 12 C17 9 15.5 7 13 7 Z" fill="var(--bg)" />
      <circle cx="17" cy="7" r="2" fill="var(--accent)" />
    </svg>
  );
}

function AiSpendIndicator({ spend }) {
  const pct = (spend.used / spend.cap) * 100;
  const color = pct > 90 ? 'var(--error)' : pct > 70 ? 'var(--warning)' : 'var(--accent)';
  return (
    <button className="btn sm ghost" title={`AI spend this session: $${spend.used.toFixed(2)} of $${spend.cap.toFixed(2)}`}
      style={{ display: 'inline-flex', alignItems: 'center', gap: 8, height: 28 }}>
      <I.Sparkle size={12} style={{ color }} />
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5 }}>
        ${spend.used.toFixed(2)}<span style={{ color: 'var(--text-faint)' }}> / ${spend.cap.toFixed(0)}</span>
      </span>
      <div style={{ width: 36, height: 3, background: 'var(--border)', borderRadius: 2 }}>
        <div style={{ width: `${Math.min(100,pct)}%`, height: '100%', background: color, borderRadius: 2 }} />
      </div>
    </button>
  );
}

function UserMenu({ currentOrg }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ position: 'relative' }}>
      <button onClick={() => setOpen(o => !o)} style={{
        width: 30, height: 30, padding: 0, border: 0, background: 'transparent', cursor: 'default',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50%',
      }}>
        <div style={{
          width: 28, height: 28, borderRadius: '50%',
          background: 'linear-gradient(135deg, #818cf8 0%, #c084fc 100%)',
          color: '#fff', fontSize: 11.5, fontWeight: 600,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: open ? 'inset 0 0 0 1px rgba(255,255,255,.15), 0 0 0 2px var(--accent)' : 'inset 0 0 0 1px rgba(255,255,255,.15)',
        }}>LP</div>
      </button>
      {open && (
        <>
          <div onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 50 }} />
          <div className="slide-in" style={{
            position: 'absolute', top: 'calc(100% + 8px)', right: -4,
            width: 260, background: 'var(--surface)',
            border: '1px solid var(--border)', borderRadius: 'var(--radius-md)',
            boxShadow: 'var(--shadow-xl)', zIndex: 51, padding: 8,
          }}>
            <div style={{ padding: '8px 10px', display: 'flex', gap: 10, alignItems: 'center' }}>
              <div style={{
                width: 36, height: 36, borderRadius: '50%',
                background: 'linear-gradient(135deg, #818cf8, #c084fc)',
                color: '#fff', fontSize: 13, fontWeight: 700,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>LP</div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>Lisa Park</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)' }} className="truncate">
                  lisa@{currentOrg.id}.com
                </div>
              </div>
            </div>
            <div style={{ height: 1, background: 'var(--border)', margin: '6px -8px' }} />
            {[
              { icon: 'Settings', label: 'Profile & preferences' },
              { icon: 'Sparkle',  label: 'AI spend & limits' },
              { icon: 'Bell',     label: 'Notifications' },
              { icon: 'Command',  label: 'Keyboard shortcuts', shortcut: '⌘/' },
            ].map((it, i) => {
              const Ic = window.I[it.icon];
              return (
                <button key={i} className="btn sm ghost" style={{
                  width: '100%', justifyContent: 'flex-start', height: 30, padding: '0 10px',
                }}>
                  <Ic size={13} /><span style={{ flex: 1, textAlign: 'left' }}>{it.label}</span>
                  {it.shortcut && <kbd>{it.shortcut}</kbd>}
                </button>
              );
            })}
            <div style={{ height: 1, background: 'var(--border)', margin: '6px -8px' }} />
            <button className="btn sm ghost"
              onClick={() => { setOpen(false); window.dynamoSignOut && window.dynamoSignOut(); }}
              style={{
                width: '100%', justifyContent: 'flex-start', height: 30, padding: '0 10px',
                color: 'var(--error-text)',
              }}>
              <I.ArrowLeft size={13} />Sign out
            </button>
          </div>
        </>
      )}
    </div>
  );
}

// ── LeftRail ────────────────────────────────────────────────────────────────
function LeftRail({ collapsed, currentSurface, onNavigate, onToggleCollapse }) {
  return (
    <nav style={{
      gridArea: 'rail',
      background: 'var(--surface)',
      borderRight: '1px solid var(--border)',
      width: collapsed ? 56 : 212,
      transition: 'width 200ms ease-out',
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden',
    }}>
      <div style={{ flex: 1, padding: '8px 6px', display: 'flex', flexDirection: 'column', gap: 2 }}>
        {NAV_ITEMS.map((item, i) => {
          const Icon = I[item.icon];
          const active = currentSurface === item.id;
          return (
            <React.Fragment key={item.id}>
              {i === 1 && <div style={{ height: 1, background: 'var(--border)', margin: '4px 6px' }} />}
              {i === 3 && <div style={{ height: 1, background: 'var(--border)', margin: '4px 6px' }} />}
              <button onClick={() => onNavigate(item.id)}
                title={collapsed ? item.label : ''}
                style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  padding: collapsed ? '0' : '0 10px',
                  height: 32, width: '100%',
                  justifyContent: collapsed ? 'center' : 'flex-start',
                  border: 0, borderRadius: 'var(--radius)',
                  background: active ? 'var(--accent-bg)' : 'transparent',
                  color: active ? 'var(--accent-text)' : 'var(--text-muted)',
                  cursor: 'default', fontSize: 13, fontWeight: active ? 600 : 500,
                  fontFamily: 'inherit', position: 'relative',
                }}
                onMouseOver={e => { if (!active) e.currentTarget.style.background = 'var(--surface-inset)'; }}
                onMouseOut={e => { if (!active) e.currentTarget.style.background = 'transparent'; }}>
                <Icon size={16} />
                {!collapsed && <span style={{ flex: 1, textAlign: 'left' }}>{item.label}</span>}
                {item.badge && !collapsed && (
                  <span style={{
                    minWidth: 16, height: 16, padding: '0 4px',
                    borderRadius: 8,
                    background: item.badge.dot === 'error' ? 'var(--error)' : 'var(--warning)',
                    color: '#fff', fontSize: 10, fontWeight: 700,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>{item.badge.count}</span>
                )}
                {item.badge && collapsed && (
                  <span style={{
                    position: 'absolute', top: 4, right: 6,
                    width: 7, height: 7, borderRadius: '50%',
                    background: item.badge.dot === 'error' ? 'var(--error)' : 'var(--warning)',
                  }} />
                )}
              </button>
            </React.Fragment>
          );
        })}
      </div>
      {/* Footer of rail */}
      <div style={{ padding: '8px 6px', borderTop: '1px solid var(--border)',
        display: 'flex', flexDirection: 'column', gap: 2 }}>
        <button onClick={onToggleCollapse} className="btn sm ghost"
          style={{ width: '100%', justifyContent: collapsed ? 'center' : 'flex-start',
            height: 32, padding: collapsed ? 0 : '0 10px', borderRadius: 'var(--radius)' }}>
          {collapsed ? <I.ChevronRight size={14} /> : <><I.ChevronLeft size={14} /><span>Collapse</span></>}
        </button>
      </div>
    </nav>
  );
}

// ── StatusBar ───────────────────────────────────────────────────────────────
function StatusBar({ course, jobs = [], onValidationClick }) {
  return (
    <footer style={{
      gridArea: 'status',
      height: 26,
      background: 'var(--surface)',
      borderTop: '1px solid var(--border)',
      display: 'flex', alignItems: 'center',
      padding: '0 12px',
      gap: 12,
      fontSize: 11.5,
      color: 'var(--text-muted)',
    }}>
      <button className="focusable"
        style={{ display: 'inline-flex', alignItems: 'center', gap: 5,
          color: 'inherit', background: 'transparent', border: 0, cursor: 'default',
          fontSize: 'inherit', padding: '2px 6px', borderRadius: 3, fontFamily: 'inherit' }}>
        <I.AlertTriangle size={11} style={{ color: 'var(--warning)' }} />
        <span>{course.validation.items.length} issues</span>
      </button>
      <Sep />
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
        <I.Clock size={11} />Last save {course.lastSaved}
      </span>
      <Sep />
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
        <I.Database size={11} />SCORM {course.scormVersion}
      </span>
      <Sep />
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
        <I.Globe size={11} />{course.languages.length} langs
      </span>
      <div style={{ flex: 1 }} />
      {/* Background jobs */}
      {jobs.length > 0 && (
        <>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
            <I.Loader size={11} className="spin" />{jobs.length} jobs running
          </span>
          <Sep />
        </>
      )}
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
        <I.Activity size={11} style={{ color: 'var(--success)' }} />Connected
      </span>
      <Sep />
      <kbd>?</kbd> <span>Shortcuts</span>
    </footer>
  );
}

function Sep() {
  return <span style={{ width: 1, height: 12, background: 'var(--border)' }} />;
}

Object.assign(window, { TopHeader, LeftRail, StatusBar, NAV_ITEMS });