/* AmplifyPanel — appears at `published`. The first-hour amplification
   checklist + follow-up capture (concept §7 / build plan M9). */
(function () {
  const S = window.CroprStore;
  const D = window.CROPR_DATA;

  function AddList({ items, onAdd, onRemove, placeholder, icon }) {
    const [val, setVal] = React.useState("");
    const add = () => { if (val.trim()) { onAdd(val.trim()); setVal(""); } };
    return (
      <div>
        <div style={{ display: "flex", gap: 8, marginBottom: items.length ? 8 : 0 }}>
          <TextInput value={val} onChange={setVal} placeholder={placeholder} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); add(); } }} />
          <Button variant="secondary" icon="plus" onClick={add}>Add</Button>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
          {items.map((it, i) => (
            <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "var(--bg-muted)", borderRadius: 999, padding: "4px 6px 4px 11px", fontSize: 12, fontWeight: 500 }}>
              {icon && <Icon name={icon} size={13} color="var(--fg3)" />}
              <span style={{ maxWidth: 220, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{it}</span>
              <button onClick={() => onRemove(i)} style={{ border: 0, background: "none", cursor: "pointer", display: "grid", placeItems: "center" }}><Icon name="x" size={13} color="var(--fg3)" /></button>
            </span>
          ))}
        </div>
      </div>
    );
  }

  function Check({ on, onToggle, label }) {
    return (
      <label style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer", padding: "7px 0", fontSize: 13, color: on ? "var(--fg2)" : "var(--fg1)" }}>
        <span onClick={onToggle} style={{ width: 20, height: 20, borderRadius: 6, flex: "none", border: `1.5px solid ${on ? "var(--success)" : "var(--border-strong)"}`,
          background: on ? "var(--success)" : "transparent", display: "grid", placeItems: "center", transition: "all 140ms" }}>
          {on && <Icon name="check" size={14} color="#fff" />}
        </span>
        <span style={{ textDecoration: on ? "line-through" : "none" }}>{label}</span>
      </label>
    );
  }

  function AmplifyPanel({ post, onToast }) {
    const a = post.amplify;
    const setChecklist = (k) => S.updateAmplify(post.id, { checklist: { ...a.checklist, [k]: !a.checklist[k] } });
    const done = Object.values(a.checklist).filter(Boolean).length;

    return (
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
          <Icon name="megaphone" size={18} color="var(--accent)" />
          <span style={{ fontSize: 13, fontWeight: 700 }}>Amplify — first hour</span>
          <div style={{ flex: 1 }} />
          <Badge color={done === 4 ? "#0E8A50" : "#6E6E7A"} bg={done === 4 ? "var(--success-bg)" : "var(--bg-muted)"}>{done}/4</Badge>
        </div>

        <Field label="Founder QRT owner">
          <Segmented value={a.founderQrtOwner || ""} onChange={(v) => S.updateAmplify(post.id, { founderQrtOwner: v })}
            options={[{ value: "jo", label: "Jo" }, { value: "nitin", label: "Nitin" }]} />
        </Field>

        <div style={{ background: "var(--bg-subtle)", borderRadius: 12, padding: "6px 14px", margin: "6px 0 14px" }}>
          <Check on={a.checklist.founderQrtLive} onToggle={() => setChecklist("founderQrtLive")} label="Founder quote-tweet is live" />
          <Check on={a.checklist.teamRepliesReady} onToggle={() => setChecklist("teamRepliesReady")} label="Team replies ready to go" />
          <Check on={a.checklist.accountsIdentified} onToggle={() => setChecklist("accountsIdentified")} label="Engaged accounts identified" />
          <Check on={a.checklist.partnerTagsChecked} onToggle={() => setChecklist("partnerTagsChecked")} label="Partner tags checked" />
        </div>

        <Field label="Team repliers"><AddList items={a.teamRepliers} icon="user" placeholder="Add a team member" onAdd={(v) => S.updateAmplify(post.id, { teamRepliers: [...a.teamRepliers, v] })} onRemove={(i) => S.updateAmplify(post.id, { teamRepliers: a.teamRepliers.filter((_, j) => j !== i) })} /></Field>
        <Field label="Reply targets" hint="Thread URLs to reply under."><AddList items={a.replyTargets} icon="link" placeholder="Paste a thread URL" onAdd={(v) => S.updateAmplify(post.id, { replyTargets: [...a.replyTargets, v] })} onRemove={(i) => S.updateAmplify(post.id, { replyTargets: a.replyTargets.filter((_, j) => j !== i) })} /></Field>
        <Field label="Follow-up list" hint="Engaged accounts captured for later."><AddList items={a.followUpList} icon="at-sign" placeholder="@account that engaged" onAdd={(v) => S.updateAmplify(post.id, { followUpList: [...a.followUpList, v] })} onRemove={(i) => S.updateAmplify(post.id, { followUpList: a.followUpList.filter((_, j) => j !== i) })} /></Field>
      </div>
    );
  }
  window.AmplifyPanel = AmplifyPanel;
})();