// page-sync.jsx — Sincronizações manuais com Edge Functions reais

const { useState: usSync, useEffect: ueSync } = React;

const SYNC_CARDS = [
  {
    id: 'orders',
    fn: 'syncOrders',
    label: 'Histórico de pedidos',
    desc: 'Sincroniza todos os pedidos históricos da loja com o ActiveCampaign. Use após o primeiro onboarding ou para reprocessar dados.',
    icon: 'lucide:shopping-bag',
    cost: '1 / página de 50',
  },
  {
    id: 'catalog',
    fn: 'syncCatalog',
    label: 'Catálogo de produtos',
    desc: 'Busca todos os produtos paginados e faz upsert no ActiveCampaign via GraphQL. Ideal para manter produtos sincronizados.',
    icon: 'lucide:package',
    cost: '1',
  },
  {
    id: 'leads',
    fn: 'syncLeads',
    label: 'Novos leads',
    desc: 'Compara clientes da Nuvemshop com contatos do ActiveCampaign e adiciona os novos, gerando cupom exclusivo quando aplicável.',
    icon: 'lucide:user-plus',
    cost: '1',
  },
];

function PageSync({ tenant }) {
  const [running, setRunning]   = usSync(null);
  const [results, setResults]   = usSync({});
  const [jobs, setJobs]         = usSync([]);

  ueSync(() => {
    if (!tenant?.id) return;
    loadJobs();
  }, [tenant?.id]);

  async function loadJobs() {
    try {
      const { data } = await SB.client
        .from('sync_jobs')
        .select('*')
        .eq('tenant_id', tenant.id)
        .order('created_at', { ascending: false })
        .limit(10);
      setJobs(data ?? []);
    } catch {}
  }

  async function handleSync(card) {
    if (!tenant?.id) return;
    setRunning(card.id);
    setResults(r => ({ ...r, [card.id]: null }));
    try {
      const res = await SB[card.fn](tenant.id);
      setResults(r => ({ ...r, [card.id]: { ok: true, ...res } }));
      await loadJobs();
    } catch (e) {
      setResults(r => ({ ...r, [card.id]: { ok: false, error: 'Erro ao executar sync.' } }));
    } finally {
      setRunning(null);
    }
  }

  return (
    <div className="fade-up">
      <div className="page-head">
        <div>
          <h1 className="page-title">Sincronizações</h1>
          <p className="page-sub">
            Backfills e syncs manuais. Webhooks rodam automaticamente — use isto para dados históricos ou forçar atualização.
          </p>
        </div>
      </div>

      {/* Cards de sync */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:'var(--gap)', marginBottom:'var(--gap)' }}>
        {SYNC_CARDS.map(card => {
          const res = results[card.id];
          const isRunning = running === card.id;
          return (
            <div key={card.id} className="card" style={{ display:'flex', flexDirection:'column' }}>
              <div className="row" style={{ justifyContent:'space-between', marginBottom:12 }}>
                <div style={{ width:40, height:40, borderRadius:10, background:'var(--accent-soft)', color:'var(--accent)', display:'grid', placeItems:'center' }}>
                  <iconify-icon icon={card.icon} style={{ fontSize:20 }} />
                </div>
                <span className="tag">{card.cost} crédito(s)</span>
              </div>
              <div style={{ fontSize:15, fontWeight:700, marginBottom:4 }}>{card.label}</div>
              <p className="secondary" style={{ fontSize:12.5, marginBottom:14, flex:1 }}>{card.desc}</p>

              {res && (
                <div style={{
                  marginBottom:12, padding:'8px 10px', borderRadius:'var(--r-md)', fontSize:12,
                  background: res.ok ? 'var(--ok-soft)' : 'var(--err-soft)',
                  border: `1px solid ${res.ok ? 'var(--ok)' : 'var(--err)'}`,
                  color: res.ok ? 'var(--ok)' : 'var(--err)',
                }}>
                  {res.ok
                    ? <span><iconify-icon icon="lucide:check-circle-2" /> Concluído · {res.synced ?? 0} itens</span>
                    : <span><iconify-icon icon="lucide:alert-triangle" /> {res.error}</span>}
                </div>
              )}

              <button className="btn btn-primary" style={{ justifyContent:'center' }}
                onClick={() => handleSync(card)} disabled={isRunning || !!running}>
                {isRunning
                  ? <><iconify-icon icon="lucide:loader-circle" style={{ animation:'spin 1s linear infinite' }} /> Executando…</>
                  : <><iconify-icon icon="lucide:play" />Sincronizar agora</>}
              </button>
            </div>
          );
        })}
      </div>

      {/* Crons + histórico de jobs */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'var(--gap)' }}>
        {/* Cron jobs */}
        <div className="card">
          <div className="row" style={{ justifyContent:'space-between', marginBottom:12 }}>
            <div style={{ fontSize:14, fontWeight:700 }}>Cron jobs ativos</div>
            <span className="tag tag-ok tag-dot">Automáticos</span>
          </div>
          <div style={{ display:'grid', gap:6 }}>
            {[
              { fn:'fn-abandoned-carts',    schedule:'A cada 30 min' },
              { fn:'fn-sync-leads',         schedule:'Diário · 02:00' },
              { fn:'fn-sync-catalog',       schedule:'Semanal · Dom 04:00' },
              { fn:'cleanup-execution-logs',schedule:'Diário · 03:00 (TTL 15d)' },
            ].map(c => (
              <div key={c.fn} className="row" style={{ padding:'10px 12px', borderRadius:'var(--r-md)', background:'var(--bg-base)', gap:14 }}>
                <iconify-icon icon="lucide:clock" style={{ color:'var(--text-muted)' }} />
                <span className="strong mono" style={{ flex:1, fontSize:12 }}>{c.fn}</span>
                <span className="muted" style={{ fontSize:11 }}>{c.schedule}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Histórico de sync jobs */}
        <div className="card" style={{ padding:0 }}>
          <div style={{ padding:'var(--card-pad)', fontSize:14, fontWeight:700, borderBottom:'1px solid var(--border-subtle)' }}>
            Histórico de syncs
          </div>
          <div style={{ maxHeight:220, overflow:'auto' }}>
            {jobs.length === 0
              ? <div style={{ padding:20, textAlign:'center', color:'var(--text-muted)', fontSize:13 }}>Nenhum sync executado ainda.</div>
              : jobs.map(j => (
                <div key={j.id} className="row" style={{ padding:'10px var(--card-pad)', borderBottom:'1px solid var(--border-subtle)', gap:10 }}>
                  <span style={{
                    width:8, height:8, borderRadius:'50%', flexShrink:0,
                    background: j.status==='completed'?'var(--ok)':j.status==='failed'?'var(--err)':'var(--warn)',
                  }} />
                  <span className="strong" style={{ fontSize:12, flex:1 }}>{j.job_type}</span>
                  <span className="muted" style={{ fontSize:11 }}>{j.rows_processed} itens</span>
                  <span className="muted mono" style={{ fontSize:10 }}>
                    {j.finished_at
                      ? new Date(j.finished_at).toLocaleTimeString('pt-BR',{hour:'2-digit',minute:'2-digit'})
                      : 'em andamento…'}
                  </span>
                </div>
              ))
            }
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PageSync });