// PlanRevealScreen.jsx
// Day-1 plan reveal — "chaos to agency." Follows First Win.
// Source: roadmap.json (plan-reveal, goal-framing), design_brief.html, design_thinking.html.
// The single most carefully-designed moment in the product per design_thinking.html.

function PlanRevealScreen({ onBegin, onBack }) {
  // Stage: "settling" → "revealed" — a brief compose animation, then the full layout.
  const [stage, setStage] = React.useState("settling");
  React.useEffect(() => {
    const t = setTimeout(() => setStage("revealed"), 1200);
    return () => clearTimeout(t);
  }, []);

  // Generated plan — 6 weeks, ~4 sessions/wk, tapering toward exam.
  const today = { m: "May", d: 12 };
  const exam = { m: "Jun", d: 23, label: "ME 80 final" };
  const daysOut = 42;

  // Calendar — 6 weeks × 7 days. Mon-start.
  // Each cell: { date, session?, type, intensity }
  const WEEKS = 6;
  const DAYS = 7;
  const sessions = {
    // row, col indexes
    "0-0": { type: "intro",   min: 40 },
    "0-2": { type: "derive",  min: 55 },
    "0-4": { type: "derive",  min: 55 },
    "0-6": { type: "reflect", min: 25 },
    "1-1": { type: "derive",  min: 55 },
    "1-3": { type: "review",  min: 30 },
    "1-4": { type: "derive",  min: 55 },
    "1-6": { type: "reflect", min: 25 },
    "2-0": { type: "derive",  min: 55 },
    "2-2": { type: "synthesis", min: 45, connect: true },
    "2-4": { type: "derive",  min: 55 },
    "2-6": { type: "review",  min: 30 },
    "3-1": { type: "derive",  min: 55 },
    "3-3": { type: "review",  min: 30 },
    "3-5": { type: "synthesis", min: 45, connect: true },
    "4-0": { type: "review",  min: 40 },
    "4-2": { type: "mock",    min: 75 },
    "4-4": { type: "review",  min: 40 },
    "4-6": { type: "reflect", min: 30 },
    "5-1": { type: "review",  min: 40 },
    "5-3": { type: "mock",    min: 75 },
    "5-5": { type: "polish",  min: 30 },
  };

  const dateFor = (r, c) => {
    // Today is Tue May 12 (col 1). Start from Mon May 11 (r=0,c=0).
    const day = 11 + r * 7 + c;
    // month rollover: May has 31 days.
    if (day <= 31) return { m: "May", d: day };
    return { m: "Jun", d: day - 31 };
  };

  const isToday = (r, c) => r === 0 && c === 1;
  const isExam = (r, c) => {
    const d = dateFor(r, c);
    return d.m === "Jun" && d.d === 22; // place exam day
  };

  const TYPE_STYLE = {
    intro:     { bg: "#EBE1D3", ink: "#5b4a38", label: "Intro"   },
    derive:    { bg: "#1A1A1A", ink: "#FFF4E8", label: "Derive"  },
    reflect:   { bg: "#F2E8DF", ink: "#7a5200", label: "Reflect" },
    review:    { bg: "#FFF4E8", ink: "#AD5905", label: "Review"  },
    synthesis: { bg: "#9747FF", ink: "#FFF4E8", label: "Connect" },
    mock:      { bg: "#778248", ink: "#FFF4E8", label: "Mock"    },
    polish:    { bg: "#FFF4E8", ink: "#1a1a1a", label: "Polish"  },
  };

  const totalSessions = Object.keys(sessions).length;
  const totalMin = Object.values(sessions).reduce((a, s) => a + s.min, 0);
  const totalHours = Math.round(totalMin / 60);

  return (
    <section className={"planreveal " + (stage === "settling" ? "is-settling" : "is-revealed")}>

      <div className="pr-top">
        <button className="back-btn" onClick={onBack}>
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M15 6l-6 6 6 6"/></svg>
          Back
        </button>
        <div className="pr-chip-row">
          <span className="pr-chip">Plan v1 · editable</span>
        </div>
      </div>

      <header className="pr-hero">
        <div className="pr-eyebrow">Your plan</div>
        <h1 className="pr-serif">
          Forty-two days. <span className="pr-dim">One derivation at a time.</span>
        </h1>
        <p className="pr-sub">
          You told us your goal, we mapped what you know, and this is the shortest honest path there.
          Edit anything. Nothing is fixed except the exam.
        </p>
      </header>

      <div className="pr-goalbar">
        <div className="pr-goalbar-left">
          <div className="pr-goalbar-eyebrow">Today</div>
          <div className="pr-goalbar-val">{today.m} {today.d}</div>
        </div>
        <div className="pr-goalbar-track">
          <div className="pr-goalbar-fill" style={{width: (1 / daysOut * 100) + "%"}}/>
          <div className="pr-goalbar-pin pr-goalbar-pin-today" style={{left: "0%"}}>
            <div className="pr-goalbar-pin-dot"/>
          </div>
          <div className="pr-goalbar-pin pr-goalbar-pin-exam" style={{left: "100%"}}>
            <div className="pr-goalbar-pin-dot pr-exam-dot"/>
          </div>
          <div className="pr-goalbar-ticks">
            {[7, 14, 21, 28, 35].map((d, i) => (
              <div key={i} className="pr-goalbar-tick" style={{left: (d/daysOut*100) + "%"}}>
                <span>{d}d</span>
              </div>
            ))}
          </div>
        </div>
        <div className="pr-goalbar-right">
          <div className="pr-goalbar-eyebrow">{exam.label}</div>
          <div className="pr-goalbar-val">{exam.m} {exam.d}</div>
        </div>
      </div>

      <div className="pr-body">
        <div className="pr-calendar">
          <div className="pr-cal-head">
            {["Mon","Tue","Wed","Thu","Fri","Sat","Sun"].map(d => (
              <div key={d} className="pr-cal-day">{d}</div>
            ))}
          </div>
          <div className="pr-cal-grid">
            {Array.from({length: WEEKS}).map((_, r) => (
              <React.Fragment key={r}>
                {Array.from({length: DAYS}).map((_, c) => {
                  const key = r + "-" + c;
                  const s = sessions[key];
                  const date = dateFor(r, c);
                  const today_ = isToday(r, c);
                  const exam_ = isExam(r, c);
                  const style = s ? TYPE_STYLE[s.type] : null;
                  return (
                    <div key={c} className={"pr-cal-cell" + (today_ ? " pr-today" : "") + (exam_ ? " pr-exam" : "")}>
                      <div className="pr-cal-date">
                        <span>{date.d}</span>
                        {today_ && <span className="pr-cal-todaydot"/>}
                      </div>
                      {s && !exam_ && (
                        <div className="pr-session" style={{background: style.bg, color: style.ink}}>
                          <div className="pr-session-label">{style.label}</div>
                          <div className="pr-session-min">{s.min}m</div>
                        </div>
                      )}
                      {exam_ && (
                        <div className="pr-session pr-session-exam">
                          <div className="pr-session-label">EXAM</div>
                          <div className="pr-session-min">9:00 AM</div>
                        </div>
                      )}
                    </div>
                  );
                })}
              </React.Fragment>
            ))}
          </div>
          <div className="pr-legend">
            {Object.entries(TYPE_STYLE).map(([k, v]) => (
              <span key={k} className="pr-legend-item">
                <span className="pr-legend-sw" style={{background: v.bg, color: v.ink}}>A</span>
                {v.label}
              </span>
            ))}
          </div>
        </div>

        <aside className="pr-side">
          <div className="pr-card pr-card-next">
            <div className="pr-eyebrow">First session · today</div>
            <div className="pr-next-serif">Enthalpy &amp; the first law.</div>
            <div className="pr-next-body">
              55 min. You already know the product rule — you proved that twenty minutes ago. We'll build from there.
            </div>
            <div className="pr-next-meta">
              <span className="pr-meta-chip">3 derivations</span>
              <span className="pr-meta-chip">1 reflection</span>
            </div>
            <button className="btn-primary" onClick={onBegin}>Begin first session →</button>
          </div>

          <div className="pr-card">
            <div className="pr-eyebrow">What we're building toward</div>
            <ul className="pr-goals">
              <li><span className="pr-goal-dot pr-goal-done"/> Product rule (proven · today)</li>
              <li><span className="pr-goal-dot pr-goal-active"/> Thermodynamic potentials</li>
              <li><span className="pr-goal-dot"/> Maxwell relations</li>
              <li><span className="pr-goal-dot"/> Cycles &amp; efficiency</li>
              <li><span className="pr-goal-dot"/> Availability &amp; irreversibility</li>
              <li><span className="pr-goal-dot pr-goal-exam"/> ME 80 final · Jun 23</li>
            </ul>
          </div>

          <div className="pr-card pr-card-summary">
            <div className="pr-summary-row">
              <div>
                <div className="pr-summary-n">{totalSessions}</div>
                <div className="pr-summary-l">sessions</div>
              </div>
              <div>
                <div className="pr-summary-n">{totalHours}h</div>
                <div className="pr-summary-l">total work</div>
              </div>
              <div>
                <div className="pr-summary-n">42</div>
                <div className="pr-summary-l">days</div>
              </div>
            </div>
            <div className="pr-summary-note">
              Honest estimate, not a floor. We'll re-plan every Sunday based on what actually happened.
            </div>
          </div>
        </aside>
      </div>

      <footer className="pr-foot">
        <div className="pr-foot-l">
          <span className="pr-foot-lock">
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 018 0v3"/></svg>
            Only you see this plan.
          </span>
        </div>
        <div className="pr-foot-r">
          <button className="btn-ghost">Edit schedule</button>
          <button className="btn-primary" onClick={onBegin}>Begin first session</button>
        </div>
      </footer>
    </section>
  );
}

Object.assign(window, { PlanRevealScreen });