/* SOCIAL · módulo principal — posts orgânicos Instagram + Facebook + LinkedIn.
   Activado a partir do card SOCIAL em Marketing › Sub-agentes (onOpen).
   Integra com o social-manager (social.digidelta.ai). */

const MktSocialModule = ({ onClose, onOpenChat }) => {
  const [view, setView] = React.useState('resumo');

  const tabs = [
    { id: 'resumo',    label: 'Resumo' },
    { id: 'calendario', label: 'Calendário' },
    { id: 'biblioteca', label: 'Biblioteca' },
    { id: 'analytics', label: 'Analytics' },
  ];

  const renderView = () => {
    return (
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 16, color: 'var(--text-muted)' }}>
        <div style={{ fontSize: 36, opacity: 0.3 }}>◉</div>
        <div style={{ fontSize: 13, fontWeight: 500 }}>Módulo SOCIAL em desenvolvimento</div>
        <div style={{ fontSize: 12, color: 'var(--text-dim)', textAlign: 'center', maxWidth: 320 }}>
          Para gerir posts orgânicos, usa o agente directamente em social.digidelta.ai
        </div>
        <a
          href="https://social.digidelta.ai/"
          target="_blank"
          rel="noopener noreferrer"
          className="btn btn-sm btn-primary"
          style={{ marginTop: 8 }}
        >
          Abrir Social Manager
        </a>
      </div>
    );
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0, background: 'var(--bg)' }}>
      {/* banner pré-visualização */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 16px', background: 'color-mix(in oklch, var(--warn) 10%, var(--bg-elev))', borderBottom: '1px solid color-mix(in oklch, var(--warn) 25%, var(--border))', flexShrink: 0 }}>
        <span style={{ fontSize: 13 }}>🚧</span>
        <span style={{ fontSize: 11.5, color: 'var(--warn)', fontWeight: 600 }}>Pré-visualização</span>
        <span style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>— módulo em desenvolvimento.</span>
      </div>

      {/* topbar */}
      <div style={{ padding: '12px 24px 0', borderBottom: '1px solid var(--border)', flexShrink: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--text-muted)' }}>
            <span style={{ cursor: 'pointer' }} onClick={onClose}>Sub-agentes</span>
            <span>/</span>
            <span style={{ color: 'var(--text)' }}>SOCIAL</span>
          </div>
          <button className="btn btn-xs btn-ghost" onClick={onClose}>
            <Icon name="close" size={11} /> Fechar
          </button>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 6 }}>
          <div style={{
            width: 32, height: 32, borderRadius: 8,
            background: 'color-mix(in oklch, #E11D48 18%, transparent)',
            color: '#E11D48',
            display: 'grid', placeItems: 'center', fontSize: 16,
            border: '1px solid color-mix(in oklch, #E11D48 30%, transparent)',
          }}>◉</div>
          <div>
            <h2 className="font-display" style={{ margin: 0, fontSize: 19, fontWeight: 600, letterSpacing: '-0.01em' }}>SOCIAL</h2>
            <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 1 }}>
              Sub-agente · posts orgânicos Instagram, Facebook e LinkedIn
            </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', border: 'none', cursor: 'pointer',
              color: view === t.id ? 'var(--accent-500)' : 'var(--text-muted)',
              borderBottom: view === t.id ? '2px solid var(--accent-500)' : '2px solid transparent',
              fontFamily: 'var(--font-body)', fontWeight: view === t.id ? 600 : 400,
              transition: 'color 0.15s',
            }}>
              {t.label}
            </button>
          ))}
        </div>
      </div>

      {/* conteúdo */}
      <div style={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
        {renderView()}
      </div>
    </div>
  );
};

window.MktSocialModule = MktSocialModule;