// Campaign Editor — edit campaign yang sudah ada. Akses dari pencil icon
// di dashboard TopBar. Muat data dari getCampaign(id) + listBrands(), simpan
// per-section via PATCH/PUT yang sudah ada di backend.
//
// Sections (single-page scroll, bukan multi-step wizard kayak builder):
//   1. Info Dasar      → PATCH /api/campaigns/:id (title, brand, industry, region, target)
//   2. Pertanyaan      → PUT /api/campaigns/:id/questions
//   3. Profil Responden → PATCH /api/campaigns/:id (respondentFields)
//   4. Kompetitor      → PUT /api/campaigns/:id/competitors
//   5. Hadiah          → PUT /api/campaigns/:id/reward
//
// Reuse komponen yang sudah ada: QuestionEditor / QuestionRow dari
// campaign-builder.jsx, RegionPicker, ProfileFieldsSection (semua exposed
// via window).

const { useState: useState_ce, useEffect: useEffect_ce } = React;

const PROFILE_FIELDS_CATALOG = [
  { key: 'respondentName', label: 'Nama lengkap' },
  { key: 'phone',          label: 'Nomor HP / WhatsApp' },
  { key: 'ageRange',       label: 'Rentang umur' },
  { key: 'gender',         label: 'Gender' },
  { key: 'education',      label: 'Pendidikan terakhir' },
  { key: 'occupation',     label: 'Pekerjaan' },
  { key: 'incomeRange',    label: 'Range income bulanan' },
  { key: 'maritalStatus',  label: 'Status pernikahan' },
  { key: 'domicileCity',   label: 'Kota domisili' },
  { key: 'originCity',     label: 'Kota asal' },
];

function CampaignEditor({ campaignId, onBack, onSaved }) {
  const [loading, setLoading] = useState_ce(true);
  const [campaign, setCampaign] = useState_ce(null);
  const [questions, setQuestions] = useState_ce([]);
  const [competitorList, setCompetitorList] = useState_ce([]);
  const [reward, setReward] = useState_ce(null);
  const [brands, setBrands] = useState_ce([]);
  const [customRewardPresets, setCustomRewardPresets] = useState_ce([]);

  // Per-section dirty tracking & saving state
  const [sectionBusy, setSectionBusy] = useState_ce({});
  const [sectionSaved, setSectionSaved] = useState_ce({});
  const [error, setError] = useState_ce(null);

  // Editing state untuk question rows
  const [editingIdx, setEditingIdx] = useState_ce(null);

  // Load semua data
  useEffect_ce(() => {
    if (!campaignId) return;
    setLoading(true);
    Promise.all([
      window.api.getCampaign(campaignId),
      window.api.listBrands().catch(() => ({ brands: [] })),
      window.api.listRewardPresets().catch(() => ({ presets: [] })),
    ])
      .then(([c, b, rp]) => {
        setCampaign(c.campaign);
        setQuestions(c.questions || []);
        setCompetitorList((c.competitors || []).map((x) => x.name));
        setReward(c.reward || { rewardType: 'voucher', valueOrLink: '', quota: 0 });
        setBrands(b.brands || []);
        setCustomRewardPresets(rp.presets || []);
      })
      .catch((e) => setError(e.message))
      .finally(() => setLoading(false));
  }, [campaignId]);

  const flagSaved = (section) => {
    setSectionSaved((s) => ({ ...s, [section]: Date.now() }));
    setTimeout(() => setSectionSaved((s) => ({ ...s, [section]: null })), 2400);
  };

  const setBusy = (section, v) => setSectionBusy((s) => ({ ...s, [section]: v }));

  if (loading || !campaign) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <TopBar title="Edit Campaign" subtitle="Memuat…" right={
          <button className="btn btn-ghost" onClick={onBack}>
            <I.ChevronLeft size={14} /> Kembali
          </button>
        } />
        <div style={{ flex: 1, display: 'grid', placeItems: 'center', color: 'var(--ink-3)' }}>
          {error || 'Memuat campaign…'}
        </div>
      </div>
    );
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <TopBar
        title={`Edit: ${campaign.title}`}
        subtitle={`${campaign.kind || 'top_of_mind'} · status ${campaign.status}`}
        right={
          <div style={{ display: 'flex', gap: 8 }}>
            <a className="btn btn-ghost" href={`/survey/${campaign.publicSlug}`} target="_blank" rel="noopener" style={{ padding: '6px 10px', fontSize: 12.5 }}>
              <I.Eye size={13} /> Pratinjau
            </a>
            <button className="btn btn-soft" onClick={onBack} style={{ padding: '6px 10px', fontSize: 12.5 }}>
              <I.ChevronLeft size={13} /> Kembali ke Dashboard
            </button>
          </div>
        }
      />

      <div className="scroll" style={{ flex: 1, overflow: 'auto', padding: 24, background: 'var(--bg)' }}>
        <div style={{ maxWidth: 880, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 14 }}>

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

          {/* ─── Section: Info Dasar ───────────────────────────── */}
          <BasicInfoSection
            campaign={campaign}
            brands={brands}
            busy={!!sectionBusy.info}
            savedAt={sectionSaved.info}
            onSave={async (patch) => {
              setBusy('info', true); setError(null);
              try {
                const r = await window.api.updateCampaign(campaign.id, patch);
                setCampaign(r.campaign);
                flagSaved('info');
              } catch (e) { setError(e.message); }
              finally { setBusy('info', false); }
            }}
          />

          {/* ─── Section: Pertanyaan ────────────────────────────── */}
          <Section
            title="Pertanyaan Survei"
            subtitle={`${questions.length} pertanyaan · klik pensil untuk edit`}
            saved={sectionSaved.questions}
          >
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {questions.map((q, i) => (
                editingIdx === i ? (
                  <window.QuestionEditor
                    key={i}
                    idx={i}
                    question={q}
                    onSave={(updated) => {
                      setQuestions((prev) => prev.map((p, pi) => (pi === i ? updated : p)));
                      setEditingIdx(null);
                    }}
                    onCancel={() => setEditingIdx(null)}
                  />
                ) : (
                  <window.QuestionRow
                    key={i}
                    q={q}
                    idx={i}
                    editable
                    onEdit={() => setEditingIdx(i)}
                    onDelete={() => {
                      if (window.confirm('Hapus pertanyaan ini?')) {
                        setQuestions((prev) => prev.filter((_, pi) => pi !== i));
                      }
                    }}
                  />
                )
              ))}
              <button
                className="btn btn-ghost"
                style={{ alignSelf: 'flex-start', marginTop: 4 }}
                onClick={() => {
                  setQuestions((prev) => {
                    const next = [...prev, { type: 'open', text: '', options: undefined, required: true, aiGenerated: false }];
                    setEditingIdx(next.length - 1);
                    return next;
                  });
                }}
              >
                <I.Plus size={14} /> Tambah pertanyaan
              </button>
            </div>

            <SaveBar
              busy={!!sectionBusy.questions}
              onSave={async () => {
                setBusy('questions', true); setError(null);
                try {
                  const r = await window.api.putQuestions(campaign.id, questions);
                  setQuestions(r.questions || []);
                  flagSaved('questions');
                } catch (e) { setError(e.message); }
                finally { setBusy('questions', false); }
              }}
            />
          </Section>

          {/* ─── Section: Profil Responden ──────────────────────── */}
          <ProfileFieldsEditor
            campaign={campaign}
            busy={!!sectionBusy.profile}
            savedAt={sectionSaved.profile}
            onSave={async (newFields) => {
              setBusy('profile', true); setError(null);
              try {
                const r = await window.api.updateCampaign(campaign.id, { respondentFields: newFields });
                setCampaign(r.campaign);
                flagSaved('profile');
              } catch (e) { setError(e.message); }
              finally { setBusy('profile', false); }
            }}
          />

          {/* ─── Section: Kompetitor ────────────────────────────── */}
          <CompetitorSection
            value={competitorList}
            busy={!!sectionBusy.competitors}
            savedAt={sectionSaved.competitors}
            onSave={async (names) => {
              setBusy('competitors', true); setError(null);
              try {
                const r = await window.api.putCompetitors(campaign.id, names);
                setCompetitorList((r.competitors || []).map((c) => c.name));
                flagSaved('competitors');
              } catch (e) { setError(e.message); }
              finally { setBusy('competitors', false); }
            }}
          />

          {/* ─── Section: Hadiah ───────────────────────────────── */}
          <RewardSection
            reward={reward}
            customPresets={customRewardPresets}
            busy={!!sectionBusy.reward}
            savedAt={sectionSaved.reward}
            onChange={setReward}
            onSave={async () => {
              setBusy('reward', true); setError(null);
              try {
                const r = await window.api.putReward(campaign.id, {
                  rewardType: reward.rewardType,
                  valueOrLink: reward.valueOrLink,
                  quota: Number(reward.quota) || 0,
                });
                setReward(r.reward);
                flagSaved('reward');
              } catch (e) { setError(e.message); }
              finally { setBusy('reward', false); }
            }}
          />

          {/* ─── Section: Status & Distribusi ───────────────────── */}
          <StatusSection
            campaign={campaign}
            busy={!!sectionBusy.status}
            savedAt={sectionSaved.status}
            onChange={async (status) => {
              setBusy('status', true); setError(null);
              try {
                const r = await window.api.updateCampaign(campaign.id, { status });
                setCampaign(r.campaign);
                flagSaved('status');
                onSaved?.();
              } catch (e) { setError(e.message); }
              finally { setBusy('status', false); }
            }}
          />

        </div>
      </div>
    </div>
  );
}

// ─── Reusable Section wrapper ───────────────────────────────────────
function Section({ title, subtitle, saved, children }) {
  return (
    <div className="card" style={{ padding: 22 }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, marginBottom: 14 }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>{title}</div>
          {subtitle && <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{subtitle}</div>}
        </div>
        {saved && (
          <span style={{ fontSize: 11.5, color: 'oklch(0.55 0.15 155)', display: 'flex', alignItems: 'center', gap: 4 }}>
            <I.Check size={12} /> Tersimpan
          </span>
        )}
      </div>
      {children}
    </div>
  );
}

function SaveBar({ busy, onSave, dirty = true }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--line)' }}>
      <button className="btn btn-primary" onClick={onSave} disabled={busy || !dirty} style={{ padding: '8px 16px', fontSize: 13 }}>
        {busy ? 'Menyimpan…' : 'Simpan section ini'}
      </button>
    </div>
  );
}

// ─── Section: Info Dasar ──────────────────────────────────────────
function BasicInfoSection({ campaign, brands, busy, savedAt, onSave }) {
  const [title, setTitle] = useState_ce(campaign.title);
  const [brandId, setBrandId] = useState_ce(campaign.brandId || '');
  const [industry, setIndustry] = useState_ce(campaign.industryContext || '');
  const [region, setRegion] = useState_ce(campaign.targetRegion || '');
  const [targetResponses, setTargetResponses] = useState_ce(campaign.targetResponses || 0);

  const dirty =
    title !== campaign.title ||
    brandId !== (campaign.brandId || '') ||
    industry !== (campaign.industryContext || '') ||
    region !== (campaign.targetRegion || '') ||
    Number(targetResponses) !== (campaign.targetResponses || 0);

  return (
    <Section title="Info Dasar" subtitle="Identitas campaign — judul, brand, target responden" saved={savedAt}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div style={{ gridColumn: '1 / -1' }}>
          <label className="label">Judul campaign</label>
          <input className="input" value={title} onChange={(e) => setTitle(e.target.value)} />
        </div>
        <div>
          <label className="label">Brand</label>
          <select className="select" value={brandId} onChange={(e) => setBrandId(e.target.value)}>
            <option value="">— Pilih brand —</option>
            {brands.map((b) => (
              <option key={b.id} value={b.id}>{b.name}{b.isPrimary ? ' · utama' : ''}</option>
            ))}
          </select>
        </div>
        <div>
          <label className="label">Kategori industri</label>
          <input className="input" value={industry} onChange={(e) => setIndustry(e.target.value)} placeholder="cth. F&B — Coffee Shop" />
        </div>
        <div>
          <label className="label">Target wilayah</label>
          {window.RegionPicker ? (
            <window.RegionPicker value={region} onChange={setRegion} />
          ) : (
            <input className="input" value={region} onChange={(e) => setRegion(e.target.value)} />
          )}
        </div>
        <div>
          <label className="label">Target jumlah responden</label>
          <input className="input" type="number" min={0} value={targetResponses} onChange={(e) => setTargetResponses(e.target.value)} />
        </div>
      </div>

      <SaveBar
        busy={busy}
        dirty={dirty}
        onSave={() => onSave({
          title: title.trim(),
          brandId: brandId || null,
          industryContext: industry.trim(),
          targetRegion: region.trim(),
          targetResponses: Number(targetResponses) || 0,
        })}
      />
    </Section>
  );
}

// ─── Section: Profil Responden ───────────────────────────────────
function ProfileFieldsEditor({ campaign, busy, savedAt, onSave }) {
  const initial = campaign.respondentFields || [];
  const [fields, setFields] = useState_ce(() => {
    const map = {};
    PROFILE_FIELDS_CATALOG.forEach((f) => { map[f.key] = 'off'; });
    initial.forEach((f) => { map[f.key] = f.required ? 'required' : 'optional'; });
    return map;
  });

  const enabled = Object.values(fields).filter((m) => m !== 'off').length;
  const payload = Object.entries(fields)
    .filter(([, m]) => m !== 'off')
    .map(([key, m]) => ({ key, required: m === 'required' }));

  return (
    <Section
      title="Profil Responden"
      subtitle={`${enabled}/${PROFILE_FIELDS_CATALOG.length} field aktif`}
      saved={savedAt}
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {PROFILE_FIELDS_CATALOG.map((f) => {
          const cur = fields[f.key];
          return (
            <div key={f.key} style={{
              display: 'grid', gridTemplateColumns: '1fr auto',
              alignItems: 'center', gap: 14, padding: '8px 0',
              borderTop: '1px solid var(--line)',
            }}>
              <div style={{ fontSize: 13 }}>{f.label}</div>
              <div style={{ display: 'flex', gap: 2, padding: 2, borderRadius: 8, background: 'var(--bg-2)' }}>
                {['off', 'optional', 'required'].map((mode) => (
                  <button
                    key={mode}
                    type="button"
                    onClick={() => setFields((s) => ({ ...s, [f.key]: mode }))}
                    style={{
                      padding: '4px 10px', fontSize: 11.5, borderRadius: 6, border: 'none',
                      background: cur === mode ? 'var(--surface)' : 'transparent',
                      color: cur === mode
                        ? (mode === 'required' ? 'var(--danger)' : 'var(--primary)')
                        : 'var(--ink-3)',
                      fontWeight: cur === mode ? 600 : 500,
                      cursor: 'pointer', textTransform: 'capitalize',
                    }}
                  >{mode}</button>
                ))}
              </div>
            </div>
          );
        })}
      </div>
      <SaveBar busy={busy} onSave={() => onSave(payload)} />
    </Section>
  );
}

// ─── Section: Kompetitor ─────────────────────────────────────────
function CompetitorSection({ value, busy, savedAt, onSave }) {
  const [items, setItems] = useState_ce(value || []);
  const [draft, setDraft] = useState_ce('');

  useEffect_ce(() => { setItems(value || []); }, [value]);

  const dirty = JSON.stringify(items) !== JSON.stringify(value || []);

  const add = () => {
    const v = draft.trim();
    if (!v || items.includes(v) || items.length >= 20) return;
    setItems([...items, v]);
    setDraft('');
  };

  return (
    <Section title="Daftar Kompetitor" subtitle={`${items.length} brand pembanding · maks 20`} saved={savedAt}>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 10, minHeight: 32 }}>
        {items.map((n, i) => (
          <span key={i} style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '5px 10px', borderRadius: 999, fontSize: 12, fontWeight: 500,
            background: 'var(--bg-2)', border: '1px solid var(--line-2)',
            color: 'var(--ink-2)',
          }}>
            {n}
            <button onClick={() => setItems(items.filter((_, idx) => idx !== i))}
              style={{ background: 'transparent', border: 'none', padding: 0, cursor: 'pointer', display: 'flex', color: 'var(--ink-3)' }}>
              <I.X size={11} />
            </button>
          </span>
        ))}
        {items.length === 0 && (
          <span style={{ fontSize: 12, color: 'var(--ink-4)', fontStyle: 'italic' }}>Belum ada kompetitor.</span>
        )}
      </div>
      <div style={{ display: 'flex', gap: 6 }}>
        <input
          className="input"
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), add())}
          placeholder="Tambahkan kompetitor lalu tekan Enter"
          style={{ flex: 1 }}
        />
        <button className="btn btn-soft" onClick={add} disabled={!draft.trim() || items.length >= 20}>
          <I.Plus size={13} /> Tambah
        </button>
      </div>
      <SaveBar busy={busy} dirty={dirty} onSave={() => onSave(items)} />
    </Section>
  );
}

// ─── Section: Hadiah ─────────────────────────────────────────────
function RewardSection({ reward, customPresets, busy, savedAt, onChange, onSave }) {
  const types = [
    { id: 'voucher',        label: 'Voucher Digital' },
    { id: 'e_wallet',       label: 'Cashback E-Wallet' },
    { id: 'promo_code',     label: 'Kode Promo' },
    { id: 'digital_access', label: 'Akses Digital' },
    { id: 'none',           label: 'Tanpa hadiah' },
  ];

  // Merge built-in + custom for the picker
  const builtIn = (window.REWARD_PRESETS || []).map((p) => ({
    id: p.id, name: p.name, type: p.type, valueOrLink: p.valueOrLink, quota: p.quota || 0, emoji: p.emoji,
    bg: p.bg, color: p.color, value: p.value,
  }));
  const customNorm = (customPresets || []).map((p) => ({
    id: p.id, name: p.name, type: p.rewardType, valueOrLink: p.valueOrLink, quota: p.quota || 0,
    emoji: p.emoji || '🎁', bg: 'var(--bg-2)', color: 'var(--ink)', value: p.valueOrLink,
  }));
  const presets = [...customNorm, ...builtIn];

  return (
    <Section title="Hadiah" subtitle="Apa yang diterima responden setelah submit" saved={savedAt}>
      <div className="scroll" style={{
        display: 'grid', gridAutoFlow: 'column', gridAutoColumns: '210px',
        gap: 8, overflowX: 'auto', padding: '4px 2px 12px', marginBottom: 12,
      }}>
        {presets.map((p) => {
          const active = reward.valueOrLink === p.valueOrLink && reward.rewardType === p.type;
          return (
            <button key={p.id}
              onClick={() => onChange({ ...reward, rewardType: p.type, valueOrLink: p.valueOrLink, quota: p.quota || reward.quota })}
              style={{
                textAlign: 'left', cursor: 'pointer',
                background: 'var(--surface)',
                border: active ? '1.5px solid var(--primary)' : '1px solid var(--line)',
                borderRadius: 10, padding: 10,
                display: 'flex', flexDirection: 'column', gap: 6,
              }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ width: 32, height: 32, borderRadius: 8, background: p.bg, color: p.color, display: 'grid', placeItems: 'center', fontSize: 16 }}>{p.emoji}</div>
                <div style={{ fontSize: 12, fontWeight: 600, lineHeight: 1.3 }}>{p.name}</div>
              </div>
              <div className="mono" style={{ fontSize: 11, color: p.color, fontWeight: 600 }}>{p.value}</div>
            </button>
          );
        })}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div>
          <label className="label">Tipe hadiah</label>
          <select className="select" value={reward.rewardType} onChange={(e) => onChange({ ...reward, rewardType: e.target.value })}>
            {types.map((t) => <option key={t.id} value={t.id}>{t.label}</option>)}
          </select>
        </div>
        <div>
          <label className="label">Kuota total</label>
          <input className="input" type="number" min={0} value={reward.quota || 0} onChange={(e) => onChange({ ...reward, quota: Number(e.target.value) || 0 })} />
        </div>
        <div style={{ gridColumn: '1 / -1' }}>
          <label className="label">Nilai / kode / link redeem</label>
          <input className="input" value={reward.valueOrLink || ''} onChange={(e) => onChange({ ...reward, valueOrLink: e.target.value })} placeholder="cth. Voucher Rp 10.000" />
        </div>
      </div>

      <SaveBar busy={busy} onSave={onSave} />
    </Section>
  );
}

// ─── Section: Status & Distribusi ───────────────────────────────
function StatusSection({ campaign, busy, savedAt, onChange }) {
  const slug = campaign.publicSlug;
  const url = `${window.location.origin}/survey/${slug}`;
  const [copied, setCopied] = useState_ce(false);

  const copy = () => {
    navigator.clipboard?.writeText(url);
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  };

  const statuses = [
    { id: 'draft',     label: 'Draft',     hint: 'Sembunyikan dari publik (preview-only)' },
    { id: 'active',    label: 'Aktif',     hint: 'Terima respons dari publik' },
    { id: 'paused',    label: 'Pause',     hint: 'Stop sementara — link tetap bisa dibuka tapi tidak terima submit' },
    { id: 'completed', label: 'Selesai',   hint: 'Final, arsip campaign' },
  ];

  return (
    <Section title="Status & Distribusi" subtitle="Kontrol siapa yang bisa isi & link publik" saved={savedAt}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8, marginBottom: 14 }}>
        {statuses.map((s) => (
          <button key={s.id} onClick={() => onChange(s.id)} disabled={busy} style={{
            padding: 10, textAlign: 'left',
            background: campaign.status === s.id ? 'var(--primary-50)' : 'var(--surface)',
            border: campaign.status === s.id ? '1.5px solid var(--primary)' : '1px solid var(--line)',
            borderRadius: 10, cursor: 'pointer',
          }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: campaign.status === s.id ? 'var(--primary)' : 'var(--ink)' }}>
              {s.label} {campaign.status === s.id && '✓'}
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>{s.hint}</div>
          </button>
        ))}
      </div>

      <div style={{ padding: 10, background: 'var(--bg-2)', borderRadius: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ fontSize: 11, color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>Link publik:</span>
        <code className="mono" style={{ flex: 1, fontSize: 11.5, color: 'var(--ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{url}</code>
        <button onClick={copy} className="btn btn-ghost" style={{ padding: '4px 8px', fontSize: 11 }}>
          {copied ? <><I.Check size={11} /> Tersalin</> : <><I.Copy size={11} /> Salin</>}
        </button>
        <a href={url} target="_blank" rel="noopener" className="btn btn-ghost" style={{ padding: '4px 8px', fontSize: 11 }}>
          <I.Eye size={11} /> Buka
        </a>
      </div>
    </Section>
  );
}

Object.assign(window, { CampaignEditor });