/* ===== Mi Urbania · Report / claim flow (§8) ===== */
window.MU = window.MU || {};
(function (MU) {
  const { useState, useEffect, useMemo } = React;
  const e = React.createElement;

  const CLAIM_STEPS = ["received", "review", "scheduled", "resolved"];

  function claimVerdictStatus(v) {
    if (v.kind === "expired") return "expired";
    if (v.kind === "safety") return "safety";
    if (v.kind === "crack") return "crack";
    if (v.kind === "soon") return "soon";
    return "active";
  }
  function claimVerdictLine(v, lang) {
    const tt = (k, p) => MU.t(lang, k, p);
    if (v.kind === "expired") return tt("verdict_out_short", { date: MU.formatDateShort(v.expiredOn, lang) });
    if (v.kind === "safety") return tt("verdict_safety_short");
    if (v.kind === "crack") return tt("verdict_crack_short", { n: v.daysLeft });
    if (v.kind === "soon") return tt("verdict_soon_short", { n: v.daysLeft });
    return tt("verdict_in_short", { n: v.daysLeft });
  }
  MU.claimVerdictStatus = claimVerdictStatus;
  MU.claimVerdictLine = claimVerdictLine;

  function PhotoStack({ n, prefix }) {
    return e("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" } },
      Array.from({ length: n }).map((_, i) =>
        e(MU.Placeholder, { key: i, label: (prefix || "FOTO") + " " + (i + 1), h: 78, radius: 12, style: { width: 78, flex: "0 0 auto" } })));
  }

  /* ---------- Claim detail sheet ---------- */
  function ClaimDetail({ claim, open, onClose, app }) {
    const { lang } = app;
    const tt = (k, p) => MU.t(lang, k, p);
    if (!claim) return e(MU.Sheet, { open, onClose, title: "" });
    const issue = MU.ISSUE_BY_ID[claim.issueId];
    const title = issue ? issue["name_" + lang] : (claim["details_" + lang] || tt("report_title"));
    const vs = claimVerdictStatus(claim.verdict);
    const curIdx = CLAIM_STEPS.indexOf(claim.status);
    const room = MU.ROOM_BY_ID[claim.room];
    return e(MU.Sheet, { open, onClose, title },
      e("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 16, flexWrap: "wrap" } },
        e("span", { className: "mu-pill", style: { background: "var(--ink)", color: "#fff", fontSize: 12, padding: "5px 11px", fontFamily: "ui-monospace,monospace" } }, "#" + claim.id),
        room && e("span", { className: "mu-pill", style: { background: "rgba(14,17,22,.05)", color: "var(--ink-2)", fontSize: 12, padding: "5px 11px" } }, e(MU.Icon, { name: room.icon, size: 13 }), room["name_" + lang]),
        claim.isNewIssueType && e("span", { className: "mu-pill", style: { background: "var(--gold-soft)", color: "#7a6324", fontSize: 11.5, padding: "5px 10px" } }, e(MU.Icon, { name: "spark", size: 12 }), tt("new_issue_tag"))
      ),
      /* status stepper */
      e("div", { style: { display: "flex", gap: 6, marginBottom: 18 } },
        CLAIM_STEPS.map((s, i) => e("div", { key: s, style: { flex: 1, textAlign: "center" } },
          e("div", { style: { height: 4, borderRadius: 9, background: i <= curIdx ? "var(--brand)" : "var(--line)", marginBottom: 6 } }),
          e("div", { style: { fontSize: 10, fontWeight: i === curIdx ? 800 : 600, color: i <= curIdx ? "var(--brand-deep)" : "var(--ink-4)" } }, tt("claim_" + s))))),
      claim.scheduledFor && claim.status === "scheduled" && e("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "10px 13px", background: "var(--brand-soft)", borderRadius: 12, marginBottom: 16 } },
        e(MU.Icon, { name: "calendar", size: 16, color: "var(--brand)" }), e("div", { style: { fontSize: 13, fontWeight: 600, color: "var(--brand-deep)" } }, MU.formatDate(claim.scheduledFor, lang))),

      e("div", { className: "mu-eyebrow", style: { marginBottom: 7 } }, tt("verdict_frozen")),
      e("div", { style: { display: "flex", gap: 11, alignItems: "center", padding: "12px 14px", borderRadius: 14, background: MU.STATUS_SOFT[vs], marginBottom: 16 } },
        e("div", { style: { width: 30, height: 30, borderRadius: 9, background: MU.STATUS_COLOR[vs], color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", flex: "0 0 auto" } },
          e(MU.Icon, { name: vs === "expired" ? "x" : vs === "safety" ? "alert" : "check", size: 16, stroke: 2.2 })),
        e("div", { style: { fontWeight: 700, fontSize: 13.5, color: MU.STATUS_COLOR[vs] } }, claimVerdictLine(claim.verdict, lang))),

      claim["details_" + lang] && e("p", { style: { fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5, marginBottom: 16 } }, claim["details_" + lang]),
      e("div", { style: { fontSize: 12, color: "var(--ink-4)", fontWeight: 600, marginBottom: 8 } }, tt("filed_on", { date: MU.formatDateTime(claim.createdAt, lang) })),
      claim.media && claim.media.length
        ? e("div", { style: { display: "flex", gap: 9, flexWrap: "wrap" } }, claim.media.map((m, i) => e(MU.MediaThumb, { key: i, item: m })))
        : e(PhotoStack, { n: claim.photos || 1 }),
      claim.hasResolution && e("div", { style: { marginTop: 18 } },
        e("div", { className: "mu-eyebrow", style: { marginBottom: 9 } }, lang === "es" ? "Antes / Después" : "Before / After"),
        e("div", { style: { display: "flex", gap: 8 } },
          e(MU.Placeholder, { label: lang === "es" ? "antes" : "before", h: 96, style: { flex: 1 } }),
          e(MU.Placeholder, { label: lang === "es" ? "después" : "after", h: 96, style: { flex: 1 } }))),
      claim.verdict.offeredService && e(MU.Btn, { variant: "gold", block: true, icon: "arrowR", style: { marginTop: 18 }, onClick: () => { onClose(); app.setTab("help"); app.navigate({ tab: "help", gaas: true }); } }, tt("offer_service"))
    );
  }
  MU.ClaimDetail = ClaimDetail;

  /* ---------- mini issue picker (step 1) ---------- */
  function IssuePicker({ lang, onPick }) {
    const tt = (k, p) => MU.t(lang, k, p);
    const [q, setQ] = useState("");
    const list = useMemo(() => {
      const s = q.trim().toLowerCase();
      const base = s ? MU.ISSUES.filter((i) => (i.name_es + " " + i.name_en).toLowerCase().includes(s)) : MU.ISSUES.slice(0, 8);
      return base.slice(0, 30);
    }, [q]);
    return e("div", null,
      e("div", { style: { position: "relative", marginBottom: 10 } },
        e(MU.Icon, { name: "search", size: 17, color: "var(--ink-4)", style: { position: "absolute", left: 13, top: 13 } }),
        e("input", { className: "mu-input", style: { paddingLeft: 40 }, placeholder: tt("lookup_search_ph"), value: q, onChange: (ev) => setQ(ev.target.value) })),
      e("div", { className: "mu-card", style: { overflow: "hidden" } },
        list.map((iss, i) => e("div", { key: iss.id },
          i > 0 && e("div", { className: "mu-divider" }),
          e("div", { className: "mu-list-row", onClick: () => onPick(iss), style: { padding: "12px 14px" } },
            e("div", { className: "mu-cat-ic", style: { width: 32, height: 32, background: "rgba(14,17,22,.05)", color: "var(--ink-2)" } }, e(MU.Icon, { name: MU.CAT_BY_ID[iss.categoryId].icon, size: 16 })),
            e("div", { style: { flex: 1, fontSize: 13.5, fontWeight: 600 } }, iss["name_" + lang]),
            e(MU.Icon, { name: "chevR", size: 15, color: "var(--ink-4)" })))))
    );
  }

  /* ---------- the wizard ---------- */
  function Wizard({ app, prefill }) {
    const { lang, unit, now } = app;
    const tt = (k, p) => MU.t(lang, k, p);
    const handover = MU.D(unit.handoverDate);

    const init = prefill || {};
    const [issueId, setIssueId] = useState(init.issueId || null);
    const [freeText, setFreeText] = useState(init.freeText || "");
    const [categoryId, setCategoryId] = useState(init.categoryId || (init.issueId ? MU.ISSUE_BY_ID[init.issueId].categoryId : null));
    const [room, setRoom] = useState(init.room || (init.issueId ? MU.ISSUE_BY_ID[init.issueId].room : "general"));
    const [subloc, setSubloc] = useState("");
    const [media, setMedia] = useState([]);
    const [details, setDetails] = useState("");
    const isNew = !!init.isNewIssueType;

    // start step: if we already know issue or category, skip "what"
    const [step, setStep] = useState(init.issueId || init.categoryId ? 1 : 0);
    const [mode, setMode] = useState(init.freeText ? "describe" : "pick"); // step-0 mode
    const [createdClaim, setCreatedClaim] = useState(null);
    const stampRef = React.useRef(null);

    const issue = issueId ? MU.ISSUE_BY_ID[issueId] : null;
    const cat = MU.CAT_BY_ID[categoryId] || MU.CAT_BY_ID.general;
    const itemName = (issue ? MU.CAT_BY_ID[issue.categoryId] : cat)["name_" + lang].toLowerCase();

    // verdict (live)
    const verdict = useMemo(() => {
      const c = MU.CAT_BY_ID[categoryId] || MU.CAT_BY_ID.general;
      if (c.special === "routed") return { kind: "routed" };
      const cov = MU.computeCoverage(c, handover, now);
      if (issue && issue.severity === "urgent") return { kind: "safety", categoryId: c.id, cov };
      return { kind: cov.status === "crack" ? "crack" : cov.status, categoryId: c.id, daysLeft: cov.daysLeft, expiry: cov.expiry, cov };
    }, [categoryId, issueId, now.getTime()]);

    const TOTAL = 6;
    const titles = ["step_what", "step_where", "step_photo", "step_details", "step_verdict", "step_confirm"];

    function submit() {
      const seq = String(app.claims.length + 4).padStart(4, "0");
      const id = "URB-" + unit.unitNumber + "-" + seq;
      const v = { kind: verdict.kind, categoryId: verdict.categoryId };
      if (verdict.kind === "expired") v.expiredOn = MU.formatDateShort ? verdict.cov.expiry : null, v.expiredOn = verdict.cov.expiry, v.offeredService = true;
      else if (verdict.kind !== "routed" && verdict.kind !== "safety") v.daysLeft = verdict.daysLeft;
      // Persist lean media (drop the transient upload bytes so localStorage stays small).
      const leanMedia = MU.store ? media.map(MU.store.leanMedia) : media;
      const claim = {
        id, unitId: unit.id, issueId: issueId || null, freeText: freeText || null,
        room, subloc, photos: Math.max(1, media.length), media: leanMedia, createdAt: now.toISOString(),
        verdict: v, status: "received", isNewIssueType: isNew,
        details_es: details || (lang === "es" ? "" : ""), details_en: details || "",
      };
      app.addClaim(claim);
      setCreatedClaim(claim);
      setStep(5);

      // Fire-and-forget: upload each photo/video to the QC Drive folder under this unit,
      // then attach the returned link/path back onto the stored claim as each completes.
      if (MU.store && MU.store.driveEnabled()) {
        media.forEach((m, i) => {
          MU.store.uploadMediaItem(m, { project: unit.projectName, projectId: unit.projectId, unit: unit.unitNumber, claimId: id, kind: "claim", index: i + 1 })
            .then((drive) => {
              if (drive) app.updateClaim(id, (c) => Object.assign({}, c, { media: (c.media || []).map((mm, j) => (j === i ? Object.assign({}, mm, { drive }) : mm)) }));
            });
        });
      }
    }

    const canNext = () => {
      if (step === 0) return mode === "pick" ? !!issueId : freeText.trim().length > 2;
      if (step === 2) return media.length > 0;
      return true;
    };

    /* progress header */
    const header = e("div", { style: { padding: "14px 16px 12px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 12 } },
      step > 0 && step < 5 && e("button", { className: "mu-iconbtn", onClick: () => setStep(step - 1) }, e(MU.Icon, { name: "chevL", size: 20 })),
      step === 0 && e("button", { className: "mu-iconbtn", onClick: () => app.closeReport() }, e(MU.Icon, { name: "x", size: 20 })),
      e("div", { style: { flex: 1 } },
        e("div", { style: { fontWeight: 800, fontSize: 16, letterSpacing: "-.02em" } }, tt(titles[step])),
        step < 5 && e("div", { style: { fontSize: 11.5, color: "var(--ink-4)", fontWeight: 600, marginTop: 1 } }, tt("step_of", { a: step + 1, b: TOTAL }))),
      e("div", { style: { display: "flex", gap: 4 } },
        Array.from({ length: TOTAL }).map((_, i) => e("div", { key: i, style: { width: i === step ? 18 : 6, height: 6, borderRadius: 9, background: i <= step ? "var(--brand)" : "var(--line)", transition: ".3s" } })))
    );

    let body;
    if (step === 0) {
      body = e("div", null,
        e(MU.Segmented, { value: mode, onChange: setMode, options: [{ value: "pick", label: tt("pick_issue") }, { value: "describe", label: tt("describe_instead") }] }),
        e("div", { style: { marginTop: 14 } },
          mode === "pick"
            ? e(IssuePicker, { lang, onPick: (iss) => { setIssueId(iss.id); setCategoryId(iss.categoryId); setRoom(iss.room); setStep(1); } })
            : e("div", null,
              e("textarea", { className: "mu-input", rows: 4, placeholder: tt("open_desc_ph"), value: freeText, onChange: (ev) => { setFreeText(ev.target.value); setCategoryId(MU.suggestCategory(ev.target.value)); }, style: { resize: "none", lineHeight: 1.4 } }),
              freeText.trim().length > 2 && e("div", { style: { marginTop: 12, padding: 13, background: "var(--brand-soft)", borderRadius: 14, display: "flex", alignItems: "center", gap: 10 } },
                e(MU.Icon, { name: MU.CAT_BY_ID[categoryId || "general"].icon, size: 18, color: "var(--brand)" }),
                e("div", { style: { fontSize: 13 } }, e("span", { style: { color: "var(--brand-deep)", opacity: .8 } }, tt("open_suggest") + " "), e("b", { style: { color: "var(--brand-deep)" } }, MU.CAT_BY_ID[categoryId || "general"]["name_" + lang]))))
        )
      );
    } else if (step === 1) {
      body = e("div", null,
        issue && e("div", { className: "mu-card", style: { padding: "12px 14px", display: "flex", alignItems: "center", gap: 11, marginBottom: 18 } },
          e("div", { className: "mu-cat-ic", style: { width: 34, height: 34, background: "var(--brand-soft)", color: "var(--brand)" } }, e(MU.Icon, { name: cat.icon, size: 18 })),
          e("div", { style: { fontWeight: 700, fontSize: 14 } }, issue["name_" + lang])),
        e("div", { className: "mu-eyebrow", style: { marginBottom: 10 } }, tt("where_room")),
        e("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" } },
          MU.ROOMS.map((r) => e("button", { key: r.id, className: "mu-chip" + (room === r.id ? " active" : ""), onClick: () => setRoom(r.id) }, e(MU.Icon, { name: r.icon, size: 14 }), r["name_" + lang]))),
        e("div", { className: "mu-eyebrow", style: { margin: "20px 0 9px" } }, tt("where_subloc")),
        e("input", { className: "mu-input", placeholder: tt("subloc_ph"), value: subloc, onChange: (ev) => setSubloc(ev.target.value) })
      );
    } else if (step === 2) {
      body = e("div", null,
        e("p", { className: "mu-sub", style: { marginBottom: 16 } }, tt("photo_required_sub")),
        e(MU.MediaUploader, { items: media, onChange: setMedia, max: 5, lang }),
        media.length > 0 && e("div", { style: { display: "flex", gap: 8, alignItems: "center", marginTop: 14, fontSize: 12.5, color: "var(--ink-3)", fontWeight: 600 } },
          e(MU.Icon, { name: "clock", size: 15, color: "var(--brand)" }), tt("photo_logged", { datetime: MU.formatDateTime(now, lang) }))
      );
    } else if (step === 3) {
      body = e("div", null,
        e("textarea", { className: "mu-input", rows: 4, placeholder: tt("details_ph"), value: details, onChange: (ev) => setDetails(ev.target.value), style: { resize: "none", lineHeight: 1.45 } }),
        e("div", { style: { display: "flex", gap: 8, alignItems: "center", marginTop: 12, fontSize: 12.5, color: "var(--ink-4)" } },
          e(MU.Icon, { name: "info", size: 15 }), tt("details_hint")));
    } else if (step === 4) {
      const vs = verdict.kind === "routed" ? "routed" : claimVerdictStatus({ kind: verdict.kind });
      let msg;
      if (verdict.kind === "expired") msg = tt("verdict_out", { date: MU.formatDate(handover, lang), item: itemName, expiry: MU.formatDate(verdict.cov.expiry, lang) });
      else if (verdict.kind === "safety") msg = tt("verdict_safety");
      else if (verdict.kind === "crack") msg = tt("verdict_crack");
      else if (verdict.kind === "soon") msg = tt("verdict_soon", { item: itemName, n: verdict.daysLeft });
      else if (verdict.kind === "routed") msg = tt("routed_admin");
      else msg = tt("verdict_in", { item: itemName, n: verdict.daysLeft });
      body = e("div", null,
        e("div", { style: { textAlign: "center", padding: "8px 4px 18px" } },
          e("div", { style: { width: 72, height: 72, borderRadius: 99, margin: "0 auto 16px", background: MU.STATUS_SOFT[vs], color: MU.STATUS_COLOR[vs], display: "flex", alignItems: "center", justifyContent: "center" } },
            e(MU.Icon, { name: verdict.kind === "expired" ? "x" : verdict.kind === "safety" ? "alert" : "check", size: 34, stroke: 2.2 })),
          e("h2", { style: { fontSize: 17, fontWeight: 800, color: MU.STATUS_COLOR[vs], marginBottom: 10 } }, tt("status_" + (verdict.kind === "expired" ? "expired" : verdict.kind === "soon" ? "soon" : "active"))),
          e("p", { style: { fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.5, textWrap: "pretty" } }, msg)),
        verdict.kind === "expired" && e(MU.Btn, { variant: "gold", block: true, icon: "arrowR", onClick: () => { app.closeReport(); app.navigate({ tab: "help", gaas: true }); } }, tt("offer_service")));
    } else {
      // confirm receipt
      const c = createdClaim;
      body = e("div", { style: { textAlign: "center", padding: "10px 4px" } },
        e("div", { style: { width: 76, height: 76, borderRadius: 99, margin: "6px auto 16px", background: "var(--brand-soft)", color: "var(--brand)", display: "flex", alignItems: "center", justifyContent: "center" } }, e(MU.Icon, { name: "check", size: 36, stroke: 2.4 })),
        e("h2", { style: { fontSize: 20, fontWeight: 800 } }, tt("claim_created")),
        e("div", { style: { marginTop: 16, padding: 16, background: "#fff", border: "1px solid var(--line)", borderRadius: 16, textAlign: "left" } },
          e("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } },
            e("div", { style: { fontSize: 12, color: "var(--ink-4)", fontWeight: 600 } }, tt("claim_id")),
            e("div", { style: { fontFamily: "ui-monospace,monospace", fontWeight: 700, fontSize: 14 } }, "#" + (c ? c.id : ""))),
          e("div", { className: "mu-divider", style: { margin: "12px 0" } }),
          e("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } },
            e("div", { style: { fontSize: 12, color: "var(--ink-4)", fontWeight: 600 } }, tt("claim_status")),
            e(MU.StatusPill, { status: "active", label: tt("claim_received") })),
          e("div", { style: { fontSize: 11.5, color: "var(--ink-4)", marginTop: 12 } }, c && tt("filed_on", { date: MU.formatDateTime(c.createdAt, lang) }))),
        e("p", { style: { fontSize: 12.5, color: "var(--ink-4)", marginTop: 14, display: "flex", gap: 7, alignItems: "center", justifyContent: "center" } }, e(MU.Icon, { name: "whatsapp", size: 14 }), tt("claim_receipt_note")),
        e("div", { style: { display: "flex", gap: 9, marginTop: 22 } },
          e(MU.Btn, { variant: "ghost", style: { flex: 1 }, onClick: () => app.openReport(null) }, tt("new_report")),
          e(MU.Btn, { variant: "primary", style: { flex: 1 }, onClick: () => app.closeReport() }, tt("view_my_claims"))));
    }

    /* footer cta */
    let footer = null;
    if (step === 0 && mode === "describe") footer = e(MU.Btn, { block: true, icon: "arrowR", disabled: !canNext(), onClick: () => setStep(1) }, tt("continue"));
    else if (step >= 1 && step <= 3) footer = e(MU.Btn, { block: true, icon: "arrowR", disabled: !canNext(), onClick: () => setStep(step + 1) }, step === 3 ? tt("step_verdict") : tt("continue"));
    else if (step === 4) footer = e(MU.Btn, { block: true, icon: "check", onClick: submit }, tt("submit_claim"));

    return e("div", { style: { display: "flex", flexDirection: "column", height: "100%" } },
      header,
      e("div", { className: "app-scroll", style: { flex: 1, overflowY: "auto", padding: 16 } }, body),
      // Sticky action bar; extra bottom padding clears the phone's home indicator.
      footer && e("div", { style: { padding: 16, paddingBottom: "calc(16px + env(safe-area-inset-bottom))", borderTop: "1px solid var(--line)", background: "var(--paper)", boxShadow: "0 -6px 18px rgba(14,17,22,.06)" } }, footer)
    );
  }

  /* ---------- claims list (default report view) ---------- */
  function Report() {
    const app = window.MU.useApp();
    const { lang } = app;
    const tt = (k, p) => MU.t(lang, k, p);
    const [detail, setDetail] = useState(null);

    if (app.reportSession) return e(Wizard, { app, prefill: app.reportSession.prefill, key: app.reportSession.key });

    const claims = app.getUnitClaims();
    return e("div", { className: "mu-screen app-scroll", style: { overflowY: "auto", height: "100%" } },
      e("div", { style: { marginBottom: 16 } },
        e("div", { className: "mu-eyebrow" }, tt("report_title")),
        e("h1", { className: "mu-h-title", style: { marginTop: 6 } }, tt("my_claims")),
        e("p", { className: "mu-sub", style: { marginTop: 6 } }, tt("report_intro"))),
      e(MU.Btn, { block: true, icon: "camera", style: { marginBottom: 20 }, onClick: () => app.openReport(null) }, tt("qa_report")),
      claims.length === 0
        ? e("div", { style: { textAlign: "center", padding: "40px 16px", color: "var(--ink-4)" } }, e("p", { style: { fontSize: 14 } }, tt("my_claims_empty")))
        : e("div", { style: { display: "flex", flexDirection: "column", gap: 11 } },
          claims.map((cl) => {
            const issue = MU.ISSUE_BY_ID[cl.issueId];
            const title = issue ? issue["name_" + lang] : (cl["details_" + lang] || cl.freeText || tt("report_title"));
            const vs = claimVerdictStatus(cl.verdict);
            const room = MU.ROOM_BY_ID[cl.room];
            return e("button", { key: cl.id, className: "mu-card", onClick: () => setDetail(cl), style: { display: "flex", gap: 13, padding: 13, textAlign: "left", alignItems: "center", cursor: "pointer" } },
              cl.media && cl.media.length
                ? e(MU.MediaThumb, { item: cl.media[0], size: 58 })
                : e(MU.Placeholder, { label: "foto", h: 58, radius: 12, style: { width: 58, flex: "0 0 auto", fontSize: 9 } }),
              e("div", { style: { flex: 1, minWidth: 0 } },
                e("div", { style: { display: "flex", alignItems: "center", gap: 7, marginBottom: 3 } },
                  e("span", { style: { fontFamily: "ui-monospace,monospace", fontSize: 10.5, color: "var(--ink-4)", fontWeight: 600 } }, "#" + cl.id)),
                e("div", { style: { fontWeight: 700, fontSize: 14, lineHeight: 1.2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, title),
                e("div", { style: { fontSize: 11.5, color: "var(--ink-4)", marginTop: 2 } }, (room ? room["name_" + lang] + " · " : "") + MU.formatDateShort(cl.createdAt, lang))),
              e("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 5 } },
                e(MU.StatusPill, { status: cl.status === "resolved" ? "active" : cl.status === "scheduled" ? "soon" : "active", small: true, label: tt("claim_" + cl.status) }),
                e("span", { style: { width: 8, height: 8, borderRadius: 9, background: MU.STATUS_COLOR[vs] } })));
          })),
      e(ClaimDetail, { claim: detail, open: !!detail, onClose: () => setDetail(null), app })
    );
  }

  MU.Report = Report;
})(window.MU);