// ============================================================
// FINAFAMILY — Layout: Sidebar, Header, BottomNav
// ============================================================

const { useState, useEffect, useRef } = React;

// Ícone e rótulo de CADA tema (não do próximo) — o botão de troca rápida
// cicla light → dark → nubank-light → light ao ser clicado.
const THEME_META = {
  'light':       { icon: 'Sun',  label: 'Finafamily Claro' },
  'dark':        { icon: 'Moon', label: 'Finafamily Escuro' },
  'nubank-light': { icon: 'Zap', label: 'Finafamily Roxo' },
};

const NAV_ITEMS = [
  { id: 'dashboard',   label: 'Dashboard',    icon: 'LayoutDashboard' },
  { id: 'despesas',    label: 'Despesas',     icon: 'Wallet' },
  { id: 'receitas',    label: 'Receitas',     icon: 'DollarSign' },
  { id: 'entre-membros', label: 'Entre membros', icon: 'Users' },
  { id: 'cartoes',     label: 'Pagamentos',   icon: 'CreditCard' },
  { id: 'investimentos', label: 'Investimentos', icon: 'TrendingUp' },
  { id: 'orcamento', label: 'Orçamento', icon: 'Wallet' },
  { id: 'relatorios',  label: 'Relatórios',   icon: 'BarChart2' },
  { id: 'importar',    label: 'Importar Fatura', icon: 'Upload' },
  { id: 'configuracoes', label: 'Configurações', icon: 'Settings' },
];

const SCREEN_LABELS = {
  dashboard:     'Dashboard',
  despesas:      'Despesas',
  receitas:      'Receitas',
  'entre-membros': 'Valores entre membros',
  cartoes:       'Meios de Pagamento',
  investimentos: 'Investimentos',
  orcamento:     'Orçamento mensal',
  relatorios:    'Relatórios',
  importar:      'Importar Fatura',
  notificacoes:  'Notificações',
  configuracoes: 'Configurações',
};

function Logo({ collapsed = false }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: collapsed ? '0 4px' : '0' }}>
      <div style={{
        width: 30, height: 30, borderRadius: 8,
        background: "var(--brand-gradient)",
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
          <path d="M12 2L3 7v10l9 5 9-5V7L12 2z" stroke="white" strokeWidth="2" strokeLinejoin="round" fill="rgba(255,255,255,0.15)"/>
          <path d="M12 12l-5-3M12 12l5-3M12 12v6" stroke="white" strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      </div>
      {!collapsed && (
        <span style={{ fontSize: 17, color: 'var(--text-1)', letterSpacing: '-0.02em' }}>
          <span style={{ fontWeight: 400 }}>Fina</span>
          <span style={{ fontWeight: 800 }}>family</span>
          <span style={{ color: 'var(--accent)' }}>.</span>
        </span>
      )}
    </div>
  );
}

function Sidebar({ currentScreen, onNavigate }) {
  const { theme, toggle } = useTheme();
  const { currentMember, logout } = useApp();
  const [collapsed, setCollapsed] = useState(false);

  return (
    <aside className="ff-sidebar" style={{
      width: collapsed ? 64 : 220,
      minHeight: '100vh',
      background: 'var(--sidebar-bg)',
      borderRight: '1px solid var(--border)',
      display: 'flex', flexDirection: 'column',
      transition: 'width 250ms cubic-bezier(.4,0,.2,1)',
      flexShrink: 0, position: 'sticky', top: 0, zIndex: 100,
      overflow: 'hidden',
    }}>
      {/* Logo area */}
      <div style={{ padding: collapsed ? '20px 16px' : '20px 20px', display: 'flex', alignItems: 'center', justifyContent: collapsed ? 'center' : 'space-between', minHeight: 64 }}>
        <Logo collapsed={collapsed} />
        {!collapsed && (
          <button className="ff-button" onClick={() => setCollapsed(true)} aria-label="Recolher menu" title="Recolher menu" style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', padding: 4, display: 'flex', borderRadius: 6 }}>
            <Icon name="ChevronLeft" size={16} />
          </button>
        )}
        {collapsed && (
          <button className="ff-button" onClick={() => setCollapsed(false)} aria-label="Expandir menu" title="Expandir menu" style={{ position: 'absolute', right: -10, top: 28, background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: '50%', width: 20, height: 20, cursor: 'pointer', color: 'var(--text-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 10 }}>
            <Icon name="ChevronRight" size={10} />
          </button>
        )}
      </div>

      {/* Aviso de conta local */}
      {currentMember.isLocalAccount && !collapsed && (
        <div style={{ margin: '0 10px 6px', padding: '7px 10px', background: 'var(--warning-bg)', border: '1px solid #FCD34D', borderRadius: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="AlertTriangle" size={12} style={{ color: ffReadableColor("var(--warning)"), flexShrink: 0 }} />
          <span style={{ fontSize: 10.5, color: 'var(--warning)', lineHeight: 1.4 }}>Conta local — sem sincronização</span>
        </div>
      )}

      {/* Nav items */}
      <nav style={{ flex: 1, padding: '8px 10px', display: 'flex', flexDirection: 'column', gap: 2 }}>
        {NAV_ITEMS.map(item => {
          const active = currentScreen === item.id;
          return (
            <button className="ff-button ff-nav-item" key={item.id} onClick={() => onNavigate(item.id)} title={collapsed ? item.label : ''} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: collapsed ? '10px' : '10px 12px',
              borderRadius: 10, border: 'none', cursor: 'pointer',
              background: active ? 'var(--nav-active-bg)' : 'transparent',
              color: ffReadableColor(active ? 'var(--accent)' : 'var(--text-2)'),
              fontWeight: active ? 600 : 500, fontSize: 13.5,
              justifyContent: collapsed ? 'center' : 'flex-start',
              transition: 'all 150ms', position: 'relative',
              whiteSpace: 'nowrap', width: '100%',
            }}
            onMouseEnter={e => { if (!active) e.currentTarget.style.background = 'var(--surface-2)'; }}
            onMouseLeave={e => { if (!active) e.currentTarget.style.background = 'transparent'; }}
            >
              <Icon name={item.icon} size={17} />
              {!collapsed && <span>{item.label}</span>}
            </button>
          );
        })}
      </nav>

      {/* Bottom: dark mode + member + logout */}
      <div style={{ padding: '12px 10px', borderTop: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 4 }}>
        <button className="ff-button" onClick={toggle} title={`Tema: ${THEME_META[theme].label} — clique para trocar`} style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: collapsed ? '8px' : '8px 12px',
          borderRadius: 10, border: 'none', cursor: 'pointer',
          background: 'transparent', color: 'var(--text-3)',
          justifyContent: collapsed ? 'center' : 'flex-start',
          fontSize: 13, fontWeight: 500, width: '100%',
          transition: 'all 150ms',
        }}
        onMouseEnter={e => e.currentTarget.style.background = 'var(--surface-2)'}
        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
        >
          <Icon name={THEME_META[theme].icon} size={16} />
          {!collapsed && <span>{THEME_META[theme].label}</span>}
        </button>

        {/* Identidade da sessão: somente informativa, nunca intercambiável. */}
        <div title={collapsed ? currentMember.name : ''} style={{ display: 'flex', alignItems: 'center', justifyContent: collapsed ? 'center' : 'flex-start', gap: 10, padding: '8px 12px', borderRadius: 10 }}>
          <Avatar member={currentMember} size={26} />
          {!collapsed && (
            <div style={{ flex: 1, overflow: 'hidden' }}>
              <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--text-1)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{currentMember.name.split(' ')[0]}</div>
              <div style={{ fontSize: 10.5, color: 'var(--accent)' }}>{currentMember.role}</div>
            </div>
          )}
        </div>

        {/* Botão Sair — sempre visível */}
        <button className="ff-button" onClick={logout} title="Sair da conta" style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: collapsed ? '8px' : '8px 12px',
          borderRadius: 10, border: 'none', cursor: 'pointer',
          background: 'transparent', color: "var(--danger)",
          justifyContent: collapsed ? 'center' : 'flex-start',
          fontSize: 13, fontWeight: 600, width: '100%',
          transition: 'all 150ms',
        }}
        onMouseEnter={e => e.currentTarget.style.background = '#EF444415'}
        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
        >
          <Icon name="LogOut" size={16} />
          {!collapsed && <span>Sair da conta</span>}
        </button>
      </div>
    </aside>
  );
}

// Pra onde a notificação leva o usuário quando ele clica nela — link vem do
// backend (ex.: 'despesas', 'cartoes', 'dashboard'); sem link, cai no dashboard.
function notificationTargetScreen(n) {
  return n.link === 'member-operations' ? 'entre-membros' : (n.link || 'dashboard');
}

function NotificationPopup({ onNavigate, onClose }) {
  const { notifications, markNotificationRead } = useApp();
  const ref = useRef(null);

  useEffect(() => {
    function handleClickOutside(e) { if (ref.current && !ref.current.contains(e.target)) onClose(); }
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, [onClose]);

  function handleClick(n) {
    if (!n.read) markNotificationRead(n.id);
    onClose();
    onNavigate(notificationTargetScreen(n));
  }

  const TYPE_META = {
    warning: { icon: 'AlertTriangle', color: '#F59E0B' },
    alert:   { icon: 'Bell',          color: '#EF4444' },
    info:    { icon: 'Info',          color: '#3B82F6' },
  };

  return (
    <div ref={ref} style={{
      position: 'absolute', top: 'calc(100% + 8px)', right: 0, width: 340, maxWidth: '92vw',
      background: 'var(--surface-0)', border: '1px solid var(--border)', borderRadius: 14,
      boxShadow: '0 12px 40px rgba(0,0,0,0.25)', zIndex: 'var(--z-modal)',
      overflow: 'hidden', animation: 'modalIn 160ms cubic-bezier(.4,0,.2,1)',
    }}>
      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)', fontSize: 13, fontWeight: 700, color: 'var(--text-1)' }}>
        Notificações
      </div>
      <div style={{ maxHeight: 360, overflowY: 'auto' }}>
        {notifications.length === 0 && (
          <div style={{ padding: '24px 16px', textAlign: 'center', fontSize: 12.5, color: 'var(--text-3)' }}>Nenhuma notificação por aqui.</div>
        )}
        {notifications.slice(0, 20).map(n => {
          const meta = TYPE_META[n.type] || TYPE_META.info;
          return (
            <button className="ff-button" key={n.id} onClick={() => handleClick(n)} style={{
              display: 'flex', gap: 10, width: '100%', textAlign: 'left',
              padding: '10px 16px', border: 'none', borderBottom: '1px solid var(--border)',
              background: n.read ? 'transparent' : 'var(--accent-tint)', cursor: 'pointer',
            }}>
              <div style={{ width: 28, height: 28, borderRadius: 8, background: meta.color + '18', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name={meta.icon} size={14} style={{ color: ffReadableColor(meta.color) }} />
              </div>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontSize: 12.5, fontWeight: n.read ? 500 : 700, color: 'var(--text-1)' }}>{n.title}</div>
                <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 1, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>{n.desc}</div>
              </div>
            </button>
          );
        })}
      </div>
      <button className="ff-button" onClick={() => { onClose(); onNavigate('notificacoes'); }} style={{
        width: '100%', padding: '10px', border: 'none', borderTop: '1px solid var(--border)',
        background: 'var(--surface-1)', color: 'var(--accent)', fontWeight: 600, fontSize: 12.5, cursor: 'pointer',
      }}>
        Ver todas as notificações
      </button>
    </div>
  );
}

function Header({ currentScreen, onNavigate }) {
  const { currentMonth, setCurrentMonth, currentMember, unreadCount, notifAlert, markAllRead } = useApp();
  const { theme, toggle } = useTheme();
  const [showNotifPopup, setShowNotifPopup] = useState(false);

  // O sino pisca com a contagem até o usuário abrir o popup e ver a lista —
  // ao fechar (clicando fora, num item, ou no próprio sino de novo) tudo é
  // dado como visto e a contagem zera.
  function closeNotifPopup() {
    setShowNotifPopup(false);
    markAllRead();
  }
  function toggleNotifPopup() {
    if (showNotifPopup) closeNotifPopup();
    else setShowNotifPopup(true);
  }

  function prevMonth() {
    setCurrentMonth(m => {
      if (m.month === 1) return { year: m.year - 1, month: 12 };
      return { ...m, month: m.month - 1 };
    });
  }
  function nextMonth() {
    setCurrentMonth(m => {
      if (m.month === 12) return { year: m.year + 1, month: 1 };
      return { ...m, month: m.month + 1 };
    });
  }

  const monthNames = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];

  const MONTHS_SHORT = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];

  return (
    <header className="ff-header" style={{
      minHeight: 60, background: 'var(--glass-bg)',
      borderBottom: '1px solid var(--border)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 16px',
      // Respeita a safe area do topo (Dynamic Island / notch) no PWA em tela cheia
      paddingTop: 'env(safe-area-inset-top, 0px)',
      position: 'sticky', top: 0, zIndex: 50,
      flexShrink: 0, gap: 8,
    }}>
      {/* Logo — só aparece no mobile (sidebar oculta) */}
      <div className="header-logo-mobile" style={{ alignItems: 'center', gap: 6, flexShrink: 0 }}>
        <div style={{ width: 28, height: 28, borderRadius: 8, background: "var(--brand-gradient)", display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
            <path d="M12 2L3 7v10l9 5 9-5V7L12 2z" stroke="white" strokeWidth="2" strokeLinejoin="round" fill="rgba(255,255,255,0.15)"/>
            <path d="M12 12l-5-3M12 12l5-3M12 12v6" stroke="white" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1, minWidth: 0 }}>
        {/* Título da tela — oculto no mobile, substituído pelo logo */}
        <span className="header-title-desktop" style={{ fontSize: 17, fontWeight: 700, color: 'var(--text-1)', whiteSpace: 'nowrap' }}>{SCREEN_LABELS[currentScreen]}</span>

        {/* Month nav */}
        {['dashboard','despesas','receitas'].includes(currentScreen) && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 2, background: 'var(--surface-2)', borderRadius: 10, padding: '4px 6px' }}>
            <button className="ff-button" onClick={prevMonth} aria-label="Mês anterior" title="Mês anterior" style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', padding: '2px 4px', display: 'flex', borderRadius: 4 }}>
              <Icon name="ChevronLeft" size={14} />
            </button>
            <span className="header-month-label" style={{ fontSize: 16, fontWeight: 600, color: 'var(--text-1)', minWidth: 110, textAlign: 'center' }}>
              {/* Desktop: mês completo / Mobile: abreviado */}
              <span className="header-title-desktop">{monthNames[currentMonth.month - 1]} {currentMonth.year}</span>
              <span className="header-logo-mobile" style={{ display: 'none', alignItems: 'center' }}>{MONTHS_SHORT[currentMonth.month - 1]}/{String(currentMonth.year).slice(-2)}</span>
            </span>
            <button className="ff-button" onClick={nextMonth} aria-label="Próximo mês" title="Próximo mês" style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', padding: '2px 4px', display: 'flex', borderRadius: 4 }}>
              <Icon name="ChevronRight" size={14} />
            </button>
          </div>
        )}
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
        {/* Dark mode — oculto no mobile (está na sidebar / settings) */}
        <button className="r-hide ff-button" title={`Tema: ${THEME_META[theme].label} — clique para trocar`} onClick={toggle} style={{ background: 'var(--surface-2)', border: 'none', cursor: 'pointer', color: 'var(--text-3)', padding: '7px', borderRadius: 9, display: 'flex', transition: 'all 150ms' }}
          onMouseEnter={e => e.currentTarget.style.color = 'var(--text-1)'}
          onMouseLeave={e => e.currentTarget.style.color = 'var(--text-3)'}
        >
          <Icon name={THEME_META[theme].icon} size={15} />
        </button>
        <div style={{ position: 'relative' }}>
          <button className="ff-button" onClick={toggleNotifPopup} title="Notificações" style={{ background: 'var(--surface-2)', border: 'none', cursor: 'pointer', color: 'var(--text-3)', padding: '7px', borderRadius: 9, display: 'flex', position: 'relative', transition: 'all 150ms' }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--text-1)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--text-3)'}
          >
            <Icon name="Bell" size={15} />
            {unreadCount > 0 && (
              <span style={{
                position: 'absolute', top: -5, right: -5, minWidth: 16, height: 16, padding: '0 3px',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: "var(--danger-action)", color: 'white', borderRadius: 99, border: '2px solid var(--surface-0)',
                fontSize: 9.5, fontWeight: 800, lineHeight: 1, boxSizing: 'content-box',
                animation: 'notifPulse 1.1s ease-in-out infinite',
              }}>{unreadCount > 9 ? '9+' : unreadCount}</span>
            )}
          </button>
          {showNotifPopup && <NotificationPopup onNavigate={onNavigate} onClose={closeNotifPopup} />}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 8px 4px 4px', background: 'var(--surface-2)', borderRadius: 10 }}>
          <Avatar member={currentMember} size={26} />
          <span className="header-member-name" style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-1)' }}>{currentMember.name.split(' ')[0]}</span>
        </div>
      </div>
    </header>
  );
}

function BottomNav({ currentScreen, onNavigate }) {
  const { currentMember, logout } = useApp();
  const [menuOpen, setMenuOpen] = useState(false);

  const MOBILE_NAV = [
    { id: '__menu__',   icon: 'Menu',            label: 'Menu' },
    { id: 'dashboard',  icon: 'LayoutDashboard', label: 'Início' },
    { id: 'despesas',   icon: 'Wallet',          label: 'Despesas' },
    { id: 'receitas',   icon: 'DollarSign',      label: 'Receitas' },
    { id: 'cartoes',    icon: 'CreditCard',      label: 'Cartões' },
  ];

  // Itens do drawer — o que não está na barra principal
  const DRAWER_ITEMS = [
    { id: 'entre-membros', icon: 'Users', label: 'Entre membros', desc: 'Valores a pagar e receber', color: '#5264de' },
    { id: 'investimentos', icon: 'TrendingUp',  label: 'Investimentos', desc: 'Portfólio e rendimentos',  color: '#7C3AED' },
    { id: 'orcamento', icon: 'Wallet', label: 'Orçamento', desc: 'Plano mensal e divisões', color: 'var(--accent)' },
    { id: 'relatorios',    icon: 'BarChart2',   label: 'Relatórios',    desc: 'Análise e tendências',     color: '#0284C7' },
    { id: 'importar',      icon: 'Upload',      label: 'Importar Fatura', desc: 'Lançar despesas do cartão', color: '#059669' },
    { id: 'configuracoes', icon: 'Settings',    label: 'Configurações', desc: 'Perfil e preferências',   color: '#64748B' },
  ];

  function handleNav(id) {
    onNavigate(id);
    setMenuOpen(false);
  }

  return (
    <>
      {/* ── Bottom Navigation Bar ── */}
      <nav className="ff-bottom-bar" style={{
        position: 'fixed', bottom: 0, left: 0, right: 0,
        background: 'var(--surface-0)', borderTop: '1px solid var(--border)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-around',
        padding: '8px 0 max(8px, env(safe-area-inset-bottom))',
        zIndex: 100,
      }}>
        {MOBILE_NAV.map(item => {
          const isMenu   = item.id === '__menu__';
          const active   = !isMenu && currentScreen === item.id;
          const menuActive = isMenu && menuOpen;
          return (
            <button className="ff-button" key={item.id}
              onClick={() => isMenu ? setMenuOpen(v => !v) : handleNav(item.id)}
              style={{
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
                background: menuActive ? 'var(--accent-tint)' : 'none',
                border: 'none', cursor: 'pointer',
                color: ffReadableColor((active || menuActive) ? 'var(--accent)' : 'var(--text-3)'),
                padding: '4px 16px', borderRadius: 10, position: 'relative',
                transition: 'color 150ms, background 150ms',
              }}>
              <Icon name={item.icon} size={20} />
              <span style={{ fontSize: 10, fontWeight: (active || menuActive) ? 600 : 500 }}>{item.label}</span>
              {active && <div style={{ position: 'absolute', top: -8, width: 20, height: 2, background: 'var(--accent)', borderRadius: 99 }} />}
            </button>
          );
        })}
      </nav>

      {/* ── Menu Drawer (Bottom Sheet) ── */}
      {menuOpen && (
        <div className="ff-modal-overlay"
          onClick={() => setMenuOpen(false)}
          style={{
            position: 'fixed', inset: 0, zIndex: 450, // acima do botão "+" (400), abaixo dos modais
            background: 'var(--overlay-bg)',
            backdropFilter: 'blur(2px)',
            animation: 'fadeIn 180ms ease-out',
          }}
        />
      )}
      <div style={{
        position: 'fixed', left: 0, right: 0, bottom: 0, zIndex: 451,
        transform: menuOpen ? 'translateY(0)' : 'translateY(100%)',
        visibility: menuOpen ? 'visible' : 'hidden',
        pointerEvents: menuOpen ? 'auto' : 'none',
        transition: 'transform 280ms cubic-bezier(0.34, 1.1, 0.64, 1), visibility 280ms',
        background: 'var(--surface-0)',
        borderRadius: '20px 20px 0 0',
        borderTop: '1px solid var(--border)',
        padding: '0 0 max(20px, env(safe-area-inset-bottom))',
        boxShadow: '0 -8px 40px rgba(0,0,0,0.35)',
      }}>
        {/* Handle + cabeçalho */}
        <div style={{ padding: '12px 20px 4px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 36, height: 4, borderRadius: 99, background: 'var(--surface-3)' }} />
          {/* Perfil do membro */}
          {currentMember && (
            <div style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 12, padding: '10px 4px 6px' }}>
              <div style={{ width: 42, height: 42, borderRadius: 12, background: (currentMember.color || 'var(--accent)') + '33', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, fontWeight: 700, color: ffReadableColor(currentMember.color || 'var(--accent)'), flexShrink: 0 }}>
                {currentMember.initials || currentMember.name?.slice(0,2).toUpperCase()}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-1)' }}>{currentMember.name}</div>
                <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{currentMember.email}</div>
              </div>
            </div>
          )}
        </div>

        <div style={{ height: 1, background: 'var(--border)', margin: '0 20px 16px' }} />

        {/* Grid de opções */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, padding: '0 16px 16px' }}>
          {DRAWER_ITEMS.map(item => {
            const active = currentScreen === item.id;
            return (
              <button className="ff-button" key={item.id} onClick={() => handleNav(item.id)} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '14px 14px',
                background: active ? item.color + '18' : 'var(--surface-1)',
                border: `1px solid ${active ? item.color + '44' : 'var(--border)'}`,
                borderRadius: 14, cursor: 'pointer',
                transition: 'background 150ms',
                textAlign: 'left',
              }}>
                <div style={{ width: 38, height: 38, borderRadius: 10, background: item.color + '22', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon name={item.icon} size={18} style={{ color: ffReadableColor(item.color) }} />
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 700, color: ffReadableColor(active ? item.color : 'var(--text-1)') }}>{item.label}</div>
                  <div style={{ fontSize: 10, color: 'var(--text-3)', marginTop: 1 }}>{item.desc}</div>
                </div>
              </button>
            );
          })}
        </div>

        {/* Separador + Sair */}
        <div style={{ padding: '0 16px' }}>
          <button className="ff-button"
            onClick={() => { setMenuOpen(false); logout && logout(); }}
            style={{ width: '100%', padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10, background: "var(--danger-bg)", border: '1px solid #EF444430', borderRadius: 12, cursor: 'pointer', color: "var(--danger)" }}
          >
            <Icon name="LogOut" size={16} />
            <span style={{ fontSize: 14, fontWeight: 600 }}>Sair da conta</span>
          </button>
        </div>
      </div>
    </>
  );
}

// ── Popup diário: alertas de vencimento + situação do dia a dia ──────────
// Aparece uma vez por dia, no primeiro acesso (ver useEffect em data.jsx).
function DailyDigestModal({ onNavigate }) {
  const { dailyDigest, dismissDailyDigest, markNotificationRead } = useApp();
  if (!dailyDigest || dailyDigest.length === 0) return null;

  const TYPE_META = {
    warning: { icon: 'AlertTriangle', color: '#F59E0B' },
    alert:   { icon: 'Bell',          color: '#EF4444' },
    info:    { icon: 'Info',          color: '#3B82F6' },
  };

  function handleClick(n) {
    if (!n.read) markNotificationRead(n.id);
    dismissDailyDigest();
    onNavigate(n.link || 'dashboard');
  }

  return (
    <Modal open={true} onClose={dismissDailyDigest} title="Resumo do dia" width={440}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ fontSize: 12.5, color: 'var(--text-3)' }}>
          Vencimentos próximos e o ritmo dos seus gastos do dia a dia:
        </div>
        {dailyDigest.map(n => {
          const meta = TYPE_META[n.type] || TYPE_META.info;
          return (
            <button className="ff-button" key={n.id} onClick={() => handleClick(n)} style={{
              display: 'flex', gap: 10, width: '100%', textAlign: 'left',
              padding: '10px 12px', border: '1px solid var(--border)', borderRadius: 12,
              background: 'var(--surface-1)', cursor: 'pointer',
            }}>
              <div style={{ width: 32, height: 32, borderRadius: 9, background: meta.color + '18', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name={meta.icon} size={16} style={{ color: ffReadableColor(meta.color) }} />
              </div>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-1)' }}>{n.title}</div>
                <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 2 }}>{n.desc}</div>
              </div>
            </button>
          );
        })}
        <button className="ff-button ff-action ff-primary-action" onClick={dismissDailyDigest} style={{
          marginTop: 4, minHeight: 40, background: "var(--action-bg)", border: 'none', borderRadius: 10,
          color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 13,
        }}>
          Entendi
        </button>
      </div>
    </Modal>
  );
}

Object.assign(window, { Sidebar, Header, BottomNav, DailyDigestModal, NAV_ITEMS, SCREEN_LABELS });