// ─── DASHBOARD — first tab. Coming up + recent + quiz progress + top 3 ──

function DashboardTab({ onJumpToCalendar, onJumpToSchool, onJumpToHomework, onJumpToTour, quizProgress }) {
  const today = getToday();
  const upcoming = getUpcoming(3);
  const recent = EVENTS
    .map(e => ({ ...e, _date: new Date(e.dateISO + "T00:00:00") }))
    .filter(e => e._date < today)
    .sort((a, b) => b._date - a._date)
    .slice(0, 2);

  const top3 = SHORTLIST.slice(0, 3);

  return (
    <div>
      {/* Greeting block + Insights card on the right */}
      <div style={{
        padding: "32px 20px 18px",
        display: "grid",
        gridTemplateColumns: "1fr auto",
        gap: 20,
        alignItems: "start",
      }}>
        <div>
          <Eyebrow tone="gold">Thursday, April 30</Eyebrow>
          <h2 className="serif" style={{
            margin: "12px 0 10px", fontSize: 36, fontWeight: 400,
            lineHeight: 1.05, color: "var(--forest-deep)",
            letterSpacing: "-0.015em",
          }}>
            Good morning, <em style={{ fontStyle:"italic" }}>Tom & Jamie.</em>
          </h2>
          <p style={{
            margin: 0, fontSize: 14, lineHeight: 1.6,
            color: "var(--ink-2)", maxWidth: 460,
          }}>
            Dinner with Mike & Ruth tonight — the first real downloaded conversation with parents who've been through it. Below: what's next, where you've been, and how the homework is going.
          </p>
        </div>

        {/* Insights card */}
        <button
          onClick={onJumpToHomework}
          style={{
            flex: "0 0 auto",
            width: 184,
            textAlign: "left", cursor: "pointer",
            background: "var(--forest-deep)",
            color: "var(--cream)",
            border: "none",
            padding: "16px 16px 14px",
            display: "flex", flexDirection: "column", gap: 10,
          }}>
          <div style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            borderBottom: "1px solid rgba(245,239,230,0.15)", paddingBottom: 8,
          }}>
            <span style={{
              fontFamily: "var(--sans)", fontSize: 9.5, fontWeight: 500,
              letterSpacing: "0.18em", textTransform: "uppercase",
              color: "var(--gold-soft)",
            }}>Insights</span>
            <span style={{ fontSize: 14, color: "var(--gold-soft)" }}>›</span>
          </div>
          <div className="serif" style={{
            fontSize: 13.5, lineHeight: 1.35, fontStyle: "italic",
            color: "rgba(245,239,230,0.90)",
            minHeight: 36,
          }}>
            {quizProgress.next || "All quizzes complete — view your manifesto"}
          </div>
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr",
            gap: 10,
            paddingTop: 8,
            borderTop: "1px solid rgba(245,239,230,0.12)",
          }}>
            <InsightStat label="Porter"   pct={quizProgress.porter} />
            <InsightStat label="Tate"     pct={quizProgress.tate} />
            <InsightStat label="Criteria" pct={quizProgress.criteria} />
            <InsightStat label="Scoring"  pct={quizProgress.scoring} />
          </div>
        </button>
      </div>

      {/* Next up — featured */}
      {upcoming[0] && <DashNextUp ev={upcoming[0]} onJump={() => {
        const e = upcoming[0];
        if (e.linkTo === "questions") return onJumpToTour();
        if (e.school) return onJumpToSchool(e.school);
        return onJumpToCalendar();
      }} />}

      {/* Three columns of context */}
      <div style={{ padding: "0 20px" }}>

        {/* Top 3 schools */}
        <SectionRule label="Where Porter stands · top 3" />
        <div style={{ display:"flex", flexDirection:"column", gap:0, marginBottom: 32 }}>
          {top3.map((s, i) => (
            <button key={s.name}
              onClick={() => onJumpToSchool(s.name)}
              style={{
                width:"100%", textAlign:"left", cursor:"pointer",
                background:"transparent", border:"none",
                padding:"16px 0",
                borderBottom: i === top3.length-1 ? "1px solid var(--line)" : "1px solid var(--line-2)",
                borderTop: i === 0 ? "1px solid var(--line)" : "none",
                display:"grid", gridTemplateColumns:"auto 1fr auto auto",
                gap:16, alignItems:"center",
              }}>
              <div className="serif" style={{
                fontSize:30, fontStyle:"italic", color: i===0 ? "var(--gold)" : "var(--ink-3)",
                fontWeight: 400, lineHeight: 1, width: 32,
              }}>0{i+1}</div>
              <div style={{ minWidth:0 }}>
                <div className="serif" style={{
                  fontSize: 17, fontWeight: 500, color: "var(--forest-deep)",
                  lineHeight: 1.2,
                }}>
                  {s.name}{s.topChoice ? <span style={{ color:"var(--gold)", marginLeft:8, fontSize:13, fontStyle:"italic" }}>· top choice</span> : ""}
                </div>
                <div style={{
                  fontSize: 12, color: "var(--ink-3)", marginTop: 3,
                }}>{s.location} · {s.type}</div>
              </div>
              <Dots value={s.porterFit} max={5} />
              <div style={{ fontFamily:"var(--sans)", fontSize:14, color:"var(--ink-3)" }}>›</div>
            </button>
          ))}
        </div>

        {/* Recent activity */}
        {recent.length > 0 && (
          <>
            <SectionRule label="Recent activity" />
            <div style={{ display:"flex", flexDirection:"column", gap:0, marginBottom: 32 }}>
              {recent.map(e => (
                <button key={e.id}
                  onClick={() => e.school && onJumpToSchool(e.school)}
                  style={{
                    width:"100%", textAlign:"left", cursor: e.school ? "pointer" : "default",
                    background:"transparent", border:"none",
                    padding:"14px 0",
                    borderBottom:"1px solid var(--line-2)",
                    display:"flex", gap:14, alignItems:"flex-start",
                  }}>
                  <DateChip date={e._date} small />
                  <div style={{ flex:1, minWidth:0, paddingTop:2 }}>
                    <div style={{
                      display:"flex", gap:10, marginBottom:4, alignItems:"center",
                    }}>
                      <KindBadge kind={e.kind} />
                      {e.done && (
                        <span style={{
                          fontFamily:"var(--sans)", fontSize:9, fontWeight:500,
                          letterSpacing:"0.14em", textTransform:"uppercase",
                          color:"var(--moss)",
                        }}>✓ Attended</span>
                      )}
                    </div>
                    <div className="serif" style={{
                      fontSize: 15.5, fontWeight: 500, lineHeight: 1.25,
                      color: "var(--forest-deep)",
                    }}>
                      {e.school ? `${e.school} — ` : ""}{e.title}
                    </div>
                    {e.note && (
                      <p style={{
                        margin:"4px 0 0", fontSize:12, lineHeight:1.5,
                        color:"var(--ink-3)",
                      }}>{e.note}</p>
                    )}
                  </div>
                </button>
              ))}
            </div>
          </>
        )}

        {/* Promise / mission tag */}
        <div style={{
          margin:"40px -8px 8px",
          padding:"28px 24px",
          background:"var(--forest-deep)",
          color:"var(--cream)",
        }}>
          <Eyebrow tone="cream">The promise</Eyebrow>
          <p className="serif" style={{
            margin:"12px 0 0", fontSize:19, lineHeight:1.45,
            color:"var(--cream)", fontStyle:"italic", fontWeight:400,
          }}>
            "A neutral guide instead of a paid opinion. The context, the calendar, and our own thinking — together in one place — so we get to a school for Porter and Tate we can both feel sure about."
          </p>
        </div>
      </div>
    </div>
  );
}

function DashNextUp({ ev, onJump }) {
  const today = getToday();
  return (
    <button onClick={onJump} style={{
      width:"100%", textAlign:"left", cursor:"pointer",
      background: "var(--forest-deep)",
      color: "var(--cream)",
      border:"none",
      margin: "0 0 32px",
      padding:"28px 20px",
      display:"flex", gap:18, alignItems:"center",
    }}>
      <DateChip date={ev._date} accent />
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:6 }}>
          <span style={{
            fontFamily:"var(--sans)", fontSize:9.5, fontWeight:500,
            letterSpacing:"0.18em", textTransform:"uppercase",
            color:"var(--gold-soft)",
          }}>Next up</span>
          <span style={{
            fontFamily:"var(--sans)", fontSize:9.5, fontWeight:500,
            letterSpacing:"0.14em", textTransform:"uppercase",
            color:"rgba(245,239,230,0.55)",
          }}>· {relativeLabel(ev._date, today)}</span>
        </div>
        <div className="serif" style={{
          fontSize:22, fontWeight:500, lineHeight:1.2,
          color:"var(--cream)",
        }}>
          {ev.school ? `${ev.school} — ` : ""}{ev.title}
        </div>
        <div style={{
          fontSize:12.5, color:"rgba(245,239,230,0.65)", marginTop:6,
        }}>
          {ev.time} · {ev.location}
        </div>
      </div>
      <div style={{
        flex:"0 0 auto", fontFamily:"var(--sans)",
        fontSize:18, color:"var(--gold-soft)",
      }}>›</div>
    </button>
  );
}

window.DashboardTab = DashboardTab;

function InsightStat({ label, pct }) {
  const display = Math.round(pct);
  const done = display === 100;
  return (
    <div style={{ display:"flex", flexDirection:"column", gap:4 }}>
      <div style={{
        height: 3, background: "rgba(245,239,230,0.15)",
        position: "relative", overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", left: 0, top: 0, bottom: 0,
          width: `${Math.max(2, display)}%`,
          background: done ? "var(--moss)" : "var(--gold-soft)",
          transition: "width 0.4s ease",
        }} />
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <span style={{
          fontFamily: "var(--sans)", fontSize: 8.5, fontWeight: 500,
          letterSpacing: "0.16em", textTransform: "uppercase",
          color: "rgba(245,239,230,0.65)",
        }}>{label}</span>
        <span style={{
          fontFamily: "var(--serif)", fontStyle: "italic",
          fontSize: 12, color: done ? "var(--moss)" : "rgba(245,239,230,0.75)",
        }}>{done ? "✓" : `${display}%`}</span>
      </div>
    </div>
  );
}
