/* Welcome/landing page + "How costumes flow" guide (issues #44/#43/#72).
 *
 * Data comes from app/welcome.js (the tested seam) — these components only
 * render. The guide doubles as the front-desk cheat sheet via the print
 * stylesheet (index.html): ⌘P on the guide page prints clean.
 *
 * #72 (July 28, 2026): search LEADS this page. Finding a dancer is the most
 * common thing anyone does here, so it gets the top of the screen. The
 * Everyday/Management tile grid that used to sit below the flow card is gone
 * — the sidebar already carries that exact grouping, and rendering the same
 * navigation twice is the fragmented-information problem, not a shortcut past
 * it. welcome.js's SECTIONS registry stays: the sidebar groups from it, and
 * its unclaimed-view guard still stops a future screen shipping ungrouped.
 */

function WelcomeView({ state, nav, route }) {
  const readiness = GLOGIC.studioReadiness(state);
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Welcome to CostumeFlow</div>
          <div className="page-sub">
            Everything for Gravity Dance's {state.season.name} lives here. Search for a dancer
            to jump straight to her costumes, or pick an area from the menu.
          </div>
          <div className="page-sub welcome-progress">
            {readiness.ready} of {readiness.total} dancer assignments ready for bagging.
          </div>
        </div>
      </div>

      {/* The front door. Same component as the header's search, scaled up;
          the header hides its copy on this route so there's only one. */}
      <DancerSearch state={state} nav={nav} route={route} variant="hero" />

      <button className="guide-link" onClick={() => nav({ view: "guide" })}>
        <Icon name="chevronRight" size={14} />
        New here? See how costumes flow.
      </button>
    </div>
  );
}

/* The season's journey in one line — a teaching diagram, deliberately without
   live counts (July 24 mini-grill). Steps with a screen link into it.
   #73 moved it off Welcome and onto the guide: it's one-time content, and it
   was the largest permanent block on a page staff open every day. Denise:
   "once you learn the App it wont be needed... it should still be a clickable
   link, which takes all but 1 second to click and glance at when needed." */
function FlowPipeline({ nav }) {
  return (
    <div className="card card-pad pipe-card">
      <div className="welcome-sec-label">The season at a glance</div>
      <div className="pipe">
        {Welcome.PIPELINE.map((step, i) => {
          const inner = (
            <React.Fragment>
              <span className="pipe-num">{i + 1}</span>
              <span className="pipe-text">
                <span className="pipe-label">{step.label}</span>
                <span className="pipe-detail">{step.detail}</span>
              </span>
            </React.Fragment>
          );
          return step.goto ? (
            <button key={step.label} className="pipe-step linked" onClick={() => nav({ view: step.goto })}>
              {inner}
            </button>
          ) : (
            <div key={step.label} className="pipe-step">{inner}</div>
          );
        })}
      </div>
    </div>
  );
}

function GuideView({ nav }) {
  return (
    <div className="page guide">
      <div className="page-head">
        <div>
          <div className="page-title">How costumes flow</div>
          <div className="page-sub">
            What happens next in every flow. Print this page (⌘P) for the try-on table or front desk.
          </div>
        </div>
      </div>

      <FlowPipeline nav={nav} />

      <div className="guide-grid">
        {Welcome.FLOWS.map((flow) => (
          <div key={flow.id} className="card card-pad guide-flow">
            <div className="guide-flow-head">
              <span className="guide-flow-title">{flow.title}</span>
              {flow.goto && (
                <button className="guide-open" onClick={() => nav({ view: flow.goto })}>
                  open <Icon name="chevronRight" size={12} />
                </button>
              )}
            </div>
            <ol className="guide-steps">
              {flow.steps.map((s, i) => (
                <li key={i}>
                  {s.text}
                  {s.goto && (
                    <button className="guide-open inline" onClick={() => nav({ view: s.goto })}>
                      open <Icon name="chevronRight" size={12} />
                    </button>
                  )}
                </li>
              ))}
            </ol>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { WelcomeView, GuideView });