// Campaign Input Screen with token-safe preflight confirmation
function StatusBadge({ status }) {
  const tone = status === 'direct' || status === 'configured' ? 'approve' : status === 'broker' ? 'pending' : 'reject';
  return <Bdg tone={tone} size="sm" variant="soft">{status || 'missing'}</Bdg>;
}

function PreflightPanel({ preflight, payload, loading, error, onConfirm, onReset }) {
  if (loading) return (
    <div style={{ background:'var(--surface-card)', border:'1px solid var(--border)', borderRadius:'var(--radius-lg)', padding:20 }}>
      <div style={{ font:'var(--type-label)', color:'var(--text-strong)' }}>Preflight läuft…</div>
      <div style={{ font:'var(--type-body-sm)', color:'var(--text-secondary)', marginTop:6 }}>Konfiguration wird geprüft. Es werden keine Anbieter-APIs aufgerufen.</div>
    </div>
  );
  if (error) return (
    <div style={{ background:'var(--reject-bg)', border:'1px solid var(--reject-solid)', borderRadius:'var(--radius-lg)', padding:20 }}>
      <div style={{ font:'var(--type-label)', color:'var(--reject-fg)' }}>Preflight fehlgeschlagen</div>
      <div style={{ font:'var(--type-body-sm)', color:'var(--text-body)', marginTop:6 }}>{error}</div>
      <Btn variant="secondary" size="sm" onClick={onReset} style={{ marginTop:12 }}>Erneut prüfen</Btn>
    </div>
  );
  if (!preflight) return null;

  const selected = preflight.runModes.find((mode) => mode.id === 'full') || preflight.runModes[0];
  const providers = preflight.providers || {};
  return (
    <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-strong)', borderRadius:'var(--radius-lg)', padding:20, boxShadow:'var(--shadow-sm)', display:'flex', flexDirection:'column', gap:16 }}>
      <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:12 }}>
        <div>
          <div style={{ font:'var(--type-h4)', color:'var(--text-strong)' }}>Preflight bestätigt keine Token-Nutzung</div>
          <div style={{ font:'var(--type-body-sm)', color:'var(--text-secondary)', marginTop:4 }}>Nächster Schritt startet erst nach deiner expliziten Bestätigung einen echten Backend-Job.</div>
        </div>
        <Bdg tone={selected.available ? 'approve' : 'reject'}>{selected.available ? 'Start möglich' : 'Blockiert'}</Bdg>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:10 }}>
        {[
          ['Gemini', providers.gemini],
          ['ScrapeCreators', providers.scrapeCreators],
          ['SocialBlade', providers.socialBlade],
        ].map(([label, provider]) => (
          <div key={label} style={{ padding:12, border:'1px solid var(--border)', borderRadius:'var(--radius-md)', background:'var(--surface-panel)' }}>
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:8 }}><span style={{ font:'var(--type-label)', color:'var(--text-strong)' }}>{label}</span><StatusBadge status={provider?.status} /></div>
            <div style={{ font:'var(--type-caption)', color:'var(--text-muted)', marginTop:6 }}>{provider?.label}</div>
          </div>
        ))}
      </div>

      <div style={{ padding:14, border:'1px solid var(--border)', borderRadius:'var(--radius-md)', background:selected.available?'var(--approve-bg)':'var(--reject-bg)' }}>
        <div style={{ font:'var(--type-label)', color:'var(--text-strong)' }}>Vollständiger Lauf</div>
        <div style={{ font:'var(--type-body-sm)', color:'var(--text-body)', marginTop:4 }}>Die Discovery läuft vollständig mit Gemini, ScrapeCreators und SocialBlade.</div>
        {!selected.available && <div style={{ font:'var(--type-caption)', color:'var(--reject-fg)', marginTop:8 }}>Blockiert durch: {(selected.blockedBy || []).join(', ')}</div>}
      </div>

      <div style={{ display:'flex', gap:10, justifyContent:'flex-end' }}>
        <Btn variant="secondary" onClick={onReset}>Zurück bearbeiten</Btn>
        <Btn variant="primary" disabled={!selected.available} onClick={onConfirm}>Echten Lauf starten</Btn>
      </div>
    </div>
  );
}

function CampaignScreen({ onSubmit }) {
  const [brief, setBrief] = React.useState('');
  const [platform, setPlatform] = React.useState('both');
  const [mode, setMode] = React.useState('Standard');
  const [minF, setMinF] = React.useState('30.000');
  const [maxF, setMaxF] = React.useState('150.000');
  const [reqEmail, setReqEmail] = React.useState(false);
  const [allowMaybe, setAllowMaybe] = React.useState(true);
  const [minCreators, setMinCreators] = React.useState('');
  const [maxCreators, setMaxCreators] = React.useState('10');
  const [minMatchScore, setMinMatchScore] = React.useState('70');
  const [limitKeywordsInstagram, setLimitKeywordsInstagram] = React.useState('');
  const [limitKeywordsTikTok, setLimitKeywordsTikTok] = React.useState('');
  const [limitCandidatesInstagram, setLimitCandidatesInstagram] = React.useState('');
  const [limitCandidatesTikTok, setLimitCandidatesTikTok] = React.useState('');
  const [advancedOpen, setAdvancedOpen] = React.useState(false);
  const [preflight, setPreflight] = React.useState(null);
  const [preflightLoading, setPreflightLoading] = React.useState(false);
  const [preflightError, setPreflightError] = React.useState('');
  const [pendingPayload, setPendingPayload] = React.useState(null);

  const fillExample = () => setBrief('Finde Instagram/TikTok Creator in Deutschland für vegane Proteinriegel, 30k–150k Follower. Zielgruppe: 22–40 Jahre, sportaffin, plant-based Lifestyle. Tonalität: authentisch, wissenschaftlich fundiert, keine übertriebene Werbung.');

  const form = { brief, platform, mode, minF, maxF, reqEmail, allowMaybe, minCreators, maxCreators, minMatchScore, limitKeywordsInstagram, limitKeywordsTikTok, limitCandidatesInstagram, limitCandidatesTikTok };
  const payload = window.DiscoveryApi.buildPayload(form);
  const canSubmit = brief.trim().length > 10;
  const submit = async () => {
    if (!canSubmit) return;
    setPreflightLoading(true);
    setPreflightError('');
    setPreflight(null);
    setPendingPayload(payload);
    try {
      const data = await window.DiscoveryApi.preflight();
      setPreflight(data);
    } catch (err) {
      setPreflightError(err.message || 'Preflight fehlgeschlagen');
    } finally {
      setPreflightLoading(false);
    }
  };
  const confirm = () => onSubmit({ ...pendingPayload, realRunConfirmed: true });
  const resetPreflight = () => { setPreflight(null); setPreflightError(''); setPendingPayload(null); };

  return (
    <div style={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column', background: 'var(--surface-app)' }}>
      <div style={{ padding: '20px 32px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: 'var(--surface-card)', position: 'sticky', top: 0, zIndex: 10 }}>
        <div>
          <div style={{ font: 'var(--type-h3)', color: 'var(--text-strong)' }}>Neue Kampagne</div>
          <div style={{ font: 'var(--type-body-sm)', color: 'var(--text-secondary)', marginTop: 3 }}>Preflight prüft nur Konfiguration. Ein echter Lauf braucht danach eine Bestätigung.</div>
        </div>
        <Btn variant="secondary" iconLeft={Icons.sparkles} onClick={fillExample}>Beispiel einfügen</Btn>
      </div>

      <div style={{ flex: 1, padding: '32px', display: 'flex', justifyContent: 'center' }}>
        <div style={{ width: '100%', maxWidth: 760, display: 'flex', flexDirection: 'column', gap: 24 }}>
          <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 24, boxShadow: 'var(--shadow-sm)' }}>
            <TA label="Kampagne beschreiben" value={brief} rows={6} maxLength={800} showCount placeholder="Beschreibe Produkt, Zielgruppe, Plattform, Land, Follower-Größe, Tonalität…" onChange={e => { setBrief(e.target.value); resetPreflight(); }} />
          </div>

          <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 24, boxShadow: 'var(--shadow-sm)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <span style={{ font: 'var(--type-label)', color: 'var(--text-strong)' }}>Plattform</span>
              <Seg fullWidth options={[{value:'ig',label:'Instagram'},{value:'tt',label:'TikTok'},{value:'both',label:'Beide'}]} value={platform} onChange={(v)=>{setPlatform(v); resetPreflight();}} />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <span style={{ font: 'var(--type-label)', color: 'var(--text-strong)' }}>Analysemodus</span>
              <Seg fullWidth options={['Schnell','Standard','Tief']} value={mode} onChange={(v)=>{setMode(v); resetPreflight();}} />
            </div>
          </div>

          <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 24, boxShadow: 'var(--shadow-sm)' }}>
            <div style={{ font: 'var(--type-label)', color: 'var(--text-strong)', marginBottom: 14 }}>Follower-Bereich</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <Fld label="Minimum" value={minF} mono trailing="Follower" onChange={e=>{setMinF(e.target.value); resetPreflight();}} />
              <Fld label="Maximum" value={maxF} mono trailing="Follower" onChange={e=>{setMaxF(e.target.value); resetPreflight();}} />
            </div>
          </div>

          <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 24, boxShadow: 'var(--shadow-sm)', display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <div>
                <div style={{ font:'var(--type-label)', color:'var(--text-strong)' }}>Advanced Controls</div>
                <div style={{ font:'var(--type-caption)', color:'var(--text-muted)', marginTop:3 }}>Der Run läuft immer vollständig. Optional kannst du nur Ergebnis- und Suchlimits setzen.</div>
              </div>
              <Btn variant="secondary" size="sm" onClick={()=>setAdvancedOpen(v=>!v)}>{advancedOpen ? 'Schließen' : 'Öffnen'}</Btn>
            </div>
            {advancedOpen && <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:12 }}>
                <Fld label="Min Creator" value={minCreators} mono onChange={e=>{setMinCreators(e.target.value); resetPreflight();}} />
                <Fld label="Max Creator" value={maxCreators} mono onChange={e=>{setMaxCreators(e.target.value); resetPreflight();}} />
                <Fld label="Min Match" value={minMatchScore} mono trailing="/100" onChange={e=>{setMinMatchScore(e.target.value); resetPreflight();}} />
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:12 }}>
                <Fld label="IG Keyword-Limit" value={limitKeywordsInstagram} mono placeholder="Preset" onChange={e=>{setLimitKeywordsInstagram(e.target.value); resetPreflight();}} />
                <Fld label="TT Keyword-Limit" value={limitKeywordsTikTok} mono placeholder="Preset" onChange={e=>{setLimitKeywordsTikTok(e.target.value); resetPreflight();}} />
                <Fld label="IG Candidate-Limit" value={limitCandidatesInstagram} mono placeholder="Preset" onChange={e=>{setLimitCandidatesInstagram(e.target.value); resetPreflight();}} />
                <Fld label="TT Candidate-Limit" value={limitCandidatesTikTok} mono placeholder="Preset" onChange={e=>{setLimitCandidatesTikTok(e.target.value); resetPreflight();}} />
              </div>
            </div>}
          </div>

          <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 24, boxShadow: 'var(--shadow-sm)', display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Tgl label="E-Mail als Pflichtkriterium" description="Nur Creator mit nachgewiesener Kontaktadresse einbeziehen" checked={reqEmail} onChange={(v)=>{setReqEmail(v); resetPreflight();}} />
            <div style={{ height: 1, background: 'var(--border)' }} />
            <Tgl label="Maybe-Creator zur Review-Liste zulassen" description="Creator mit Shortlist-Empfehlung in den Report aufnehmen" checked={allowMaybe} onChange={(v)=>{setAllowMaybe(v); resetPreflight();}} />
          </div>

          <PreflightPanel preflight={preflight} payload={pendingPayload || payload} loading={preflightLoading} error={preflightError} onConfirm={confirm} onReset={resetPreflight} />

          <div style={{ display: 'flex', gap: 12, alignItems: 'center', paddingBottom: 32 }}>
            <Btn variant="primary" size="lg" disabled={!canSubmit || preflightLoading} onClick={submit} style={{ flex: 1 }} iconLeft={<I s={18} d={<><path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.66 0 3-4.03 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4.03-3-9s1.34-9 3-9"/></>} />}>
              Preflight prüfen
            </Btn>
            {!canSubmit && <span style={{ font: 'var(--type-caption)', color: 'var(--text-muted)' }}>Kampagne beschreiben, um zu starten</span>}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CampaignScreen });
