const { useState, useEffect } = React;

/* CRM · Sequences — multi-step email cadences. Build a sequence (ordered steps with
 * day delays + merge-field templates); enroll contacts; the crm-sequence-runner cron
 * sends each due step from the broker's connected mailbox and advances the cadence.
 * Exposes: window.CrmSequencesPage (full screen) + window.CrmEnrollModal (enroll a contact). */

const MERGE_HINT = "{{first_name}}, {{name}}, {{company}}";
const c_ = () => window.ContactIQ && window.ContactIQ.client;
const useToast = () => { const ctx = React.useContext(window.CrmContext) || {}; return ctx.toast || ((m) => { try { window.alert(m); } catch (_) {} }); };
const fmtWhen = (s) => { try { return new Date(s).toLocaleString(); } catch { return ""; } };

/* ---------- Sequence editor ---------- */
function SequenceEditor({ seq, onClose, onSaved }) {
  const toast = useToast();
  const [name, setName] = useState((seq && seq.name) || "");
  const [active, setActive] = useState(seq ? !!seq.active : true);
  const [steps, setSteps] = useState(
    seq && seq.steps && seq.steps.length
      ? seq.steps.map((s) => ({ delay_days: s.delay_days, subject: s.subject, body: s.body, active: s.active !== false }))
      : [{ delay_days: 0, subject: "", body: "", active: true }]
  );
  const [saving, setSaving] = useState(false);

  const setStep = (i, k, v) => setSteps((p) => p.map((s, j) => (j === i ? { ...s, [k]: v } : s)));
  const addStep = () => setSteps((p) => [...p, { delay_days: 3, subject: "", body: "", active: true }]);
  const rmStep = (i) => setSteps((p) => (p.length > 1 ? p.filter((_, j) => j !== i) : p));

  const save = async () => {
    const c = c_(); if (!c) return;
    if (!name.trim()) { toast("Name the sequence first"); return; }
    if (steps.some((s) => !s.subject.trim())) { toast("Every step needs a subject"); return; }
    setSaving(true);
    const { error } = await c.rpc("crm_sequence_save", {
      p_id: (seq && seq.id) || null, p_name: name.trim(), p_active: active,
      p_steps: steps.map((s) => ({ delay_days: Math.max(0, parseInt(s.delay_days, 10) || 0), subject: s.subject, body: s.body, active: s.active })),
    });
    setSaving(false);
    if (error) { toast("Save failed: " + error.message); return; }
    toast("Sequence saved"); onSaved && onSaved();
  };

  return (
    <div className="report-modal-overlay" onClick={onClose}>
      <div className="report-modal" style={{ maxWidth: 720 }} onClick={(e) => e.stopPropagation()}>
        <div className="card-head"><span className="ch-title">{seq ? "Edit sequence" : "New sequence"}</span><span className="ch-spacer"></span><button className="row-action" onClick={onClose}>Close ✕</button></div>
        <div style={{ padding: "14px", display: "grid", gap: "12px", maxHeight: "72vh", overflow: "auto" }}>
          <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Sequence name (e.g. Cold outreach — owners)" style={{ flex: 1, padding: "9px 11px", borderRadius: 8, border: "1px solid var(--border)", background: "var(--bg-1)", color: "var(--fg-1)" }} />
            <label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: "var(--fs-base)", color: "var(--fg-2)" }}><input type="checkbox" checked={active} onChange={(e) => setActive(e.target.checked)} /> Active</label>
          </div>
          <div style={{ fontSize: "var(--fs-sm)", color: "var(--fg-3)" }}>Merge fields: <code>{MERGE_HINT}</code> · Day delay is counted from the previous step (step 1 = days after enrollment).</div>

          {steps.map((s, i) => (
            <div key={i} className="card" style={{ padding: "11px 12px", display: "grid", gap: "8px", background: "var(--bg-1)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span className="pill" style={{ padding: "1px 8px" }}>Step {i + 1}</span>
                <label style={{ fontSize: "var(--fs-sm)", color: "var(--fg-2)", display: "flex", alignItems: "center", gap: 6 }}>
                  {i === 0 ? "Send" : "Then wait"} <input type="number" min="0" value={s.delay_days} onChange={(e) => setStep(i, "delay_days", e.target.value)} style={{ width: 56, padding: "5px 7px", borderRadius: 6, border: "1px solid var(--border)", background: "var(--bg-2)", color: "var(--fg-1)" }} /> {i === 0 ? "days after enroll" : "days, then send"}
                </label>
                <span className="ch-spacer" style={{ flex: 1 }}></span>
                <label style={{ fontSize: "var(--fs-sm)", color: "var(--fg-3)", display: "flex", alignItems: "center", gap: 5 }}><input type="checkbox" checked={s.active} onChange={(e) => setStep(i, "active", e.target.checked)} /> on</label>
                {steps.length > 1 && <button className="row-action" onClick={() => rmStep(i)} style={{ color: "var(--red)" }}>Remove</button>}
              </div>
              <input value={s.subject} onChange={(e) => setStep(i, "subject", e.target.value)} placeholder="Subject" style={{ padding: "8px 10px", borderRadius: 7, border: "1px solid var(--border)", background: "var(--bg-2)", color: "var(--fg-1)" }} />
              <textarea value={s.body} onChange={(e) => setStep(i, "body", e.target.value)} placeholder={"Body — HTML or plain text. Hi {{first_name}}, …"} rows={4} style={{ padding: "8px 10px", borderRadius: 7, border: "1px solid var(--border)", background: "var(--bg-2)", color: "var(--fg-1)", resize: "vertical", fontFamily: "inherit" }} />
            </div>
          ))}
          <div><button className="row-action" onClick={addStep}>+ Add step</button></div>
        </div>
        <div className="card-head" style={{ borderTop: "1px solid var(--border)", borderBottom: "none" }}>
          <span className="ch-spacer" style={{ flex: 1 }}></span>
          <button className="row-action" onClick={onClose} style={{ marginRight: 10 }}>Cancel</button>
          <button className="crm-gate-btn" style={{ padding: "7px 16px" }} disabled={saving} onClick={save}>{saving ? "Saving…" : "Save sequence"}</button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Enroll-a-contact modal (used from the account contact list) ---------- */
function CrmEnrollModal({ recipient, orgId, orgName, onClose }) {
  const toast = useToast();
  const [seqs, setSeqs] = useState(null);
  const [busy, setBusy] = useState(false);
  useEffect(() => {
    const c = c_(); if (!c) return;
    c.rpc("crm_sequences_list").then(({ data }) => setSeqs((data || []).filter((s) => s.active)));
  }, []);
  const enroll = async (seqId) => {
    const c = c_(); if (!c || busy) return;
    setBusy(true);
    const { data, error } = await c.rpc("crm_enroll", {
      p_sequence_id: seqId, p_to_email: recipient.to, p_to_name: recipient.name || null,
      p_org_id: orgId || null, p_person_id: recipient.person_id || null, p_deal_id: null,
    });
    setBusy(false);
    if (error) { toast("Enroll failed: " + error.message); return; }
    toast(data ? "Enrolled " + recipient.to : "Already enrolled in that sequence");
    onClose && onClose();
  };
  return (
    <div className="report-modal-overlay" onClick={onClose}>
      <div className="report-modal" style={{ maxWidth: 440 }} onClick={(e) => e.stopPropagation()}>
        <div className="card-head"><span className="ch-title">Add to sequence</span><span className="ch-spacer"></span><button className="row-action" onClick={onClose}>✕</button></div>
        <div style={{ padding: "8px 14px 4px", fontSize: "var(--fs-base)", color: "var(--fg-2)" }}>{recipient.name ? recipient.name + " · " : ""}{recipient.to}{orgName ? " · " + orgName : ""}</div>
        <div style={{ padding: "6px 0 12px" }}>
          {seqs === null && <div className="muted" style={{ padding: "16px", textAlign: "center" }}>Loading…</div>}
          {seqs && !seqs.length && <div className="muted" style={{ padding: "16px", textAlign: "center", fontSize: "var(--fs-base)" }}>No active sequences. Build one in <strong>Sequences</strong> first.</div>}
          {seqs && seqs.map((s) => (
            <div className="contact-row" key={s.id} style={{ cursor: busy ? "default" : "pointer" }} onClick={() => enroll(s.id)}>
              <div className="contact-main"><div className="contact-name">{s.name}</div><div className="contact-title">{(s.steps || []).length} steps · {s.active_enrollments} active</div></div>
              <a className="row-action">Enroll →</a>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.CrmEnrollModal = CrmEnrollModal;

/* ---------- Automations (crm_alert_rules: signal → task / sequence) ---------- */
const EVENT_OPTS = [
  { k: "ucc_lien", label: "UCC lien" },
  { k: "tax_lien", label: "Tax lien" },
  { k: "warn", label: "WARN layoff" },
  { k: "refinance", label: "Refinance" },
  { k: "sec_8k", label: "SEC 8-K" },
  { k: "form_d", label: "Form D (raise)" },
  { k: "property_sale", label: "Property sale" },
];
const evLabel = (t) => (EVENT_OPTS.find((o) => o.k === t) || { label: t }).label;

function NewAutomation({ seqs, onSaved }) {
  const toast = useToast();
  const [evts, setEvts] = useState(["ucc_lien", "tax_lien", "warn"]);
  const [scope, setScope] = useState("all_watched");
  const [state, setState] = useState("");
  const [taskOn, setTaskOn] = useState(true);
  const [seqId, setSeqId] = useState("");
  const [saving, setSaving] = useState(false);
  const tog = (k) => setEvts((p) => (p.includes(k) ? p.filter((x) => x !== k) : [...p, k]));
  const save = async () => {
    const c = c_(); if (!c) return;
    if (!evts.length) { toast("Pick at least one signal"); return; }
    if (!taskOn && !seqId) { toast("Pick an action — task or sequence"); return; }
    if (scope === "territory" && !state.trim()) { toast("Enter a 2-letter state"); return; }
    setSaving(true);
    const { error } = await c.rpc("crm_alert_rule_save", {
      p_id: null, p_scope: scope, p_state: scope === "territory" ? state.trim().toUpperCase() : null,
      p_event_types: evts, p_min_amount: null, p_task_on: taskOn,
      p_enroll_sequence_id: seqId ? Number(seqId) : null, p_active: true,
    });
    setSaving(false);
    if (error) { toast("Save failed: " + error.message); return; }
    toast("Automation created"); onSaved && onSaved();
  };
  const cell = { padding: "5px 7px", borderRadius: 6, border: "1px solid var(--border)", background: "var(--bg-1)", color: "var(--fg-1)" };
  return (
    <div className="card" style={{ padding: "14px", display: "grid", gap: "12px", marginBottom: 14 }}>
      <div style={{ fontWeight: 600 }}>New automation</div>
      <div>
        <div className="st-label" style={{ marginBottom: 6 }}>When one of these signals fires</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
          {EVENT_OPTS.map((o) => (
            <label key={o.k} style={{ display: "flex", alignItems: "center", gap: 5, fontSize: "var(--fs-sm)", padding: "4px 8px", border: "1px solid var(--border)", borderRadius: 6, cursor: "pointer", background: evts.includes(o.k) ? "var(--accent)" : "transparent", color: evts.includes(o.k) ? "#fff" : "var(--fg-2)" }}>
              <input type="checkbox" checked={evts.includes(o.k)} onChange={() => tog(o.k)} /> {o.label}
            </label>
          ))}
        </div>
      </div>
      <div style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
        <span className="st-label">on</span>
        <label style={{ display: "flex", gap: 5, alignItems: "center" }}><input type="radio" name="scope" checked={scope === "all_watched"} onChange={() => setScope("all_watched")} /> my followed companies</label>
        <label style={{ display: "flex", gap: 5, alignItems: "center" }}><input type="radio" name="scope" checked={scope === "territory"} onChange={() => setScope("territory")} /> companies in</label>
        {scope === "territory" && <input value={state} onChange={(e) => setState(e.target.value)} placeholder="CT" maxLength={2} style={{ ...cell, width: 48 }} />}
      </div>
      <div style={{ display: "flex", gap: 18, alignItems: "center", flexWrap: "wrap" }}>
        <span className="st-label">then</span>
        <label style={{ display: "flex", gap: 5, alignItems: "center" }}><input type="checkbox" checked={taskOn} onChange={(e) => setTaskOn(e.target.checked)} /> create a task</label>
        <label style={{ display: "flex", gap: 6, alignItems: "center" }}>enroll contact in
          <select value={seqId} onChange={(e) => setSeqId(e.target.value)} style={cell}>
            <option value="">— no sequence —</option>
            {(seqs || []).filter((s) => s.active).map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
          </select>
        </label>
      </div>
      <div><button className="crm-gate-btn" style={{ padding: "7px 16px" }} disabled={saving} onClick={save}>{saving ? "Saving…" : "Create automation"}</button></div>
    </div>
  );
}

/* ---------- Full screen ---------- */
function SequencesView() {
  const toast = useToast();
  const [seqs, setSeqs] = useState(null);
  const [enrolls, setEnrolls] = useState([]);
  const [editing, setEditing] = useState(null); // seq object or {} for new
  const [rules, setRules] = useState([]);
  const [tab, setTab] = useState("sequences");

  const load = () => {
    const c = c_(); if (!c) return;
    c.rpc("crm_sequences_list").then(({ data }) => setSeqs(data || []));
    c.rpc("crm_enrollments_list", { p_status: null }).then(({ data }) => setEnrolls(data || []));
    c.rpc("crm_alert_rules_list").then(({ data }) => setRules(data || []));
  };
  useEffect(load, []);

  const stop = async (id) => {
    const c = c_(); if (!c) return;
    await c.rpc("crm_enrollment_stop", { p_id: id });
    toast("Enrollment stopped"); load();
  };
  const ruleToggle = async (r) => {
    const c = c_(); if (!c) return;
    await c.rpc("crm_alert_rule_save", { p_id: r.id, p_scope: r.scope, p_state: r.state, p_event_types: r.event_types, p_min_amount: r.min_amount, p_task_on: r.task_on, p_enroll_sequence_id: r.enroll_sequence_id, p_active: !r.active });
    load();
  };
  const ruleDelete = async (r) => {
    const c = c_(); if (!c) return;
    await c.rpc("crm_alert_rule_delete", { p_id: r.id });
    toast("Automation deleted"); load();
  };

  return (
    <div className="page">
      <div className="page-head" style={{ marginBottom: "14px", display: "flex", alignItems: "flex-end" }}>
        <div className="ph-text">
          <div className="eyebrow">Outbound email</div>
          <h1 className="page-title">Sequences</h1>
          <div className="page-sub">Automated multi-step follow-up cadences — sent from your connected mailbox during business hours</div>
        </div>
        <span className="ch-spacer" style={{ flex: 1 }}></span>
        <button className="crm-gate-btn" style={{ padding: "8px 16px" }} onClick={() => setEditing({})}>+ New sequence</button>
      </div>

      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
        <button className={"pill" + (tab === "sequences" ? " active" : "")} style={{ padding: "4px 12px", cursor: "pointer", background: tab === "sequences" ? "var(--accent)" : "var(--bg-2)", color: tab === "sequences" ? "#fff" : "var(--fg-2)" }} onClick={() => setTab("sequences")}>Sequences</button>
        <button className={"pill" + (tab === "enrollments" ? " active" : "")} style={{ padding: "4px 12px", cursor: "pointer", background: tab === "enrollments" ? "var(--accent)" : "var(--bg-2)", color: tab === "enrollments" ? "#fff" : "var(--fg-2)" }} onClick={() => setTab("enrollments")}>Enrollments{enrolls.length ? " · " + enrolls.length : ""}</button>
        <button className={"pill" + (tab === "automations" ? " active" : "")} style={{ padding: "4px 12px", cursor: "pointer", background: tab === "automations" ? "var(--accent)" : "var(--bg-2)", color: tab === "automations" ? "#fff" : "var(--fg-2)" }} onClick={() => setTab("automations")}>Automations{rules.length ? " · " + rules.length : ""}</button>
      </div>

      {tab === "sequences" && (
        <div className="inbox">
          {seqs === null && <div className="muted" style={{ padding: "28px", textAlign: "center" }}>Loading…</div>}
          {seqs && !seqs.length && <div className="muted" style={{ padding: "28px", textAlign: "center", fontSize: "var(--fs-base)" }}>No sequences yet. Click <strong>New sequence</strong> to build a cadence.</div>}
          {seqs && seqs.map((s) => (
            <div className="sig-row" key={s.id} style={{ cursor: "pointer" }} onClick={() => setEditing(s)}>
              <div className="sig-col-main">
                <div className="sr-addr"><span className="a">{s.name}</span>{!s.active && <span className="pill" style={{ marginLeft: 8, color: "var(--fg-3)" }}>paused</span>}</div>
                <div className="sr-fact">{(s.steps || []).length} steps · {s.active_enrollments} active · {s.total_enrollments} total enrolled</div>
              </div>
              <div className="sig-col-action"><a className="row-action">Edit →</a></div>
            </div>
          ))}
        </div>
      )}

      {tab === "enrollments" && (
        <div className="inbox">
          {!enrolls.length && <div className="muted" style={{ padding: "28px", textAlign: "center", fontSize: "var(--fs-base)" }}>No enrollments yet. Open a company, reveal a contact, and use <strong>Add to sequence</strong>.</div>}
          {enrolls.map((e) => (
            <div className="sig-row" key={e.id}>
              <div className="sig-col-main">
                <div className="sr-addr"><span className="a">{e.to_name || e.to_email}</span></div>
                <div className="sr-fact">{e.sequence_name} · step {e.current_step}/{e.steps_total}{e.status === "active" && e.next_send_at ? " · next " + fmtWhen(e.next_send_at) : ""}</div>
              </div>
              <div className="sig-col-prov"><span className="pill" style={{ color: e.status === "active" ? "var(--green)" : e.status === "completed" ? "var(--accent)" : "var(--fg-3)" }}>{e.status}</span></div>
              <div className="sig-col-action">{e.status === "active" && <button className="row-action" style={{ color: "var(--red)" }} onClick={() => stop(e.id)}>Stop</button>}</div>
            </div>
          ))}
        </div>
      )}

      {tab === "automations" && (
        <div>
          <div style={{ marginBottom: 8, color: "var(--fg-3)", fontSize: "var(--fs-sm)" }}>When a public-records signal lands on an in-scope company, automatically create a task and/or enroll the owner contact in a sequence.</div>
          <NewAutomation seqs={seqs} onSaved={load} />
          <div className="inbox">
            {!rules.length && <div className="muted" style={{ padding: "20px", textAlign: "center", fontSize: "var(--fs-base)" }}>No automations yet. Create one above.</div>}
            {rules.map((r) => {
              const evs = (r.event_types || []).map(evLabel).join(", ") || "any signal";
              const scopeLabel = r.scope === "all_watched" ? "followed companies" : r.scope === "territory" ? ("companies in " + (r.state || "?")) : "one company";
              const acts = [r.task_on ? "create task" : null, r.enroll_sequence_id ? ("enroll → " + (r.sequence_name || "sequence")) : null].filter(Boolean).join(" + ") || "(no action)";
              return (
                <div className="sig-row" key={r.id}>
                  <div className="sig-col-main">
                    <div className="sr-addr"><span className="a">{evs}</span>{!r.active && <span className="pill" style={{ marginLeft: 8, color: "var(--fg-3)" }}>off</span>}</div>
                    <div className="sr-fact">on {scopeLabel} → {acts} · fired {r.fired || 0}×</div>
                  </div>
                  <div className="sig-col-action">
                    <button className="row-action" onClick={() => ruleToggle(r)}>{r.active ? "Pause" : "Resume"}</button>
                    <button className="row-action" style={{ color: "var(--red)", marginLeft: 10 }} onClick={() => ruleDelete(r)}>Delete</button>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {editing && <SequenceEditor seq={editing.id ? editing : null} onClose={() => setEditing(null)} onSaved={() => { setEditing(null); load(); }} />}
    </div>
  );
}

function CrmSequencesPage({ go, user }) {
  return <window.CrmShell go={go} user={user} current="sequences"><SequencesView /></window.CrmShell>;
}
window.CrmSequencesPage = CrmSequencesPage;