// pages/quote.jsx — progressive landscape quote. Submits existing public ticket. No new table.

var QUOTE_STEPS = ['Contact', 'Site', 'Need', 'Review'];

function QuotePage() {
  var stepState = React.useState(0);
  var step = stepState[0];
  var setStep = stepState[1];
  var doneState = React.useState(null);
  var done = doneState[0];
  var setDone = doneState[1];
  var errState = React.useState('');
  var err = errState[0];
  var setErr = errState[1];
  var formState = React.useState({
    name: '', phone: '', email: '',
    city: '', space: 'Courtyard',
    need: 'Full landscape', message: '',
  });
  var form = formState[0];
  var setForm = formState[1];

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

  var patch = function (key, value) {
    var next = Object.assign({}, form);
    next[key] = value;
    setForm(next);
  };

  var submit = function (e) {
    e.preventDefault();
    setErr('');
    if (!window.CustomerForms) {
      setErr('Forms are unavailable.');
      return;
    }
    var body = [
      'Landscape quote',
      'City: ' + form.city,
      'Space: ' + form.space,
      'Need: ' + form.need,
      form.message,
    ].join('\n');
    var ticketRes = window.CustomerForms.openPublicTicket({
      customerName: form.name,
      customerEmail: form.email,
      customerPhone: form.phone,
      category: 'bulk_quote',
      subject: 'Landscape quote · ' + form.need,
      body: body,
      source: 'landscape_quote',
    });
    if (!ticketRes.ok) {
      setErr(ticketRes.message || 'Could not send quote request');
      return;
    }
    if (window.CustomerForms.saveLead) {
      window.CustomerForms.saveLead({
        name: form.name,
        phone: form.phone,
        email: form.email,
        projectType: form.need,
        message: body,
        source: 'landscape_quote',
        ticketId: ticketRes.ticket && ticketRes.ticket.id,
      });
    }
    if (window.CustomerOs && window.CustomerOs.submitQuote) {
      window.CustomerOs.submitQuote({
        name: form.name,
        phone: form.phone,
        email: form.email,
        serviceId: form.need === 'Bulk supply' ? 'bulk-supply' : 'landscape',
        description: body,
        location: form.city,
        ticketId: ticketRes.ticket && ticketRes.ticket.id,
      });
    }
    setDone(ticketRes.ticket);
    if (window.HAPStore) HAPStore.notify('Quote sent · ' + ticketRes.ticket.id);
  };

  if (done) {
    return (
      <main className="os-page">
        <section className="os-section">
          <div className="os-wrap" style={{ maxWidth: 640 }}>
            <PageHeader eyebrow="Quote" title="We have your request" note={'Ticket ' + done.id + '. Usually within one working day.'} />
            <a className="btn btn--primary" href="#/services">Back to services</a>
          </div>
        </section>
      </main>
    );
  }

  return (
    <main className="os-page">
      <section className="os-section">
        <div className="os-wrap" style={{ maxWidth: 640 }}>
          <PageHeader
            eyebrow="Landscape quote"
            title="Tell us about the site"
            note="Opens a support ticket and a landscape quote (not an order). We will not invent a price here."
          />
          <div className="os-quote-steps" aria-label="Quote progress">
            {QUOTE_STEPS.map(function (label, i) {
              return <span key={label} className={i === step ? 'is-on' : ''}>{(i + 1) + '. ' + label}</span>;
            })}
          </div>
          <form onSubmit={submit} className="os-wizard">
            {err ? <p style={{ color: 'var(--terra)' }}>{err}</p> : null}

            {step === 0 && (
              <div style={{ display: 'grid', gap: 12 }}>
                <label>Name
                  <input className="input input--lg" required value={form.name} onChange={function (e) { patch('name', e.target.value); }} />
                </label>
                <label>Phone
                  <input className="input input--lg" required value={form.phone} onChange={function (e) { patch('phone', e.target.value); }} />
                </label>
                <label>Email
                  <input className="input input--lg" type="email" value={form.email} onChange={function (e) { patch('email', e.target.value); }} />
                </label>
              </div>
            )}

            {step === 1 && (
              <div style={{ display: 'grid', gap: 12 }}>
                <label>City / area
                  <input className="input input--lg" required value={form.city} onChange={function (e) { patch('city', e.target.value); }} placeholder="Thrissur" />
                </label>
                <fieldset>
                  <legend>Space</legend>
                  <div className="os-choice-grid">
                    {['Balcony', 'Courtyard', 'Front yard', 'Larger site'].map(function (opt) {
                      return (
                        <button key={opt} type="button" className="os-choice" aria-pressed={form.space === opt} onClick={function () { patch('space', opt); }}>
                          {opt}
                        </button>
                      );
                    })}
                  </div>
                </fieldset>
              </div>
            )}

            {step === 2 && (
              <div style={{ display: 'grid', gap: 12 }}>
                <fieldset>
                  <legend>What do you need?</legend>
                  <div className="os-choice-grid">
                    {['Full landscape', 'Pathway', 'Pot styling', 'Bulk supply', 'Garden decor'].map(function (opt) {
                      return (
                        <button key={opt} type="button" className="os-choice" aria-pressed={form.need === opt} onClick={function () { patch('need', opt); }}>
                          {opt}
                        </button>
                      );
                    })}
                  </div>
                </fieldset>
                <label>Notes
                  <textarea className="textarea" rows="4" required value={form.message} onChange={function (e) { patch('message', e.target.value); }} placeholder="Photos, sizes, timing…" />
                </label>
              </div>
            )}

            {step === 3 && (
              <div className="os-empty-band" style={{ padding: 20 }}>
                <p><b>{form.name}</b> · {form.phone}</p>
                <p>{form.city} · {form.space} · {form.need}</p>
                <p style={{ color: 'var(--muted)' }}>{form.message}</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 < 3
                ? <button type="button" className="btn btn--primary" onClick={function () { setStep(function (n) { return Math.min(3, n + 1); }); }}>Continue</button>
                : <button type="submit" className="btn btn--primary">Send quote request</button>}
            </div>
          </form>
        </div>
      </section>
    </main>
  );
}

window.QuotePage = QuotePage;