// ============================================================
// FitMinds — Dashboard
// ============================================================

function DashboardPage({ onNav, showToast }) {
  // Upcoming sessions (next 7 days from 'today' = 2026-04-21)
  const today = new Date("2026-04-21T00:00:00Z");
  const upcoming = [
    { day: "Tue 21 Apr", time: "13:30", schoolId: "hc", title: "Icebreaker Games", week: "1 of 4" },
    { day: "Wed 22 Apr", time: "09:15", schoolId: "co", title: "PE Skill Development", week: "7 of 8" },
    { day: "Wed 22 Apr", time: "10:45", schoolId: "co", title: "P1 Fundamentals", week: "2 of 4" },
    { day: "Fri 24 Apr", time: "10:15", schoolId: "bf", title: "Move Along Sessions", week: "1 of 3" },
    { day: "Mon 27 Apr", time: "10:00", schoolId: "sj", title: "P4–P5 Movement Block", week: "3 of 6" },
  ];

  const revenueBars = [28, 42, 35, 51, 62, 58, 70, 82, 74, 91, 88, 95];
  const revMonths = ["May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan","Feb","Mar","Apr"];

  return (
    <div className="space-y-6">
      <PageHead
        title="Good afternoon, Ronan"
        subtitle="Tuesday, 21 April 2026  ·  3 sessions today  ·  2 new enquiries overnight"
        action={
          <div className="flex gap-2">
            <Button variant="outline" icon="calendar-days" onClick={() => onNav("calendar")}>View calendar</Button>
            <Button variant="primary" icon="plus" onClick={() => onNav("bookings")}>New booking</Button>
          </div>
        }
      />

      {/* Stats */}
      <div className="grid-stats">
        <StatCard label="Active blocks"      value="6"    icon="calendar-check-2" delta={{dir:"up", text:"+2 vs last month"}} />
        <StatCard label="This month"         value="£1,460" icon="banknote" tint="mint" delta={{dir:"up", text:"+18% vs Mar"}} />
        <StatCard label="Outstanding"        value="£700"   icon="receipt"  tint="sun"  delta={{dir:"down", text:"2 invoices"}} />
        <StatCard label="Active schools"     value="6"     icon="school-2" tint="lilac" delta={{dir:"up", text:"+1 this term"}} />
      </div>

      {/* 2-col */}
      <div className="grid-5-2">
        {/* Upcoming sessions */}
        <div className="card">
          <div className="card-header">
            <div>
              <h2 className="section-heading">Next 7 days</h2>
              <div style={{ marginTop: 2, fontSize: 15, fontWeight: 600 }}>Upcoming sessions</div>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={() => onNav("calendar")}>
              Open calendar <Icon name="arrow-right" size={13} />
            </button>
          </div>
          <div className="card-body" style={{ padding: "0 10px 14px" }}>
            {upcoming.map((u, i) => {
              const school = SCHOOL_BY_ID[u.schoolId];
              return (
                <div key={i} className="booking-block" style={{ margin: "6px 10px" }}>
                  <div className="school-swatch" style={{ background: school.color }}>{school.short}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600 }}>{u.title}</div>
                    <div className="muted text-xs">{school.name} · {school.address.split(",")[0]}</div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div style={{ fontSize: 13, fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{u.day}</div>
                    <div className="muted text-xs tabnum">{u.time} · Wk {u.week}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Right stack */}
        <div className="space-y-4">
          {/* Quick actions */}
          <div className="card" style={{ padding: 18 }}>
            <h2 className="section-heading" style={{ marginBottom: 12 }}>Quick actions</h2>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
              <QuickAction icon="zap"        label="Quick book"      tone="coral" onClick={() => onNav("bookings")} />
              <QuickAction icon="file-plus"  label="New invoice"     tone="mint"  onClick={() => onNav("invoices")} />
              <QuickAction icon="school-2"   label="Add school"      tone="sun"   onClick={() => onNav("schools")} />
              <QuickAction icon="upload"     label="Upload video"    tone="lilac" onClick={() => onNav("content")} />
            </div>
          </div>

          {/* New enquiries */}
          <div className="card">
            <div className="card-header">
              <h2 className="section-heading">New enquiries</h2>
              <Chip tone="violet">2 new</Chip>
            </div>
            <div style={{ padding: "0 8px 14px" }}>
              {ENQUIRIES.filter(e => e.stage === "new").map(e => (
                <div key={e.id} style={{ padding: "10px 12px", borderRadius: 11, cursor: "pointer" }} className="card-lift" onClick={() => onNav("enquiries")}>
                  <div className="flex justify-between items-center">
                    <div style={{ fontWeight: 600, fontSize: 13.5 }}>{e.name}</div>
                    <div className="muted text-xs">{fmtDateShort(e.date)}</div>
                  </div>
                  <div className="muted text-xs" style={{ marginTop: 2 }}>{e.org} — {e.message.slice(0, 56)}{e.message.length > 56 ? "…" : ""}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Revenue + active blocks */}
      <div className="grid-5-2">
        <div className="card" style={{ padding: 20 }}>
          <div className="flex items-center justify-between">
            <div>
              <h2 className="section-heading">Revenue · last 12 months</h2>
              <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.02em", marginTop: 6 }}>£14,820</div>
              <div className="delta up text-xs" style={{ color: "oklch(0.55 0.15 150)" }}>
                <Icon name="trending-up" size={13} /> +24% year-on-year
              </div>
            </div>
            <div className="flex gap-2">
              <button className="filter-pill">12M</button>
              <button className="filter-pill is-active">YTD</button>
              <button className="filter-pill">All</button>
            </div>
          </div>

          <div style={{ marginTop: 22, display: "grid", gridTemplateColumns: `repeat(${revenueBars.length}, 1fr)`, alignItems: "end", gap: 8, height: 140 }}>
            {revenueBars.map((v, i) => {
              const isLast = i === revenueBars.length - 1;
              return (
                <div key={i} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
                  <div style={{
                    width: "100%", height: `${v}%`,
                    borderRadius: "8px 8px 2px 2px",
                    background: isLast ? "var(--gradient-primary)" : "oklch(.66 .18 35 / .18)",
                    boxShadow: isLast ? "var(--shadow-glow)" : "none",
                  }} />
                  <div className="muted text-xs tabnum" style={{ fontSize: 10.5 }}>{revMonths[i]}</div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <h2 className="section-heading">Active blocks</h2>
            <button className="btn btn-ghost btn-sm" onClick={() => onNav("bookings")}>All <Icon name="arrow-right" size={13} /></button>
          </div>
          <div style={{ padding: "0 16px 16px" }}>
            {BOOKINGS.filter(b => b.status === "active").slice(0, 4).map(b => {
              const s = SCHOOL_BY_ID[b.schoolId];
              const pct = Math.round((b.currentWeek / b.weeks) * 100);
              return (
                <div key={b.id} style={{ padding: "12px 0", borderBottom: "1px solid var(--border)" }}>
                  <div className="flex items-center gap-3">
                    <div className="school-swatch" style={{ background: s.color, width: 28, height: 28, borderRadius: 8, fontSize: 10.5, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 700 }}>{s.short}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 600 }} className="truncate">{s.name}</div>
                      <div className="muted text-xs">Week {b.currentWeek} of {b.weeks}</div>
                    </div>
                    <div className="tabnum text-xs muted">{money(b.totalPrice)}</div>
                  </div>
                  <div className="progress" style={{ marginTop: 8 }}><span style={{ width: pct + "%" }} /></div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

function QuickAction({ icon, label, tone, onClick }) {
  const tones = {
    coral: { bg: "oklch(.66 .18 35 / .10)", fg: "oklch(.42 .18 30)" },
    mint:  { bg: "oklch(.72 .17 165 / .12)", fg: "oklch(.38 .12 165)" },
    sun:   { bg: "oklch(.82 .14 85 / .15)",  fg: "oklch(.45 .14 70)" },
    lilac: { bg: "oklch(.72 .12 300 / .12)", fg: "oklch(.42 .15 295)" },
  };
  const t = tones[tone];
  return (
    <button onClick={onClick} style={{
      border: "1px solid var(--border)", background: "var(--card)", borderRadius: 13, padding: 14,
      display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 10, cursor: "pointer",
      fontFamily: "inherit", textAlign: "left", transition: "all .15s",
    }} className="card-lift">
      <div style={{ width: 34, height: 34, borderRadius: 10, background: t.bg, color: t.fg, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
        <Icon name={icon} size={17} />
      </div>
      <span style={{ fontSize: 13, fontWeight: 600 }}>{label}</span>
    </button>
  );
}

Object.assign(window, { DashboardPage });