// Analysis Progress Screen connected to async /api/discovery/jobs function AnalysisScreen({ payload, onRun, onComplete, onBack }) { const STEPS = [ { phase: 'validating_configuration', label: 'Konfiguration validieren', detail: 'Backend prüft bestätigten Payload und Run-Modus.' }, { phase: 'gemini_campaign_analysis', label: 'Kampagne analysieren', detail: 'Gemini extrahiert Produkt, Zielgruppe, Region und Follower-Bounds.' }, { phase: 'pre_scrape_planning', label: 'Suchstrategie vorbereiten', detail: 'Keywords und Suchstrategie werden erzeugt.' }, { phase: 'scrapecreators_and_scoring', label: 'Creator suchen & scoren', detail: 'ScrapeCreators-Kandidaten und Gemini-Scoring laufen.' }, { phase: 'scrapecreators_scoring_and_socialblade', label: 'Creator + Health prüfen', detail: 'Vollständiger Lauf inklusive SocialBlade-Healthchecks.' }, { phase: 'writing_report', label: 'Report speichern', detail: 'Run-ID-Report wird im Backend persistiert.' }, { phase: 'complete', label: 'Abgeschlossen', detail: 'Der echte Backend-Report ist bereit.' }, ]; const phaseIndex = (phase) => { if (!phase) return 0; const idx = STEPS.findIndex((step) => step.phase === phase); if (idx >= 0) return idx; if (phase === 'queued' || phase === 'starting_pipeline' || phase === 'platform_detection') return phase === 'platform_detection' ? 1 : 0; if (phase === 'failed') return 0; return 0; }; const [currentStep, setCurrentStep] = React.useState(0); const [done, setDone] = React.useState(false); const [error, setError] = React.useState(''); const [job, setJob] = React.useState(null); React.useEffect(() => { let cancelled = false; setCurrentStep(0); setDone(false); setError(''); setJob(null); if (!payload) return; Promise.resolve(onRun(payload, (status) => { if (cancelled) return; setJob(status); setCurrentStep(phaseIndex(status.phase || status.status)); })) .then(() => { if (cancelled) return; setCurrentStep(STEPS.length - 1); setDone(true); }) .catch((err) => { if (cancelled) return; setJob(err.job || null); setError(err.message || 'Analyse fehlgeschlagen'); }); return () => { cancelled = true; }; }, [JSON.stringify(payload)]); const activeStep = STEPS[Math.min(currentStep, STEPS.length - 1)]; const progressPct = error ? 100 : done ? 100 : Math.round((Math.max(0, currentStep) / (STEPS.length - 1)) * 100); return (
{error ? 'Analyse gestoppt' : done ? 'Analyse abgeschlossen' : job?.runId ? 'Analyse läuft' : 'Job wird gestartet'}
{job?.runId ? `Run-ID: ${job.runId}` : payload?.input || 'Kampagne'}
{done &&
} />}>Report ansehen
} {error &&
Zurück
}
{error ? (
{Icons.warn}
Analyse fehlgeschlagen
{error}
) : done ? (
{Icons.check}
Report bereit
Die Backend-Pipeline hat ein echtes Ergebnis geliefert.
) : (
{activeStep.label}
{activeStep.detail}
)}
    {STEPS.map((step, i) => { const isDone = done || i < currentStep; const isActive = !done && !error && i === currentStep; const isPending = !done && i > currentStep; return (
  1. {isDone ? '✓' : i + 1}
    {i < STEPS.length - 1 &&
    }
    {step.label}
    {(isDone || isActive) &&
    {step.detail}
    }
    2. ); })}
{done ? 'Report bereit' : error ? 'Analyse gestoppt' : 'Analyse läuft'}{error ? 'Fehler' : `${progressPct}%`}
); } Object.assign(window, { AnalysisScreen });