// screens/apartment-detail.jsx — Single apartment with tabbed sections
// Tabs: Rooms / Bills / Expenses / Revenue / Maintenance / Calendar (summer)

function ApartmentDetail({ ctx, aptId }) {
  const { data, nav, markPaid, openAddTenant } = ctx;
  const tt = ctx.tt;
  const apt = data.byId.apt(aptId);
  const [tab, setTab] = React.useState("rooms");

  if (!apt) {
    return (
      <div className="main-scroll">
        <Empty icon="building" title={tt("empty.notFound")}
               action={<button className="btn" onClick={() => nav("apartments")}>{tt("empty.backTo", { section: tt("nav.apartments") })}</button>} />
      </div>
    );
  }

  const tenants = data.tenants.filter((t) => t.aptId === apt.id && t.status === "active");
  const aptBills = data.bills.filter((b) => b.aptId === apt.id);
  const aptExpenses = data.expenses.filter((e) => e.aptId === apt.id);
  const aptTickets = data.tickets.filter((t) => t.aptId === apt.id);
  const aptBookings = data.bookings.filter((b) => b.aptId === apt.id);

  const ytd = data.aptYTD[apt.id];
  const rooms = apt.type === "rooms" ? apt.bedrooms : 1;
  const occupied = tenants.length;

  return (
    <>
      <div className="main-top">
        <div className="title">
          <div className="breadcrumb">
            <Link onClick={() => nav("apartments")}>{tt("nav.apartments")}</Link>
            <Icon name="chevR" size={12} />
            <span>{apt.name}</span>
          </div>
          <h1 className="display">{apt.name}</h1>
          <div className="sub">{apt.address} · {apt.neighborhood}</div>
        </div>
        <div className="actions">
          <HeaderTools ctx={ctx} />
          <button className="btn" onClick={() => nav("messages")}>
            <Icon name="chat" size={14} /> {tt("btn.messageTenants")}
          </button>
          <Dropdown align="right" trigger={
            <button className="iconbtn" aria-label={tt("props.menu.more") || "Más"}>
              <Icon name="more" size={15} />
            </button>
          }>
            <MenuHeader>{apt.name}</MenuHeader>
            <MenuItem icon="euro"     label={tt("ad.addBill") || "Añadir factura"}
                      onClick={() => ctx.openModal("addBill", { prefillAptId: apt.id })} />
            <MenuItem icon="receipt"  label={tt("ad.newExpense") || "Registrar gasto"}
                      onClick={() => ctx.openModal("addExpense", { prefillAptId: apt.id })} />
            <MenuItem icon="wrench"   label={tt("ad.newTicket") || "Nueva incidencia"}
                      onClick={() => ctx.openModal("newTicket", { prefillAptId: apt.id })} />
            <MenuItem icon="calendar" label={tt("ad.newBooking") || "Nueva reserva"}
                      onClick={() => ctx.openModal("newBooking", { prefillAptId: apt.id })} />
            <MenuDivider />
            <MenuItem icon="file"  label={tt("ad.snapshot") || "Snapshot PDF"}
                      onClick={() => ctx.showToast && ctx.showToast(tt("ad.snapshotSaved", { apt: apt.name }))} />
            <MenuItem icon="settings" label={tt("ad.edit") || "Editar piso"}
                      onClick={() => ctx.showToast(tt("ad.editPending"))} />
            <MenuDivider />
            <MenuItem icon="x" label={tt("ad.delete") || "Eliminar piso"} danger
                      onClick={() => ctx.confirm && ctx.confirm({
                        title: tt("conf.deleteApt.title", { name: apt.name }),
                        body: tt("conf.deleteApt.body"),
                        confirmLabel: tt("conf.deleteApt.confirm"),
                        danger: true,
                        onConfirm: () => ctx.removeApartment(apt.id),
                      })} />
          </Dropdown>
          <button className="btn primary" onClick={openAddTenant}><Icon name="plus" size={14} /> {tt("btn.addTenant")}</button>
        </div>
      </div>

      <div className="main-scroll">
        {/* ── Header card (compact) ── */}
        <Card className="flush apt-detail-head" style={{ marginBottom: 20, overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: "minmax(240px,1fr) 2fr" }}>
            <div className="arc-top" style={{ position: "relative", minHeight: 168 }}>
              <AptArchHero aptId={apt.id} />
              <div style={{ position: "absolute", top: 10, left: 10, display: "flex", gap: 6 }}>
                <Pill className="solid">{apt.type === "rooms" ? tt("apts.rooms", { n: apt.bedrooms }) : tt("apts.wholeFlat")}</Pill>
              </div>
            </div>
            <div style={{ padding: 20, display: "flex", flexDirection: "column", gap: 12 }}>
              <div className="apt-detail-facts">
                <FactCol label={tt("ad.type")} value={apt.type === "rooms" ? tt("apts.byRoom") : tt("apts.wholeFlat")} />
                <FactCol label={tt("ad.bedrooms")} value={apt.bedrooms} />
                <FactCol label={tt("ad.bathrooms")} value={apt.bathrooms} />
                <FactCol label={tt("ad.size")} value={`${apt.size} m²`} />
                <FactCol label={tt("ad.floor")} value={apt.floor} />
              </div>
              {apt.notes && (
                <div className="muted txt-sm" style={{ borderTop: "1px solid var(--ef-line)", paddingTop: 12 }}>
                  {apt.notes}
                </div>
              )}
              <div className="apt-detail-kpis">
                <KPI label={apt.type === "rooms" ? tt("ad.occupied") : tt("apts.status")}
                     value={apt.type === "rooms" ? `${occupied}/${rooms}` : (occupied ? tt("apts.let") : tt("st.vacant"))} />
                <KPI label={tt("ad.ytdRev")} value={fmtEUR(ytd.revenue)} />
                <KPI label={tt("ad.ytdExp")} value={fmtEUR(ytd.expenses)} />
                <KPI label={tt("ad.ytdNet")} value={fmtEUR(ytd.net, { sign: ytd.net > 0 })}
                     color={ytd.net >= 0 ? "var(--ef-accent-deep)" : "var(--ef-danger)"} />
              </div>
            </div>
          </div>
        </Card>

        <Tabs underline value={tab} onChange={setTab}
              tabs={[
                { value: "rooms",    label: apt.type === "rooms" ? tt("ad.tab.rooms") : tt("ad.tab.tenant"), icon: "door" },
                { value: "bills",    label: tt("ad.tab.bills"), icon: "euro", count: aptBills.filter((b) => b.period === "2026-05").length },
                { value: "expenses", label: tt("ad.tab.expenses"), icon: "receipt" },
                { value: "revenue",  label: tt("ad.tab.revenue"), icon: "trendUp" },
                { value: "maintenance", label: tt("ad.tab.maintenance"), icon: "wrench", count: aptTickets.filter((t) => t.status !== "resolved").length || undefined },
                { value: "calendar", label: tt("ad.tab.calendar"), icon: "calendar" },
              ]} />

        <div style={{ marginTop: 22 }}>
          {tab === "rooms"    && <RoomsTab apt={apt} tenants={tenants} ctx={ctx} />}
          {tab === "bills"    && <BillsTab bills={aptBills} ctx={ctx} apt={apt} />}
          {tab === "expenses" && <ExpensesTab expenses={aptExpenses} ctx={ctx} apt={apt} />}
          {tab === "revenue"  && <RevenueTab apt={apt} ctx={ctx} bills={aptBills} expenses={aptExpenses} bookings={aptBookings} ytd={ytd} />}
          {tab === "maintenance" && <MaintenanceTab tickets={aptTickets} ctx={ctx} apt={apt} />}
          {tab === "calendar" && <CalendarTab apt={apt} bookings={aptBookings} ctx={ctx} />}
        </div>
      </div>
    </>
  );
}

const FactCol = ({ label, value }) => (
  <div>
    <div className="muted txt-xs" style={{ textTransform: "uppercase", letterSpacing: "0.06em", fontSize: 10.5 }}>{label}</div>
    <div className="b500" style={{ marginTop: 4 }}>{value}</div>
  </div>
);

const KPI = ({ label, value, color }) => (
  <div style={{ padding: "12px 16px", background: "var(--ef-bg-soft)", borderRadius: 10, border: "1px solid var(--ef-line)" }}>
    <div className="muted txt-xs">{label}</div>
    <div className="num b500" style={{ fontSize: 20, marginTop: 4, color }}>{value}</div>
  </div>
);

// ───────────────────────── ROOMS TAB ─────────────────────────
function RoomsTab({ apt, tenants, ctx }) {
  const { nav, openAddTenant, data } = ctx;
  const tt = ctx.tt;

  if (apt.type !== "rooms") {
    // Whole flat — single tenant
    const tn = tenants[0];
    if (!tn) {
      return <Empty icon="bed" title={tt("st.vacant") || "Vacante"} body={tt("ad.noTenant") || "No hay inquilino asignado a este piso."}
                    action={<button className="btn accent" onClick={openAddTenant}><Icon name="plus" size={14} /> {tt("btn.addTenant")}</button>} />;
    }
    return <WholeFlatTenant apt={apt} tenant={tn} ctx={ctx} />;
  }

  const roomList = Array.from({ length: apt.bedrooms }, (_, i) => i + 1).map((roomNum) => {
    const tn = tenants.find((t) => t.room === roomNum);
    return { roomNum, tenant: tn };
  });

  return (
    <div className="grid-3">
      {roomList.map(({ roomNum, tenant }) => {
        const mayBill = tenant && data.bills.find((bb) => bb.tenantId === tenant.id && bb.period === "2026-05" && bb.type === "rent");
        return (
          <div className="room-tile compact" key={roomNum} data-occupied={!!tenant}>
            <div className="room-tile-head">
              <div className="room-num-block">
                <span className="muted txt-xs" style={{ textTransform: "uppercase", letterSpacing: "0.08em", fontSize: 10 }}>{tt("ad.room")}</span>
                <span className="room-num-big">{roomNum}</span>
              </div>
              {tenant ? (mayBill ? <StatusBadge status={mayBill.status} /> : <StatusBadge status="active" />) : <Pill tone="warn">{tt("st.vacant") || "Vacante"}</Pill>}
            </div>

            {tenant ? (
              <>
                <div className="room-tenant-row" onClick={() => nav("tenant", tenant.id)}>
                  <div className="avatar" data-apt={apt.id}>{initials(tenant.name)}</div>
                  <div className="grow" style={{ minWidth: 0 }}>
                    <div className="b500 flex center gap-1" style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                      {tenant.name} <Flag code={tenant.country} />
                    </div>
                    <div className="muted txt-xs" style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                      {tenant.university}
                    </div>
                  </div>
                </div>
                <div className="room-tile-stats">
                  <div>
                    <div className="muted txt-xs">{tt("ad.rent")}</div>
                    <div className="num b500">{fmtEUR(tenant.rent)}</div>
                  </div>
                  <div>
                    <div className="muted txt-xs">{tt("ad.until")}</div>
                    <div className="num b500">{fmtDate(tenant.contractEnd, { short: true })}</div>
                  </div>
                </div>
                <div className="room-tile-actions">
                  <button className="btn sm" onClick={() => nav("tenant", tenant.id)}>{tt("ad.viewTenant")}</button>
                  <button className="iconbtn sm" aria-label={tt("btn.message")}
                          onClick={() => nav("messages", `c-${tenant.id.replace("t-", "")}`)}>
                    <Icon name="chat" size={13} />
                  </button>
                </div>
              </>
            ) : (
              <div className="room-tile-empty">
                <Icon name="door" size={22} className="muted" />
                <div className="b500">{tt("ad.available")}</div>
                <div className="muted txt-xs">{fmtEUR(apt.avg?.rent || 0)}/mo</div>
                <button className="btn accent sm" onClick={openAddTenant} style={{ marginTop: 8 }}>
                  <Icon name="plus" size={12} /> {tt("btn.addTenant")}
                </button>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function WholeFlatTenant({ apt, tenant, ctx }) {
  const { nav, data } = ctx;
  const tt = ctx.tt;
  const monthsActive = monthsBetween(tenant.contractStart, ArcoData.ISO(ArcoData.today));
  const totalLeft = monthsBetween(ArcoData.ISO(ArcoData.today), tenant.contractEnd);
  return (
    <Card>
      <div className="flex gap-4" style={{ alignItems: "flex-start" }}>
        <div className="avatar xl">{initials(tenant.name)}</div>
        <div className="grow">
          <div className="flex center gap-2"><h2 className="display">{tenant.name}</h2><Flag code={tenant.country} /></div>
          <div className="muted">{tenant.note}</div>
          <div className="flex gap-2" style={{ marginTop: 14 }}>
            <button className="btn" onClick={() => nav("tenant", tenant.id)}>{tt("btn.viewProfile")}</button>
            <button className="btn"><Icon name="chat" size={14} /> {tt("btn.message")}</button>
            <button className="btn ghost"><Icon name="receipt" size={14} /> {tt("btn.recordPayment")}</button>
          </div>
        </div>
        <div className="grid-2" style={{ gap: 10, flex: "0 0 360px" }}>
          <KPI label={tt("ad.whole.rentMonth")} value={fmtEUR(tenant.rent)} />
          <KPI label={tt("ad.whole.deposit")} value={fmtEUR(tenant.deposit)} />
          <KPI label={tt("ad.whole.tenantSince")} value={tt("ad.whole.moAbbr", { n: monthsActive })} />
          <KPI label={tt("ad.whole.monthsLeft")} value={tt("ad.whole.moAbbr", { n: totalLeft })} />
        </div>
      </div>
    </Card>
  );
}

// ───────────────────────── BILLS TAB ─────────────────────────
function BillsTab({ bills, ctx, apt }) {
  const { data, markPaid } = ctx;
  const tt = ctx.tt;
  const [period, setPeriod] = React.useState("2026-05");
  const months = Array.from(new Set(bills.map((b) => b.period))).sort().reverse().slice(0, 6);
  const list = bills.filter((b) => b.period === period);
  const totals = {
    paid: list.filter((b) => b.status === "paid").reduce((s, b) => s + b.amount, 0),
    pending: list.filter((b) => b.status === "pending").reduce((s, b) => s + b.amount, 0),
    overdue: list.filter((b) => b.status === "overdue").reduce((s, b) => s + b.amount, 0),
  };
  return (
    <div>
      <div className="grid-stat-4" style={{ marginBottom: 18, gridTemplateColumns: "repeat(4, 1fr)" }}>
        <Stat icon="check" label={tt("ad.bills.paid")} value={fmtEUR(totals.paid)} sub={<span className="muted">{tt("ad.bills.billsCount", { n: list.filter((b) => b.status === "paid").length })}</span>} />
        <Stat icon="clock" label={tt("ad.bills.pending")} value={fmtEUR(totals.pending)} sub={<span className="muted">{tt("ad.bills.billsCount", { n: list.filter((b) => b.status === "pending").length })}</span>} />
        <Stat icon="bell" label={tt("ad.bills.overdue")} value={fmtEUR(totals.overdue)} sub={<span className="muted">{tt("ad.bills.billsCount", { n: list.filter((b) => b.status === "overdue").length })}</span>} />
        <Stat icon="euro" label={tt("ad.bills.totalBilled")} value={fmtEUR(list.reduce((s, b) => s + b.amount, 0))} sub={<span className="muted">{period}</span>} />
      </div>
      <div className="flex center between" style={{ marginBottom: 12 }}>
        <Tabs value={period} onChange={setPeriod}
              tabs={months.map((m) => ({ value: m, label: monthLabel(m) }))} />
        <button className="btn"><Icon name="plus" size={14} /> {tt("btn.addBill")}</button>
      </div>

      <Card className="flush">
        <table className="table">
          <thead>
            <tr>
              <th>{tt("ad.bills.col.bill")}</th>
              <th>{tt("ad.bills.col.tenant")}</th>
              <th>{tt("ad.bills.col.type")}</th>
              <th>{tt("ad.bills.col.due")}</th>
              <th className="num">{tt("ad.bills.col.amount")}</th>
              <th>{tt("ad.bills.col.status")}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {list.map((b) => {
              const tn = b.tenantId && data.byId.tenant(b.tenantId);
              return (
                <tr key={b.id}>
                  <td><div className="b500">{b.label}</div><div className="muted txt-xs">{b.period}</div></td>
                  <td>{tn ? <span className="flex center gap-2"><div className="avatar sm">{initials(tn.name)}</div>{tn.name}</span> : <span className="muted">{tt("ad.bills.allTenants")}</span>}</td>
                  <td><Pill>{tt(`bill.type.${b.type}`) || b.type}</Pill></td>
                  <td className="num">{fmtDate(b.dueDate, { short: true })}</td>
                  <td className="num b500">{fmtEUR(b.amount)}</td>
                  <td><StatusBadge status={b.status} /></td>
                  <td style={{ width: 120 }}>
                    {b.status !== "paid" && <button className="btn sm" onClick={() => markPaid(b.id)}>{tt("btn.markPaid")}</button>}
                  </td>
                </tr>
              );
            })}
            {list.length === 0 && (
              <tr><td colSpan="7"><Empty icon="euro" title={tt("empty.nothingHere")} /></td></tr>
            )}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

// ───────────────────────── EXPENSES TAB ─────────────────────────
function ExpensesTab({ expenses, apt, ctx }) {
  const tt = (ctx && ctx.tt) || ((k) => k);
  const total = expenses.reduce((s, e) => s + e.amount, 0);
  const byCat = expenses.reduce((acc, e) => { acc[e.category] = (acc[e.category] || 0) + e.amount; return acc; }, {});
  const cats = Object.entries(byCat).sort((a, b) => b[1] - a[1]);
  const catLabel = (c) => tt(`fin.cat.${c}`) !== `fin.cat.${c}` ? tt(`fin.cat.${c}`) : c;
  return (
    <div className="split-32" style={{ gridTemplateColumns: "1fr 2fr" }}>
      <Card>
        <div className="card-head"><h3>{tt("ad.exp.byCat")}</h3></div>
        <div className="flex col gap-3" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {cats.map(([c, v]) => (
            <div key={c}>
              <div className="flex between" style={{ marginBottom: 4 }}>
                <div className="flex center gap-2">
                  <Icon name={iconOfCat(c)} size={14} className="muted" />
                  <span style={{ textTransform: "capitalize" }}>{catLabel(c)}</span>
                </div>
                <span className="num b500">{fmtEUR(v)}</span>
              </div>
              <div className="progress"><i style={{ width: `${(v / total) * 100}%` }} /></div>
            </div>
          ))}
          {cats.length === 0 && (
            <Empty icon="receipt" title={tt("ad.exp.empty")} />
          )}
          {cats.length > 0 && <>
            <div className="divider" />
            <div className="flex between">
              <span className="b500">{tt("ad.exp.totalPeriod")}</span>
              <span className="num b500">{fmtEUR(total)}</span>
            </div>
          </>}
        </div>
      </Card>

      <Card className="flush">
        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--ef-line)", display: "flex", alignItems: "center" }}>
          <h3>{tt("ad.exp.all")}</h3>
          <button className="btn sm" style={{ marginLeft: "auto" }}
                  onClick={() => ctx && ctx.openModal && ctx.openModal("addExpense", { prefillAptId: apt.id })}>
            <Icon name="plus" size={12} /> {tt("btn.addExpense")}
          </button>
        </div>
        <table className="table">
          <thead>
            <tr><th>{tt("ad.exp.col.date")}</th><th>{tt("ad.exp.col.label")}</th><th>{tt("ad.exp.col.vendor")}</th><th>{tt("ad.exp.col.category")}</th><th className="num">{tt("ad.exp.col.amount")}</th></tr>
          </thead>
          <tbody>
            {expenses.sort((a, b) => b.date.localeCompare(a.date)).map((e) => (
              <tr key={e.id}>
                <td className="num">{fmtDate(e.date, { short: true })}</td>
                <td><div className="b500">{e.label}</div>{e.note && <div className="muted txt-xs">{e.note}</div>}</td>
                <td className="muted">{e.vendor}</td>
                <td><Pill>{catLabel(e.category)}</Pill></td>
                <td className="num b500">−{fmtEUR(e.amount)}</td>
              </tr>
            ))}
            {expenses.length === 0 && <tr><td colSpan="5"><Empty icon="receipt" title={tt("ad.exp.empty")} /></td></tr>}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

// ───────────────────────── REVENUE TAB ─────────────────────────
// Combines academic-year rent (bills) with summer short-stay revenue
// (bookings), so each flat's profitability reads as one number that
// covers the whole calendar.
function RevenueTab({ apt, bills, expenses, bookings, ctx }) {
  const tt = (ctx && ctx.tt) || ((k) => k);
  // Build per-month series from bills paid + expenses
  const months = ["2025-12", "2026-01", "2026-02", "2026-03", "2026-04", "2026-05"];
  const series = months.map((p) => {
    const inc = bills.filter((b) => b.period === p && b.status === "paid").reduce((s, b) => s + b.amount, 0);
    const ex = expenses.filter((e) => e.date.startsWith(p)).reduce((s, e) => s + e.amount, 0);
    const label = p.slice(5, 7);
    return { month: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][parseInt(label, 10) - 1],
             income: inc || apt.avg.rent * (apt.type === "rooms" ? apt.bedrooms : 1) * 0.92,
             expenses: ex || apt.avg.util };
  });

  const ytdRev = series.slice(1).reduce((s, m) => s + m.income, 0);
  const ytdEx = series.slice(1).reduce((s, m) => s + m.expenses, 0);

  // Summer projections — what's booked across Jun–Aug
  const summerBks = (bookings || []).filter((b) =>
    (b.status === "confirmed" || b.status === "tentative") &&
    b.nightly > 0 &&
    b.start >= "2026-06-01" && b.start < "2026-09-01");
  const summerNts = summerBks.reduce((s, b) => s + nightsBetween(b.start, b.end), 0);
  const summerRev = summerBks.reduce((s, b) => s + nightsBetween(b.start, b.end) * b.nightly, 0);
  const summerEx = (expenses || []).filter((e) =>
    (e.category === "cleaning" || e.category === "supplies") &&
    e.date >= "2026-05-01" && e.date < "2026-09-01")
    .reduce((s, e) => s + e.amount, 0);

  const combinedRev = ytdRev + summerRev;
  const combinedEx = ytdEx + summerEx;
  const combinedNet = combinedRev - combinedEx;
  const combinedMargin = Math.round((combinedNet / Math.max(combinedRev, 1)) * 100);

  return (
    <div>
      <div className="grid-stat-4" style={{ marginBottom: 18 }}>
        <Stat icon="upTrend" label={tt("ad.rev.combinedRev")} value={fmtEUR(combinedRev)}
              sub={<span>{tt("ad.rev.combinedRevSub")}</span>} />
        <Stat icon="downTrend" label={tt("ad.rev.combinedExp")} value={fmtEUR(combinedEx)} />
        <Stat icon="euro" label={tt("ad.rev.netResult")} value={fmtEUR(combinedNet, { sign: combinedNet > 0 })}
              sub={<span style={{ color: combinedNet >= 0 ? "var(--ef-accent-deep)" : "var(--ef-danger)" }}>{tt("ad.rev.margin", { n: combinedMargin })}</span>} />
        <Stat icon="sun" label={tt("ad.rev.summerBooked")} value={fmtEUR(summerRev)}
              sub={<span>{tt("ad.rev.summerStays", { n: summerNts, s: summerBks.length })}</span>} />
      </div>

      {/* Revenue mix: academic vs summer as a stacked bar */}
      <Card style={{ marginBottom: 16 }}>
        <div className="card-head"><h3>{tt("ad.rev.mix")}</h3><div className="muted txt-sm head-right">{tt("ad.rev.mixSub")}</div></div>
        <div style={{ display: "flex", height: 26, borderRadius: 8, overflow: "hidden", marginBottom: 12 }}>
          <div style={{ flex: ytdRev, background: "var(--ef-accent)", display: "flex", alignItems: "center", padding: "0 12px", color: "#fff", fontSize: 12, fontWeight: 500 }}>
            {tt("ad.rev.academic")} · {fmtEUR(ytdRev)}
          </div>
          {summerRev > 0 && (
            <div style={{ flex: summerRev, background: "var(--ef-info)", display: "flex", alignItems: "center", padding: "0 12px", color: "var(--ef-bg)", fontSize: 12, fontWeight: 500 }}>
              {tt("ad.rev.summer")} · {fmtEUR(summerRev)}
            </div>
          )}
        </div>
        <div className="flex gap-3 txt-xs muted">
          <span className="flex center gap-1"><i style={{ width: 10, height: 10, background: "var(--ef-accent)", borderRadius: 2 }} /> {tt("ad.rev.legend.academic")}</span>
          <span className="flex center gap-1"><i style={{ width: 10, height: 10, background: "var(--ef-info)", borderRadius: 2 }} /> {tt("ad.rev.legend.summer")}</span>
        </div>
      </Card>

      <Card>
        <div className="card-head">
          <h3>{tt("ad.rev.cashflow")}</h3>
          <div className="head-right">
            <Tabs tabs={[{ value: "6m", label: "6m" }, { value: "1y", label: "1y" }]} value="6m" onChange={() => {}} />
          </div>
        </div>
        <BarChart data={series} />
      </Card>

      <div className="grid-2" style={{ marginTop: 24 }}>
        <Card>
          <div className="card-head"><h3>{tt("ad.rev.pl")}</h3><div className="muted txt-sm head-right">{tt("ad.rev.plSub")}</div></div>
          <table className="table" style={{ marginTop: -10 }}>
            <tbody>
              <tr><td className="muted">{tt("ad.rev.revenue")}</td><td className="num"></td></tr>
              <tr><td>{tt("ad.rev.row.academic")}</td><td className="num">{fmtEUR(ytdRev * 0.92)}</td></tr>
              <tr><td>{tt("ad.rev.row.utility")}</td><td className="num">{fmtEUR(ytdRev * 0.08)}</td></tr>
              {summerRev > 0 && <tr><td>{tt("ad.rev.row.short")}</td><td className="num">{fmtEUR(summerRev)}</td></tr>}
              <tr style={{ background: "var(--ef-bg-soft)" }}>
                <td className="b500">{tt("ad.rev.row.totalRev")}</td>
                <td className="num b500">{fmtEUR(combinedRev)}</td>
              </tr>
              <tr><td className="muted">{tt("ad.rev.row.expenses")}</td><td></td></tr>
              <tr><td>{tt("ad.rev.row.maint")}</td><td className="num">−{fmtEUR(ytdEx * 0.6)}</td></tr>
              <tr><td>{tt("ad.rev.row.community")}</td><td className="num">−{fmtEUR(ytdEx * 0.25)}</td></tr>
              <tr><td>{tt("ad.rev.row.utilities")}</td><td className="num">−{fmtEUR(ytdEx * 0.15)}</td></tr>
              {summerEx > 0 && <tr><td>{tt("ad.rev.row.cleaning")}</td><td className="num">−{fmtEUR(summerEx)}</td></tr>}
              <tr style={{ background: "var(--ef-bg-soft)" }}>
                <td className="b500">{tt("ad.rev.row.totalExp")}</td>
                <td className="num b500">−{fmtEUR(combinedEx)}</td>
              </tr>
              <tr style={{ background: "var(--ef-accent-soft)", color: "var(--ef-accent-deep)" }}>
                <td className="b500">{tt("ad.rev.row.net")}</td>
                <td className="num b500">{fmtEUR(combinedNet, { sign: combinedNet > 0 })}</td>
              </tr>
            </tbody>
          </table>
        </Card>
        <Card>
          <div className="card-head"><h3>{tt("ad.rev.notes")}</h3></div>
          <ul style={{ margin: 0, paddingLeft: 18, display: "flex", flexDirection: "column", gap: 10, color: "var(--ef-ink-2)" }}>
            <li>{tt("ad.rev.note.occ")}</li>
            {summerBks.length > 0 && <li dangerouslySetInnerHTML={{ __html: tt("ad.rev.note.summer", { amt: `<b>${fmtEUR(summerRev)}</b>`, n: Math.round(summerRev / Math.max(apt.avg.rent, 1)) }) }} />}
            <li>{tt("ad.rev.note.plumb")}</li>
            <li>{tt("ad.rev.note.ibi")}</li>
          </ul>
        </Card>
      </div>
    </div>
  );
}

// ───────────────────────── MAINTENANCE TAB ─────────────────────────
function MaintenanceTab({ tickets, ctx }) {
  const { setTicket, data } = ctx;
  const tt = (ctx && ctx.tt) || ((k) => k);
  const open = tickets.filter((t) => t.status === "open");
  const inProg = tickets.filter((t) => t.status === "in-progress");
  const done = tickets.filter((t) => t.status === "resolved");
  const priLabel = (p) => p === "high" ? tt("mt.high") : p === "med" ? tt("mt.med") : tt("mt.low");
  return (
    <div className="kanban">
      {[
        { title: tt("ad.mt.open"),        items: open,   key: "open" },
        { title: tt("ad.mt.inProgress"),  items: inProg, key: "in-progress" },
        { title: tt("ad.mt.resolved"),    items: done,   key: "resolved" },
      ].map((col) => (
        <div className="kanban-col" key={col.key}>
          <h4>{col.title} <Pill>{col.items.length}</Pill></h4>
          {col.items.map((t) => {
            const tn = t.tenantId && data.byId.tenant(t.tenantId);
            return (
              <div className="kanban-card" key={t.id}>
                <div className="flex between">
                  <Pill tone={t.priority === "high" ? "danger" : t.priority === "med" ? "warn" : "default"}>{priLabel(t.priority)}</Pill>
                  <span className="muted txt-xs">{relTime(t.openedAt)}</span>
                </div>
                <h5>{t.title}</h5>
                {t.note && <div className="muted txt-xs">{t.note}</div>}
                <div className="meta flex center gap-2">
                  {tn && <span className="avatar sm">{initials(tn.name)}</span>}
                  <span>{tn ? tn.name : tt("ad.mt.owner")}</span>
                </div>
                {col.key !== "resolved" && (
                  <div className="flex gap-2">
                    {col.key === "open" && <button className="btn sm" onClick={() => setTicket(t.id, "in-progress")}>{tt("btn.start")}</button>}
                    <button className="btn sm ghost" onClick={() => setTicket(t.id, "resolved")}><Icon name="check" size={12} /> {tt("btn.resolve")}</button>
                  </div>
                )}
              </div>
            );
          })}
          {col.items.length === 0 && <Empty icon="check" title={tt("ad.mt.empty")} />}
        </div>
      ))}
    </div>
  );
}

// ───────────────────────── CALENDAR TAB (per-apartment) ─────────────────────────
function CalendarTab({ apt, bookings, ctx }) {
  const tt = (ctx && ctx.tt) || ((k) => k);
  const [month, setMonth] = React.useState("2026-07");
  const dayMap = buildBookingDayMap(bookings);
  const days = buildMonthGrid(month);
  const dows = [tt("ad.cal.dow.mon"), tt("ad.cal.dow.tue"), tt("ad.cal.dow.wed"), tt("ad.cal.dow.thu"), tt("ad.cal.dow.fri"), tt("ad.cal.dow.sat"), tt("ad.cal.dow.sun")];

  return (
    <Card>
      <div className="card-head">
        <h3>{tt("ad.cal.heading", { apt: apt.name })}</h3>
        <div className="head-right">
          <button className="iconbtn" aria-label={tt("ui.prevMonth")} onClick={() => setMonth(addMonth(month, -1))}><Icon name="chevL" size={14} /></button>
          <div className="num b500" style={{ minWidth: 110, textAlign: "center" }}>{(window.fmtDateLoc ? window.fmtDateLoc(`${month}-01`, { withYear: true }) : monthLabel(month, true))}</div>
          <button className="iconbtn" aria-label={tt("ui.nextMonth")} onClick={() => setMonth(addMonth(month, 1))}><Icon name="chevR" size={14} /></button>
        </div>
      </div>
      <div className="cal">
        {dows.map((d) => <div className="dow" key={d}>{d}</div>)}
        {days.map((d, i) => {
          const iso = d.iso;
          const booking = dayMap[iso];
          const isToday = iso === ArcoData.ISO(ArcoData.today);
          const cls = ["day"];
          if (d.muted) cls.push("muted");
          if (isToday) cls.push("today");
          if (booking) cls.push(booking.status === "blocked" ? "blocked" : "booked");
          return (
            <div key={i} className={cls.join(" ")} title={booking ? booking.guestName : ""}>
              <div className="dn">{d.day}</div>
              {booking && <div className="who">{booking.short}</div>}
            </div>
          );
        })}
      </div>

      <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--ef-line)" }}>
        <h4 style={{ fontSize: 13, marginBottom: 10 }}>{tt("ad.cal.bookingsMonth")}</h4>
        <div className="flex col gap-2" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {bookings.filter((b) => overlapsMonth(b, month)).map((b) => (
            <div key={b.id} className="flex center gap-3" style={{ padding: 10, background: "var(--ef-bg-soft)", borderRadius: 10 }}>
              <div style={{ width: 8, height: 36, borderRadius: 4, background: b.status === "confirmed" ? "var(--ef-accent)" : b.status === "tentative" ? "var(--ef-warn)" : "var(--ef-muted)" }} />
              <div className="grow">
                <div className="b500 flex center gap-1">{b.guestName} <Flag code={b.guestCountry} /></div>
                <div className="muted txt-xs">{fmtDate(b.start, { short: true })} → {fmtDate(b.end, { short: true })} · {nightsBetween(b.start, b.end)} {tt("common.nights")} · {b.source}</div>
              </div>
              <StatusBadge status={b.status} />
              <div className="num b500">{fmtEUR(nightsBetween(b.start, b.end) * b.nightly)}</div>
            </div>
          ))}
          {bookings.filter((b) => overlapsMonth(b, month)).length === 0 && <Empty icon="calendar" title={tt("ad.cal.noBookings")} />}
        </div>
      </div>
    </Card>
  );
}

// ───────────────────────── HELPERS ─────────────────────────
function labelOfType(t) {
  return { rent: "Rent", utility: "Utility", charge: "Charge", deposit: "Deposit" }[t] || t;
}
function iconOfCat(c) {
  return { maintenance: "wrench", supplies: "receipt", community: "building", utility: "spark", tax: "file", cleaning: "spark" }[c] || "receipt";
}
function monthLabel(p, long = false) {
  const [y, m] = p.split("-").map(Number);
  const names = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  const longNames = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  return `${long ? longNames[m - 1] : names[m - 1]} ${y}`;
}
function addMonth(p, delta) {
  let [y, m] = p.split("-").map(Number);
  m += delta;
  while (m < 1) { m += 12; y -= 1; }
  while (m > 12) { m -= 12; y += 1; }
  return `${y}-${String(m).padStart(2, "0")}`;
}
function monthsBetween(startISO, endISO) {
  const a = new Date(startISO), b = new Date(endISO);
  return Math.max(0, (b.getFullYear() - a.getFullYear()) * 12 + (b.getMonth() - a.getMonth()));
}
function buildMonthGrid(month) {
  const [y, m] = month.split("-").map(Number);
  const first = new Date(y, m - 1, 1);
  const last = new Date(y, m, 0);
  // Monday-first
  const firstDow = (first.getDay() + 6) % 7;
  const cells = [];
  for (let i = 0; i < firstDow; i++) {
    const d = new Date(y, m - 1, -firstDow + i + 1);
    cells.push({ day: d.getDate(), muted: true, iso: ArcoData.ISO(d) });
  }
  for (let d = 1; d <= last.getDate(); d++) {
    const dt = new Date(y, m - 1, d);
    cells.push({ day: d, muted: false, iso: ArcoData.ISO(dt) });
  }
  while (cells.length % 7 !== 0) {
    const lastCell = cells[cells.length - 1];
    const next = new Date(lastCell.iso); next.setDate(next.getDate() + 1);
    cells.push({ day: next.getDate(), muted: true, iso: ArcoData.ISO(next) });
  }
  return cells;
}
function buildBookingDayMap(bookings) {
  const map = {};
  for (const b of bookings) {
    const start = new Date(b.start), end = new Date(b.end);
    for (let d = new Date(start); d < end; d.setDate(d.getDate() + 1)) {
      const iso = ArcoData.ISO(d);
      map[iso] = { ...b, short: b.guestName.split(/\s|—/)[0] };
    }
  }
  return map;
}
function overlapsMonth(b, month) {
  const [y, m] = month.split("-").map(Number);
  const monthStart = new Date(y, m - 1, 1);
  const monthEnd = new Date(y, m, 0);
  return new Date(b.end) >= monthStart && new Date(b.start) <= monthEnd;
}

window.ApartmentDetail = ApartmentDetail;
window.buildMonthGrid = buildMonthGrid;
window.buildBookingDayMap = buildBookingDayMap;
window.overlapsMonth = overlapsMonth;
window.addMonth = addMonth;
window.monthLabel = monthLabel;
window.monthsBetween = monthsBetween;