Avg. CPC
$${avgCPC.toFixed(2)}
Transactional
${transactionalCount}
`;
const dashboardTableBody = document.getElementById('dashboard-table-body');
dashboardTableBody.innerHTML = keywords.map(k => {
const intentClass = k.intent === 'Transactional' ? 'bg-green-100 text-green-800' : k.intent === 'Commercial' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800';
const compClass = k.competition === 'High' ? 'text-red-600' : k.competition === 'Medium' ? 'text-yellow-600' : 'text-green-600';
return `
| ${k.name} |
${k.volume.toLocaleString()} |
${k.intent} |
${k.competition} |
$${k.cpc.toFixed(2)} |
`;
}).join('');
};
// --- EVENT HANDLERS ---
const handleFindKeywords = () => {
const seed = document.getElementById('seed-keyword-input').value.trim().toLowerCase();
const intentFilter = document.getElementById('filter-intent').value;
const compFilter = document.getElementById('filter-competition').value;
const results = keyword_db.filter(k =>
(k.name.toLowerCase().includes(seed)) &&
(intentFilter === 'any' || k.intent === intentFilter) &&
(compFilter === 'any' || k.competition === compFilter)
);
renderDashboard(results);
};
const handleConfigChange = (e) => {
const input = e.target;
if (!input.dataset.field) return;
const id = parseInt(input.closest('tr').dataset.id);
const field = input.dataset.field;
const value = (input.type === 'number') ? parseFloat(input.value) || 0 : input.value;
const keyword = keyword_db.find(k => k.id === id);
if(keyword) keyword[field] = value;
};
const handleAddKeyword = () => {
const newId = keyword_db.length > 0 ? Math.max(...keyword_db.map(k => k.id)) + 1 : 1;
keyword_db.push({ id: newId, name: "new keyword", volume: 100, intent: "Informational", competition: "Low", cpc: 0.50 });
renderConfigTable();
};
const handleDelete = (e) => {
const btn = e.target.closest('.delete-btn');
if (btn) {
const id = parseInt(btn.closest('tr').dataset.id);
keyword_db = keyword_db.filter(k => k.id !== id);
renderConfigTable();
}
};
const generatePDF = () => {
const pdfContent = document.getElementById('pdf-content');
html2canvas(pdfContent, { scale: 2, useCORS: true }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'l', unit: 'mm', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const imgWidth = pdfWidth - 20;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.setFontSize(22).setFont('helvetica', 'bold').text('Affiliate Keyword Report', pdfWidth / 2, 15, { align: 'center' });
pdf.addImage(imgData, 'PNG', 10, 25, imgWidth, imgHeight);
pdf.save('affiliate-keyword-report.pdf');
});
};
// --- ATTACH LISTENERS ---
document.getElementById('prev-btn').addEventListener('click', () => showTab('dashboard'));
document.getElementById('next-btn').addEventListener('click', () => showTab('config'));
tabButtons.dashboard.addEventListener('click', () => showTab('dashboard'));
tabButtons.config.addEventListener('click', () => showTab('config'));
document.getElementById('find-keywords-btn').addEventListener('click', handleFindKeywords);
document.getElementById('add-keyword-btn').addEventListener('click', handleAddKeyword);
document.getElementById('config-table-body').addEventListener('change', handleConfigChange);
document.getElementById('config-table-body').addEventListener('click', handleDelete);
document.getElementById('download-pdf-btn').addEventListener('click', generatePDF);
// --- INITIAL SETUP ---
showTab('dashboard');
});
