// pages/plan.jsx — in-memory 6-step planner. No garden persistence. No invented plant list.

var PLAN_STEPS = [
  {
    key: 'space',
    title: 'Space',
    prompt: 'Where will this garden live?',
    options: ['Balcony', 'Terrace', 'Courtyard', 'Front yard', 'Indoor corner', 'Not sure yet'],
  },
  {
    key: 'size',
    title: 'Size',
    prompt: 'Rough size of the area?',
    options: ['Under 50 sq ft', '50–200 sq ft', '200–500 sq ft', 'Larger site', 'Not measured'],
  },
  {
    key: 'budget',
    title: 'Budget',
    prompt: 'What budget range are you exploring?',
    options: ['Under ₹5,000', '₹5,000–₹20,000', '₹20,000–₹75,000', 'Quote me', 'Not sure'],
  },
  {
    key: 'style',
    title: 'Style',
    prompt: 'Which look are you drawn to?',
    options: ['Natural river', 'Zen / calm', 'Colourful festive', 'Minimal modern', 'Still deciding'],
  },
  {
    key: 'goal',
    title: 'Goal',
    prompt: 'What should this space do?',
    options: ['Decorate pots', 'Build a path', 'Full landscape', 'Bulk material only', 'Maintenance help'],
  },
  {
    key: 'plan',
    title: 'Plan',
    prompt: 'Review your answers. We do not invent a plant list.',
    options: [],
  },
];

function PlanPage() {
  var stepState = React.useState(0);
  var step = stepState[0];
  var setStep = stepState[1];
  var answersState = React.useState({});
  var answers = answersState[0];
  var setAnswers = answersState[1];

  React.useEffect(function () {
    if (window.CustomerSeo && window.CustomerSeo.applyPage) window.CustomerSeo.applyPage('plan');
    return function () { if (window.CustomerSeo) window.CustomerSeo.applyDefault(); };
  }, []);

  var current = PLAN_STEPS[step];
  var select = function (opt) {
    var next = Object.assign({}, answers);
    next[current.key] = opt;
    setAnswers(next);
  };

  return (
    <main className="os-page">
      <section className="os-section">
        <div className="os-wrap">
          <PageHeader
            eyebrow="Planner"
            title="Plan my garden"
            note="Six questions. Saving writes a garden project under your customer identity — we do not invent a plant list."
          />
          <div className="os-wizard">
            <div className="os-progress" role="group" aria-label="Planner steps">
              {PLAN_STEPS.map(function (s, i) {
                return (
                  <button
                    key={s.key}
                    type="button"
                    className={i === step ? 'is-on' : (answers[s.key] ? 'is-done' : '')}
                    onClick={function () { if (i <= step) setStep(i); }}
                    aria-current={i === step ? 'step' : undefined}
                  >
                    {i + 1}. {s.title}
                  </button>
                );
              })}
            </div>

            <h2 className="serif" style={{ fontSize: '1.6rem', marginBottom: 8 }}>{current.title}</h2>
            <p style={{ color: 'var(--muted)', marginBottom: 16 }}>{current.prompt}</p>

            {current.key !== 'plan' ? (
              <div className="os-choice-grid" role="group" aria-label={current.title}>
                {current.options.map(function (opt) {
                  return (
                    <button
                      key={opt}
                      type="button"
                      className="os-choice"
                      aria-pressed={answers[current.key] === opt}
                      onClick={function () { select(opt); }}
                    >
                      {opt}
                    </button>
                  );
                })}
              </div>
            ) : (
              <div className="os-empty-band" style={{ padding: 20 }}>
                <h3 className="serif" style={{ fontSize: '1.3rem' }}>Your answers</h3>
                <dl style={{ marginTop: 12, display: 'grid', gap: 8 }}>
                  {PLAN_STEPS.filter(function (s) { return s.key !== 'plan'; }).map(function (s) {
                    return (
                      <div key={s.key} style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
                        <dt style={{ color: 'var(--muted)' }}>{s.title}</dt>
                        <dd style={{ margin: 0, fontWeight: 500 }}>{answers[s.key] || 'Not answered'}</dd>
                      </div>
                    );
                  })}
                </dl>
                <p style={{ color: 'var(--muted)', fontSize: '.85rem', marginTop: 16 }}>
                  This is a summary of what you told us. We are not generating plants, SKUs or prices from it.
                </p>
              </div>
            )}

            <div className="os-wizard__nav">
              <button
                type="button"
                className="btn btn--ghost"
                disabled={step === 0}
                onClick={function () { setStep(function (n) { return Math.max(0, n - 1); }); }}
              >
                Back
              </button>
              {step < PLAN_STEPS.length - 1 ? (
                <button
                  type="button"
                  className="btn btn--primary"
                  onClick={function () { setStep(function (n) { return Math.min(PLAN_STEPS.length - 1, n + 1); }); }}
                >
                  Continue
                </button>
              ) : (
                (function () {
                  var user = window.HAPStore && HAPStore.state && HAPStore.state.user;
                  if (!user) {
                    return <a className="btn btn--primary" href="#/account/register?next=plan">Save this plan</a>;
                  }
                  return (
                    <button
                      type="button"
                      className="btn btn--primary"
                      onClick={function () {
                        if (!window.CustomerOs || !window.CustomerOs.createProjectFromPlan) {
                          HAPRouter.nav('#/garden');
                          return;
                        }
                        var res = window.CustomerOs.createProjectFromPlan(answers);
                        if (res && res.ok) {
                          if (window.HAPStore) HAPStore.notify('Plan saved');
                          HAPRouter.nav('#/garden');
                        } else if (res && res.code === 'AUTH_REQUIRED') {
                          HAPRouter.nav('#/account/register?next=plan');
                        } else {
                          if (window.HAPStore) HAPStore.notify((res && res.message) || 'Could not save plan');
                        }
                      }}
                    >
                      Save this plan
                    </button>
                  );
                })()
              )}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.PlanPage = PlanPage;