/* BAN YARO — Social Media Manager */
window.Page_social = (() => {
let _el, _state;
let _breeds = [];
let _contents = [];
let _activeTab = 'archiv';
const _STATUS_LABEL = {
idea: 'Idee', draft: 'Entwurf', scheduled: 'Geplant',
published: 'Veröffentlicht', archived: 'Archiviert',
};
const _STATUS_COLOR = {
idea: 'var(--c-text-muted)', draft: 'var(--c-warning)',
scheduled: 'var(--c-primary)', published: 'var(--c-success)',
archived: 'var(--c-text-muted)',
};
const _FORMAT_ICON = { reel: 'film-strip', story: 'circle', post: 'image', carousel: 'images' };
const _PLATFORM_ICON = { tiktok: 'music-notes-plus', instagram: 'instagram-logo', both: 'share-network' };
async function init(el, state) {
_el = el; _state = state;
_el.innerHTML = UI.skeleton(3);
_breeds = await API.get('/social/breeds').catch(() => []);
await _render();
}
function refresh() { if (_el) _render(); }
async function _render() {
_el.innerHTML = `
Social Media Manager
${['archiv','generator','bewerten'].map(t => `
`).join('')}
`;
_el.querySelectorAll('.sm-tab').forEach(btn =>
btn.addEventListener('click', () => { _activeTab = btn.dataset.tab; _render(); })
);
const cont = _el.querySelector('#sm-content');
if (_activeTab === 'archiv') await _renderArchiv(cont);
if (_activeTab === 'generator') _renderGenerator(cont);
if (_activeTab === 'bewerten') _renderBewerten(cont);
}
// ---------------------------------------------------------------
// ARCHIV
// ---------------------------------------------------------------
async function _renderArchiv(el) {
el.innerHTML = UI.skeleton(2);
const statusFilter = ['alle','idea','draft','scheduled','published','archived'];
let currentFilter = 'alle';
async function load(filter) {
currentFilter = filter;
const url = filter === 'alle' ? '/social/content' : `/social/content?status=${filter}`;
_contents = await API.get(url).catch(() => []);
renderList();
}
function renderList() {
el.innerHTML = `
${statusFilter.map(s => `
`).join('')}
${_contents.length === 0
? UI.emptyState({icon:'instagram-logo', title:'Noch keine Inhalte',
text:'Erstelle deinen ersten Content-Vorschlag im Tab "Idee generieren".'})
: `
${_contents.map(_renderCard).join('')}
`}`;
el.querySelectorAll('[data-filter]').forEach(btn =>
btn.addEventListener('click', () => load(btn.dataset.filter))
);
el.querySelectorAll('.sm-status-btn').forEach(btn =>
btn.addEventListener('click', async () => {
const {id, status} = btn.dataset;
await API.patch(`/social/content/${id}`, {status});
await load(currentFilter);
})
);
el.querySelectorAll('.sm-delete-btn').forEach(btn =>
btn.addEventListener('click', async () => {
if (!window.confirm('Eintrag löschen?')) return;
await API.delete(`/social/content/${btn.dataset.id}`);
await load(currentFilter);
})
);
el.querySelectorAll('.sm-expand-btn').forEach(btn =>
btn.addEventListener('click', () => {
const detail = el.querySelector(`#sm-detail-${btn.dataset.id}`);
if (detail) detail.style.display = detail.style.display === 'none' ? '' : 'none';
})
);
}
await load('alle');
}
function _renderCard(c) {
const score = c.ai_score ? '⭐'.repeat(c.ai_score) : '';
const unsplashUrl = c.unsplash_query
? `https://unsplash.com/s/photos/${encodeURIComponent(c.unsplash_query)}`
: null;
const nextStatuses = {
idea: ['draft','archived'], draft: ['scheduled','archived'],
scheduled: ['published','draft'], published: ['archived'], archived: ['idea'],
}[c.status] || [];
return `
${_STATUS_LABEL[c.status]||c.status}
${score ? `${score}` : ''}
${c.created_at?.slice(0,10)||''}
${_esc(c.topic)}
${c.hook ? `
🎣 ${_esc(c.hook)}
` : ''}
${c.caption ? `
Caption
${_esc(c.caption)}
` : ''}
${c.hashtags ? `
Hashtags
${c.hashtags.split(',').map(h=>`#${h.trim()}`).join(' ')}
` : ''}
${c.cta ? `
Call-to-Action
${_esc(c.cta)}
` : ''}
${c.visual_brief ? `
Visual Brief
${_esc(c.visual_brief)}
` : ''}
${c.image_prompt ? `
DALL-E / Midjourney Prompt
${_esc(c.image_prompt)}
` : ''}
${c.canva_notes ? `
Canva-Tipps
${_esc(c.canva_notes)}
` : ''}
${c.script ? `
Video-Skript
${_esc(c.script)}
` : ''}
${unsplashUrl ? `
` : ''}
${c.notes ? `
Notizen / Feedback
${_esc(c.notes)}
` : ''}
${nextStatuses.length ? `
${nextStatuses.map(s => `
`).join('')}
` : ''}
`;
}
// ---------------------------------------------------------------
// GENERATOR
// ---------------------------------------------------------------
function _renderGenerator(el) {
el.innerHTML = `
`;
_el.querySelector('#sm-gen-btn').addEventListener('click', async () => {
const topic = _el.querySelector('#sm-topic').value.trim();
if (!topic) { UI.toast('Bitte ein Thema eingeben.', 'warning'); return; }
const btn = _el.querySelector('#sm-gen-btn');
const res = _el.querySelector('#sm-gen-result');
btn.disabled = true;
btn.textContent = 'Generiere…';
res.innerHTML = 'KI denkt nach… (~15s)
';
try {
const data = await API.post('/social/generate', {
platform: _el.querySelector('#sm-platform').value,
format: _el.querySelector('#sm-format').value,
topic,
breed_id: parseInt(_el.querySelector('#sm-breed').value) || null,
});
res.innerHTML = `
✓ Gespeichert im Archiv (Score: ${'⭐'.repeat(data.ai_score||0)})
${_renderCard(data)}`;
res.querySelectorAll('.sm-expand-btn').forEach(btn => {
const detail = res.querySelector(`#sm-detail-${btn.dataset.id}`);
btn.addEventListener('click', () => {
if (detail) detail.style.display = detail.style.display==='none' ? '' : 'none';
});
});
_el.querySelector('#sm-topic').value = '';
} catch(e) {
res.innerHTML = `${UI.icon('warning')} Fehler: ${_esc(e.message||String(e))}
`;
} finally {
btn.disabled = false;
btn.innerHTML = `${UI.icon('sparkle')} Content generieren`;
}
});
}
// ---------------------------------------------------------------
// BEWERTEN
// ---------------------------------------------------------------
function _renderBewerten(el) {
el.innerHTML = `
Füge deinen eigenen Entwurf ein — die KI bewertet ihn, verbessert Caption,
Hashtags und gibt dir einen Visual Brief dazu.
`;
_el.querySelector('#sm-eval-btn').addEventListener('click', async () => {
const draft = _el.querySelector('#sm-eval-draft').value.trim();
if (!draft) { UI.toast('Bitte einen Entwurf eingeben.', 'warning'); return; }
const btn = _el.querySelector('#sm-eval-btn');
const res = _el.querySelector('#sm-eval-result');
btn.disabled = true;
btn.textContent = 'Analysiere…';
res.innerHTML = 'KI analysiert… (~10s)
';
try {
const data = await API.post('/social/evaluate', {
platform: _el.querySelector('#sm-eval-platform').value,
format: _el.querySelector('#sm-eval-format').value,
draft,
});
res.innerHTML = `
${data.notes ? `
KI-Feedback
${_esc(data.notes)}
` : ''}
${_renderCard(data)}`;
res.querySelectorAll('.sm-expand-btn').forEach(btn => {
const detail = res.querySelector(`#sm-detail-${btn.dataset.id}`);
btn.addEventListener('click', () => {
if (detail) detail.style.display = detail.style.display==='none' ? '' : 'none';
});
});
} catch(e) {
res.innerHTML = `${UI.icon('warning')} Fehler: ${_esc(e.message||String(e))}
`;
} finally {
btn.disabled = false;
btn.innerHTML = `${UI.icon('magnifying-glass')} Bewerten & verbessern`;
}
});
}
function _esc(s) {
if (!s) return '';
return String(s)
.replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"');
}
// CSS
const style = document.createElement('style');
style.textContent = `.sm-label{font-size:var(--text-xs);font-weight:600;
color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.5px;
margin-bottom:3px;}`;
document.head.appendChild(style);
return { init, refresh };
})();