{/* Cabeçalho */}

{col} {items.length}

{/* Cards */}

{items.length === 0 && (

Vazio

)} {items.map(item => ( ))}

); } /* ── Modal de criação / edição ───────────────────────────────────*/ const FIELD_STYLE = { width:'100%', boxSizing:'border-box', background:'rgba(255,255,255,.04)', border:'1px solid rgba(255,255,255,.1)', color:'#fff', padding:'10px 12px', borderRadius:8, fontFamily:'Roboto,sans-serif', fontSize:13, outline:'none', resize:'vertical', }; const LABEL_STYLE = { display:'block', fontSize:10, fontFamily:'Roboto,sans-serif', fontWeight:700, letterSpacing:'1.2px', color:'rgba(255,255,255,.4)', textTransform:'uppercase', marginBottom:6, }; function ContentModal({ item, onSave, onClose }) { const isNew = !item?.id; const [form, setForm] = useState(item || { tema:'', plataforma:'Reels', responsavel:'Felipe', status:'Fazer', gancho:'', desenvolvimento:'', cta:'', data_prevista:'', }); const set = (k, v) => setForm(f => ({ ...f, [k]: v })); return (

e.target === e.currentTarget && onClose()}>

{/* Header */}

{isNew ? 'Novo conteúdo' : 'Editar conteúdo'}

{/* Body */}

{/* Tema */}

Tema / Título set('tema', e.target.value)} placeholder="Ex: Cliente diz que achou pouca foto na entrega" style={{ ...FIELD_STYLE, resize:'none' }}/>

{/* Plataforma + Responsável lado a lado */}

Plataforma

{PLATAFORMAS.map(p => { const active = form.plataforma === p; const color = PLAT_COLOR[p]; return ( ); })}

Responsável

{RESPONSAVEIS.map(r => { const active = form.responsavel === r; const color = r === 'Felipe' ? '#eaaa41' : '#60a5fa'; return ( ); })}

{/* Status */}

Status

{STATUS_COLS.map(s => { const active = form.status === s; const color = COL_CFG[s].dot; return ( ); })}

{/* Gancho */}

Gancho

set('gancho', e.target.value)}
              rows={3} placeholder="A primeira frase que para o scroll..."
              style={FIELD_STYLE}/>
          </div>

{/* Desenvolvimento */}
          <div>
            <label style={LABEL_STYLE}>Desenvolvimento</label>
            <textarea value={form.desenvolvimento} onChange={e => set('desenvolvimento', e.target.value)}
              rows={5} placeholder="O conteúdo principal, argumentos, pontos do carrossel..."
              style={FIELD_STYLE}/>
          </div>

{/* CTA */}
          <div>
            <label style={LABEL_STYLE}>CTA</label>
            <textarea value={form.cta} onChange={e => set('cta', e.target.value)}
              rows={2} placeholder="O que você quer que a pessoa faça depois..."
              style={FIELD_STYLE}/>
          </div>

{/* Data prevista */}
          <div>
            <label style={LABEL_STYLE}>Data prevista de postagem</label>
            <input type="date" value={form.data_prevista || ''} onChange={e => set('data_prevista', e.target.value)}
              style={{ ...FIELD_STYLE, resize:'none', colorScheme:'dark' }}/>
          </div>
        </div>

{/* Footer */}
        <div style={{ padding:'14px 20px', borderTop:'1px solid var(--app-border)',
          display:'flex', justifyContent:'flex-end', gap:8, flexShrink:0 }}>
          <Btn variant="ghost" size="sm" onClick={onClose}>Cancelar</Btn>
          <Btn variant="primary" size="sm" icon="check" onClick={() => onSave(form)}>
            {isNew ? 'Criar' : 'Salvar'}
          </Btn>
        </div>
      </div>
    </div>
  );
}

/* ── Filtros ─────────────────────────────────────────────────────*/
function FilterPill({ label, active, color, onClick }) {
  return (
    <button onClick={onClick}
      style={{ padding:'5px 12px', borderRadius:999, cursor:'pointer', fontSize:11,
        fontFamily:'Roboto,sans-serif', fontWeight:700, transition:'all 130ms',
        background: active ? (color ? `${color}22` : 'rgba(234,170,65,.15)') : 'rgba(255,255,255,.04)',
        border: active ? `1px solid ${color || 'rgba(234,170,65,.4)'}66` : '1px solid rgba(255,255,255,.1)',
        color: active ? (color || 'var(--fmn-gold)') : 'rgba(255,255,255,.42)' }}>
      {label}
    </button>
  );
}

/* ── OrganicoScreen ──────────────────────────────────────────────*/
function OrganicoScreen() {
  const [items, setItems]               = useState([]);
  const [dbAvailable, setDbAvail]       = useState(false);
  const [modal, setModal]               = useState(null);  // null | { item? }
  const [platFilter, setPlatFilter]     = useState('Todos');
  const [respFilter, setRespFilter]     = useState('Todos');
  const [toast, setToast]               = useState(null);

/* ── Load ─── */
  useEffect(() => {
    if (!window.db) return;
    setDbAvail(true);
    window.db.from('conteudo_organico')
      .select('*').order('created_at', { ascending: false })
      .then(({ data }) => { if (data) setItems(data); });
  }, []);

const showToast = msg => { setToast(msg); setTimeout(() => setToast(null), 3500); };

/* ── CRUD ─── */
  const handleSave = async form => {
    const row = {
      tema: form.tema, plataforma: form.plataforma, responsavel: form.responsavel,
      status: form.status, gancho: form.gancho, desenvolvimento: form.desenvolvimento,
      cta: form.cta, data_prevista: form.data_prevista || null,
    };
    if (form.id) {
      if (dbAvailable) await window.db.from('conteudo_organico').update(row).eq('id', form.id);
      setItems(prev => prev.map(i => i.id === form.id ? { ...i, ...row } : i));
    } else {
      if (dbAvailable) {
        const { data } = await window.db.from('conteudo_organico').insert(row).select().single();
        if (data) { setItems(prev => [data, ...prev]); setModal(null); return; }
      }
      setItems(prev => [{ ...row, id: String(Date.now()) }, ...prev]);
    }
    setModal(null);
  };

const handleDelete = async id => {
    if (!confirm('Excluir este conteúdo?')) return;
    if (dbAvailable) await window.db.from('conteudo_organico').delete().eq('id', id);
    setItems(prev => prev.filter(i => i.id !== id));
  };

/* ── Filtros ─── */
  const filtered = items.filter(i => {
    if (platFilter !== 'Todos' && i.plataforma !== platFilter) return false;
    if (respFilter !== 'Todos' && i.responsavel !== respFilter) return false;
    return true;
  });

return (
    <div style={{ display:'flex', flexDirection:'column', height:'100%', overflow:'hidden' }}>

{/* Toast */}
      {toast && (
        <div style={{ position:'fixed', bottom:24, left:'50%', transform:'translateX(-50%)', zIndex:800,
          display:'flex', alignItems:'center', gap:8, padding:'12px 18px', borderRadius:10,
          background:'rgba(74,222,128,.12)', border:'1px solid rgba(74,222,128,.3)',
          boxShadow:'0 12px 40px rgba(0,0,0,.5)' }}>
          <LucideIcon icon="check-circle" size={16} color="#4ade80"/>
          <span style={{ fontSize:13, fontFamily:'Roboto,sans-serif', fontWeight:700, color:'#4ade80' }}>{toast}</span>
        </div>
      )}

{/* Modal */}
      {modal && (
        <ContentModal
          item={modal.item || null}
          onSave={handleSave}
          onClose={() => setModal(null)}/>
      )}

{/* TopBar */}
      <TopBar title="Orgânico"
        actions={
          <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>

{/* Filtro plataforma */}
            <div style={{ display:'flex', gap:4, padding:3, borderRadius:8,
              background:'rgba(255,255,255,.04)', border:'1px solid var(--app-border)' }}>
              {['Todos', ...PLATAFORMAS].map(p => (
                <FilterPill key={p} label={p} active={platFilter===p}
                  color={PLAT_COLOR[p]} onClick={() => setPlatFilter(p)}/>
              ))}
            </div>

{/* Filtro responsável */}
            <div style={{ display:'flex', gap:4 }}>
              {['Todos', ...RESPONSAVEIS].map(r => (
                <FilterPill key={r} label={r} active={respFilter===r}
                  color={r==='Felipe'?'#eaaa41':r==='Amanda'?'#60a5fa':null}
                  onClick={() => setRespFilter(r)}/>
              ))}
            </div>

<Btn variant="primary" size="sm" icon="plus"
              onClick={() => setModal({ item: null })}>
              Novo
            </Btn>
          </div>
        }/>

{/* Board kanban horizontal */}
      <div style={{ flex:1, display:'flex', gap:14, padding:'16px 24px',
        overflowX:'auto', overflowY:'hidden', minHeight:0, alignItems:'stretch' }}>
        {STATUS_COLS.map(col => (
          <OrgColumn
            key={col}
            col={col}
            items={filtered.filter(i => i.status === col)}
            onEdit={item => setModal({ item })}
            onDelete={handleDelete}
            onStatusChange={handleStatusChange}
            onNew={status => setModal({ item: { status } })}/>
        ))}
      </div>
    </div>
  );
}

window.OrganicoScreen = OrganicoScreen;