// Otto App · Shared shell components
// Sidebar, top bar, right Otto rail, navigation, breadcrumb, page header.

const NAV = [
  { id: 'home',     label: 'Home',     icon: 'home' },
  { group: 'CRM', items: [
    { id: 'inbox',    label: 'Inbox',    icon: 'inbox', badge: 12 },
    { id: 'accounts', label: 'Accounts', icon: 'building' },
    { id: 'contacts', label: 'Contacts', icon: 'contact' },
  ]},
  { group: 'Sales', items: [
    { id: 'deals',    label: 'Deals',    icon: 'pipeline' },
  ]},
  { group: 'Service', items: [
    { id: 'service',  label: 'Service',  icon: 'ticket' },
  ]},
  { group: 'Inventory Management', items: [
    { id: 'inventory', label: 'Inventory', icon: 'box' },
    { id: 'products',  label: 'Products',  icon: 'cube' },
    { id: 'purchase',  label: 'Purchase Orders', icon: 'doc' },
  ]},
  { group: 'Analytics', items: [
    { id: 'reports',  label: 'Reports',  icon: 'chart' },
  ]},
];

const Icon = ({ name, size = 16, color = 'currentColor' }) => {
  const paths = {
    home: <path d="M3 11 L10 4 L17 11 M5 10 V17 H8 V13 H12 V17 H15 V10" />,
    inbox: <><path d="M3 11 V16 A1 1 0 0 0 4 17 H16 A1 1 0 0 0 17 16 V11" /><path d="M3 11 L5 5 A1 1 0 0 1 6 4 H14 A1 1 0 0 1 15 5 L17 11 H13 L12 13 H8 L7 11 H3 Z" /></>,
    building: <><rect x="4" y="3" width="12" height="14" /><path d="M7 7 H9 M11 7 H13 M7 10 H9 M11 10 H13 M7 13 H9 M11 13 H13" /></>,
    pipeline: <><rect x="3" y="4" width="4" height="13" /><rect x="8" y="7" width="4" height="10" /><rect x="13" y="2" width="4" height="15" /></>,
    ticket: <path d="M3 7 V13 A2 2 0 0 0 5 13 A2 2 0 0 1 5 11 V9 A2 2 0 0 1 5 7 A2 2 0 0 0 3 7 Z M3 7 H17 V13 H3" />,
    chart: <><path d="M3 17 V3" /><path d="M3 17 H17" /><path d="M6 14 L9 10 L12 12 L16 6" /></>,
    contact: <><circle cx="10" cy="7" r="3" /><path d="M4 17 C 4 13, 7 11, 10 11 S 16 13, 16 17" /></>,
    box: <><path d="M3 6 L10 3 L17 6 L10 9 Z" /><path d="M3 6 V14 L10 17 L17 14 V6" /><path d="M10 9 V17" /></>,
    cube: <><path d="M10 2 L17 6 V14 L10 18 L3 14 V6 Z" /><path d="M3 6 L10 10 L17 6" /><path d="M10 10 V18" /></>,
    doc: <><path d="M5 2 H12 L15 5 V18 H5 Z" /><path d="M12 2 V5 H15" /><path d="M7 9 H13 M7 12 H13 M7 15 H11" /></>,
    search: <><circle cx="9" cy="9" r="5" /><path d="M13 13 L17 17" /></>,
    bell: <path d="M5 14 H15 L13 11 V8 A3 3 0 0 0 7 8 V11 L5 14 Z M8 16 A2 2 0 0 0 12 16" />,
    sparkle: <path d="M10 3 L11 8 L16 9 L11 10 L10 15 L9 10 L4 9 L9 8 Z" />,
    plus: <><path d="M10 4 V16" /><path d="M4 10 H16" /></>,
    chevron: <path d="M7 5 L13 10 L7 15" />,
    chevronD: <path d="M5 8 L10 13 L15 8" />,
    mic: <><rect x="8" y="3" width="4" height="9" rx="2" /><path d="M5 10 A5 5 0 0 0 15 10 M10 15 V18" /></>,
    send: <path d="M3 10 L17 3 L13 17 L10 11 L4 9 Z" />,
    dot: <circle cx="10" cy="10" r="3" fill={color} stroke="none" />,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none"
      stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      {paths[name] || null}
    </svg>
  );
};

const Sidebar = ({ active, onNavigate }) => (
  <aside style={{
    width: 220, background: 'var(--rail)', color: 'var(--on-rail)',
    display: 'flex', flexDirection: 'column',
    borderRight: '1px solid rgba(255,255,255,0.06)',
    flexShrink: 0,
  }}>
    {/* Brand */}
    <div style={{ padding: '18px 18px 14px', display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg viewBox="0 0 100 100" width={28} height={28}>
        <circle cx="50" cy="50" r="44" fill="none" stroke="#FFF" strokeWidth="6" />
        <path d="M 14 42 Q 26 30, 38 42 T 62 42 T 86 42" fill="none" stroke="#2B57E3" strokeWidth="4" strokeLinecap="round" />
        <path d="M 14 58 Q 26 46, 38 58 T 62 58 T 86 58" fill="none" stroke="#FF6A2C" strokeWidth="4" strokeLinecap="round" />
      </svg>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <span style={{ fontSize: 14, fontWeight: 600, letterSpacing: -0.2 }}>Otto</span>
        <span style={{ fontSize: 11, color: 'var(--on-rail-muted)', fontFamily: 'var(--t-mono)', letterSpacing: 0.6 }}>ottokap.com</span>
      </div>
    </div>

    {/* Search */}
    <div style={{ padding: '0 12px 14px' }}>
      <button style={{
        width: '100%', padding: '7px 10px',
        background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.08)',
        borderRadius: 'var(--r-sm)', color: 'var(--on-rail-muted)',
        display: 'flex', alignItems: 'center', gap: 8, fontSize: 12,
      }}>
        <Icon name="search" size={14} />
        <span style={{ flex: 1, textAlign: 'left' }}>Jump to…</span>
        <span style={{ fontFamily: 'var(--t-mono)', fontSize: 10, opacity: 0.6 }}>⌘K</span>
      </button>
    </div>

    {/* Nav */}
    <nav style={{ flex: 1, padding: '0 8px', overflowY: 'auto' }}>
      {NAV.map((entry, idx) => {
        if (entry.id) {
          // Top-level item (Home)
          const isActive = active === entry.id;
          return (
            <button key={entry.id} onClick={() => onNavigate(entry.id)} style={{
              width: '100%', padding: '8px 10px', marginBottom: 1,
              background: isActive ? 'rgba(255,255,255,0.08)' : 'transparent',
              border: 'none', borderRadius: 'var(--r-sm)',
              color: isActive ? '#FFF' : 'var(--on-rail)',
              display: 'flex', alignItems: 'center', gap: 10,
              fontSize: 13, fontWeight: isActive ? 500 : 400,
            }}>
              <Icon name={entry.icon} size={15} color={isActive ? '#FFF' : 'var(--on-rail-muted)'} />
              <span style={{ flex: 1, textAlign: 'left' }}>{entry.label}</span>
            </button>
          );
        }
        // Group with items
        return (
          <div key={entry.group} style={{ marginTop: idx === 1 ? 14 : 12 }}>
            <div style={{
              padding: '4px 12px 6px',
              fontFamily: 'var(--t-mono)', fontSize: 9.5, letterSpacing: 1.4,
              textTransform: 'uppercase', color: 'var(--on-rail-muted)', opacity: 0.7,
            }}>{entry.group}</div>
            {entry.items.map(item => {
              const isActive = active === item.id;
              return (
                <button key={item.id} onClick={() => onNavigate(item.id)} style={{
                  width: '100%', padding: '7px 10px', marginBottom: 1,
                  background: isActive ? 'rgba(255,255,255,0.08)' : 'transparent',
                  border: 'none', borderRadius: 'var(--r-sm)',
                  color: isActive ? '#FFF' : 'var(--on-rail)',
                  display: 'flex', alignItems: 'center', gap: 10,
                  fontSize: 13, fontWeight: isActive ? 500 : 400,
                }}>
                  <Icon name={item.icon} size={14} color={isActive ? '#FFF' : 'var(--on-rail-muted)'} />
                  <span style={{ flex: 1, textAlign: 'left' }}>{item.label}</span>
                  {item.badge && (
                    <span style={{
                      fontSize: 10, fontFamily: 'var(--t-mono)',
                      background: 'var(--signal)', color: '#FFF',
                      padding: '1px 5px', borderRadius: 8, minWidth: 16, textAlign: 'center',
                    }}>{item.badge}</span>
                  )}
                </button>
              );
            })}
          </div>
        );
      })}
    </nav>

    {/* User */}
    <div style={{
      padding: '10px 12px', borderTop: '1px solid rgba(255,255,255,0.06)',
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <div style={{
        width: 28, height: 28, borderRadius: 14, background: '#2B57E3',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 11, fontWeight: 600, color: '#FFF',
      }}>JW</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12, fontWeight: 500 }}>James Whitfield</div>
        <div style={{ fontSize: 10, color: 'var(--on-rail-muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
          james@ottokap.com
        </div>
      </div>
      <button style={{
        background: 'transparent', border: 'none', color: 'var(--on-rail-muted)',
        padding: 4,
      }}><Icon name="chevronD" size={12} /></button>
    </div>
  </aside>
);

const TopBar = ({ breadcrumb, actions }) => (
  <header style={{
    height: 52, padding: '0 24px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    background: 'var(--paper)', borderBottom: '1px solid var(--line)',
    flexShrink: 0,
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
      {breadcrumb.map((item, i) => (
        <React.Fragment key={i}>
          {i > 0 && <Icon name="chevron" size={12} color="var(--fg-soft)" />}
          <span style={{
            color: i === breadcrumb.length - 1 ? 'var(--fg)' : 'var(--fg-muted)',
            fontWeight: i === breadcrumb.length - 1 ? 500 : 400,
          }}>{item}</span>
        </React.Fragment>
      ))}
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      {actions}
      <button style={{
        width: 32, height: 32, borderRadius: 'var(--r-sm)', border: '1px solid var(--line)',
        background: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--fg-muted)',
      }}><Icon name="bell" size={15} /></button>
    </div>
  </header>
);

const OttoRail = ({ contextLabel, suggestions = [] }) => {
  const [open, setOpen] = React.useState(true);
  return (
    <aside style={{
      width: open ? 320 : 48, background: 'var(--paper)',
      borderLeft: '1px solid var(--line)',
      display: 'flex', flexDirection: 'column',
      transition: 'width 0.2s ease',
      flexShrink: 0,
    }}>
      <div style={{
        height: 52, padding: '0 14px',
        borderBottom: '1px solid var(--line)',
        display: 'flex', alignItems: 'center', gap: 10,
        cursor: 'pointer',
      }} onClick={() => setOpen(o => !o)}>
        <svg viewBox="0 0 100 100" width={22} height={22}>
          <circle cx="50" cy="50" r="44" fill="none" stroke="var(--fg)" strokeWidth="6" />
          <path d="M 14 42 Q 26 30, 38 42 T 62 42 T 86 42" fill="none" stroke="var(--sky)" strokeWidth="4" strokeLinecap="round" />
          <path d="M 14 58 Q 26 46, 38 58 T 62 58 T 86 58" fill="none" stroke="var(--signal)" strokeWidth="4" strokeLinecap="round" />
        </svg>
        {open && (
          <>
            <span style={{ flex: 1, fontSize: 13, fontWeight: 600 }}>Otto</span>
            <span className="eyebrow" style={{ fontSize: 9 }}>{contextLabel}</span>
          </>
        )}
      </div>

      {open && (
        <>
          <div style={{ padding: 14, flex: 1, overflowY: 'auto' }}>
            <div className="eyebrow" style={{ marginBottom: 10 }}>Suggestions</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {suggestions.map((s, i) => (
                <button key={i} style={{
                  textAlign: 'left', padding: '10px 12px',
                  background: 'var(--bg)', border: '1px solid var(--line-soft)',
                  borderRadius: 'var(--r-md)', fontSize: 13, color: 'var(--fg)',
                  lineHeight: 1.45, display: 'flex', gap: 8, alignItems: 'flex-start',
                }}>
                  <Icon name="sparkle" size={14} color="var(--signal)" />
                  <span>{s}</span>
                </button>
              ))}
            </div>
          </div>

          <div style={{ borderTop: '1px solid var(--line)', padding: 12 }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '6px 10px', background: 'var(--bg)',
              border: '1px solid var(--line)', borderRadius: 18,
            }}>
              <Icon name="mic" size={14} color="var(--fg-muted)" />
              <span style={{ flex: 1, fontSize: 12, color: 'var(--fg-soft)' }}>
                Ask Otto or talk to him
              </span>
              <button style={{
                width: 26, height: 26, borderRadius: 13,
                background: 'var(--fg)', border: 'none',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}><Icon name="send" size={12} color="#FFF" /></button>
            </div>
          </div>
        </>
      )}
    </aside>
  );
};

const PageHeader = ({ eyebrow, title, sub, actions, tabs, activeTab, onTab }) => (
  <div style={{
    background: 'var(--paper)', borderBottom: '1px solid var(--line)',
    padding: '20px 28px 0',
  }}>
    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 24 }}>
      <div>
        {eyebrow && <div className="eyebrow" style={{ marginBottom: 6 }}>{eyebrow}</div>}
        <h1 style={{ margin: 0, fontSize: 22, fontWeight: 600, letterSpacing: -0.4 }}>{title}</h1>
        {sub && <div style={{ marginTop: 4, fontSize: 13, color: 'var(--fg-muted)' }}>{sub}</div>}
      </div>
      {actions && <div style={{ display: 'flex', gap: 8 }}>{actions}</div>}
    </div>
    {tabs && (
      <div style={{ display: 'flex', gap: 0, marginTop: 18, borderBottom: 'none' }}>
        {tabs.map(t => (
          <button key={t} onClick={() => onTab && onTab(t)} style={{
            padding: '8px 14px', background: 'transparent', border: 'none',
            borderBottom: `2px solid ${activeTab === t ? 'var(--fg)' : 'transparent'}`,
            color: activeTab === t ? 'var(--fg)' : 'var(--fg-muted)',
            fontSize: 13, fontWeight: activeTab === t ? 500 : 400,
            marginBottom: -1,
          }}>{t}</button>
        ))}
      </div>
    )}
  </div>
);

const Btn = ({ kind = 'ghost', children, leadingIcon, onClick }) => {
  const styles = {
    primary: { background: 'var(--fg)', color: 'var(--bg)', border: 'none' },
    ghost: { background: 'var(--paper)', color: 'var(--fg)', border: '1px solid var(--line)' },
    sky: { background: 'var(--sky)', color: '#FFF', border: 'none' },
  }[kind];
  return (
    <button onClick={onClick} style={{
      ...styles, padding: '7px 12px', borderRadius: 'var(--r-sm)',
      fontSize: 12, fontWeight: 500,
      display: 'inline-flex', alignItems: 'center', gap: 6,
    }}>
      {leadingIcon && <Icon name={leadingIcon} size={13} />}
      {children}
    </button>
  );
};

const Card = ({ title, sub, action, children, padded = true, accent }) => (
  <section style={{
    background: 'var(--paper)', border: '1px solid var(--line)',
    borderRadius: 'var(--r-md)',
    boxShadow: 'var(--shadow-sm)',
    overflow: 'hidden',
    borderTop: accent ? `3px solid ${accent}` : '1px solid var(--line)',
  }}>
    {(title || action) && (
      <div style={{
        padding: '12px 16px', borderBottom: '1px solid var(--line)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
      }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>{title}</div>
          {sub && <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 2 }}>{sub}</div>}
        </div>
        {action}
      </div>
    )}
    <div style={{ padding: padded ? 16 : 0 }}>{children}</div>
  </section>
);

const Pill = ({ children, color = 'var(--fg-muted)', bg = 'var(--bg)' }) => (
  <span style={{
    fontFamily: 'var(--t-mono)', fontSize: 9.5, letterSpacing: 0.7,
    textTransform: 'uppercase',
    padding: '2px 6px', borderRadius: 'var(--r-xs)',
    background: bg, color,
  }}>{children}</span>
);

const StagePill = ({ stage }) => {
  const map = {
    Discovery: 'var(--stage-disc)',
    Qualification: 'var(--stage-qual)',
    Proposal: 'var(--stage-prop)',
    Negotiation: 'var(--stage-neg)',
    Closing: 'var(--stage-neg)',
    'Closed Won': 'var(--stage-won)',
    'Closed Lost': 'var(--stage-lost)',
  };
  const c = map[stage] || 'var(--fg-muted)';
  return <Pill color="#FFF" bg={c}>{stage}</Pill>;
};

const Avatar = ({ initials, color = 'var(--sky)', size = 24 }) => (
  <div style={{
    width: size, height: size, borderRadius: size / 2,
    background: color, color: '#FFF',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    fontSize: size * 0.4, fontWeight: 600, flexShrink: 0,
  }}>{initials}</div>
);

Object.assign(window, {
  NAV, Icon, Sidebar, TopBar, OttoRail, PageHeader, Btn, Card, Pill, StagePill, Avatar,
});