// Sidebar Navigation Component
const Sidebar = ({ view, setView, leads, user, onSignOut, spreadsheetId }) => {
  const totalAtivos = leads.filter(l => l.stage !== 'Fechado').length;
  const followupsHoje = leads.filter(l => l.followup && l.followup <= new Date().toISOString().split('T')[0]).length;

  const nav = [
    { id: 'dashboard', icon: DashIcon, label: 'Dashboard' },
    { id: 'pipeline',  icon: PipeIcon, label: 'Pipeline' },
    { id: 'planilha',  icon: TableIcon, label: 'Planilha' },
  ];

  const sheetUrl = spreadsheetId
    ? `https://docs.google.com/spreadsheets/d/${spreadsheetId}`
    : null;

  return (
    <aside style={sidebarStyles.sidebar}>
      <div style={sidebarStyles.logo}>
        <div style={sidebarStyles.logoMark}>
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
            <rect x="1" y="1" width="7" height="7" rx="2" fill="#4f7cff"/>
            <rect x="10" y="1" width="7" height="7" rx="2" fill="#4f7cff" opacity="0.5"/>
            <rect x="1" y="10" width="7" height="7" rx="2" fill="#4f7cff" opacity="0.5"/>
            <rect x="10" y="10" width="7" height="7" rx="2" fill="#4ade80"/>
          </svg>
        </div>
        <div>
          <div style={sidebarStyles.logoName}>CRM</div>
          <div style={sidebarStyles.logoSub}>Gestão de Vendas</div>
        </div>
      </div>

      <div style={sidebarStyles.section}>
        <div style={sidebarStyles.sectionLabel}>VISÕES</div>
        {nav.map(({ id, icon: Icon, label }) => (
          <button key={id} onClick={() => setView(id)}
            style={{ ...sidebarStyles.navItem, ...(view === id ? sidebarStyles.navItemActive : {}) }}>
            <Icon active={view === id} />
            <span>{label}</span>
            {view === id && <div style={sidebarStyles.activeDot} />}
          </button>
        ))}
      </div>

      <div style={sidebarStyles.section}>
        <div style={sidebarStyles.sectionLabel}>RESUMO</div>
        <div style={sidebarStyles.stat}>
          <span style={sidebarStyles.statLabel}>Leads ativos</span>
          <span style={sidebarStyles.statValue}>{totalAtivos}</span>
        </div>
        <div style={sidebarStyles.stat}>
          <span style={sidebarStyles.statLabel}>Follow-ups hoje</span>
          <span style={{ ...sidebarStyles.statValue, color: followupsHoje > 0 ? '#facc15' : '#4ade80' }}>{followupsHoje}</span>
        </div>
        <div style={sidebarStyles.stat}>
          <span style={sidebarStyles.statLabel}>Total leads</span>
          <span style={sidebarStyles.statValue}>{leads.length}</span>
        </div>
      </div>

      {sheetUrl && (
        <div style={{ padding: '0 10px 8px' }}>
          <a href={sheetUrl} target="_blank" rel="noopener noreferrer" style={sidebarStyles.sheetLink}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
              <rect x="3" y="3" width="18" height="18" rx="3" stroke="#4ade80" strokeWidth="2"/>
              <line x1="3" y1="9" x2="21" y2="9" stroke="#4ade80" strokeWidth="1.5"/>
              <line x1="3" y1="15" x2="21" y2="15" stroke="#4ade80" strokeWidth="1.5"/>
              <line x1="9" y1="9" x2="9" y2="21" stroke="#4ade80" strokeWidth="1.5"/>
            </svg>
            Ver no Google Sheets
          </a>
        </div>
      )}

      <div style={sidebarStyles.footer}>
        {user && user.picture ? (
          <img src={user.picture} style={sidebarStyles.avatarImg} alt="avatar" referrerPolicy="no-referrer" />
        ) : (
          <div style={sidebarStyles.avatar}>
            {user ? user.name.slice(0, 2).toUpperCase() : '??'}
          </div>
        )}
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={sidebarStyles.userName}>{user ? user.name.split(' ')[0] : '—'}</div>
          <div style={sidebarStyles.userRole} title={user ? user.email : ''}>{user ? user.email : ''}</div>
        </div>
        <button style={sidebarStyles.logoutBtn} onClick={onSignOut} title="Sair">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" stroke="#4a4f6a" strokeWidth="2" strokeLinecap="round"/>
            <polyline points="16 17 21 12 16 7" stroke="#4a4f6a" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            <line x1="21" y1="12" x2="9" y2="12" stroke="#4a4f6a" strokeWidth="2" strokeLinecap="round"/>
          </svg>
        </button>
      </div>
    </aside>
  );
};

// Mini icons
const DashIcon = ({ active }) => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
    <rect x="1" y="1" width="6" height="6" rx="1.5" fill={active ? '#4f7cff' : '#4a4f6a'}/>
    <rect x="9" y="1" width="6" height="6" rx="1.5" fill={active ? '#4f7cff' : '#4a4f6a'}/>
    <rect x="1" y="9" width="6" height="6" rx="1.5" fill={active ? '#4f7cff' : '#4a4f6a'}/>
    <rect x="9" y="9" width="6" height="6" rx="1.5" fill={active ? '#4ade80' : '#4a4f6a'}/>
  </svg>
);
const PipeIcon = ({ active }) => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
    <rect x="1" y="3" width="3.5" height="10" rx="1" fill={active ? '#4f7cff' : '#4a4f6a'}/>
    <rect x="6.25" y="1" width="3.5" height="14" rx="1" fill={active ? '#4f7cff' : '#4a4f6a'} opacity="0.7"/>
    <rect x="11.5" y="5" width="3.5" height="8" rx="1" fill={active ? '#4f7cff' : '#4a4f6a'} opacity="0.5"/>
  </svg>
);
const TableIcon = ({ active }) => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
    <rect x="1" y="1" width="14" height="3" rx="1" fill={active ? '#4f7cff' : '#4a4f6a'}/>
    <rect x="1" y="6" width="14" height="2.5" rx="1" fill={active ? '#4f7cff' : '#4a4f6a'} opacity="0.6"/>
    <rect x="1" y="10.5" width="14" height="2.5" rx="1" fill={active ? '#4f7cff' : '#4a4f6a'} opacity="0.4"/>
    <rect x="1" y="14" width="9" height="1.5" rx="1" fill={active ? '#4f7cff' : '#4a4f6a'} opacity="0.25"/>
  </svg>
);

const sidebarStyles = {
  sidebar: {
    width: 220, minWidth: 220, height: '100vh', background: '#0d0f18',
    borderRight: '1px solid #1e2235', display: 'flex', flexDirection: 'column',
    padding: '0 0 16px 0', overflowY: 'auto',
  },
  logo: {
    display: 'flex', alignItems: 'center', gap: 10, padding: '20px 18px 16px',
    borderBottom: '1px solid #1e2235',
  },
  logoMark: {
    width: 36, height: 36, borderRadius: 10, background: '#151828',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    border: '1px solid #1e2235',
  },
  logoName: { fontSize: 14, fontWeight: 700, color: '#e8eaf0', letterSpacing: 1 },
  logoSub:  { fontSize: 10, color: '#4a4f6a', marginTop: 1 },
  section:  { padding: '16px 10px 8px' },
  sectionLabel: { fontSize: 9, letterSpacing: 1.5, color: '#4a4f6a', fontWeight: 700, padding: '0 8px', marginBottom: 6 },
  navItem: {
    display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '9px 10px',
    background: 'none', border: 'none', cursor: 'pointer', borderRadius: 8,
    color: '#6b7194', fontSize: 13, fontWeight: 500, transition: 'all 0.15s', position: 'relative',
    textAlign: 'left',
  },
  navItemActive: { background: 'rgba(79,124,255,0.12)', color: '#c7d2ff' },
  activeDot: {
    position: 'absolute', right: 10, width: 6, height: 6, borderRadius: '50%', background: '#4f7cff',
  },
  stat: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    padding: '7px 8px', borderRadius: 7, marginBottom: 2,
  },
  statLabel: { fontSize: 12, color: '#4a4f6a' },
  statValue: { fontSize: 13, fontWeight: 700, color: '#e8eaf0' },
  sheetLink: {
    display: 'flex', alignItems: 'center', gap: 6, padding: '7px 10px',
    borderRadius: 8, background: 'rgba(74,222,128,0.07)', border: '1px solid rgba(74,222,128,0.15)',
    color: '#4ade80', fontSize: 11, fontWeight: 600, textDecoration: 'none',
    transition: 'opacity 0.15s',
  },
  footer: {
    marginTop: 'auto', padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 8,
    borderTop: '1px solid #1e2235',
  },
  avatar: {
    width: 32, height: 32, borderRadius: '50%', background: 'rgba(79,124,255,0.2)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontSize: 11, fontWeight: 700, color: '#4f7cff', flexShrink: 0,
  },
  avatarImg: {
    width: 32, height: 32, borderRadius: '50%', flexShrink: 0, objectFit: 'cover',
  },
  userName: { fontSize: 12, fontWeight: 600, color: '#c7d2ff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
  userRole: { fontSize: 10, color: '#4a4f6a', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
  logoutBtn: {
    background: 'none', border: 'none', cursor: 'pointer', padding: 4,
    borderRadius: 6, flexShrink: 0, display: 'flex',
  },
};