/* Property detail — the General view: all deal info in one place.
   window.PropertyDetailScreen */
const { useState } = React;
function InfoGrid({ rows }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: "14px 20px" }}>
      {rows.map(([label, value, mono]) => (
        <div key={label}>
          <div style={{ fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "var(--tracking-caps)", color: "var(--text-subtle)", fontWeight: 700, marginBottom: 3 }}>{label}</div>
          <div className={mono ? "tnum" : ""} style={{ fontSize: "var(--text-base)", color: "var(--text-strong)", fontWeight: 500, fontFamily: mono ? "var(--font-mono)" : "inherit" }}>{value}</div>
        </div>
      ))}
    </div>
  );
}

function Panel({ title, icon, action, children, pad = 18 }) {
  return (
    <section style={{ background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-xs)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "13px 18px", borderBottom: "1px solid var(--border-subtle)" }}>
        {icon && <Icon name={icon} size={17} color="var(--text-brand)" />}
        <h3 style={{ fontSize: "var(--text-md)", fontWeight: 700, color: "var(--text-strong)" }}>{title}</h3>
        <div style={{ marginLeft: "auto" }}>{action}</div>
      </div>
      <div style={{ padding: pad }}>{children}</div>
    </section>
  );
}

function ContactRow({ c, onOpen }) {
  const [hover, setHover] = useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "flex", gap: 11, padding: "11px 0", borderBottom: "1px solid var(--border-subtle)" }}>
      <Avatar name={c.name} size="md" />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
          <span style={{ fontWeight: 700, color: "var(--text-strong)", fontSize: "var(--text-base)" }}>{c.name}</span>
          <Badge tone="neutral" size="sm">{c.role}</Badge>
        </div>
        <div style={{ display: "flex", gap: 12, marginTop: 2, fontSize: "var(--text-xs)", color: "var(--text-muted)", flexWrap: "wrap" }} className="tnum">
          <span>{c.masked ? "(hidden)" : c.phone}</span>
          <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.email}</span>
        </div>
        {/* Quick Comment — surfaced in context (Fix #12) */}
        <div style={{ marginTop: 5, display: "flex", alignItems: "flex-start", gap: 5, fontSize: "var(--text-xs)", color: "var(--text-body)", fontStyle: "italic" }}>
          <Icon name="message-square-text" size={13} color="var(--text-subtle)" style={{ marginTop: 1 }} />
          {c.quick}
        </div>
      </div>
      <button onClick={() => onOpen(c)} style={{ alignSelf: "center", opacity: hover ? 1 : 0.5, background: "none", border: "none", cursor: "pointer", color: "var(--text-brand)", fontSize: "var(--text-xs)", fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 3 }}>
        Open<Icon name="maximize-2" size={12} />
      </button>
    </div>
  );
}

function PropertyDetailScreen({ property: p }) {
  const noteHref = "/properties/" + p.id + "/note";
  return (
    <div className="pt-detail-grid" style={{ padding: 22, display: "grid", gridTemplateColumns: "minmax(0,1fr) 360px", gap: 18, alignItems: "start" }}>
      {/* LEFT: general info + notes */}
      <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        {/* Hero */}
        <section style={{ background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-xs)" }}>
          <div style={{ display: "flex", gap: 16, padding: 18 }}>
            <img src={p.thumb} alt="" style={{ width: 132, height: 100, borderRadius: "var(--radius-md)", objectFit: "cover", flex: "none" }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                <h2 style={{ fontSize: "var(--text-2xl)", fontWeight: 800, color: "var(--text-strong)" }}>{p.address}</h2>
                <StatusBadge status={p.status} />
              </div>
              <div style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", marginTop: 2 }} className="tnum">
                {p.city}, {p.state} {p.zip} · {p.county} County · {p.id}
              </div>
              <div style={{ display: "flex", gap: 8, marginTop: 12, flexWrap: "wrap" }}>
                <Button variant="primary" size="sm" icon="pencil" onClick={() => navigate(noteHref)}>Add note</Button>
                <Button variant="secondary" size="sm" icon="calendar-clock" onClick={() => navigate("/properties/" + p.id + "/follow-up")}>Set follow-up</Button>
                <Button variant="secondary" size="sm" icon="pencil-ruler" onClick={() => navigate("/properties/" + p.id + "/edit")}>Edit property</Button>
              </div>
            </div>
          </div>
        </section>

        <Panel title="General — everything about this deal" icon="info">
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <InfoGrid rows={[["Type", p.type], ["Beds / Baths", `${p.beds} / ${p.baths}`], ["Sq ft", p.sqft.toLocaleString(), true], ["Year built", p.year, true], ["Lot size", p.lot], ["Motivation", p.motivation]]} />
            <div style={{ height: 1, background: "var(--border-subtle)" }} />
            <InfoGrid rows={[["Asking", "$" + p.ask.toLocaleString(), true], ["Our offer", p.offer ? "$" + p.offer.toLocaleString() : "—", true], ["ARV", "$" + p.arv.toLocaleString(), true], ["Spread", "$" + (p.arv - (p.offer || p.ask)).toLocaleString(), true]]} />
          </div>
        </Panel>

        <Panel title="Notes & follow-ups" icon="sticky-note" action={<Button variant="primary" size="sm" icon="plus" onClick={() => navigate(noteHref)}>Add note</Button>} pad={14}>
          {p.notes.length === 0
            ? <EmptyState compact icon="sticky-note" title="No notes yet" description="Add a note to log activity and optionally email this property's contacts." action={<Button variant="brand" size="sm" icon="plus" onClick={() => navigate(noteHref)}>Add note</Button>} />
            : <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {p.notes.map((n, i) => <NoteCard key={i} author={n.author} timestamp={n.time} subject={n.subject} body={n.body} emailedCount={n.emailed} followUp={n.follow !== "—" ? n.follow : undefined} assignee={n.assignee} />)}
              </div>}
        </Panel>
      </div>

      {/* RIGHT: contacts */}
      <div style={{ display: "flex", flexDirection: "column", gap: 18, position: "sticky", top: 22 }}>
        <Panel title={`Contacts (${p.contacts.length})`} icon="users" action={<IconButton icon="user-plus" label="Add contact" variant="solid" size="sm" onClick={() => navigate("/contacts/new")} />} pad={18}>
          <div>
            {p.contacts.map((c, i) => <ContactRow key={i} c={c} onOpen={() => navigate("/properties/" + p.id + "/contact/" + i)} />)}
          </div>
          <button onClick={() => navigate("/contacts/new")} style={{ marginTop: 12, width: "100%", padding: "9px", borderRadius: "var(--radius-md)", border: "1px dashed var(--border-strong)", background: "var(--surface-sunken)", color: "var(--text-brand)", fontWeight: 600, fontSize: "var(--text-sm)", cursor: "pointer", fontFamily: "var(--font-sans)", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6 }}>
            <Icon name="user-plus" size={15} /> Add new contact
          </button>
        </Panel>
        <div style={{ background: "var(--harbor-900)", borderRadius: "var(--radius-lg)", padding: 18, color: "#fff" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: "var(--text-sm)", fontWeight: 700 }}>
            <Icon name="calendar-clock" size={16} color="var(--ember-400)" /> Next action
          </div>
          <div style={{ marginTop: 8, fontSize: "var(--text-base)", color: "var(--harbor-100)" }}>
            {p.followDate === "—" ? "No follow-up scheduled." : <>Follow-up due <b style={{ color: "#fff" }}>{p.followDate}</b> — {p.notes.find(n => n.follow === p.followDate)?.subject || "review this deal"}.</>}
          </div>
        </div>
      </div>
    </div>
  );
}
window.PropertyDetailScreen = PropertyDetailScreen;