/* eslint-disable */
// ===========================================================================
// Omnivore UI — Today view
//
// Part of the in-browser (no-build) React app. These files are loaded in order
// as separate <script type="text/babel"> tags (see index.html); Babel compiles
// each as a classic global script, so top-level names declared in earlier files
// are visible here. Depends on ui/base.jsx, ui/components.jsx.
// ===========================================================================

// ── TODAY ───────────────────────────────────────────────────────────────────
function TodayView({ profile, toast, onCoach, onInfo, onInstall, showInstall, onSignOut }) {
  const log = Store.readLog();
  const today = localDay();
  const entries = log.filter((r) => dayOf(r) === today).map((r) => r.meal);
  const scored = Scoring.scoreDay(entries, profile, new Date());
  const rows = [...scored.metrics].sort((a, b) => a.subscore - b.subscore);

  const headerBtn = {
    background: "none", border: `1px solid ${C.line}`, color: C.dim, borderRadius: 16,
    padding: "5px 12px", fontSize: 12, cursor: "pointer",
  };
  return (
    <div style={{ display: "flex", flexDirection: "column", minHeight: "100%" }}>
      {/* header: day + install / coach access */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
        <span style={{ fontSize: 13, color: C.faint }}>Today</span>
        <div style={{ display: "flex", gap: 8 }}>
          {showInstall && <button onClick={onInstall} style={headerBtn}>↓ Install</button>}
          <button onClick={onCoach} style={headerBtn}>Settings</button>
          {onSignOut && <button onClick={onSignOut} style={headerBtn} title={Auth.email()}>Sign out</button>}
        </div>
      </div>

      {/* hero: just a number and a sentence */}
      <div style={{ textAlign: "center", padding: "44px 0 38px" }}>
        <div style={{ fontSize: 96, fontWeight: 300, fontFamily: SERIF, color: scoreColor(scored.score), lineHeight: 1 }}>
          {scored.score == null ? "—" : scored.score}
        </div>
        <div style={{ fontSize: 13, color: C.faint, marginTop: 2 }}>health score</div>
        <div style={{ fontSize: 15, color: C.text, marginTop: 18 }}>{dayLine(scored.score)}</div>
      </div>

      {/* metric rows — flat, tappable, worst-first */}
      {scored.score != null && (
        <div>{rows.map((m) => <MetricRow key={m.id} m={m} onInfo={onInfo} />)}</div>
      )}
    </div>
  );
}