const { useState: usePV, useEffect: useEV, useMemo: useMV } = React;

const PV_INPUT = {
  width: "100%",
  border: "1px solid var(--line)",
  borderRadius: "var(--r-sm)",
  padding: "8px 10px",
  background: "var(--paper)",
  marginBottom: 8,
  boxSizing: "border-box",
  fontSize: "13px",
  outline: "none"
};

const PV_SAGE = ["active", "approved", "paid", "live", "accepted"];
const PV_WARN = ["pending", "review", "requested"];
const PV_DANGER = ["paused", "rejected", "failed", "cancelled", "suspended"];

function pvPillClass(status) {
  const s = String(status || "").toLowerCase();
  if (PV_SAGE.indexOf(s) !== -1) return "pill sage";
  if (PV_WARN.indexOf(s) !== -1) return "pill warn";
  if (PV_DANGER.indexOf(s) !== -1) return "pill danger";
  return "pill";
}

function pvPill(status) {
  if (status === undefined || status === null || status === "") return "—";
  return <span className={pvPillClass(status)}>{window.API.humanize(status)}</span>;
}

function pickMinor(obj, names) {
  if (!obj) return 0;
  for (let i = 0; i < names.length; i++) {
    const v = obj[names[i]];
    if (v !== undefined && v !== null && v !== "") {
      const n = Number(v);
      if (!isNaN(n)) return n;
    }
  }
  return 0;
}

function offerPayout(o) {
  if (!o) return "—";
  const keys = Object.keys(o);
  let minorKey = keys.find((k) => /Minor$/.test(k) && /payout|commission|reward|amount/i.test(k));
  if (!minorKey) minorKey = keys.find((k) => /Minor$/.test(k));
  if (minorKey) return window.API.money(o[minorKey]);
  let bpsKey = keys.find((k) => /Bps$/.test(k) && /payout|commission|reward|rate/i.test(k));
  if (!bpsKey) bpsKey = keys.find((k) => /Bps$/.test(k));
  if (bpsKey) return window.API.pct(o[bpsKey]);
  const pm = o.payoutModel || o.payoutType || o.type;
  return pm ? window.API.humanize(pm) : "—";
}

function linkCommission(l) {
  if (!l) return "—";
  const keys = Object.keys(l);
  let k = keys.find((x) => /Minor$/.test(x) && /commission|payout|reward|amount/i.test(x));
  if (!k) k = keys.find((x) => /Minor$/.test(x));
  return k ? window.API.money(l[k]) : "—";
}

function linkUrl(l) {
  if (!l) return "";
  return l.url || l.shortUrl || l.shareUrl || "";
}

function linkCode(l) {
  if (!l) return "";
  return l.code || l.slug || "";
}

function offerName(o) {
  if (!o) return "—";
  return o.name || o.title || "—";
}

/* ───────────────────────── Dashboard ───────────────────────── */

function PortalDashboard() {
  const [bal, setBal] = usePV(null);
  const [loading, setLoading] = usePV(true);
  const [err, setErr] = usePV("");

  const load = () => {
    setLoading(true);
    setErr("");
    window.API.get("/affiliate/balance")
      .then((r) => { setBal(r || {}); setLoading(false); })
      .catch((ex) => { setErr((ex && ex.message) || "Failed"); setLoading(false); });
  };

  useEV(() => { load(); }, []);

  const balanceMinor = bal ? pickMinor(bal, ["balanceMinor", "availableMinor", "availableBalanceMinor"]) : 0;
  const pendingMinor = bal ? pickMinor(bal, ["pendingMinor", "pendingCommissionMinor", "pendingEarningsMinor"]) : 0;
  const lifetimeMinor = bal ? pickMinor(bal, ["lifetimeMinor", "lifetimeEarningsMinor", "paidMinor", "totalMinor"]) : 0;

  const tiles = [
    { label: window.T("balance"), value: window.API.money(balanceMinor) },
    { label: window.T("pendingEarnings"), value: window.API.money(pendingMinor) },
    { label: window.T("lifetimeEarnings"), value: window.API.money(lifetimeMinor) }
  ];

  return (
    <div className="col" style={{ height: "100%" }}>
      <div className="view-header">
        <div className="lead">
          <div className="t-eyebrow">{window.API.date(new Date().toISOString())}</div>
          <h1 className="t-display serif" style={{ margin: "6px 0 0" }}>
            {window.T("welcome")} {(window.API.user() && window.API.user().fullName) || ""}
          </h1>
          <div className="t-tiny mt-2">{window.T("overviewSubtitle")}</div>
        </div>
      </div>

      <div className="view-body">
        {err ? (
          <div className="t-body" style={{ color: "var(--danger)" }}>{err}</div>
        ) : loading ? (
          <div className="t-tiny">{window.T("loading")}</div>
        ) : (
          <>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
              {tiles.map((t, i) => (
                <div key={i} className="card card-pad">
                  <div className="t-eyebrow">{t.label}</div>
                  <div className="serif" style={{ fontSize: 26, marginTop: 6 }}>{t.value}</div>
                </div>
              ))}
            </div>

            <div className="ai-frame card-pad mt-3">
              <div className="ai-label"><span className="ai-dot" />TIP</div>
              <div style={{ marginTop: 8 }}>{window.T("overviewSubtitle")}</div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}
window.PortalDashboard = PortalDashboard;

/* ───────────────────────── Offers ───────────────────────── */

function PortalOffers() {
  const [rows, setRows] = usePV([]);
  const [loading, setLoading] = usePV(true);
  const [err, setErr] = usePV("");
  const [applied, setApplied] = usePV({});
  const [applying, setApplying] = usePV({});

  const load = () => {
    setLoading(true);
    setErr("");
    window.API.get("/affiliate/offers")
      .then((json) => {
        setRows((json && json.data) || []);
        setLoading(false);
      })
      .catch((ex) => { setErr((ex && ex.message) || "Failed"); setLoading(false); });
  };

  useEV(() => { load(); }, []);

  const apply = (id) => {
    if (applying[id] || applied[id]) return;
    setApplying((s) => Object.assign({}, s, { [id]: true }));
    window.API.post("/affiliate/offers/" + id + "/apply", {})
      .then(() => {
        setApplied((s) => Object.assign({}, s, { [id]: true }));
        setApplying((s) => { const n = Object.assign({}, s); delete n[id]; return n; });
      })
      .catch((ex) => {
        setApplying((s) => { const n = Object.assign({}, s); delete n[id]; return n; });
        const msg = (ex && ex.message) || "Failed";
        if (/already|applied|exists/i.test(msg)) {
          setApplied((s) => Object.assign({}, s, { [id]: true }));
        } else {
          window.alert(msg);
        }
      });
  };

  return (
    <div className="col" style={{ height: "100%" }}>
      <div className="view-header">
        <div className="lead">
          <div className="t-eyebrow">{window.T("availableOffers").toUpperCase()}</div>
          <h1 className="t-h1" style={{ margin: "6px 0 0" }}>{window.T("availableOffers")}</h1>
        </div>
        <div className="view-actions">
          <button className="btn btn-secondary btn-sm" onClick={load}>
            <Icon name="refresh" size={14} /> {window.T("refresh")}
          </button>
        </div>
      </div>

      <div className="view-body">
        {err ? (
          <div className="t-body" style={{ color: "var(--danger)" }}>{err}</div>
        ) : loading ? (
          <div className="t-tiny">{window.T("loading")}</div>
        ) : rows.length === 0 ? (
          <div className="card card-pad text-center t-tiny">{window.T("noRecords")}</div>
        ) : (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 12 }}>
            {rows.map((o, i) => {
              const id = (o && o.id) || i;
              const isApplied = !!applied[id];
              const isApplying = !!applying[id];
              return (
                <div key={id} className="card card-pad">
                  <div className="flex between items-center">
                    <span style={{ fontWeight: 500 }}>{offerName(o)}</span>
                    {o && o.status ? pvPill(o.status) : null}
                  </div>
                  <div className="t-tiny mt-2">{offerPayout(o)}</div>
                  <button
                    className="btn btn-primary btn-sm mt-3"
                    disabled={isApplied || isApplying}
                    onClick={() => apply(id)}
                  >
                    {isApplying ? window.T("loading") : isApplied ? window.T("applied") : window.T("apply")}
                  </button>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}
window.PortalOffers = PortalOffers;

/* ───────────────────────── Links ───────────────────────── */

function PortalLinks() {
  const [rows, setRows] = usePV([]);
  const [loading, setLoading] = usePV(true);
  const [err, setErr] = usePV("");
  const [showForm, setShowForm] = usePV(false);
  const [offers, setOffers] = usePV([]);
  const [offerId, setOfferId] = usePV("");
  const [label, setLabel] = usePV("");
  const [creating, setCreating] = usePV(false);
  const [formErr, setFormErr] = usePV("");
  const [copied, setCopied] = usePV({});

  const load = () => {
    setLoading(true);
    setErr("");
    window.API.get("/affiliate/links")
      .then((json) => {
        setRows((json && json.data) || []);
        setLoading(false);
      })
      .catch((ex) => { setErr((ex && ex.message) || "Failed"); setLoading(false); });
  };

  useEV(() => { load(); }, []);

  const openForm = () => {
    setShowForm(true);
    if (offers.length === 0) {
      window.API.get("/affiliate/offers")
        .then((json) => { setOffers((json && json.data) || []); })
        .catch(() => { setOffers([]); });
    }
  };

  const submit = (e) => {
    if (e) e.preventDefault();
    if (creating || !offerId) return;
    setCreating(true);
    setFormErr("");
    const body = { offerId: offerId };
    if (label && label.trim()) body.label = label.trim();
    window.API.post("/affiliate/links", body)
      .then(() => {
        setCreating(false);
        setShowForm(false);
        setOfferId("");
        setLabel("");
        load();
      })
      .catch((ex) => {
        setCreating(false);
        setFormErr((ex && ex.message) || "Failed");
      });
  };

  const copy = (id, url) => {
    if (!url) return;
    if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(url).then(() => {
        setCopied((s) => Object.assign({}, s, { [id]: true }));
        setTimeout(() => {
          setCopied((s) => { const n = Object.assign({}, s); delete n[id]; return n; });
        }, 1500);
      }).catch(() => {});
    }
  };

  return (
    <div className="col" style={{ height: "100%" }}>
      <div className="view-header">
        <div className="lead">
          <div className="t-eyebrow">{window.T("myLinks").toUpperCase()}</div>
          <h1 className="t-h1" style={{ margin: "6px 0 0" }}>{window.T("myLinks")}</h1>
        </div>
        <div className="view-actions flex gap-2">
          <button className="btn btn-secondary btn-sm" onClick={load}>
            <Icon name="refresh" size={14} /> {window.T("refresh")}
          </button>
          <button className="btn btn-primary btn-sm" onClick={() => setShowForm(!showForm)}>
            <Icon name="plus" size={14} /> {window.T("createLink")}
          </button>
        </div>
      </div>

      <div className="view-body">
        {showForm ? (
          <form className="card card-pad" onSubmit={submit} style={{ marginBottom: 12 }}>
            <div className="t-eyebrow" style={{ marginBottom: 8 }}>{window.T("createLink")}</div>
            <select
              style={PV_INPUT}
              value={offerId}
              onChange={(e) => setOfferId(e.target.value)}
              required
            >
              <option value="">— {window.T("availableOffers")} —</option>
              {offers.map((o, i) => (
                <option key={(o && o.id) || i} value={(o && o.id) || ""}>
                  {offerName(o)}
                </option>
              ))}
            </select>
            <input
              type="text"
              placeholder={window.T("name")}
              value={label}
              onChange={(e) => setLabel(e.target.value)}
              style={PV_INPUT}
            />
            {formErr ? (
              <div className="t-tiny" style={{ color: "var(--danger)", marginBottom: 8 }}>{formErr}</div>
            ) : null}
            <div className="flex gap-2">
              <button type="submit" className="btn btn-primary btn-sm" disabled={creating || !offerId}>
                {creating ? window.T("loading") : window.T("createLink")}
              </button>
              <button type="button" className="btn btn-ghost btn-sm" onClick={() => setShowForm(false)}>
                <Icon name="x" size={14} /> {window.T("noRecords") ? "—" : "Cancel"}
              </button>
            </div>
          </form>
        ) : null}

        {err ? (
          <div className="t-body" style={{ color: "var(--danger)" }}>{err}</div>
        ) : loading ? (
          <div className="t-tiny">{window.T("loading")}</div>
        ) : rows.length === 0 ? (
          <div className="card card-pad text-center t-tiny">{window.T("noRecords")}</div>
        ) : (
          <div className="card">
            <table className="tbl">
              <thead>
                <tr>
                  <th>{window.T("myLinks")}</th>
                  <th>{window.T("clicks")}</th>
                  <th>{window.T("conversions")}</th>
                  <th>{window.T("commission")}</th>
                  <th>{window.T("status")}</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((l, i) => {
                  const id = (l && l.id) || i;
                  const url = linkUrl(l);
                  const isCopied = !!copied[id];
                  return (
                    <tr key={id}>
                      <td>
                        <div className="flex items-center gap-2">
                          <span className="mono t-tiny" style={{ maxWidth: 240, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block" }}>
                            {url || linkCode(l) || "—"}
                          </span>
                          {url ? (
                            <button
                              className="btn btn-ghost btn-sm"
                              onClick={() => copy(id, url)}
                              title={window.T("copy")}
                            >
                              <Icon name={isCopied ? "check" : "copy"} size={13} />
                              {isCopied ? window.T("copied") : window.T("copy")}
                            </button>
                          ) : null}
                        </div>
                        {l && l.offerName ? (
                          <div className="t-tiny" style={{ color: "var(--ink-3)" }}>{l.offerName}</div>
                        ) : null}
                      </td>
                      <td>{(l && l.clicks !== undefined && l.clicks !== null) ? l.clicks : "—"}</td>
                      <td>{(l && l.conversions !== undefined && l.conversions !== null) ? l.conversions : "—"}</td>
                      <td>{linkCommission(l)}</td>
                      <td>{l && l.status ? pvPill(l.status) : "—"}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}
window.PortalLinks = PortalLinks;

/* ───────────────────────── Payouts ───────────────────────── */

function PortalPayouts() {
  const [rows, setRows] = usePV([]);
  const [meta, setMeta] = usePV({ page: 1, lastPage: 1, total: 0 });
  const [page, setPage] = usePV(1);
  const [loading, setLoading] = usePV(true);
  const [err, setErr] = usePV("");
  const [requesting, setRequesting] = usePV(false);

  const load = (p) => {
    setLoading(true);
    setErr("");
    window.API.get("/affiliate/payouts", { page: p })
      .then((json) => {
        setRows((json && json.data) || []);
        setMeta((json && json.meta) || { page: p, lastPage: 1, total: 0 });
        setLoading(false);
      })
      .catch((ex) => { setErr((ex && ex.message) || "Failed"); setLoading(false); });
  };

  useEV(() => { load(page); }, [page]);

  const request = () => {
    if (requesting) return;
    if (!window.confirm(window.T("requestPayout"))) return;
    setRequesting(true);
    window.API.post("/affiliate/payouts/request", {})
      .then(() => {
        setRequesting(false);
        load(page);
      })
      .catch((ex) => {
        setRequesting(false);
        window.alert((ex && ex.message) || "Failed");
      });
  };

  const m = meta || { page: 1, lastPage: 1, total: 0 };
  const cur = m.page || 1;
  const last = m.lastPage || 1;

  return (
    <div className="col" style={{ height: "100%" }}>
      <div className="view-header">
        <div className="lead">
          <div className="t-eyebrow">{window.T("navPayouts").toUpperCase()}</div>
          <h1 className="t-h1" style={{ margin: "6px 0 0" }}>{window.T("navPayouts")}</h1>
        </div>
        <div className="view-actions">
          <button className="btn btn-primary btn-sm" onClick={request} disabled={requesting}>
            {requesting ? window.T("loading") : window.T("requestPayout")}
          </button>
        </div>
      </div>

      <div className="view-body">
        {err ? (
          <div className="t-body" style={{ color: "var(--danger)" }}>{err}</div>
        ) : loading ? (
          <div className="t-tiny">{window.T("loading")}</div>
        ) : rows.length === 0 ? (
          <div className="card card-pad text-center t-tiny">{window.T("noRecords")}</div>
        ) : (
          <>
            <div className="card">
              <table className="tbl">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>{window.T("amount")}</th>
                    <th>{window.T("status")}</th>
                    <th>{window.T("date")}</th>
                  </tr>
                </thead>
                <tbody>
                  {rows.map((p, i) => {
                    const id = (p && p.id) || i;
                    const amt = pickMinor(p, ["amountMinor"]);
                    return (
                      <tr key={id}>
                        <td className="mono t-tiny">{id}</td>
                        <td>{window.API.money(amt)}</td>
                        <td>{p && p.status ? pvPill(p.status) : "—"}</td>
                        <td>{p && p.createdAt ? window.API.date(p.createdAt) : "—"}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>

            <div className="flex between items-center mt-3">
              <div className="t-tiny mono">
                {cur} / {last} · {m.total || 0}
              </div>
              <div className="flex gap-2">
                <button
                  className="btn btn-ghost btn-sm"
                  disabled={cur <= 1}
                  onClick={() => setPage(Math.max(1, cur - 1))}
                >
                  <Icon name="chevup" size={14} /> Prev
                </button>
                <button
                  className="btn btn-ghost btn-sm"
                  disabled={cur >= last}
                  onClick={() => setPage(cur + 1)}
                >
                  <Icon name="chevdown" size={14} /> Next
                </button>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}
window.PortalPayouts = PortalPayouts;

/* ───────────────────────── Profile ───────────────────────── */

function PortalProfile() {
  const [profile, setProfile] = usePV(null);
  const [payout, setPayout] = usePV(null);
  const [loading, setLoading] = usePV(true);
  const [err, setErr] = usePV("");

  const [fullName, setFullName] = usePV("");
  const [phone, setPhone] = usePV("");
  const [city, setCity] = usePV("");
  const [iban, setIban] = usePV("");

  const [savingProfile, setSavingProfile] = usePV(false);
  const [savingPayout, setSavingPayout] = usePV(false);
  const [profileSaved, setProfileSaved] = usePV(false);
  const [payoutSaved, setPayoutSaved] = usePV(false);
  const [profileErr, setProfileErr] = usePV("");
  const [payoutErr, setPayoutErr] = usePV("");

  useEV(() => {
    let alive = true;
    setLoading(true);
    setErr("");
    Promise.all([
      window.API.get("/affiliate/profile").catch((e) => { throw e; }),
      window.API.get("/affiliate/payout-details").catch(() => null)
    ])
      .then((res) => {
        if (!alive) return;
        const p = res[0] || {};
        const pd = res[1] || {};
        setProfile(p);
        setPayout(pd);
        setFullName((p && p.fullName) || "");
        setPhone((p && p.phone) || "");
        setCity((p && p.city) || "");
        setIban((pd && pd.iban) || "");
        setLoading(false);
      })
      .catch((ex) => { if (alive) { setErr((ex && ex.message) || "Failed"); setLoading(false); } });
    return () => { alive = false; };
  }, []);

  const saveProfile = () => {
    if (savingProfile) return;
    setSavingProfile(true);
    setProfileErr("");
    setProfileSaved(false);
    const body = {};
    if (fullName) body.fullName = fullName.trim();
    if (phone) body.phone = phone.trim();
    if (city) body.city = city.trim();
    window.API.patch("/affiliate/profile", body)
      .then((r) => {
        setSavingProfile(false);
        setProfileSaved(true);
        if (r) setProfile(r);
        setTimeout(() => setProfileSaved(false), 2500);
      })
      .catch((ex) => {
        setSavingProfile(false);
        setProfileErr((ex && ex.message) || "Failed");
      });
  };

  const savePayout = () => {
    if (savingPayout) return;
    setSavingPayout(true);
    setPayoutErr("");
    setPayoutSaved(false);
    const body = { iban: iban || "" };
    window.API.request("/affiliate/payout-details", { method: "PUT", body: body })
      .then((r) => {
        setSavingPayout(false);
        setPayoutSaved(true);
        if (r) setPayout(r);
        setTimeout(() => setPayoutSaved(false), 2500);
      })
      .catch((ex) => {
        setSavingPayout(false);
        setPayoutErr((ex && ex.message) || "Failed");
      });
  };

  const ibanPlaceholder = (payout && (payout.ibanMasked || payout.maskedIban)) || window.T("iban");

  return (
    <div className="col" style={{ height: "100%" }}>
      <div className="view-header">
        <div className="lead">
          <div className="t-eyebrow">{window.T("navProfile").toUpperCase()}</div>
          <h1 className="t-h1" style={{ margin: "6px 0 0" }}>{window.T("navProfile")}</h1>
        </div>
      </div>

      <div className="view-body">
        {err ? (
          <div className="t-body" style={{ color: "var(--danger)" }}>{err}</div>
        ) : loading ? (
          <div className="t-tiny">{window.T("loading")}</div>
        ) : (
          <div className="col gap-3">
            <div className="card card-pad">
              <div className="t-eyebrow" style={{ marginBottom: 10 }}>{window.T("navProfile")}</div>

              <label className="t-tiny" style={{ color: "var(--ink-3)" }}>{window.T("fullName")}</label>
              <input
                type="text"
                style={PV_INPUT}
                value={fullName}
                onChange={(e) => setFullName(e.target.value)}
              />

              <label className="t-tiny" style={{ color: "var(--ink-3)" }}>{window.T("email")}</label>
              <input
                type="email"
                style={Object.assign({}, PV_INPUT, { background: "var(--bg)", color: "var(--ink-3)" })}
                value={(profile && profile.email) || ""}
                readOnly
              />

              <label className="t-tiny" style={{ color: "var(--ink-3)" }}>{window.T("phone")}</label>
              <input
                type="tel"
                style={PV_INPUT}
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
              />

              <label className="t-tiny" style={{ color: "var(--ink-3)" }}>{window.T("city")}</label>
              <input
                type="text"
                style={PV_INPUT}
                value={city}
                onChange={(e) => setCity(e.target.value)}
              />

              {profileErr ? (
                <div className="t-tiny" style={{ color: "var(--danger)", marginBottom: 8 }}>{profileErr}</div>
              ) : null}

              <div className="flex items-center gap-2">
                <button
                  className="btn btn-primary btn-sm"
                  onClick={saveProfile}
                  disabled={savingProfile}
                >
                  {savingProfile ? window.T("loading") : window.T("save")}
                </button>
                {profileSaved ? (
                  <span className="pill sage">
                    <Icon name="check" size={12} /> {window.T("copied")}
                  </span>
                ) : null}
              </div>
            </div>

            <div className="card card-pad">
              <div className="t-eyebrow" style={{ marginBottom: 10 }}>{window.T("payoutDetails")}</div>

              <label className="t-tiny" style={{ color: "var(--ink-3)" }}>{window.T("iban")}</label>
              <input
                type="text"
                style={PV_INPUT}
                value={iban}
                placeholder={ibanPlaceholder}
                onChange={(e) => setIban(e.target.value)}
              />

              {payout && (payout.method || payout.payoutMethod) ? (
                <div className="t-tiny" style={{ color: "var(--ink-3)", marginBottom: 8 }}>
                  {window.API.humanize(payout.method || payout.payoutMethod)}
                </div>
              ) : null}

              {payoutErr ? (
                <div className="t-tiny" style={{ color: "var(--danger)", marginBottom: 8 }}>{payoutErr}</div>
              ) : null}

              <div className="flex items-center gap-2">
                <button
                  className="btn btn-primary btn-sm"
                  onClick={savePayout}
                  disabled={savingPayout}
                >
                  {savingPayout ? window.T("loading") : window.T("save")}
                </button>
                {payoutSaved ? (
                  <span className="pill sage">
                    <Icon name="check" size={12} /> {window.T("copied")}
                  </span>
                ) : null}
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
window.PortalProfile = PortalProfile;