// Home dashboard — role aware.

function StatCard({ label, value, sub, delta, spark, positive, sparkColor }) {
  return (
    <div className="rc-stat">
      <div className="rc-stat-label">{label}</div>
      <div className="rc-stat-row">
        <div className="rc-stat-value">{value}</div>
        {spark && <Sparkline data={spark} w={64} h={22} color={sparkColor || "var(--brand)"} fill />}
      </div>
      <div className="rc-stat-sub">
        {delta && <span className={positive ? "rc-up" : "rc-down"}>{positive ? "↑ " : "↓ "}{delta}</span>}
        {sub && <span>{sub}</span>}
      </div>
    </div>
  );
}

function Home({ setScreen, openLead, role }) {
  const me = RoleProfile(role);
  const m = METRICS;
  const isManager = role === "manager" || role === "admin";
  const myLeads = isManager ? LEADS : LEADS.filter((l) => l.owner === me.id);
  const myTasks = (isManager ? TASKS : TASKS.filter((t) => t.owner === me.id)).filter((t) => !t.done);
  const greeting = new Date().getHours() < 12 ? "Good morning" : new Date().getHours() < 18 ? "Good afternoon" : "Good evening";

  return (
    <div className="rc-page">
      <div className="rc-pagehead">
        <div>
          <div className="rc-eyebrow">Monday, June 2</div>
          <h1 className="rc-h1 rc-serif" style={{ fontSize: 30 }}>{greeting}, {me.name.split(" ")[0]}</h1>
          <div className="rc-sub">
            {isManager
              ? `${m.viewingsWeek} viewings booked this week across 3 developments · ${myTasks.length} open tasks on the floor.`
              : (() => { const v = myLeads.filter((l) => l.status === "Viewing").length; return `You have ${myTasks.length} tasks today and ${v} viewing${v === 1 ? "" : "s"} to confirm.`; })()}
          </div>
        </div>
        <div className="rc-head-cta">
          <button className="rc-btn" onClick={() => setScreen("inventory")}><Icon name="building" size={14} />Inventory</button>
          <button className="rc-btn-primary" onClick={() => setScreen("leads")}><Icon name="plus" size={14} />New lead</button>
        </div>
      </div>

      <div className="rc-stats">
        <StatCard label="New leads this week" value={m.newLeadsWeek} delta={m.newLeadsDelta} positive spark={m.leadSpark} />
        <StatCard label="Viewings booked" value={m.viewingsWeek} sub="4 today" />
        <StatCard label="Reservations (MTD)" value={m.reservationsMonth} sub={moneyK(m.reservationsValue)} spark={m.reservationSpark} positive />
        <StatCard label="Pipeline value" value={moneyK(m.pipelineValue)} sub="open deals" />
      </div>

      <div className="rc-row-2">
        <div className="rc-card">
          <div className="rc-card-head">
            <div>
              <div className="rc-card-title">Sales funnel · this week</div>
              <div className="rc-card-sub">{m.funnel.New} new → {m.funnel.Reservation} reservations</div>
            </div>
            <button className="rc-link" onClick={() => setScreen("pipeline")}>Open pipeline →</button>
          </div>
          <div style={{ marginTop: 6 }}>
            <FunnelChart stages={Object.entries(m.funnel).map(([label, value]) => ({ label, value }))} />
          </div>
        </div>

        <div className="rc-card">
          <div className="rc-card-head">
            <div className="rc-card-title">{isManager ? "Today's callbacks · floor" : "Your tasks today"}</div>
            <button className="rc-link" onClick={() => setScreen("tasks")}>All tasks →</button>
          </div>
          <div className="rc-list">
            {myTasks.slice(0, 4).map((t) => {
              const lead = leadById(t.lead);
              return (
                <div key={t.id} className="rc-listrow" style={{ cursor: "default" }}>
                  <button className={`rc-check ${t.priority === "high" ? "is-high" : ""}`} />
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div className="rc-listrow-name">{t.title}</div>
                    <div className="rc-listrow-meta">{t.time}{t.priority === "high" && <span style={{ color: "#d9544a" }}> · high priority</span>}</div>
                  </div>
                  <button className="rc-iconbtn" style={{ width: 30, height: 30 }} onClick={() => lead && openLead(lead.id)}><Icon name="phone" size={14} /></button>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <div className="rc-row-2">
        <div className="rc-card">
          <div className="rc-card-head">
            <div className="rc-card-title">{isManager ? "Hot leads · floor" : "Your hot leads"}</div>
            <button className="rc-link" onClick={() => setScreen("leads")}>All leads →</button>
          </div>
          <div className="rc-list">
            {[...myLeads].sort((a, b) => b.score - a.score).slice(0, 5).map((l) => (
              <button key={l.id} className="rc-listrow" onClick={() => openLead(l.id)}>
                <Avatar initials={l.name.split(" ").map((x) => x[0]).join("")} size={32} color="var(--brand-soft)" />
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div className="rc-listrow-name">{l.name}</div>
                  <div className="rc-listrow-meta">{devName(l.dev)} · {l.source}</div>
                </div>
                <Pill tone={l.status} size="sm" dot>{l.status}</Pill>
                <span className="rc-listrow-time">{l.lastTouch}</span>
              </button>
            ))}
          </div>
        </div>

        {isManager ? (
          <div className="rc-card">
            <div className="rc-card-head">
              <div className="rc-card-title">Agent leaderboard · June</div>
              <button className="rc-link" onClick={() => setScreen("team")}>Team →</button>
            </div>
            <div>
              {LEADERBOARD.map((row, i) => {
                const a = agentById(row.agent);
                return (
                  <div key={row.agent} className="rc-leaderboard-row">
                    <span className="rc-rank">{i + 1}</span>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <Avatar initials={a.initials} size={28} color={a.color} />
                      <div>
                        <div style={{ fontSize: 13, fontWeight: 550 }}>{a.name}</div>
                        <div style={{ fontSize: 11, color: "var(--text-muted)" }}>{row.reservations} reservations · {row.viewings} viewings</div>
                      </div>
                    </div>
                    <strong style={{ fontVariantNumeric: "tabular-nums" }}>{moneyK(row.value)}</strong>
                  </div>
                );
              })}
            </div>
          </div>
        ) : (
          <div className="rc-card">
            <div className="rc-card-head">
              <div className="rc-card-title">Inventory at a glance</div>
              <button className="rc-link" onClick={() => setScreen("inventory")}>View units →</button>
            </div>
            <div className="rc-list">
              {DEVELOPMENTS.map((d) => (
                <button key={d.id} className="rc-listrow" onClick={() => setScreen("inventory")}>
                  <div className="rc-unit-thumb" style={{ width: 40, height: 40 }}><Icon name="building" size={18} /></div>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div className="rc-listrow-name">{d.name}</div>
                    <div className="rc-listrow-meta">{d.city} · from {moneyK(d.priceFrom)}</div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: "#1f8a52" }}>{d.available} available</div>
                    <div style={{ fontSize: 11, color: "var(--text-muted)" }}>{d.reserved} reserved · {d.sold} sold</div>
                  </div>
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Home, StatCard });