function FreeSeoLeadOpsView() {
  const api = window.JS_API.freeSeo.leadOps;
  const [jobs, setJobs] = React.useState([]);
  const [stats, setStats] = React.useState({});
  const [templates, setTemplates] = React.useState([]);
  const [exportsList, setExportsList] = React.useState([]);
  const [providers, setProviders] = React.useState([]);
  const [message, setMessage] = React.useState('');
  async function refresh() {
    setStats(await api.queueStats());
    setJobs(await api.listJobs());
    setTemplates(await api.crmTemplates());
    setExportsList(await api.listCrmExports());
    setProviders(await api.sidecarProviders());
  }
  React.useEffect(() => { refresh().catch(e => setMessage(e.message)); }, []);
  async function createSampleJob() { await api.createJob({ type: 'lead_discovery', title: 'Manual lead discovery handoff', payload: { manualLeads: [] } }); await refresh(); }
  async function tick() { await api.tick(); await refresh(); }
  async function cancelJob(id) { await api.cancelJob(id); await refresh(); }
  async function retryJob(id) { await api.retryJob(id); await refresh(); }
  async function createExport(body) { await api.createCrmExport(body); await refresh(); }
  async function download(id, file) { const result = await api.downloadCrmExport(id, { file }); setMessage(result.content); }
  async function testSidecar(provider) { const result = await api.testSidecar({ provider, force: true }); setMessage(JSON.stringify(result, null, 2)); }
  async function renderCompose(provider) { const result = await api.renderCompose({ provider, force: true }); setMessage(result.compose); }
  return (
    <main className="free-seo-lab-page">
      <header><h1>Lead Ops</h1><p>Background jobs, CRM export, and optional self-host sidecars for lead discovery.</p><button onClick={createSampleJob}>Create sample queue job</button></header>
      {message && <pre className="free-seo-output">{message}</pre>}
      <LeadOpsQueuePanel jobs={jobs} stats={stats} onTick={tick} onCancel={cancelJob} onRetry={retryJob} />
      <CrmExportPanel templates={templates} exports={exportsList} onCreate={createExport} onDownload={download} />
      <SidecarProviderPanel providers={providers} onTest={testSidecar} onRender={renderCompose} />
    </main>
  );
}
window.FreeSeoLeadOpsView = FreeSeoLeadOpsView;