// Employee advocacy + creator/UGC management.

function AdvocacyPage() {
  const hub = window.useClearCast();
  const data = hub.data || {};
  const advocacy = data.advocacy || [];
  const creators = data.creators || [];
  const [text, setText] = React.useState("");
  const [cName, setCName] = React.useState("");
  const origin = window.location.origin;

  const addAdv = async () => { if (!text.trim()) { hub.toast("Add some text"); return; } await hub.actions.addAdvocacy({ caption: text.trim() }); setText(""); };
  const share = async (item) => { try { await navigator.clipboard.writeText(item.caption); } catch (e) {} hub.actions.shareAdvocacy(item.id); };
  const addCreator = async () => { if (!cName.trim()) { hub.toast("Enter a creator"); return; } await hub.actions.addCreator({ name: cName.trim() }); setCName(""); };

  return (
    <div className="page advocacy-page">
      {/* Advocacy feed */}
      <div className="card" style={{ padding: 20, marginBottom: 16 }}>
        <h3 style={{ margin: "0 0 4px", fontSize: 15 }}>Employee advocacy feed</h3>
        <div className="muted" style={{ fontSize: 12.5, marginBottom: 14 }}>Share-ready posts your team (or congregation) can copy and post to their own channels in one tap.</div>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <input className="input" placeholder="Share-ready caption…" value={text} onChange={(e) => setText(e.target.value)} style={{ flex: 1, minWidth: 220 }} />
          <button className="btn btn-primary" onClick={addAdv}><Icon.Plus width="14" height="14" /> Add</button>
        </div>
        <div style={{ display: "grid", gap: 8, marginTop: 12 }}>
          {advocacy.map((item) => (
            <div key={item.id} style={{ display: "flex", alignItems: "center", gap: 12, padding: 12, borderRadius: 10, background: "var(--bg-2)", border: "1px solid var(--border)" }}>
              <div style={{ flex: 1, minWidth: 0, fontSize: 13 }}>{item.caption}</div>
              <span className="faint" style={{ fontSize: 11 }}>{item.shares || 0} shares</span>
              <button className="btn btn-sm btn-primary" onClick={() => share(item)}><Icon.Share width="13" height="13" /> Copy & share</button>
              <button className="btn btn-sm" onClick={() => hub.actions.deleteAdvocacy(item.id)} style={{ color: "var(--danger)" }}>Remove</button>
            </div>
          ))}
          {!advocacy.length && <div className="muted" style={{ fontSize: 12.5 }}>Nothing share-ready yet — add a post above.</div>}
        </div>
      </div>

      {/* Creators / UGC */}
      <div className="card" style={{ padding: 20 }}>
        <h3 style={{ margin: "0 0 4px", fontSize: 15 }}>Creators & UGC</h3>
        <div className="muted" style={{ fontSize: 12.5, marginBottom: 14 }}>Track influencers and user-generated content creators from prospect to active partner.</div>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <input className="input" placeholder="Creator name or @handle" value={cName} onChange={(e) => setCName(e.target.value)} style={{ flex: 1, minWidth: 220 }} />
          <button className="btn btn-primary" onClick={addCreator}><Icon.Plus width="14" height="14" /> Add creator</button>
        </div>
        <div style={{ display: "grid", gap: 8, marginTop: 12 }}>
          {creators.map((c) => (
            <div key={c.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: 12, borderRadius: 10, background: "var(--bg-2)", border: "1px solid var(--border)" }}>
              <b style={{ fontSize: 13 }}>{c.name}</b>
              <select className="input" value={c.status} onChange={(e) => hub.actions.updateCreator(c.id, { status: e.target.value })} style={{ width: 130, height: 30, fontSize: 12, marginLeft: "auto" }}>
                <option value="prospect">Prospect</option>
                <option value="active">Active</option>
                <option value="declined">Declined</option>
              </select>
              <button className="btn btn-sm" onClick={() => hub.actions.deleteCreator(c.id)} style={{ color: "var(--danger)" }}>Remove</button>
            </div>
          ))}
          {!creators.length && <div className="muted" style={{ fontSize: 12.5 }}>No creators tracked yet.</div>}
        </div>
      </div>
    </div>
  );
}

window.AdvocacyPage = AdvocacyPage;