Mau riset apa hari ini?

Pilih jenis riset yang paling cocok dengan tujuanmu — AI akan menyesuaikan pertanyaan & analitik otomatis.

{RESEARCH_KINDS.map((k) => { const active = kind === k.id; return ( ); })}

Ceritakan tentang bisnismu

Informasi ini membantu AI menyusun pertanyaan yang relevan dengan industri & kompetitormu.

Brand {availableBrands.length === 0 ? (

Belum ada brand. Buka Brand Profile di sidebar untuk membuat satu.

) : availableBrands.length === 1 ? (

{availableBrands[0].name} {availableBrands[0].category || ''}

) : ( )}

Kategori industri

Target wilayah

Periode survei

Kompetitor utama

{competitors.map((c, i) => ( {c} ))}

setNewComp(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), addCompetitor())} placeholder="Tambahkan nama kompetitor lalu tekan Enter" style={{ flex: 1 }} />

{idx + 1}

{typeOptions.map((t) => ( ))}

setRequired(e.target.checked)} /> Wajib

setText(e.target.value)}
          placeholder="Tulis pertanyaan untuk responden…"
          autoFocus
        />

{type === 'choice' && (
          <div>
            <label className="label" style={{ marginBottom: 4 }}>Pilihan jawaban (satu per baris)</label>
            <textarea
              className="textarea"
              rows={4}
              value={options}
              onChange={(e) => setOptions(e.target.value)}
              placeholder={'Kopi Kenanga\nJanji Manis\nTomoro Coffee\nLainnya'}
            />
          </div>
        )}

<div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
          <button className="btn btn-ghost" onClick={onCancel} style={{ padding: '6px 12px', fontSize: 12.5 }}>Batal</button>
          <button
            className="btn btn-primary"
            onClick={save}
            disabled={!text.trim() || (type === 'choice' && options.split('\n').filter((s) => s.trim()).length < 2)}
            style={{ padding: '6px 12px', fontSize: 12.5 }}
          >
            <I.Check size={13} /> Simpan
          </button>
        </div>
      </div>
    </div>
  );
}

// Custom presets per workspace (bisa kosong saat belum bikin).
  const [customPresets, setCustomPresets] = useState_cb([]);
  React.useEffect(() => {
    window.api.listRewardPresets()
      .then((r) => setCustomPresets(r.presets || []))
      .catch(() => setCustomPresets([]));
  }, []);

// Gabungkan: custom dulu, lalu built-in. Normalisasi ke shape yang sama.
  const builtIn = (window.REWARD_PRESETS || []).map((p) => ({
    id: p.id, name: p.name, value: p.value, valueOrLink: p.valueOrLink,
    type: p.type, quota: p.quota || 0, emoji: p.emoji, bg: p.bg, color: p.color, tag: p.tag,
  }));
  const customNormalized = customPresets.map((p) => {
    const fb = TYPE_FB[p.rewardType] || TYPE_FB.voucher;
    return {
      id: p.id,
      name: p.name,
      value: p.valueOrLink,
      valueOrLink: p.valueOrLink,
      type: p.rewardType,
      quota: p.quota || 0,
      emoji: p.emoji || fb.emoji,
      bg: fb.bg,
      color: fb.color,
      tag: 'Saya',
    };
  });
  const presets = [...customNormalized, ...builtIn];

const applyPreset = (p) =>
    setReward({ rewardType: p.type, valueOrLink: p.valueOrLink, quota: p.quota || 0, presetId: p.id });

return (
    <div className="fade-in">
      <h2 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em' }}>Hadiah untuk Responden</h2>
      <p style={{ margin: '0 0 20px', color: 'var(--ink-3)', fontSize: 13.5 }}>
        Hadiah otomatis muncul setelah responden submit. Survei dengan hadiah biasanya selesai 3× lebih banyak.
      </p>

{/* Preset gallery — horizontal scroll on small viewports */}
      <div className="card" style={{ padding: 16, marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10 }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Pilih Hadiah Siap Pakai</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>
              {reward.presetId
                ? 'Sudah pakai preset — kamu masih bisa tweak detail di bawah.'
                : 'Klik kartu untuk apply. Atau scroll ke bawah untuk custom.'}
            </div>
          </div>
        </div>
        <div className="scroll" style={{
          display: 'grid', gridAutoFlow: 'column', gridAutoColumns: '230px',
          gap: 10, overflowX: 'auto', padding: '4px 2px 12px',
        }}>
          {presets.map((p) => {
            const active = reward.presetId === p.id;
            return (
              <button
                key={p.id}
                onClick={() => applyPreset(p)}
                style={{
                  textAlign: 'left', cursor: 'pointer',
                  background: 'var(--surface)',
                  border: active ? '1.5px solid var(--primary)' : '1px solid var(--line)',
                  borderRadius: 12, padding: 12,
                  boxShadow: active ? '0 0 0 4px oklch(0.52 0.18 265 / 0.10)' : 'none',
                  display: 'flex', flexDirection: 'column', gap: 8,
                  transition: 'all 140ms',
                }}
              >
                <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
                  <div style={{
                    width: 38, height: 38, borderRadius: 10,
                    background: p.bg, color: p.color,
                    display: 'grid', placeItems: 'center',
                    fontSize: 19, lineHeight: 1, flexShrink: 0,
                  }}>{p.emoji}</div>
                  {p.tag && (
                    <span style={{
                      fontSize: 9.5, padding: '2px 6px', borderRadius: 999, fontWeight: 600,
                      background: p.bg, color: p.color, letterSpacing: '0.02em',
                    }}>{p.tag}</span>
                  )}
                </div>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 600, lineHeight: 1.3 }}>{p.name}</div>
                  <div className="mono" style={{ fontSize: 12, color: p.color, fontWeight: 700, marginTop: 2 }}>{p.value}</div>
                </div>
                {active && (
                  <span style={{ fontSize: 10.5, color: 'var(--primary)', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4 }}>
                    <I.Check size={11} /> Aktif
                  </span>
                )}
              </button>
            );
          })}
        </div>
      </div>

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10, marginBottom: 16 }}>
        {types.map((t) => (
          <button key={t.id} onClick={() => setType(t.id)} style={{
            padding: 16, textAlign: 'left',
            background: 'var(--surface)',
            border: type === t.id ? '1.5px solid var(--primary)' : '1px solid var(--line)',
            borderRadius: 12, cursor: 'pointer',
            boxShadow: type === t.id ? '0 0 0 4px oklch(0.52 0.18 265 / 0.10)' : 'none',
            transition: 'all 140ms', display: 'flex', gap: 12, alignItems: 'flex-start',
          }}>
            <div style={{ fontSize: 22, lineHeight: 1 }}>{t.icon}</div>
            <div>
              <div style={{ fontWeight: 600, fontSize: 13.5 }}>{t.label}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 3 }}>{t.sub}</div>
            </div>
            {type === t.id && (
              <I.Check size={16} style={{ color: 'var(--primary)', marginLeft: 'auto', flexShrink: 0 }} />
            )}
          </button>
        ))}
      </div>

<div className="card" style={{ padding: 20 }}>
        <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 12 }}>Detail Hadiah</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <div>
            <label className="label">Nilai per responden</label>
            <input
              className="input"
              value={reward.valueOrLink || ''}
              onChange={(e) => setReward({ ...reward, valueOrLink: e.target.value })}
              placeholder="cth. Voucher Rp 10.000"
            />
          </div>
          <div>
            <label className="label">Kuota total</label>
            <input
              className="input"
              type="number"
              min="0"
              value={reward.quota}
              onChange={(e) => setReward({ ...reward, quota: Number(e.target.value) || 0 })}
              placeholder="2000"
            />
          </div>
          <div style={{ gridColumn: '1 / -1' }}>
            <label className="label">Pesan setelah klaim</label>
            <textarea className="textarea" rows="2" defaultValue="Terima kasih sudah membantu Kopi Kenanga jadi lebih baik! Voucher Anda akan dikirim ke nomor WhatsApp dalam 5 menit." />
          </div>
        </div>

<div style={{ marginTop: 14, padding: 12, borderRadius: 10, background: 'var(--bg-2)', display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5, color: 'var(--ink-2)' }}>
          <I.Lightning size={14} style={{ color: 'oklch(0.65 0.15 75)', flexShrink: 0 }} />
          <span>Estimasi total: <b className="mono">Rp 20.000.000</b> · sudah termasuk biaya distribusi otomatis (2.5%).</span>
        </div>
      </div>

<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}>
        <button className="btn btn-ghost" onClick={onBack}><I.ChevronLeft size={14} />Kembali</button>
        <button className="btn btn-primary" onClick={onNext}>Lanjut ke Publikasi <I.ArrowRight size={14} /></button>
      </div>
    </div>
  );
}

function PublishStep({ onBack, brand, brandId, kind, industry, region, competitors, questions, reward, respondentFields, onPublished }) {
  const [copied, setCopied] = React.useState(false);
  const [publishing, setPublishing] = React.useState(false);
  const [published, setPublished] = React.useState(null); // { id, slug, url }
  const [error, setError] = React.useState(null);

const fullUrl = published ? `${window.location.origin}/survey/${published.slug}` : null;

const copy = () => {
    if (!fullUrl) return;
    navigator.clipboard?.writeText(fullUrl).catch(() => {});
    setCopied(true);
    setTimeout(() => setCopied(false), 1600);
  };

const publish = async () => {
    setPublishing(true);
    setError(null);
    try {
      // 1) create campaign
      // Title prefix mirrors the chosen kind so the dashboard list reads natural
      // (e.g. "Concept Test Kopi Kenanga", "Brand Perception Geprekin").
      const titlePrefix = ({
        top_of_mind: 'Brand Awareness',
        market_gap: 'Market Gap',
        concept_test: 'Concept Test',
        brand_name: 'Brand Name Test',
        perception: 'Brand Perception',
        pmf: 'PMF Survey',
      })[kind] ?? 'Brand Awareness';

const { campaign } = await window.api.createCampaign({
        title: `${titlePrefix} ${brand}`,
        brandId: brandId || undefined,
        industryContext: industry,
        targetRegion: region,
        kind: kind || 'top_of_mind',
        targetResponses: reward.quota || 0,
        competitors,
        respondentFields,
      });
      // 2) save questions
      if (questions.length > 0) {
        await window.api.putQuestions(campaign.id, questions);
      }
      // 3) save reward
      await window.api.putReward(campaign.id, {
        rewardType: reward.rewardType,
        quota: reward.quota,
        valueOrLink: reward.valueOrLink,
      });
      // 4) flip to active
      await window.api.updateCampaign(campaign.id, { status: 'active' });

setPublished({ id: campaign.id, slug: campaign.publicSlug });
      onPublished?.(campaign);
    } catch (err) {
      setError(err.message || 'Gagal mempublikasikan campaign');
    } finally {
      setPublishing(false);
    }
  };

return (
    <div className="fade-in">
      <h2 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em' }}>
        {published ? 'Campaign Aktif 🎉' : 'Siap Dipublikasikan'}
      </h2>
      <p style={{ margin: '0 0 20px', color: 'var(--ink-3)', fontSize: 13.5 }}>
        {published
          ? 'Sebarkan link di bawah ke pelangganmu — respons akan masuk ke dashboard.'
          : 'Cek ringkasan, lalu sebarkan link survei.'}
      </p>

<div className="card" style={{ padding: 20, marginBottom: 12 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {[
            ['Brand', brand],
            ['Kompetitor', `${competitors.length} brand`],
            ['Pertanyaan', `${questions.length} buah`],
            ['Hadiah', reward.valueOrLink || '—'],
          ].map(([k, v]) => (
            <div key={k}>
              <div style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>{k}</div>
              <div style={{ fontSize: 14, fontWeight: 600, marginTop: 4 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>

{published && (
        <div className="card" style={{ padding: 20, marginBottom: 12 }}>
          <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 12 }}>Link Survei</div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', padding: 10, background: 'var(--bg-2)', borderRadius: 10, border: '1px solid var(--line)' }}>
            <I.Link size={14} style={{ color: 'var(--ink-3)' }} />
            <a href={fullUrl} target="_blank" rel="noopener" className="mono" style={{ flex: 1, fontSize: 13, color: 'var(--primary)', textDecoration: 'none', overflow: 'hidden', textOverflow: 'ellipsis' }}>{fullUrl}</a>
            <button className="btn btn-soft" onClick={copy} style={{ padding: '6px 10px' }}>
              {copied ? <><I.Check size={12} />Tersalin</> : <><I.Copy size={12} />Salin</>}
            </button>
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            <a className="btn btn-ghost" style={{ flex: 1, justifyContent: 'center', textDecoration: 'none', color: 'inherit' }}
               href={`https://wa.me/?text=${encodeURIComponent(fullUrl)}`} target="_blank" rel="noopener">
              WhatsApp
            </a>
            <button className="btn btn-ghost" style={{ flex: 1, justifyContent: 'center' }} onClick={copy}>Salin Link</button>
            <a className="btn btn-ghost" style={{ flex: 1, justifyContent: 'center', textDecoration: 'none', color: 'inherit' }}
               href={fullUrl} target="_blank" rel="noopener">Buka Survei</a>
          </div>
        </div>
      )}

{error && (
        <div style={{ marginBottom: 12, padding: 10, borderRadius: 8, background: 'var(--danger-soft)', color: 'var(--danger)', fontSize: 12.5 }}>
          {error}
        </div>
      )}

<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}>
        <button className="btn btn-ghost" onClick={onBack} disabled={publishing}>
          <I.ChevronLeft size={14} />Kembali
        </button>
        {!published ? (
          <button className="btn btn-primary" onClick={publish} disabled={publishing} style={{ opacity: publishing ? 0.7 : 1 }}>
            <I.Send size={14} />{publishing ? 'Mempublikasikan…' : 'Publikasikan Sekarang'}
          </button>
        ) : (
          <button className="btn btn-primary" onClick={() => onPublished?.(null, 'goto-dashboard')}>
            Buka Dashboard <I.ArrowRight size={14} />
          </button>
        )}
      </div>
    </div>
  );
}

// Expose helper components ke window supaya CampaignEditor (campaign-editor.jsx)
// bisa reuse — menghindari duplikasi logika edit pertanyaan & picker wilayah.
Object.assign(window, { CampaignBuilder, QuestionEditor, QuestionRow, RegionPicker });

Mau riset apa hari ini?

Ceritakan tentang bisnismu

Pertanyaan Survei