/* ============================================================
   FacilityOS — Dashboard screen
   ============================================================ */
window.Screens = window.Screens || {};

function MiniWORow({ w, go }) {
  const f = window.DB.facById(w.facility);
  return (
    <div onClick={() => go("wo-detail", { id: w.id })}
      className="row"
      style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) auto", alignItems: "center", gap: 12, padding: "11px 14px", borderRadius: "var(--radius-sm)", cursor: "pointer", border: "1px solid transparent" }}
      onMouseEnter={(e) => { e.currentTarget.style.background = "var(--surface-2)"; e.currentTarget.style.borderColor = "var(--border)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.borderColor = "transparent"; }}>
      <div style={{ minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9, minWidth: 0 }}>
          <span className="mono" style={{ fontSize: 11.5, color: "var(--text-faint)", fontWeight: 600 }}>{w.id}</span>
          <UI.PriorityPill priority={w.priority} />
        </div>
        <div style={{ marginTop: 4, fontSize: 13.5, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{w.title}</div>
        <div style={{ marginTop: 2, fontSize: 12, color: "var(--text-faint)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{f.name}</div>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <span className="hide-sm"><UI.StatusBadge status={w.status} /></span>
        <UI.Avatar id={w.assignee} size={28} />
      </div>
    </div>
  );
}

Screens.Dashboard = function Dashboard({ go }) {
  const DB = window.DB;
  const { Card, KpiCard, SectionHead, Button } = UI;
  const { Donut, Legend } = Charts;
  const statusData = [
    { label: "Open", value: 11, token: "--c-info" },
    { label: "In Progress", value: 7, token: "--c-medium" },
    { label: "On Hold", value: 3, token: "--c-low" },
    { label: "Completed", value: 41, token: "--c-done" },
  ];
  const recent = DB.workOrders.slice(0, 6);

  return (
    <div className="page fade-up">
      {/* Quick actions strip */}
      <div style={{ display: "flex", gap: 10, marginBottom: 20, flexWrap: "wrap" }}>
        <Button variant="primary" icon="plus" onClick={() => go("work-orders")}>New Work Order</Button>
        <Button variant="default" icon="inbox" onClick={() => go("requests")}>New Request</Button>
        <Button variant="default" icon="clipboard" onClick={() => go("checklists")}>Run Checklist</Button>
        <div className="hide-md" style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 8, color: "var(--text-faint)", fontSize: 12.5 }}>
          <Icon name="clock" size={15} /> Updated just now · 5 facilities
        </div>
      </div>

      {/* KPI row */}
      <div className="kpi-grid" style={{ display: "grid", gridTemplateColumns: "repeat(5, minmax(0,1fr))", gap: 16, marginBottom: 18 }}>
        <KpiCard icon="wrench" token="--c-info" label="Open work orders" value="21" delta={8} deltaGood={false} spark={[14,16,15,18,19,21]} />
        <KpiCard icon="alert" token="--c-critical" label="Overdue" value="4" sub="2 critical" delta={-12} deltaGood />
        <KpiCard icon="check" token="--c-done" label="Completed this month" value="41" delta={6} deltaGood spark={[28,31,33,36,39,41]} />
        <KpiCard icon="gauge" token="--accent" label="PM compliance" value="92" suffix="%" delta={3} deltaGood />
        <KpiCard icon="box" token="--c-high" label="Assets need attention" value="9" sub="across 3 facilities" delta={-2} deltaGood />
      </div>

      {/* Main grid */}
      <div className="dash-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0,1.7fr) minmax(0,1fr)", gap: 18, alignItems: "start" }}>
        {/* LEFT */}
        <div style={{ display: "flex", flexDirection: "column", gap: 18, minWidth: 0 }}>
          <Card pad style={{ padding: "calc(var(--pad) * 1.1)" }}>
            <SectionHead title="Recent work orders" sub="Latest activity across all facilities"
              action={<Button size="sm" variant="ghost" iconRight="chevRight" onClick={() => go("work-orders")}>View all</Button>} />
            <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
              {recent.map((w) => <MiniWORow key={w.id} w={w} go={go} />)}
            </div>
          </Card>
        </div>

        {/* RIGHT */}
        <div style={{ display: "flex", flexDirection: "column", gap: 18, minWidth: 0 }}>
          <Card>
            <SectionHead title="Status breakdown" sub="62 total this period" />
            <div style={{ display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
              <Donut data={statusData} centerValue="62" centerLabel="work orders" />
              <div style={{ flex: 1, minWidth: 130 }}><Legend data={statusData} vertical /></div>
            </div>
          </Card>

          <Card>
            <SectionHead title="Upcoming PM" sub="Next 7 days"
              action={<Button size="sm" variant="ghost" iconRight="chevRight" onClick={() => go("pm")}>Calendar</Button>} />
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              {DB.pmUpcoming.map((pm) => {
                const f = DB.facById(pm.facility);
                return (
                  <div key={pm.id} className="row" style={{ display: "flex", alignItems: "center", gap: 12, padding: "9px 8px", borderRadius: "var(--radius-sm)" }}
                    onMouseEnter={(e)=>e.currentTarget.style.background="var(--surface-2)"} onMouseLeave={(e)=>e.currentTarget.style.background="transparent"}>
                    <span style={{ width: 38, height: 38, borderRadius: "var(--radius-sm)", flex: "0 0 auto", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", background: UI.tint(pm.tone, 14), color: `var(${pm.tone})` }}>
                      <Icon name="calendarClock" size={17} />
                    </span>
                    <div style={{ minWidth: 0, flex: 1 }}>
                      <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{pm.title}</div>
                      <div style={{ fontSize: 11.5, color: "var(--text-faint)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{f.name} · {pm.freq}</div>
                    </div>
                    <span style={{ fontSize: 12, fontWeight: 700, color: `var(${pm.tone})`, whiteSpace: "nowrap" }}>{pm.due}</span>
                  </div>
                );
              })}
            </div>
          </Card>

          <Card>
            <SectionHead title="Activity" />
            <div style={{ display: "flex", flexDirection: "column" }}>
              {DB.activity.map((a, i) => {
                const t = DB.techById(a.who);
                return (
                  <div key={i} style={{ display: "flex", gap: 12, paddingBottom: i === DB.activity.length-1 ? 0 : 14 }}>
                    <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                      <span style={{ width: 28, height: 28, borderRadius: 99, display: "flex", alignItems: "center", justifyContent: "center", background: UI.tint(a.tone, 16), color: `var(${a.tone})`, flex: "0 0 auto" }}>
                        <Icon name={a.icon} size={14} />
                      </span>
                      {i !== DB.activity.length-1 && <span style={{ flex: 1, width: 2, background: "var(--border)", marginTop: 4, borderRadius: 99 }} />}
                    </div>
                    <div style={{ minWidth: 0, paddingTop: 2 }}>
                      <div style={{ fontSize: 13, lineHeight: 1.45 }}>
                        <span style={{ fontWeight: 650 }}>{t.name.split(" ")[0]}</span>{" "}
                        <span style={{ color: "var(--text-muted)" }}>{a.text}</span>{" "}
                        {a.target && <span className="mono" style={{ fontSize: 11.5, fontWeight: 600, color: "var(--accent-strong)", cursor: "pointer" }} onClick={() => go("wo-detail", { id: a.target })}>{a.target}</span>}
                      </div>
                      <div style={{ fontSize: 11.5, color: "var(--text-faint)", marginTop: 1 }}>{a.time}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
};