// PLANS EXPLORER — browse-only library of canonical strength programs.
// No integration with logging — pure reference catalog.

const LEVELS = [
  { id: "all",          label: "ALL LEVELS", short: "ALL" },
  { id: "beginner",     label: "BEGINNER",   short: "BEG" },
  { id: "intermediate", label: "INTERMEDIATE", short: "INT" },
  { id: "advanced",     label: "ADVANCED",   short: "ADV" },
  { id: "expert",       label: "EXPERT",     short: "EXP" }
];

const LEVEL_COLORS = {
  beginner:     "#D4FF3F",
  intermediate: "#3AA8FF",
  advanced:     "#FF2D6F",
  expert:       "#FFB800"
};

const PlansExplorer = ({ accent }) => {
  const D = window.FITNESS_DATA;
  const plans = D.plans || [];

  const [filter, setFilter] = React.useState("all");
  const [openPlan, setOpenPlan] = React.useState(null);

  const filtered = React.useMemo(() =>
    filter === "all" ? plans : plans.filter(p => p.level === filter),
    [filter, plans]
  );

  return (
    <div className="ft-pane px-pane">
      <div className="ft-pane-head px-head">
        <div>
          <div className="ft-pane-title" style={{ color: accent }}>PROGRAMS LIBRARY</div>
          <div className="ft-pane-sub">{plans.length} CANONICAL PROGRAMS · BEGINNER → EXPERT · BROWSE FREELY</div>
        </div>
      </div>

      {/* Level filter */}
      <div className="px-filters">
        {LEVELS.map(l => {
          const count = l.id === "all" ? plans.length : plans.filter(p => p.level === l.id).length;
          const c = l.id === "all" ? "var(--paper)" : LEVEL_COLORS[l.id];
          return (
            <button key={l.id}
              className={`px-filter ${filter === l.id ? "px-filter--on" : ""}`}
              style={{ "--c": c }}
              onClick={() => setFilter(l.id)}>
              <span className="px-filter-label">{l.label}</span>
              <span className="px-filter-count">{count}</span>
            </button>
          );
        })}
      </div>

      {/* Plan grid */}
      <div className="px-grid">
        {filtered.map(p => (
          <button key={p.id}
            className="px-card"
            style={{ "--c": LEVEL_COLORS[p.level] }}
            onClick={() => setOpenPlan(p)}>
            <div className="px-card-top">
              <div className="px-card-level" style={{ background: LEVEL_COLORS[p.level] }}>
                {p.level.toUpperCase()}
              </div>
              <div className="px-card-days">
                <span className="px-card-days-n">{p.daysPerWeek}</span>
                <span className="px-card-days-l">DAYS<br/>/ WK</span>
              </div>
            </div>
            <div className="px-card-name">{p.name}</div>
            <div className="px-card-tagline">{p.tagline}</div>
            <div className="px-card-meta">
              <div className="px-card-meta-row">
                <span className="px-card-meta-l">CREATOR</span>
                <span className="px-card-meta-v">{p.creator}</span>
              </div>
              <div className="px-card-meta-row">
                <span className="px-card-meta-l">GOAL</span>
                <span className="px-card-meta-v">{p.goal}</span>
              </div>
              <div className="px-card-meta-row">
                <span className="px-card-meta-l">EQUIPMENT</span>
                <span className="px-card-meta-v">{p.equipment.join(" · ")}</span>
              </div>
            </div>
            <div className="px-card-cta">READ PROGRAM →</div>
          </button>
        ))}
        {filtered.length === 0 && (
          <div className="px-empty">No programs at this level. Try another filter.</div>
        )}
      </div>

      {openPlan && <PlanDetail plan={openPlan} onClose={() => setOpenPlan(null)} />}
    </div>
  );
};

const PlanDetail = ({ plan, onClose }) => {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [onClose]);

  const c = LEVEL_COLORS[plan.level];

  // Portal to body so we escape any parent stacking context (e.g. the tabs/pane)
  return ReactDOM.createPortal(
    <div className="px-modal" onClick={onClose}>
      <div className="px-detail" onClick={e => e.stopPropagation()} style={{ "--c": c }}>
        {/* Header */}
        <div className="px-detail-head">
          <div className="px-detail-head-l">
            <div className="px-detail-level" style={{ background: c }}>{plan.level.toUpperCase()}</div>
            <div className="px-detail-name">{plan.name}</div>
            <div className="px-detail-by">
              by {plan.creator} · since {plan.since}
            </div>
          </div>
          <button className="px-detail-close" onClick={onClose} aria-label="Close">×</button>
        </div>

        {/* Stat strip */}
        <div className="px-detail-stats">
          <div className="px-detail-stat">
            <div className="px-detail-stat-v">{plan.daysPerWeek}</div>
            <div className="px-detail-stat-l">days / week</div>
          </div>
          <div className="px-detail-stat">
            <div className="px-detail-stat-v px-detail-stat-v--small">{plan.duration}</div>
            <div className="px-detail-stat-l">duration</div>
          </div>
          <div className="px-detail-stat">
            <div className="px-detail-stat-v px-detail-stat-v--small">{plan.goal}</div>
            <div className="px-detail-stat-l">goal</div>
          </div>
          <div className="px-detail-stat">
            <div className="px-detail-stat-v px-detail-stat-v--small">{plan.equipment.join(" · ")}</div>
            <div className="px-detail-stat-l">equipment</div>
          </div>
        </div>

        {/* Body */}
        <div className="px-detail-body">
          {/* Description */}
          <section className="px-section">
            <div className="px-section-h">▮ ABOUT</div>
            <p className="px-blurb">{plan.blurb}</p>
            <div className="px-bestfor">
              <span className="px-bestfor-tag">BEST FOR</span>
              <span className="px-bestfor-text">{plan.bestFor}</span>
            </div>
          </section>

          {/* Sessions */}
          <section className="px-section">
            <div className="px-section-h">▮ THE PROGRAM</div>
            <div className="px-sessions">
              {plan.sessions.map((s, i) => (
                <div key={i} className="px-session">
                  <div className="px-session-head">
                    <div className="px-session-num">{String(i + 1).padStart(2, "0")}</div>
                    <div>
                      <div className="px-session-label">{s.label}</div>
                      <div className="px-session-focus">{s.focus}</div>
                    </div>
                  </div>
                  <div className="px-exercises">
                    {s.exercises.map((ex, j) => (
                      <div key={j} className="px-exercise">
                        <div className="px-exercise-name">{ex.name}</div>
                        <div className="px-exercise-scheme">{ex.scheme}</div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* Progression rules */}
          <section className="px-section">
            <div className="px-section-h">▮ PROGRESSION</div>
            <ol className="px-rules">
              {plan.progression.map((r, i) => (
                <li key={i}>
                  <span className="px-rules-num">{String(i + 1).padStart(2, "0")}</span>
                  <span className="px-rules-text">{r}</span>
                </li>
              ))}
            </ol>
          </section>

          {/* Source */}
          <section className="px-section px-source">
            <div className="px-section-h">▮ SOURCE</div>
            <a className="px-source-link" href={plan.sourceUrl} target="_blank" rel="noopener noreferrer">
              <span className="px-source-name">{plan.sourceLabel}</span>
              <span className="px-source-arrow">↗</span>
            </a>
            <div className="px-source-note">
              This is a faithful summary of the published program. Read the full source for nuance and exceptions.
            </div>
          </section>
        </div>
      </div>
    </div>,
    document.body
  );
};