/* SEO · módulo principal — orquestra as 5 vistas
   Activado a partir do card SEO em Marketing › Sub-agentes (onOpen).
   Tabs internos: Resumo · Sites · Para Aprovar · Histórico · Configuração */

const MktSeoModule = ({ onClose, onOpenChat }) => {
  const [view, setView] = React.useState('resumo');
  const [siteFocus, setSiteFocus] = React.useState(null);
  const queueCount = window.SEO_QUEUE.length;

  const goTo = (v, siteId) => {
    setView(v);
    if (siteId) setSiteFocus(siteId);
  };

  const tabs = [
    { id: 'resumo',  label: 'Resumo' },
    { id: 'sites',   label: 'Sites' },
    { id: 'queue',   label: 'Para aprovar', badge: queueCount },
    { id: 'history', label: 'Histórico' },
    { id: 'config',  label: 'Configuração' },
  ];

  const renderView = () => {
    if (view === 'resumo')  return <window.SeoViewResumo onGoTo={goTo} onOpenChat={onOpenChat} />;
    if (view === 'sites')   return <window.SeoViewSites initialSiteId={siteFocus} />;
    if (view === 'queue')   return <window.SeoViewQueue />;
    if (view === 'history') return <window.SeoViewHistory />;
    if (view === 'config')  return <window.SeoViewConfig />;
    return null;
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0, background: 'var(--bg)' }}>
      {/* topbar do módulo */}
      <div style={{
        padding: '12px 24px 0',
        borderBottom: '1px solid var(--border)',
        flexShrink: 0,
      }}>
        {/* breadcrumb + botão fechar */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
          <SeoBreadcrumb view={view} onBack={onClose} onHome={() => setView('resumo')} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>
              <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--success)', display: 'inline-block', marginRight: 6 }} />
              Digi SEO · activo
            </span>
            <button className="btn btn-xs btn-ghost" onClick={onClose} title="Voltar a Sub-agentes">
              <Icon name="close" size={11} /> Fechar
            </button>
          </div>
        </div>

        {/* título + tabs */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 6 }}>
          <div style={{
            width: 32, height: 32, borderRadius: 8,
            background: 'color-mix(in oklch, #0EA5E9 18%, transparent)',
            color: '#0EA5E9',
            display: 'grid', placeItems: 'center', fontSize: 16,
            border: '1px solid color-mix(in oklch, #0EA5E9 30%, transparent)',
          }}>🔍</div>
          <div>
            <h2 className="font-display" style={{ margin: 0, fontSize: 19, fontWeight: 600, letterSpacing: '-0.01em' }}>SEO</h2>
            <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 1 }}>
              Sub-agente · varre, prioriza e corrige SEO técnico + on-page nos 5 sites Digidelta
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 2, marginTop: 14 }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => setView(t.id)} style={{
              padding: '8px 14px', fontSize: 12.5,
              background: 'transparent',
              color: view === t.id ? 'var(--text)' : 'var(--text-muted)',
              borderBottom: view === t.id ? '2px solid var(--ai-500)' : '2px solid transparent',
              fontWeight: view === t.id ? 600 : 400,
              fontFamily: 'inherit',
              display: 'inline-flex', alignItems: 'center', gap: 6,
              transition: 'color 0.12s',
            }}
            onMouseEnter={e => { if (view !== t.id) e.currentTarget.style.color = 'var(--text)'; }}
            onMouseLeave={e => { if (view !== t.id) e.currentTarget.style.color = 'var(--text-muted)'; }}
            >
              {t.label}
              {t.badge != null && t.badge > 0 && (
                <span className="font-mono" style={{
                  padding: '0 6px', fontSize: 10, lineHeight: '15px',
                  background: 'var(--ai-500)', color: '#fff',
                  borderRadius: 999, fontWeight: 600,
                }}>{t.badge}</span>
              )}
            </button>
          ))}
        </div>
      </div>

      {/* conteúdo da vista */}
      <div style={{ flex: 1, minHeight: 0, padding: '20px 24px', overflow: 'hidden' }}>
        {renderView()}
      </div>
    </div>
  );
};
window.MktSeoModule = MktSeoModule;