// screens/tenant-detail.jsx — single tenant profile
function TenantDetail({ ctx, tenantId }) {
  const { data, nav, markPaid } = ctx;
  const tt = ctx.tt;
  const tn = data.byId.tenant(tenantId);
  if (!tn) return (
    <div className="main-scroll">
      <Empty icon="users" title={tt("empty.notFound")}
             action={<button className="btn" onClick={() => nav("tenants")}>{tt("empty.backTo", { section: tt("nav.tenants") })}</button>} />
    </div>
  );
  const apt = data.byId.apt(tn.aptId);
  const bills = data.bills.filter((b) => b.tenantId === tn.id).sort((a, b) => b.dueDate.localeCompare(a.dueDate));
  const tickets = data.tickets.filter((t) => t.tenantId === tn.id);
  const conv = data.conversations.find((c) => c.tenantId === tn.id);
  const paidYTD = bills.filter((b) => b.status === "paid").reduce((s, b) => s + b.amount, 0);
  const outstanding = bills.filter((b) => b.status !== "paid").reduce((s, b) => s + b.amount, 0);

  return (
    <>
      <div className="main-top">
        <div className="title">
          <div className="breadcrumb">
            <Link onClick={() => nav("tenants")}>{tt("nav.tenants")}</Link>
            <Icon name="chevR" size={12} />
            <Link onClick={() => nav("apartment", apt.id)}>{apt?.name}</Link>
            <Icon name="chevR" size={12} />
            <span>{tn.name}</span>
          </div>
          <h1 className="display flex center gap-2">{tn.name} <Flag code={tn.country} /></h1>
          <div className="sub">{tn.university} · {tt("td.years", { n: tn.age })}</div>
        </div>
        <div className="actions">
          <HeaderTools ctx={ctx} />
          <button className="btn" onClick={() => conv && nav("messages", conv.id)}><Icon name="chat" size={14} /> {tt("btn.message")}</button>
          <Dropdown align="right" trigger={
            <button className="iconbtn" aria-label={tt("props.menu.more") || "Más"}>
              <Icon name="more" size={15} />
            </button>
          }>
            <MenuHeader>{tn.name}</MenuHeader>
            <MenuItem icon="file"     label={tt("btn.contractPdf") || "Contrato PDF"}
                      onClick={() => { window.open(`#contract/${tn.id}.pdf`, "_blank"); ctx.showToast(tt("toast.contractPdf")); }} />
            <MenuItem icon="settings" label={tt("td.edit") || "Editar inquilino"}
                      onClick={() => ctx.openModal("editTenant", { tenantId: tn.id })} />
            <MenuItem icon="euro"     label={tt("ad.addBill") || "Añadir factura"}
                      onClick={() => ctx.openModal("addBill", { prefillAptId: tn.aptId, prefillTenantId: tn.id })} />
            <MenuDivider />
            <MenuItem icon="x" label={tt("td.endContract") || "Finalizar contrato"} danger
                      onClick={() => ctx.confirm && ctx.confirm({
                        title: tt("conf.endContract.title", { name: tn.name }),
                        body: tt("conf.endContract.body"),
                        confirmLabel: tt("conf.endContract.confirm"),
                        danger: true,
                        onConfirm: () => ctx.showToast(tt("toast.contractEnded", { name: tn.name })),
                      })} />
          </Dropdown>
          <button className="btn primary"><Icon name="euro" size={14} /> {tt("btn.recordPayment")}</button>
        </div>
      </div>

      <div className="main-scroll">
        <div className="split-32" style={{ gridTemplateColumns: "1fr 2fr" }}>
          {/* ── Left column: profile + contract ── */}
          <div className="flex col gap-4" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <Card>
              <div className="flex center gap-3" style={{ flexDirection: "column", textAlign: "center", paddingBottom: 8 }}>
                <div className="avatar xl" style={{ width: 96, height: 96, fontSize: 28 }}>{initials(tn.name)}</div>
                <div>
                  <div className="b500 flex center gap-2" style={{ fontSize: 16, justifyContent: "center" }}>{tn.name} <Flag code={tn.country} /></div>
                  <StatusBadge status={tn.status} />
                </div>
              </div>
              <div className="divider" />
              <div className="flex col gap-2" style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 13 }}>
                <DetailRow icon="map" label={tt("td.apartment")} value={<Link onClick={() => nav("apartment", apt.id)} className="b500">{apt.name}{tn.room ? ` · ${tt("ad.room")} ${tn.room}` : ""}</Link>} />
                <DetailRow icon="bell" label={tt("td.email")} value={<a href={`mailto:${tn.email}`} className="muted-2" style={{ wordBreak: "break-all" }}>{tn.email}</a>} />
                <DetailRow icon="chat" label={tt("td.phone")} value={<span className="num">{tn.phone}</span>} />
                <DetailRow icon="building" label={tt("td.university")} value={tn.university} />
              </div>
            </Card>

            <Card>
              <div className="card-head"><h3>{tt("td.contract")}</h3></div>
              <div className="grid-2" style={{ gap: 10 }}>
                <KPI label={tt("td.monthlyRent")} value={fmtEUR(tn.rent)} />
                <KPI label={tt("td.depositHeld")} value={fmtEUR(tn.deposit)} />
              </div>
              <div className="flex col gap-3" style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 14 }}>
                <DetailRow icon="calendar" label={tt("td.start")} value={<span className="num b500">{fmtDate(tn.contractStart)}</span>} />
                <DetailRow icon="calendar" label={tt("td.end")} value={<span className="num b500">{fmtDate(tn.contractEnd)}</span>} />
                <DetailRow icon="clock" label={tt("td.monthsLeft")} value={
                  <span className="num b500">{tt("td.months", { n: monthsBetween(ArcoData.ISO(ArcoData.today), tn.contractEnd) })}</span>
                } />
              </div>
              <div className="flex gap-2" style={{ marginTop: 14 }}>
                <button className="btn sm">{tt("btn.editTerms")}</button>
                <button className="btn sm ghost">{tt("btn.renewalOffer")}</button>
              </div>
            </Card>

            {tn.note && (
              <Card tinted>
                <div className="card-head"><h3>{tt("td.internalNote")}</h3></div>
                <p className="muted-2">{tn.note}</p>
              </Card>
            )}
          </div>

          {/* ── Right column: payments, tickets, recent messages ── */}
          <div className="flex col gap-4" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div className="grid-3">
              <Stat icon="check" label={tt("td.paidYtd")} value={fmtEUR(paidYTD)} />
              <Stat icon="bell" label={tt("td.outstanding")} value={fmtEUR(outstanding)}
                    sub={outstanding > 0 ? <span style={{ color: "var(--ef-danger)" }}>{tt("td.followUp")}</span> : <span className="muted">{tt("td.allClear")}</span>} />
              <Stat icon="wrench" label={tt("td.openTickets")} value={tickets.filter((t) => t.status !== "resolved").length} />
            </div>

            <Card>
              <div className="card-head">
                <h3>{tt("td.paymentTimeline")}</h3>
                <div className="head-right">
                  <button className="btn sm"><Icon name="plus" size={12} /> {tt("btn.recordPayment")}</button>
                </div>
              </div>
              <div style={{ position: "relative", paddingLeft: 28 }}>
                <div style={{ position: "absolute", left: 9, top: 6, bottom: 6, width: 2, background: "var(--ef-line)" }} />
                {bills.map((b, i) => (
                  <div key={b.id} style={{ position: "relative", paddingBottom: 16 }}>
                    <div style={{ position: "absolute", left: -22, top: 4, width: 14, height: 14, borderRadius: 999,
                                  background: b.status === "paid" ? "var(--ef-accent-deep)" : b.status === "overdue" ? "var(--ef-danger)" : "var(--ef-warn)",
                                  border: "3px solid var(--ef-bg)", boxShadow: "0 0 0 1px var(--ef-line)" }} />
                    <div className="flex center between gap-3">
                      <div>
                        <div className="b500">{b.label}</div>
                        <div className="muted txt-xs">
                          {tt("td.dueShort", { date: fmtDate(b.dueDate, { short: true, withYear: true }) })}
                          {b.paidOn && ` · ${tt("td.paidShort", { date: fmtDate(b.paidOn, { short: true }) })}`}
                        </div>
                      </div>
                      <div className="flex center gap-2">
                        <span className="num b500">{fmtEUR(b.amount)}</span>
                        <StatusBadge status={b.status} />
                        {b.status !== "paid" && <button className="btn sm" onClick={() => markPaid(b.id)}>{tt("btn.markPaid")}</button>}
                      </div>
                    </div>
                  </div>
                ))}
                {bills.length === 0 && <Empty icon="euro" title={tt("empty.nothingHere")} />}
              </div>
            </Card>

            {tickets.length > 0 && (
              <Card>
                <div className="card-head"><h3>{tt("td.maintenanceHistory")}</h3></div>
                <div className="feed">
                  {tickets.map((t) => (
                    <div className="row" key={t.id}>
                      <div className={`ic ${t.status === "resolved" ? "positive" : "warn"}`}>
                        <Icon name={t.status === "resolved" ? "check" : "wrench"} size={14} />
                      </div>
                      <div className="body">
                        <p><b>{t.title}</b></p>
                        <small>{tt("td.opened", { date: fmtDate(t.openedAt, { short: true }) })}{t.closedAt ? ` · ${tt("td.resolvedAt", { date: fmtDate(t.closedAt, { short: true }) })}` : ""}</small>
                      </div>
                      <StatusBadge status={t.status} />
                    </div>
                  ))}
                </div>
              </Card>
            )}

            {conv && conv.messages.length > 0 && (
              <Card>
                <div className="card-head">
                  <h3>{tt("td.recentMessages")}</h3>
                  <div className="head-right"><button className="btn sm ghost" onClick={() => nav("messages", conv.id)}>{tt("td.openThread")} <Icon name="chevR" size={12} /></button></div>
                </div>
                <div className="flex col gap-2" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  {conv.messages.slice(-3).map((m, i) => (
                    <div key={i} className={`bubble ${m.from}`} style={{ maxWidth: "85%", alignSelf: m.from === "out" ? "flex-end" : "flex-start" }}>
                      {m.text}
                      <time>{fmtDate(m.at, { withTime: true })}</time>
                    </div>
                  ))}
                </div>
              </Card>
            )}
          </div>
        </div>
      </div>
    </>
  );
}

const DetailRow = ({ icon, label, value }) => (
  <div className="flex center gap-3">
    <Icon name={icon} size={14} className="muted" />
    <span className="muted" style={{ minWidth: 90 }}>{label}</span>
    <span className="grow ta-r">{value}</span>
  </div>
);

window.TenantDetail = TenantDetail;
window.DetailRow = DetailRow;