/* Wa by Elivate — Send message */

function SendScreen({ go }) {
  const [groups, setGroups] = React.useState([]);
  const [groupError, setGroupError] = React.useState("");
  const [to, setTo] = React.useState("user");
  const [number, setNumber] = React.useState("");
  const [groupId, setGroupId] = React.useState("");
  const [msg, setMsg] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState("");

  React.useEffect(() => {
    window.WaApi.groups().then(setGroups).catch((err) => setGroupError(err.message));
  }, []);

  const target = to === "user" ? (number || "No number") : (groups.find(g => g.id === groupId)?.name || "No group selected");
  const jid = to === "user" ? `${number || "234…"}@s.whatsapp.net` : (groupId || "…@g.us");
  const canSend = msg.trim() && (to === "user" ? number : groupId);

  const send = async () => {
    if (!canSend || sending) return;
    setSending(true);
    setError("");
    try {
      await window.WaApi.send({ to: to === "user" ? number : groupId, type: to, message: msg });
      setSent(true);
      setMsg("");
      setTimeout(() => setSent(false), 2400);
    } catch (err) {
      setError(err.message);
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="page route-anim" style={{ maxWidth: 920 }}>
      <div className="send-grid">
        <div className="card card-pad">
          <div className="seg" style={{ marginBottom: 18 }}>
            <button className={"seg-btn" + (to === "user" ? " active" : "")} onClick={() => setTo("user")}><Icons.phone size={14} /> Contact</button>
            <button className={"seg-btn" + (to === "group" ? " active" : "")} onClick={() => setTo("group")}><Icons.users size={14} /> Group</button>
          </div>

          {to === "user" ? <div style={{ marginBottom: 16 }}>
            <label className="field-label">Phone number <span className="muted">· international format, no +</span></label>
            <input className="input mono" placeholder="2348012345678" value={number} onChange={(e) => setNumber(e.target.value.replace(/[^0-9]/g, ""))} />
          </div> : <div style={{ marginBottom: 16 }}>
            <label className="field-label">Group</label>
            <select className="select" value={groupId} onChange={(e) => setGroupId(e.target.value)}>
              <option value="" disabled>Select a group…</option>
              {groups.map((g) => <option key={g.id} value={g.id}>{g.name} · {g.memberCount} members</option>)}
            </select>
            {groupError && <p className="insp-hint">{groupError}. Connect WhatsApp to load live groups.</p>}
          </div>}

          <label className="field-label">Message</label>
          <MessageComposer
            value={msg}
            onChange={setMsg}
            placeholder="Write your message..."
            minHeight={150}
            preview={false}
          />

          <div className="send-foot">
            <div className="muted" style={{ fontSize: 12 }}>{msg.length} chars · throttled 3–10s</div>
            <button className={"btn primary" + (canSend ? "" : " disabled")} onClick={send} disabled={!canSend}>
              {sending ? "Sending..." : sent ? <><Icons.check size={16} /> Sent</> : <><Icons.send size={16} /> Send message</>}
            </button>
          </div>
          {error && <div className="status-json" style={{ color: "var(--amber)", whiteSpace: "normal" }}>{error}</div>}
        </div>

        <div className="send-side">
          <div className="card card-pad">
            <div className="ds-label" style={{ marginBottom: 12 }}>Preview</div>
            <div className="wa-preview">
              <div className="wap-head"><span className="dot green"></span> {to === "group" ? target : (number ? "+" + number : "No number")}</div>
              <div className="wap-body">
                <div className="wap-bubble"><WhatsAppTextPreview text={msg} /><span className="wap-time">now ✓✓</span></div>
              </div>
            </div>
          </div>
          <div className="card card-pad endpoint-card">
            <div className="endpoint-row"><span className="tag green">POST</span><code className="mono">/api/send</code></div>
            <div className="status-json mono" style={{ marginTop: 10 }}>{`{\n  "to": "${to === "user" ? (number || "234…") : (groupId || "…")}",\n  "type": "${to}",\n  "message": "${msg.slice(0, 24)}${msg.length > 24 ? "…" : ""}"\n}`}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.SendScreen = SendScreen;