/* ───────────────────────── CEMETERY · LOT SALE → DOCUSIGN ───────────────────────── */
function SaleModal({ rec, onClose, onSent }) {
    const [step, setStep] = useState("details"); // details | docs | sending | sent
    const [buyer, setBuyer] = useState("");
    const [email, setEmail] = useState("");
    const [plan, setPlan] = useState("full"); // full | installments
    const [type, setType] = useState("atneed"); // atneed | preneed
    const [fieldVals, setFieldVals] = useState({});
    const price = rec.listPrice || 2400;

    const templates = useMemo(() => {
        const all = window.__getTemplates ? window.__getTemplates() : [];
        return all.filter((t) => !t.preneed || type === "preneed");
    }, [type]);
    const editableFields = useMemo(() => {
        const seen = new Set();
        const out = [];
        templates.forEach((t) =>
            t.editable.forEach((k) => {
                if (k === "plot" || k === "section") return;
                if (!seen.has(k)) {
                    seen.add(k);
                    out.push(k);
                }
            }),
        );
        return out;
    }, [templates]);

    const goDocs = () => {
        const today = new Date().toLocaleDateString("en-US", {
            month: "short",
            day: "numeric",
            year: "numeric",
        });
        const defaults = {
            buyer_name: buyer,
            buyer_email: email,
            buyer_phone: "",
            deceased: rec.name || "",
            price: "$" + price.toLocaleString(),
            plan: plan === "full" ? "Paid in full" : "12-month plan",
            sale_date: today,
            officiant: "",
            care_terms: "Perpetual care",
        };
        setFieldVals((fv) => ({
            ...defaults,
            ...fv,
            buyer_name: buyer || fv.buyer_name || "",
            buyer_email: email || fv.buyer_email || "",
        }));
        setStep("docs");
    };
    const setFV = (k, v) => setFieldVals((fv) => ({ ...fv, [k]: v }));

    useEffect(() => {
        if (step !== "sending") return;
        const t = setTimeout(() => setStep("sent"), 1900);
        return () => clearTimeout(t);
    }, [step]);

    const envelope = "ENV-" + (rec.id * 7 + 418);
    const docs = templates.map((t) => ({
        n: t.name,
        m: t.kind + " · " + t.pages + " page" + (t.pages > 1 ? "s" : ""),
    }));

    return (
        <div
            className="overlay"
            onClick={(e) => {
                if (
                    e.target.classList.contains("overlay") &&
                    step !== "sending"
                )
                    onClose();
            }}
        >
            <div className="modal" style={{ width: "min(580px,100%)" }}>
                <div className="modal-h">
                    <div
                        style={{
                            width: 34,
                            height: 34,
                            borderRadius: 9,
                            background:
                                "color-mix(in oklab,var(--brand) 12%,var(--paper))",
                            color: "var(--brand)",
                            display: "grid",
                            placeItems: "center",
                            flex: "none",
                        }}
                    >
                        $
                    </div>
                    <h3>
                        {step === "sent"
                            ? "Sent for signature"
                            : "Sell " + rec.plot}
                    </h3>
                    {step !== "sending" && (
                        <button className="x" onClick={onClose}>
                            ×
                        </button>
                    )}
                </div>
                <div className="modal-b">
                    {/* progress rail */}
                    {step !== "sent" && (
                        <div
                            style={{
                                display: "flex",
                                alignItems: "center",
                                gap: 8,
                                marginBottom: 18,
                            }}
                        >
                            {["Buyer", "Documents", "Send"].map((s, i) => {
                                const active =
                                    (step === "details" && i === 0) ||
                                    (step === "docs" && i === 1) ||
                                    (step === "sending" && i === 2);
                                const done =
                                    (step === "docs" && i < 1) ||
                                    (step === "sending" && i < 2);
                                return (
                                    <React.Fragment key={s}>
                                        <div
                                            style={{
                                                display: "flex",
                                                alignItems: "center",
                                                gap: 7,
                                            }}
                                        >
                                            <div
                                                style={{
                                                    width: 22,
                                                    height: 22,
                                                    borderRadius: "50%",
                                                    display: "grid",
                                                    placeItems: "center",
                                                    fontSize: 11,
                                                    fontWeight: 700,
                                                    background: active
                                                        ? "var(--brand)"
                                                        : done
                                                          ? "var(--ok)"
                                                          : "var(--paper-2)",
                                                    color:
                                                        active || done
                                                            ? "#fff"
                                                            : "var(--faint)",
                                                    border: "1px solid var(--line)",
                                                }}
                                            >
                                                {done ? "✓" : i + 1}
                                            </div>
                                            <span
                                                style={{
                                                    fontSize: 12.5,
                                                    fontWeight: 600,
                                                    color: active
                                                        ? "var(--ink)"
                                                        : "var(--faint)",
                                                }}
                                            >
                                                {s}
                                            </span>
                                        </div>
                                        {i < 2 && (
                                            <div
                                                style={{
                                                    flex: 1,
                                                    height: 1,
                                                    background: "var(--line)",
                                                }}
                                            ></div>
                                        )}
                                    </React.Fragment>
                                );
                            })}
                        </div>
                    )}

                    {step === "details" && (
                        <div className="fade-in">
                            <div
                                className="import-row"
                                style={{ marginBottom: 16 }}
                            >
                                <div
                                    className="fi"
                                    style={{
                                        background:
                                            "color-mix(in oklab,var(--ok) 14%,var(--paper))",
                                        color: "var(--ok)",
                                    }}
                                >
                                    ⌖
                                </div>
                                <div style={{ flex: 1 }}>
                                    <div className="fn">
                                        Plot {rec.plot} · {rec.section.name}
                                    </div>
                                    <div className="fm">
                                        Single lawn · ${price.toLocaleString()}
                                    </div>
                                </div>
                                <span className="pill available">
                                    <i className="pd"></i>Available
                                </span>
                            </div>

                            <div
                                className="field-grid"
                                style={{
                                    display: "grid",
                                    gridTemplateColumns: "1fr 1fr",
                                    gap: 12,
                                }}
                            >
                                <div style={{ gridColumn: "1/3" }}>
                                    <label className="flbl">Buyer name</label>
                                    <input
                                        className="finp"
                                        value={buyer}
                                        onChange={(e) =>
                                            setBuyer(e.target.value)
                                        }
                                        placeholder="e.g. Margaret Galloway"
                                    />
                                </div>
                                <div style={{ gridColumn: "1/3" }}>
                                    <label className="flbl">
                                        Buyer email{" "}
                                        <span
                                            className="muted"
                                            style={{
                                                textTransform: "none",
                                                letterSpacing: 0,
                                            }}
                                        >
                                            · documents go here
                                        </span>
                                    </label>
                                    <input
                                        className="finp"
                                        value={email}
                                        onChange={(e) =>
                                            setEmail(e.target.value)
                                        }
                                        placeholder="name@email.com"
                                    />
                                </div>
                                <div>
                                    <label className="flbl">Sale type</label>
                                    <div
                                        className="seg"
                                        style={{ width: "100%" }}
                                    >
                                        <button
                                            className={
                                                type === "atneed" ? "on" : ""
                                            }
                                            style={{ flex: 1 }}
                                            onClick={() => setType("atneed")}
                                        >
                                            At-need
                                        </button>
                                        <button
                                            className={
                                                type === "preneed" ? "on" : ""
                                            }
                                            style={{ flex: 1 }}
                                            onClick={() => setType("preneed")}
                                        >
                                            Pre-need
                                        </button>
                                    </div>
                                </div>
                                <div>
                                    <label className="flbl">Payment</label>
                                    <div
                                        className="seg"
                                        style={{ width: "100%" }}
                                    >
                                        <button
                                            className={
                                                plan === "full" ? "on" : ""
                                            }
                                            style={{ flex: 1 }}
                                            onClick={() => setPlan("full")}
                                        >
                                            In full
                                        </button>
                                        <button
                                            className={
                                                plan === "installments"
                                                    ? "on"
                                                    : ""
                                            }
                                            style={{ flex: 1 }}
                                            onClick={() =>
                                                setPlan("installments")
                                            }
                                        >
                                            Plan
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <button
                                className="btn primary"
                                style={{
                                    width: "100%",
                                    justifyContent: "center",
                                    marginTop: 18,
                                }}
                                onClick={goDocs}
                            >
                                Review documents →
                            </button>
                        </div>
                    )}

                    {step === "docs" && (
                        <div className="fade-in">
                            {editableFields.length > 0 && (
                                <>
                                    <div
                                        className="sec-h"
                                        style={{ marginTop: 0 }}
                                    >
                                        <h3>Edit before signing</h3>
                                        <div className="ln"></div>
                                        <span className="cnt">
                                            {editableFields.length}
                                        </span>
                                    </div>
                                    <p
                                        className="muted"
                                        style={{
                                            fontSize: 12.5,
                                            marginBottom: 12,
                                        }}
                                    >
                                        These fields are open for this sale.
                                        Everything else (plot, section)
                                        auto-fills from the record and locks.
                                    </p>
                                    <div
                                        style={{
                                            display: "grid",
                                            gridTemplateColumns: "1fr 1fr",
                                            gap: 10,
                                            marginBottom: 18,
                                        }}
                                    >
                                        {editableFields.map((k) => (
                                            <div
                                                key={k}
                                                style={
                                                    k === "care_terms" ||
                                                    k === "deceased"
                                                        ? { gridColumn: "1/3" }
                                                        : null
                                                }
                                            >
                                                <label className="flbl">
                                                    {FIELD_LABEL[k] || k}
                                                </label>
                                                <input
                                                    className="finp"
                                                    value={fieldVals[k] || ""}
                                                    onChange={(e) =>
                                                        setFV(k, e.target.value)
                                                    }
                                                    placeholder={FIELD_LABEL[k]}
                                                />
                                            </div>
                                        ))}
                                    </div>
                                </>
                            )}
                            <div className="sec-h" style={{ marginTop: 0 }}>
                                <h3>Signing packet</h3>
                                <div className="ln"></div>
                                <span className="cnt">{docs.length}</span>
                            </div>
                            <p
                                className="muted"
                                style={{ fontSize: 13.5, marginBottom: 12 }}
                            >
                                Built from your templates and bundled into one
                                e-signature packet.
                            </p>
                            {docs.map((d, i) => (
                                <div
                                    key={i}
                                    className="import-row"
                                    style={{ marginBottom: 10 }}
                                >
                                    <div
                                        className="fi"
                                        style={{
                                            background:
                                                "color-mix(in oklab,var(--info) 12%,var(--paper))",
                                            color: "var(--info)",
                                        }}
                                    >
                                        ▤
                                    </div>
                                    <div style={{ flex: 1 }}>
                                        <div className="fn">{d.n}</div>
                                        <div
                                            className="fm"
                                            style={{
                                                fontFamily: "var(--font-body)",
                                                letterSpacing: 0,
                                            }}
                                        >
                                            {d.m}
                                        </div>
                                    </div>
                                    <span className="pill">
                                        <i className="pd"></i>Auto-filled
                                    </span>
                                </div>
                            ))}
                            <div
                                style={{
                                    display: "flex",
                                    alignItems: "center",
                                    gap: 10,
                                    marginTop: 14,
                                    padding: "12px 14px",
                                    borderRadius: 11,
                                    background:
                                        "color-mix(in oklab,var(--accent) 8%,var(--paper))",
                                    border: "1px solid color-mix(in oklab,var(--accent) 26%,transparent)",
                                }}
                            >
                                <div
                                    style={{
                                        fontWeight: 700,
                                        color: "#3A6FB0",
                                        fontFamily: "var(--font-display)",
                                        fontSize: 15,
                                    }}
                                >
                                    ✎ DocuSign
                                </div>
                                <span
                                    className="muted"
                                    style={{ fontSize: 12.5 }}
                                >
                                    Sent to{" "}
                                    {fieldVals.buyer_email ||
                                        email ||
                                        "the buyer"}{" "}
                                    for legally-binding e-signature.
                                </span>
                            </div>
                            <div
                                style={{
                                    display: "flex",
                                    gap: 10,
                                    marginTop: 16,
                                }}
                            >
                                <button
                                    className="btn ghost"
                                    style={{
                                        flex: 1,
                                        justifyContent: "center",
                                    }}
                                    onClick={() => setStep("details")}
                                >
                                    ← Back
                                </button>
                                <button
                                    className="btn primary"
                                    style={{
                                        flex: 2,
                                        justifyContent: "center",
                                    }}
                                    onClick={() => setStep("sending")}
                                >
                                    Send to DocuSign →
                                </button>
                            </div>
                        </div>
                    )}

                    {step === "sending" && (
                        <div
                            className="fade-in center"
                            style={{ padding: "22px 0" }}
                        >
                            <div
                                className="spinner"
                                style={{ margin: "0 auto 16px" }}
                            ></div>
                            <b style={{ fontSize: 15 }}>
                                Preparing signing packet…
                            </b>
                            <p
                                className="muted"
                                style={{ fontSize: 13, marginTop: 6 }}
                            >
                                Bundling {docs.length} documents · routing to
                                DocuSign
                            </p>
                        </div>
                    )}

                    {step === "sent" && (
                        <div
                            className="fade-in center"
                            style={{ padding: "8px 0" }}
                        >
                            <div
                                style={{
                                    width: 60,
                                    height: 60,
                                    borderRadius: "50%",
                                    background:
                                        "color-mix(in oklab,var(--ok) 16%,var(--paper))",
                                    color: "var(--ok)",
                                    display: "grid",
                                    placeItems: "center",
                                    fontSize: 28,
                                    margin: "0 auto 14px",
                                }}
                            >
                                ✓
                            </div>
                            <h2 style={{ fontSize: 23 }}>
                                Packet sent for signature.
                            </h2>
                            <p
                                className="muted"
                                style={{
                                    maxWidth: 380,
                                    margin: "8px auto 0",
                                    fontSize: 14,
                                }}
                            >
                                {docs.length} documents are waiting for{" "}
                                <b>{buyer || "the buyer"}</b> in DocuSign. The
                                plot is now <b>reserved</b> and the contract is
                                tracked under Sales.
                            </p>
                            <div
                                className="card"
                                style={{
                                    textAlign: "left",
                                    padding: "13px 15px",
                                    margin: "18px auto 0",
                                    maxWidth: 420,
                                }}
                            >
                                <div
                                    className="rec-rows"
                                    style={{ borderTop: "none" }}
                                >
                                    <div className="r">
                                        <span>Envelope</span>
                                        <b
                                            className="mono"
                                            style={{ fontSize: 12.5 }}
                                        >
                                            {envelope}
                                        </b>
                                    </div>
                                    <div className="r">
                                        <span>Plot</span>
                                        <b>
                                            {rec.plot} · {rec.section.name}
                                        </b>
                                    </div>
                                    <div className="r">
                                        <span>Recipient</span>
                                        <b>{email || "buyer@email.com"}</b>
                                    </div>
                                    <div className="r">
                                        <span>Status</span>
                                        <b style={{ color: "var(--warn)" }}>
                                            ● Awaiting signature
                                        </b>
                                    </div>
                                </div>
                            </div>
                            <button
                                className="btn primary"
                                style={{
                                    width: "100%",
                                    justifyContent: "center",
                                    marginTop: 18,
                                }}
                                onClick={() =>
                                    onSent &&
                                    onSent(rec, { buyer, email, envelope })
                                }
                            >
                                Done
                            </button>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}

Object.assign(window, { SaleModal });