// PATCH v2: añadir campañas email manuales
// (sobreescribe renderPlanRow y añade funciones de campañas)
// ============================================================

// Estado adicional para el formulario "Nueva campaña"
if(state.plan && !state.plan.addingCampaign){
  state.plan.addingCampaign = new Set();
}

function renderPlanRow(a){
  const proj = PLAN_PROJECTS[a.project_code] || { label: a.project_code || '—', color: '#9ca3af' };
  const ch   = PLAN_CHANNELS[a.channel] || { label: a.channel, icon:'•', color:'#f1f5f9', fg:'#475569' };
  const linked = Array.isArray(a.linked_automations) ? a.linked_automations : [];
  const linkedCampaigns = Array.isArray(a.linked_manual_campaigns) ? a.linked_manual_campaigns : [];
  const isOpen = state.plan.expanded.has(a.id);
  const isAddingCamp = state.plan.addingCampaign && state.plan.addingCampaign.has(a.id);
  const reach = +a.total_reach || 0;
  const totalLinks = linked.length + linkedCampaigns.length;
  const dateStr = `${String(a.day).padStart(2,'0')} ${PLAN_MONTHS[a.month]}`;

  let expandedHtml = '';
  if(isOpen){
    expandedHtml = `
      <div class="mt-2 pt-2 pl-6 pr-2 pb-2 border-t border-slate-100 bg-slate-50/50">
        ${a.note ? `<div class="text-xs text-slate-600 mb-2"><b>Nota:</b> ${esc(a.note)}</div>` : ''}

        <div class="text-xs font-semibold text-slate-600 mb-1">Automations vinculadas (${linked.length})</div>
        ${linked.length ? `
          <div class="space-y-1 mb-2">
            ${linked.map(l => `
              <div class="flex items-center gap-2 text-xs bg-white rounded p-1.5 border border-slate-200">
                <span class="flex-1">${esc(l.name)}</span>
                <span class="badge" style="background:#dbeafe;color:#1e40af">${(+l.completed||0).toLocaleString('es-ES')} ok</span>
                ${l.pending ? `<span class="badge" style="background:#fef3c7;color:#92400e">${l.pending} pending</span>` : ''}
                <button class="btn-icon" title="Desvincular" onclick="planUnlink('${a.id}', ${l.id})">✕</button>
              </div>
            `).join('')}
          </div>
        ` : '<div class="text-xs text-slate-400 mb-2">Sin automations vinculadas.</div>'}
        <div class="flex items-center gap-2 mb-3">
          <select id="plan_sel_${a.id}" class="input text-xs flex-1">
            <option value="">— Vincular una automation —</option>
            ${planAutoOptions(a)}
          </select>
          <button class="btn-ghost text-xs" onclick="planLink('${a.id}')">Vincular</button>
        </div>

        <div class="text-xs font-semibold text-slate-600 mb-1">Campañas email vinculadas (${linkedCampaigns.length})</div>
        ${linkedCampaigns.length ? `
          <div class="space-y-1 mb-2">
            ${linkedCampaigns.map(c => `
              <div class="flex items-center gap-2 text-xs bg-white rounded p-1.5 border border-slate-200">
                <span class="flex-1">
                  ${esc(c.name)}${c.sent_date ? ` <span class="text-slate-400">· ${c.sent_date}</span>` : ''}
                  ${c.clientify_id ? ` <a href="https://new.clientify.com/marketing/email-campaigns/campaign-sheet/${c.clientify_id}/" target="_blank" class="text-blue-600 hover:underline" onclick="event.stopPropagation()">↗</a>` : ''}
                </span>
                <span class="badge" style="background:#dbeafe;color:#1e40af">${(+c.recipients||0).toLocaleString('es-ES')} env.</span>
                ${c.unique_opens ? `<span class="badge" style="background:#d1fae5;color:#065f46">${(+c.unique_opens).toLocaleString('es-ES')} ab.</span>` : ''}
                ${c.unique_clicks ? `<span class="badge" style="background:#ede9fe;color:#5b21b6">${(+c.unique_clicks).toLocaleString('es-ES')} clk</span>` : ''}
                <button class="btn-icon" title="Desvincular" onclick="planUnlinkCampaign('${a.id}', '${c.id}')">✕</button>
              </div>
            `).join('')}
          </div>
        ` : '<div class="text-xs text-slate-400 mb-2">Sin campañas email vinculadas.</div>'}

        ${isAddingCamp ? `
          <div class="bg-white border border-slate-200 rounded p-2 space-y-1.5" onclick="event.stopPropagation()">
            <div class="text-xs font-semibold text-slate-700 mb-1">Nueva campaña email</div>
            <div class="grid grid-cols-2 gap-1.5">
              <input id="camp_${a.id}_name" class="input text-xs" placeholder="Nombre (req.)" value="${esc(a.title)}">
              <input id="camp_${a.id}_date" type="date" class="input text-xs" value="${new Date().toISOString().slice(0,10)}">
              <input id="camp_${a.id}_clientify" class="input text-xs" placeholder="ID Clientify (opc.) — el nº de la URL">
              <input id="camp_${a.id}_recipients" type="number" class="input text-xs" placeholder="Enviadas">
              <input id="camp_${a.id}_opens" type="number" class="input text-xs" placeholder="Aperturas (total)">
              <input id="camp_${a.id}_unique_opens" type="number" class="input text-xs" placeholder="Aperturas únicas">
              <input id="camp_${a.id}_clicks" type="number" class="input text-xs" placeholder="Clics (total)">
              <input id="camp_${a.id}_unique_clicks" type="number" class="input text-xs" placeholder="Clics únicos">
              <input id="camp_${a.id}_unsubs" type="number" class="input text-xs" placeholder="Bajas">
              <input id="camp_${a.id}_bounces" type="number" class="input text-xs" placeholder="Bounces">
            </div>
            <textarea id="camp_${a.id}_note" class="input text-xs w-full" rows="1" placeholder="Nota (opc.)"></textarea>
            <div class="flex gap-2 justify-end">
              <button class="btn-ghost text-xs" onclick="planHideAddCampaign('${a.id}')">Cancelar</button>
              <button class="btn-primary text-xs" onclick="planSaveCampaign('${a.id}')">Guardar y vincular</button>
            </div>
          </div>
        ` : `
          <button class="btn-ghost text-xs" onclick="event.stopPropagation(); planShowAddCampaign('${a.id}')">+ Añadir campaña email</button>
        `}
      </div>
    `;
  }

  return `
    <div class="border border-slate-100 rounded" data-aid="${a.id}">
      <div class="flex items-center gap-2 py-1.5 px-2 cursor-pointer hover:bg-slate-50" onclick="planToggle('${a.id}')">
        <input type="checkbox" ${a.done?'checked':''} onclick="event.stopPropagation(); planToggleDone('${a.id}', this.checked)" class="w-4 h-4 rounded border-slate-300">
        <span class="text-[10px] text-slate-500 w-14">${dateStr}</span>
        <span class="badge" style="background:${ch.color};color:${ch.fg}">${ch.icon} ${ch.label}</span>
        <span class="text-[10px] font-semibold" style="color:${proj.color}">${proj.label}</span>
        <span class="flex-1 text-xs ${a.done?'line-through text-slate-400':'text-slate-800'}">${esc(a.title)}</span>
        ${totalLinks ? `<span class="text-[10px] text-slate-500">🔗 ${totalLinks} · ${reach.toLocaleString('es-ES')}</span>` : ''}
        ${a.kpi ? `<span class="text-[10px] text-slate-400 italic max-w-[180px] truncate" title="${esc(a.kpi)}">${esc(a.kpi)}</span>` : ''}
        <span class="text-slate-400 text-xs">${isOpen?'▾':'▸'}</span>
      </div>
      ${expandedHtml}
    </div>
  `;
}

function planShowAddCampaign(aid){
  if(!state.plan.addingCampaign) state.plan.addingCampaign = new Set();
  state.plan.addingCampaign.add(aid);
  if(!state.plan.expanded.has(aid)) state.plan.expanded.add(aid);
  drawPlan();
}

function planHideAddCampaign(aid){
  if(state.plan.addingCampaign) state.plan.addingCampaign.delete(aid);
  drawPlan();
}

async function planSaveCampaign(aid){
  const get = (k) => document.getElementById(`camp_${aid}_${k}`);
  const v = (k) => get(k) ? get(k).value : '';
  const numv = (k) => { const x = +v(k); return isNaN(x) ? null : x; };

  const name = v('name').trim();
  if(!name){ toast('Falta el nombre','error'); return; }

  const action = state.plan.actions.find(x => x.id === aid);

  const campaign = {
    name,
    sent_date: v('date') || null,
    clientify_id: numv('clientify'),
    recipients: numv('recipients') || 0,
    opens: numv('opens') || 0,
    unique_opens: numv('unique_opens') || 0,
    clicks: numv('clicks') || 0,
    unique_clicks: numv('unique_clicks') || 0,
    unsubscribes: numv('unsubs') || 0,
    bounces: numv('bounces') || 0,
    note: v('note') || null,
    project_code: action ? action.project_code : null
  };

  const { data: ins, error: e1 } = await sb
    .from('email_campaigns_manual')
    .insert(campaign)
    .select()
    .single();
  if(e1){ toast('Error guardando campaña: '+e1.message,'error'); return; }

  const { error: e2 } = await sb.from('action_clientify_links').insert({
    action_id: aid,
    manual_campaign_id: ins.id,
    link_type: 'manual'
  });
  if(e2){ toast('Campaña creada pero error al vincular: '+e2.message,'error'); }

  if(state.plan.addingCampaign) state.plan.addingCampaign.delete(aid);
  await loadPlan();
  drawPlan();
  toast('Campaña creada y vinculada','success');
}

async function planUnlinkCampaign(aid, manualId){
  if(!confirm('¿Desvincular esta campaña? (la campaña no se borra, solo se desvincula de esta acción)')) return;
  const { error } = await sb.from('action_clientify_links')
    .delete()
    .eq('action_id', aid)
    .eq('manual_campaign_id', manualId);
  if(error){ toast('Error: '+error.message,'error'); return; }
  await loadPlan();
  drawPlan();
  toast('Desvinculada','success');
}

// =====================================================================
// PATCH v3 — Vínculo de campañas Clientify a acciones de marketing
// =====================================================================

async function planLoadClientifyCampaigns(){
  if(state.plan.clientifyCampaigns) return;
  try {
    const { data, error } = await sb
      .from('clientify_campaigns')
      .select('id,name,subject,sent_date,sent,opens,clicks,opens_percent,clicks_percent,project_code_guess,from_name')
      .order('sent_date', { ascending: false, nullsFirst: false });
    if(error) throw error;
    state.plan.clientifyCampaigns = data || [];
    console.log(`[plan] cargadas ${state.plan.clientifyCampaigns.length} campañas Clientify`);
  } catch(e){
    console.error('[plan] error cargando campañas Clientify:', e);
    state.plan.clientifyCampaigns = [];
  }
}

const _origLoadPlan_v3 = window.loadPlan;
if(typeof _origLoadPlan_v3 === 'function'){
  window.loadPlan = async function(){
    await _origLoadPlan_v3.apply(this, arguments);
    await planLoadClientifyCampaigns();
  };
}

function planClientifyOptions(action){
  const list = state.plan.clientifyCampaigns || [];
  const linked = new Set((action.linked_clientify_campaigns||[]).map(l=>l.id));
  const all = list.filter(c => !linked.has(c.id));
  const sameProj = all.filter(c => c.project_code_guess === action.project_code);
  const other    = all.filter(c => c.project_code_guess !== action.project_code);
  const opt = (c) => {
    const date = c.sent_date ? c.sent_date.slice(0,10) : 'sin fecha';
    return `<option value="${c.id}">${esc(c.name)} · ${date} · ${c.sent||0} env</option>`;
  };
  let html = '';
  if(sameProj.length){
    html += `<optgroup label="Mismo proyecto — ${action.project_code||'—'} (${sameProj.length})">${sameProj.map(opt).join('')}</optgroup>`;
  }
  html += `<optgroup label="Resto de campañas (${other.length})">${other.map(opt).join('')}</optgroup>`;
  return html;
}

async function planLinkCampaign(aid){
  const sel = document.getElementById(`plan_sel_camp_${aid}`);
  const cid = sel && sel.value;
  if(!cid){ toast('Elige una campaña','error'); return; }
  const { error } = await sb.from('action_clientify_links').insert({
    action_id: aid,
    clientify_campaign_id: +cid,
    link_type: 'clientify'
  });
  if(error){ toast('Error al vincular: '+error.message,'error'); return; }
  await loadPlan();
  drawPlan();
  toast('Campaña vinculada','success');
}

async function planUnlinkCampaign(aid, cid){
  if(!confirm('¿Desvincular esta campaña?')) return;
  const { error } = await sb.from('action_clientify_links')
    .delete()
    .eq('action_id', aid)
    .eq('clientify_campaign_id', cid);
  if(error){ toast('Error: '+error.message,'error'); return; }
  await loadPlan();
  drawPlan();
  toast('Desvinculada','success');
}

function renderPlanRow(a){
  const proj = PLAN_PROJECTS[a.project_code] || { label: a.project_code || '—', color: '#9ca3af' };
  const ch   = PLAN_CHANNELS[a.channel] || { label: a.channel, icon:'•', color:'#f1f5f9', fg:'#475569' };
  const linked      = Array.isArray(a.linked_automations) ? a.linked_automations : [];
  const linkedCamps = Array.isArray(a.linked_clientify_campaigns) ? a.linked_clientify_campaigns : [];
  const isOpen = state.plan.expanded.has(a.id);
  const reach = +a.total_reach || 0;
  const dateStr = `${String(a.day).padStart(2,'0')} ${PLAN_MONTHS[a.month]}`;

  let expandedHtml = '';
  if(isOpen){
    const campsHtml = linkedCamps.length ? `
      <div class="space-y-1 mb-2">
        ${linkedCamps.map(c => {
          const opens = +c.opens || 0, clicks = +c.clicks || 0, sent = +c.sent || 0;
          const op = sent ? Math.round(opens*100/sent) : 0;
          const cp = sent ? Math.round(clicks*100/sent) : 0;
          const date = c.sent_date ? c.sent_date.slice(0,10) : '';
          return `
            <div class="flex items-center gap-2 text-xs bg-white rounded p-1.5 border border-slate-200">
              <span class="flex-1 truncate" title="${esc(c.subject||c.name)}">📧 ${esc(c.name)}${date?` <span class="text-slate-400">· ${date}</span>`:''}</span>
              <span class="badge" style="background:#e0f2fe;color:#075985" title="Enviados">${sent.toLocaleString('es-ES')}</span>
              <span class="badge" style="background:#ecfdf5;color:#065f46" title="Aperturas">${opens.toLocaleString('es-ES')} · ${op}%</span>
              <span class="badge" style="background:#fef3c7;color:#92400e" title="Clics">${clicks.toLocaleString('es-ES')} · ${cp}%</span>
              <button class="btn-icon" title="Desvincular" onclick="planUnlinkCampaign('${a.id}', ${c.id})">✕</button>
            </div>
          `;
        }).join('')}
      </div>
    ` : '<div class="text-xs text-slate-400 mb-2">Sin campañas Clientify vinculadas.</div>';

    expandedHtml = `
      <div class="mt-2 pt-2 pl-6 pr-2 pb-2 border-t border-slate-100 bg-slate-50/50">
        ${a.note ? `<div class="text-xs text-slate-600 mb-2"><b>Nota:</b> ${esc(a.note)}</div>` : ''}
        <div class="text-xs font-semibold text-slate-600 mb-1">Automations vinculadas (${linked.length})</div>
        ${linked.length ? `
          <div class="space-y-1 mb-2">
            ${linked.map(l => `
              <div class="flex items-center gap-2 text-xs bg-white rounded p-1.5 border border-slate-200">
                <span class="flex-1">${esc(l.name)}</span>
                <span class="badge" style="background:#dbeafe;color:#1e40af">${(+l.completed||0).toLocaleString('es-ES')} ok</span>
                ${l.pending ? `<span class="badge" style="background:#fef3c7;color:#92400e">${l.pending} pending</span>` : ''}
                <button class="btn-icon" title="Desvincular" onclick="planUnlink('${a.id}', ${l.id})">✕</button>
              </div>
            `).join('')}
          </div>
        ` : '<div class="text-xs text-slate-400 mb-2">Sin automations vinculadas.</div>'}
        <div class="flex items-center gap-2 mb-3">
          <select id="plan_sel_${a.id}" class="input text-xs flex-1">
            <option value="">— Vincular una automation —</option>
            ${planAutoOptions(a)}
          </select>
          <button class="btn-ghost text-xs" onclick="planLink('${a.id}')">Vincular</button>
        </div>
        <div class="text-xs font-semibold text-slate-600 mb-1">Campañas Clientify vinculadas (${linkedCamps.length})</div>
        ${campsHtml}
        <div class="flex items-center gap-2">
          <select id="plan_sel_camp_${a.id}" class="input text-xs flex-1">
            <option value="">— Vincular una campaña Clientify —</option>
            ${planClientifyOptions(a)}
          </select>
          <button class="btn-ghost text-xs" onclick="planLinkCampaign('${a.id}')">Vincular</button>
        </div>
      </div>
    `;
  }

  const totalLinks = linked.length + linkedCamps.length;
  return `
    <div class="border border-slate-100 rounded" data-aid="${a.id}">
      <div class="flex items-center gap-2 py-1.5 px-2 cursor-pointer hover:bg-slate-50" onclick="planToggle('${a.id}')">
        <input type="checkbox" ${a.done?'checked':''} onclick="event.stopPropagation(); planToggleDone('${a.id}', this.checked)" class="w-4 h-4 rounded border-slate-300">
        <span class="text-[10px] text-slate-500 w-14">${dateStr}</span>
        <span class="badge" style="background:${ch.color};color:${ch.fg}">${ch.icon} ${ch.label}</span>
        <span class="text-[10px] font-semibold" style="color:${proj.color}">${proj.label}</span>
        <span class="flex-1 text-xs ${a.done?'line-through text-slate-400':'text-slate-800'}">${esc(a.title)}</span>
        ${totalLinks ? `<span class="text-[10px] text-slate-500">🔗 ${totalLinks} · ${reach.toLocaleString('es-ES')}</span>` : ''}
        ${a.kpi ? `<span class="text-[10px] text-slate-400 italic max-w-[180px] truncate" title="${esc(a.kpi)}">${esc(a.kpi)}</span>` : ''}
        <span class="text-slate-400 text-xs">${isOpen?'▾':'▸'}</span>
      </div>
      ${expandedHtml}
    </div>
  `;
}
</script>
</body>
</html>