/* Hunian Kita — Command Center (dashboard) */

function AttnRow({ icon, color, bg, title, meta, tag, tagCls, onClick }) {
  return (
    <button className="attn-row" onClick={onClick}>
      <span className="ic" style={{ background: bg, color }}><Icon name={icon} size={18} /></span>
      <span className="tx"><span className="tt">{title}</span><span className="mm">{meta}</span></span>
      {tag && <span className={"badge " + tagCls}>{tag}</span>}
      <Icon name="chevron-right" size={18} style={{ color: "var(--t3)" }} />
    </button>
  );
}

function Dashboard({ ctx }) {
  const HK = window.HK, K = HK.kpis;
  const collectedSpark = HK.iplTrend.map((d) => d.collected);
  const newSpark = HK.trend.map((d) => d.nw);
  const critical = HK.complaints.filter((c) => c.prio === "critical" && c.status !== "Resolved");
  const atRisk = HK.complaints.filter((c) => c.status !== "Resolved" && slaInfo(c).cls === "warn");

  return (
    <div className="content-inner dash">
      <div className="kpi-grid">
        <KpiCard icon="message-square-warning" iconBg="var(--neg-soft)" iconColor="var(--neg)"
          label="Open complaints" value={K.openComplaints} delta={K.openDelta} deltaGood={true}
          deltaNote="vs last week · 2 critical" spark={newSpark} sparkColor="var(--neg)" onClick={() => ctx.go("complaints")} />
        <KpiCard icon="gauge" iconBg="var(--pos-soft)" iconColor="var(--pos)"
          label="SLA on-time" value={K.slaPct + "%"} delta={K.slaDelta} deltaNote="vs last month"
          spark={[88, 90, 89, 92, 93, 94]} sparkColor="var(--pos)" onClick={() => ctx.go("complaints")} />
        <KpiCard icon="wallet" iconBg="var(--accent-soft)" iconColor="var(--accent)"
          label="IPL collected — May" value={K.collectionPct.toFixed(1) + "%"} delta={K.collectionDelta} deltaGood={false}
          deltaNote="vs Apr · Rp 158jt due" spark={collectedSpark} sparkColor="var(--accent)" onClick={() => ctx.go("finance")} />
        <KpiCard icon="smile" iconBg="var(--warn-soft)" iconColor="var(--warn)"
          label="Resident satisfaction" value={K.satisfaction} suffix="/ 5" delta={K.satDelta}
          deltaNote={K.satResponses + " ratings"} spark={[4.3, 4.4, 4.4, 4.5, 4.5, 4.6]} sparkColor="var(--warn)" />
      </div>

      <div className="grid mt" style={{ gridTemplateColumns: "1.35fr 1fr" }}>
        {/* Needs attention */}
        <div className="card pad">
          <div className="card-h">
            <span className="ic-pulse"><Icon name="bell-ring" size={18} /></span>
            <h3>Needs your attention</h3>
            <div className="right"><span className="statline">{critical.length + atRisk.length + 1} items · live</span></div>
          </div>
          <div className="attn-list">
            {critical.map((c) => (
              <AttnRow key={c.id} icon="alert-octagon" color="var(--neg)" bg="var(--neg-soft)"
                title={c.title} meta={`${c.id} · ${c.affected ? c.affected + " units affected · " : ""}${c.loc}`}
                tag="Critical" tagCls="neg" onClick={() => ctx.openComplaint(c.id)} />
            ))}
            {atRisk.map((c) => (
              <AttnRow key={c.id} icon="clock" color="var(--warn)" bg="var(--warn-soft)"
                title={c.title} meta={`${c.id} · SLA ${slaInfo(c).label} · ${HK.staff[c.assignee] ? HK.staff[c.assignee].name : "unassigned"}`}
                tag="SLA risk" tagCls="warn" onClick={() => ctx.openComplaint(c.id)} />
            ))}
            <AttnRow icon="trending-down" color="var(--accent)" bg="var(--accent-soft)"
              title="Collection down 3.1% vs April" meta="89 units unpaid · Rp 158.400.000 outstanding"
              tag="Finance" tagCls="info" onClick={() => ctx.go("finance")} />
            <AttnRow icon="calendar-clock" color="var(--pend)" bg="var(--pend-soft)"
              title="3 facility bookings awaiting approval" meta="Function Hall, BBQ Garden, Clubhouse Lounge"
              tag="Approvals" tagCls="pend" onClick={() => ctx.go("facilities")} />
          </div>
        </div>

        {/* Today at a glance */}
        <div className="card pad">
          <div className="card-h"><h3>Today at a glance</h3><div className="right"><span className="statline">Fri, 30 May</span></div></div>
          <div className="glance-grid">
            <div className="glance"><Icon name="users" size={18} /><div><div className="gv">{K.visitorsToday}</div><div className="gl">Visitors on site</div></div></div>
            <div className="glance"><Icon name="user-check" size={18} /><div><div className="gv">12</div><div className="gl">Pre-approved guests</div></div></div>
            <div className="glance"><Icon name="package" size={18} /><div><div className="gv">8</div><div className="gl">Packages held</div></div></div>
            <div className="glance"><Icon name="calendar" size={18} /><div><div className="gv">{K.bookingsPending}</div><div className="gl">Bookings pending</div></div></div>
            <div className="glance"><Icon name="hard-hat" size={18} /><div><div className="gv">5</div><div className="gl">Crew on shift</div></div></div>
            <div className="glance"><Icon name="megaphone" size={18} /><div><div className="gv">1</div><div className="gl">Active alert</div></div></div>
          </div>
          <div className="divider" />
          <div className="weather-strip">
            <Icon name="shield-check" size={18} style={{ color: "var(--pos)" }} />
            <span><b>All clear.</b> No active emergencies. Night patrol logged 4/4 rounds.</span>
          </div>
        </div>
      </div>

      <div className="grid mt" style={{ gridTemplateColumns: "1.35fr 1fr" }}>
        {/* Complaint volume */}
        <div className="card pad">
          <div className="card-h"><h3>Complaint volume</h3><span className="hint">last 6 months</span>
            <div className="right legend">
              <span className="li"><span className="sw" style={{ background: "#02A0C1" }} />New</span>
              <span className="li"><span className="sw" style={{ background: "#11936A" }} />Resolved</span>
            </div>
          </div>
          <BarChart data={HK.trend} keys={["nw", "rs"]} colors={["#02A0C1", "#11936A"]} height={210} />
        </div>
        {/* Category breakdown */}
        <div className="card pad">
          <div className="card-h"><h3>By category</h3><span className="hint">this month</span></div>
          <HBars data={HK.categories} />
        </div>
      </div>

      <div className="grid mt" style={{ gridTemplateColumns: "1.35fr 1fr" }}>
        {/* IPL collection */}
        <div className="card pad">
          <div className="card-h"><h3>IPL — billed vs collected</h3><span className="hint">Rp (millions)</span>
            <div className="right legend">
              <span className="li"><span className="sw" style={{ background: "#3581E1" }} />Billed</span>
              <span className="li"><span className="sw" style={{ background: "#02A0C1" }} />Collected</span>
            </div>
          </div>
          <LineChart labels={HK.iplTrend.map((d) => d.m)} money height={210}
            series={[{ data: HK.iplTrend.map((d) => d.billed), color: "#3581E1", fill: false },
                     { data: HK.iplTrend.map((d) => d.collected), color: "#02A0C1", fill: true }]} />
        </div>
        {/* Activity feed */}
        <div className="card pad">
          <div className="card-h"><h3>Recent activity</h3></div>
          <div className="feed">
            {HK.activity.map((a, i) => (
              <div className="feed-row" key={i}>
                <span className={"ic badge " + a.c} style={{ width: 32, height: 32, borderRadius: 9, padding: 0, justifyContent: "center" }}><Icon name={a.ic} size={16} /></span>
                <span className="tx"><span className="tt">{a.t}</span><span className="mm">{a.m}</span></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;