// screens/apartments.jsx — Apartments list (cards / table by tweak)

function Apartments({ ctx }) {
  const { data, nav, setTweak } = ctx;
  const tt = ctx.tt;
  const tweaks = ctx.t;
  const [query, setQuery] = React.useState("");
  const [typeFilter, setTypeFilter] = React.useState("all");
  const view = tweaks.listings === "table" ? "list" : "grid";
  const setView = (v) => setTweak && setTweak("listings", v === "list" ? "table" : "cards");

  const filtered = data.apartments.filter((a) => {
    if (typeFilter === "rooms" && a.type !== "rooms") return false;
    if (typeFilter === "whole" && a.type !== "whole") return false;
    if (query && !(`${a.name} ${a.neighborhood} ${a.address}`.toLowerCase().includes(query.toLowerCase()))) return false;
    return true;
  });

  return (
    <>
      <div className="main-top">
        <div className="title">
          <h1 className="display">{tt("apts.title")}</h1>
          <div className="sub">{tt("apts.sub", { n: data.apartments.length, beds: data.apartments.reduce((s, a) => s + a.bedrooms, 0), m2: data.apartments.reduce((s, a) => s + a.size, 0) })}</div>
        </div>
        <div className="actions">
          <div className="searchbar">
            <Icon name="search" size={14} />
            <input placeholder={tt("search.byName")} value={query} onChange={(e) => setQuery(e.target.value)} />
          </div>
          <button className="btn"><Icon name="filter" size={14} /> {tt("btn.filters")}</button>
          <HeaderTools ctx={ctx} />
          <button className="btn primary"><Icon name="plus" size={14} /> {tt("btn.newApt")}</button>
        </div>
      </div>

      <div className="main-scroll">
        <div className="flex center gap-2" style={{ marginBottom: 18, justifyContent: "space-between" }}>
          <Tabs tabs={[
            { value: "all", label: tt("apts.tab.all") },
            { value: "rooms", label: tt("apts.tab.rooms") },
            { value: "whole", label: tt("apts.tab.whole") },
          ]} value={typeFilter} onChange={setTypeFilter} />

          <div className="flex center gap-3">
            <div className="muted txt-sm">{tt("apts.shown", { n: filtered.length })}</div>
            <div className="seg-toggle" role="tablist" aria-label={tt("ui.view")}>
              <button aria-pressed={view === "grid"} onClick={() => setView("grid")}>
                <Icon name="grid" size={13} /> {tt("props.grid") || "Cuadrícula"}
              </button>
              <button aria-pressed={view === "list"} onClick={() => setView("list")}>
                <Icon name="list" size={13} /> {tt("props.list") || "Lista"}
              </button>
            </div>
          </div>
        </div>

        {view === "list" ? (
          <ApartmentsTable apartments={filtered} ctx={ctx} />
        ) : (
          <ApartmentsGrid apartments={filtered} ctx={ctx} />
        )}
      </div>
    </>
  );
}

// Mini-card grid — same compact pattern as the dashboard carousel, but in
// grid mode (.no-snap) so all cards are visible at once on the dedicated
// /apartments page. Matches production /propiedades layout.
function ApartmentsGrid({ apartments, ctx }) {
  const { nav, data } = ctx;
  const tt = ctx.tt;
  if (apartments.length === 0) {
    return <Empty icon="building" title={tt("empty.nothingHere")}
                  action={<button className="btn primary" onClick={() => ctx.openModal && ctx.openModal("newApartment")}><Icon name="plus" size={13} /> {tt("btn.newApt")}</button>} />;
  }
  return (
    <div className="properties-grid mini no-snap">
      {apartments.map((a) => {
        const tenants = data.tenants.filter((t) => t.aptId === a.id && t.status === "active");
        const rooms = a.type === "rooms" ? a.bedrooms : 1;
        const summerBks = data.bookings.filter((b) => b.aptId === a.id && b.status === "confirmed" && b.nightly > 0 && b.start >= "2026-06-01" && b.start < "2026-09-01");
        const monthly = a.type === "rooms"
          ? tenants.reduce((s, t) => s + t.rent, 0) + ((rooms - tenants.length) * (a.avg?.rent || 0))
          : (tenants[0]?.rent || (a.avg?.rent || 0));
        // Status: any overdue payment or open ticket → alert
        const monthBills = data.bills.filter((b) => b.aptId === a.id && b.period === "2026-05");
        const status = monthBills.some((b) => b.status === "overdue") ? "danger"
                      : monthBills.some((b) => b.status === "pending") ? "warn"
                      : data.tickets.some((t) => t.aptId === a.id && t.status !== "resolved") ? "warn"
                      : "ok";
        const alertTone = status === "danger" ? "danger" : status === "warn" ? "warn" : null;

        return (
          <div key={a.id} className="property-card mini" onClick={() => nav("apartment", a.id)}>
            <div className="mini-hero">
              <AptArchHero aptId={a.id} />
              <div className="mini-hero-overlay">
                <span className="mini-hero-chip">
                  {a.type === "rooms"
                    ? `${a.bedrooms} ${a.bedrooms === 1 ? tt("apts.bedroom1") : tt("apts.bedroomN")}`
                    : (tt("apts.wholeFlat") || "Piso entero")}
                </span>
                {summerBks.length > 0 && (
                  <span className="mini-hero-chip accent">{summerBks.length} {tt("apts.summerWord")}</span>
                )}
              </div>
            </div>
            <div className="mini-body">
              <div className="mini-head">
                {alertTone && (
                  <span className={`mini-alert mini-alert-${alertTone}`}
                        title={tt("props.alert") || "Requiere atención"} aria-label="alerta">!</span>
                )}
                <span className="mini-name">{a.name}</span>
                <span onClick={(e) => e.stopPropagation()} style={{ display: "inline-flex", marginLeft: "auto" }}>
                  <Dropdown align="right" trigger={
                    <button className="iconbtn mini-menu" aria-label={tt("props.menu.more") || "Más"}>
                      <Icon name="more" size={13} />
                    </button>
                  }>
                    <MenuHeader>{a.name}</MenuHeader>
                    <MenuItem icon="eye" label={tt("props.menu.open") || "Abrir piso"}
                              onClick={() => nav("apartment", a.id)} />
                    <MenuItem icon="plus" label={tt("btn.addTenant") || "Añadir inquilino"}
                              onClick={() => ctx.openAddTenant && ctx.openAddTenant()} />
                    <MenuItem icon="chat" label={tt("btn.messageTenants") || "Mensaje a inquilinos"}
                              onClick={() => nav("messages")} />
                    <MenuDivider />
                    <MenuItem icon="receipt" label={tt("ad.newExpense") || "Registrar gasto"}
                              onClick={() => ctx.openModal("addExpense", { prefillAptId: a.id })} />
                    <MenuItem icon="wrench" label={tt("ad.newTicket") || "Nueva incidencia"}
                              onClick={() => ctx.openModal("newTicket", { prefillAptId: a.id })} />
                  </Dropdown>
                </span>
              </div>
              <div className="mini-sub">{a.neighborhood?.split(",")[0] || a.address}</div>
              <div className="mini-stats">
                <div>
                  <div className="mini-stat-lbl">{tt("apts.col.tenants") || "Inquilinos"}</div>
                  <div className="mini-stat-val num">
                    {a.type === "rooms" ? `${tenants.length}/${rooms}` : (tenants.length ? (tt("apts.let") || "Alquilado") : "—")}
                  </div>
                </div>
                <div>
                  <div className="mini-stat-lbl">{tt("apts.col.monthly") || "Mensual"}</div>
                  <div className="mini-stat-val num">{fmtEUR(monthly)}</div>
                </div>
              </div>
              <div className="mini-tenants">
                <div style={{ display: "flex" }}>
                  {tenants.slice(0, 4).map((tn, i) => (
                    <div key={tn.id} className="avatar sm" data-apt={a.id}
                         style={{ marginLeft: i ? -7 : 0, width: 22, height: 22, fontSize: 9.5 }}
                         title={tn.name}>
                      {initials(tn.name)}
                    </div>
                  ))}
                </div>
                <span className="muted txt-xs" style={{ marginLeft: tenants.length ? 8 : 0 }}>
                  {tenants.length} {tenants.length === 1 ? tt("apts.tenant1") : tt("apts.tenantN")}
                </span>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function ApartmentsTable({ apartments, ctx }) {
  const { nav, data, markPaid } = ctx;
  const tt = ctx.tt;
  const [expanded, setExpanded] = React.useState({});
  const toggle = (id) => setExpanded((e) => ({ ...e, [id]: !e[id] }));

  const statusFor = (apt) => {
    const monthBills = data.bills.filter((b) => b.period === "2026-05" && b.aptId === apt.id);
    if (monthBills.some((b) => b.status === "overdue")) return "danger";
    if (monthBills.some((b) => b.status === "pending")) return "warn";
    if (data.tickets.some((t) => t.aptId === apt.id && t.status !== "resolved")) return "warn";
    return "ok";
  };

  if (apartments.length === 0) {
    return <Empty icon="building" title={tt("empty.nothingHere")} />;
  }
  return (
    <div className="apt-list">
      {apartments.map((a) => {
        const isOpen = !!expanded[a.id];
        const tenants = data.tenants
          .filter((t) => t.aptId === a.id && t.status === "active")
          .sort((x, y) => (x.room || 0) - (y.room || 0));
        const rooms = a.type === "rooms" ? a.bedrooms : 1;
        const vacant = rooms - tenants.length;
        const monthly = a.type === "rooms"
          ? tenants.reduce((s, t) => s + t.rent, 0) + (vacant * (a.avg?.rent || 0))
          : (tenants[0]?.rent || (a.avg?.rent || 0));
        const status = statusFor(a);
        const alertTone = status === "danger" ? "danger" : status === "warn" ? "warn" : null;
        const slotRows = [];
        if (a.type === "rooms") {
          for (let r = 1; r <= a.bedrooms; r++) {
            const tn = tenants.find((t) => t.room === r);
            slotRows.push({ room: r, tenant: tn });
          }
        } else {
          slotRows.push({ room: null, tenant: tenants[0] || null });
        }

        return (
          <Card key={a.id} className="flush apt-list-card" data-open={isOpen}>
            <div className="apt-list-head" onClick={() => toggle(a.id)}>
              <button className="iconbtn apt-list-chev" data-open={isOpen}
                      aria-label={isOpen ? tt("apts.collapseLabel") : tt("apts.expandLabel")}
                      onClick={(e) => { e.stopPropagation(); toggle(a.id); }}>
                <Icon name="chevR" size={13} />
              </button>
              <div style={{ width: 36, height: 36, borderRadius: 8, overflow: "hidden", flexShrink: 0 }}
                   onClick={(e) => { e.stopPropagation(); nav("apartment", a.id); }}>
                <AptArchHero aptId={a.id} />
              </div>
              <div className="grow" style={{ minWidth: 0 }}
                   onClick={(e) => { e.stopPropagation(); nav("apartment", a.id); }}>
                <div className="apt-list-name">
                  {alertTone && <span className={`mini-alert mini-alert-${alertTone}`} title={tt("apts.alertAttention")}>!</span>}
                  <span>{a.name}</span>
                  <Pill>{a.type === "rooms" ? tt("apts.rooms", { n: a.bedrooms }) : tt("apts.whole")}</Pill>
                </div>
                <div className="muted txt-xs">{a.neighborhood} · {a.address}</div>
              </div>
              <div className="apt-list-summary">
                <div>
                  <div className="mini-stat-lbl">{a.type === "rooms" ? tt("apts.col.tenants") : tt("apts.status")}</div>
                  <div className="mini-stat-val num">
                    {a.type === "rooms" ? `${tenants.length}/${rooms}` : (tenants.length ? tt("apts.let") : "—")}
                  </div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div className="mini-stat-lbl">{tt("apts.col.monthly") || "Monthly"}</div>
                  <div className="mini-stat-val num">{fmtEUR(monthly)}</div>
                </div>
              </div>
              <span onClick={(e) => e.stopPropagation()} style={{ display: "inline-flex" }}>
                <Dropdown align="right" trigger={
                  <button className="iconbtn sm" aria-label={tt("props.menu.more") || "Más"}>
                    <Icon name="more" size={14} />
                  </button>
                }>
                  <MenuHeader>{a.name}</MenuHeader>
                  <MenuItem icon="eye" label={tt("props.menu.open") || "Abrir piso"}
                            onClick={() => nav("apartment", a.id)} />
                  <MenuItem icon="plus" label={tt("btn.addTenant") || "Añadir inquilino"}
                            onClick={() => ctx.openAddTenant && ctx.openAddTenant()} />
                  <MenuItem icon="chat" label={tt("btn.messageTenants") || "Mensaje a inquilinos"}
                            onClick={() => nav("messages")} />
                  <MenuDivider />
                  <MenuItem icon="receipt" label={tt("ad.newExpense") || "Registrar gasto"}
                            onClick={() => ctx.openModal("addExpense", { prefillAptId: a.id })} />
                  <MenuItem icon="wrench" label={tt("ad.newTicket") || "Nueva incidencia"}
                            onClick={() => ctx.openModal("newTicket", { prefillAptId: a.id })} />
                </Dropdown>
              </span>
            </div>

            {isOpen && (
              <div className="apt-list-tenants">
                {slotRows.map(({ room, tenant }, i) => {
                  const bill = tenant && data.bills.find((b) => b.tenantId === tenant.id && b.type === "rent" && b.period === "2026-05");
                  const needsAction = bill && bill.status !== "paid";
                  return (
                    <div key={i} className="apt-list-row"
                         onClick={() => tenant && nav("tenant", tenant.id)}
                         data-clickable={!!tenant}>
                      <div className="apt-list-row-slot">
                        {tenant ? (
                          <div className="avatar sm" data-apt={a.id}>{initials(tenant.name)}</div>
                        ) : (
                          <div className="avatar sm" style={{ background: "transparent", border: "1px dashed var(--ef-line)", color: "var(--ef-muted)" }}>
                            <Icon name="plus" size={11} />
                          </div>
                        )}
                        <div className="grow" style={{ minWidth: 0 }}>
                          <div className="apt-list-row-name">
                            {tenant ? (
                              <>
                                <span className="b500" style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{tenant.name}</span>
                                <Flag code={tenant.country} />
                              </>
                            ) : (
                              <span className="muted">{tt("apts.vacantWord")}</span>
                            )}
                          </div>
                          <div className="muted txt-xs">
                            {room ? `H${room}` : (a.type === "whole" ? (tt("apts.whole") || "Whole") : "")}
                            {tenant && ` · ${tenant.university || tenant.country}`}
                          </div>
                        </div>
                      </div>
                      <div className="apt-list-row-action" onClick={(e) => e.stopPropagation()}>
                        {needsAction && markPaid && (
                          <button className="btn sm" onClick={() => markPaid(bill.id)}>
                            {tt("btn.markPaid") || "Mark paid"}
                          </button>
                        )}
                      </div>
                      <div className="apt-list-row-rent num">
                        {tenant ? fmtEUR(tenant.rent) : <span className="muted">—</span>}
                      </div>
                      <div className="apt-list-row-status">
                        {bill ? <StatusBadge status={bill.status} /> : (tenant ? <span className="muted txt-xs">—</span> : <span className="muted txt-xs">{tt("apts.vacantWord")}</span>)}
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </Card>
        );
      })}
    </div>
  );
}

// ───────────────────────── TENANT LIST ─────────────────────────
function TenantsList({ ctx }) {
  const { data, nav, openAddTenant } = ctx;
  const tt = ctx.tt;
  const [query, setQuery] = React.useState("");
  const [filter, setFilter] = React.useState("active");

  const filtered = data.tenants.filter((tn) => {
    if (filter === "active" && tn.status !== "active") return false;
    if (filter === "past" && tn.status !== "past") return false;
    if (query && !(`${tn.name} ${tn.country} ${tn.email}`.toLowerCase().includes(query.toLowerCase()))) return false;
    return true;
  });

  return (
    <>
      <div className="main-top">
        <div className="title">
          <h1 className="display">{tt("ten.title")}</h1>
          <div className="sub">{tt("ten.sub", { active: data.tenants.filter((t) => t.status === "active").length, past: data.tenants.filter((t) => t.status === "past").length })}</div>
        </div>
        <div className="actions">
          <div className="searchbar">
            <Icon name="search" size={14} />
            <input placeholder={tt("search.nameCountry")} value={query} onChange={(e) => setQuery(e.target.value)} />
          </div>
          <HeaderTools ctx={ctx} />
          <button className="btn primary" onClick={openAddTenant}><Icon name="plus" size={14} /> {tt("btn.addTenant")}</button>
        </div>
      </div>

      <div className="main-scroll">
        <div className="flex center between" style={{ marginBottom: 18 }}>
          <Tabs tabs={[
            { value: "active", label: tt("ten.tab.active"), count: data.tenants.filter((t) => t.status === "active").length },
            { value: "past", label: tt("ten.tab.past"), count: data.tenants.filter((t) => t.status === "past").length },
            { value: "all", label: tt("ten.tab.all") },
          ]} value={filter} onChange={setFilter} />
        </div>

        <Card className="flush">
          <table className="table">
            <thead>
              <tr>
                <th>{tt("ten.col.tenant")}</th>
                <th>{tt("ten.col.aptRoom")}</th>
                <th>{tt("ten.col.contract")}</th>
                <th className="num">{tt("ten.col.monthly")}</th>
                <th>{tt("ten.col.mayPayment")}</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.length === 0 && (
                <tr><td colSpan="6"><Empty icon="users" title={tt("empty.nothingHere")} /></td></tr>
              )}
              {filtered.map((tn) => {
                const apt = data.byId.apt(tn.aptId);
                const mayBill = data.bills.find((b) => b.tenantId === tn.id && b.type === "rent" && b.period === "2026-05");
                return (
                  <tr key={tn.id} onClick={() => nav("tenant", tn.id)}>
                    <td>
                      <div className="flex center gap-3">
                        <div className="avatar" data-apt={tn.aptId}>{initials(tn.name)}</div>
                        <div>
                          <div className="b500">{tn.name} <Flag code={tn.country} /></div>
                          <div className="muted txt-xs">{tn.university}</div>
                        </div>
                      </div>
                    </td>
                    <td>
                      <div className="b500">{apt?.name}</div>
                      <div className="muted txt-xs">{tn.room ? `${tt("ad.room")} ${tn.room}` : tt("ten.whole")} · {apt?.neighborhood}</div>
                    </td>
                    <td className="num">{fmtDate(tn.contractStart, { short: true })} → {fmtDate(tn.contractEnd, { short: true })}</td>
                    <td className="num">{fmtEUR(tn.rent)}</td>
                    <td>{mayBill ? <StatusBadge status={mayBill.status} /> : <span className="muted txt-xs">—</span>}</td>
                    <td style={{ width: 56 }} onClick={(e) => e.stopPropagation()}>
                      <button className="iconbtn sm row-menu" aria-label={tt("apts.moreActions")}><Icon name="more" size={14} /></button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>
      </div>
    </>
  );
}

window.Apartments = Apartments;
window.TenantsList = TenantsList;