// pages/build-garden.jsx — Build Your Garden configurator (#/build/:solutionSlug)

var BUILD_SOLUTIONS = [
  { slug: 'balcony-makeover', name: 'Balcony Makeover', steps: ['Space', 'Style', 'Plants', 'Review'] },
  { slug: 'white-pot-premium', name: 'White Pot Premium', steps: ['Pot size', 'Pebble colour', 'Extras', 'Review'] },
  { slug: 'zen-garden', name: 'Zen Garden', steps: ['Corner size', 'Stone palette', 'Accents', 'Review'] },
  { slug: 'villa-entrance', name: 'Villa Entrance', steps: ['Width', 'Planters', 'Ground cover', 'Review'] },
  { slug: 'pathway-kit', name: 'Pathway Kit', steps: ['Length', 'Stone type', 'Edging', 'Review'] },
  { slug: 'poolside', name: 'Poolside', steps: ['Deck area', 'Heat-safe stone', 'Planters', 'Review'] },
  { slug: 'resort-kit', name: 'Resort Kit', steps: ['Area m²', 'Bulk stone', 'Logistics', 'Review'] },
  { slug: 'courtyard-calm', name: 'Courtyard Calm', steps: ['Layout', 'Statues', 'Pebbles', 'Review'] },
  { slug: 'office-lobby', name: 'Office Lobby', steps: ['Footfall', 'Planters', 'Finish', 'Review'] },
  { slug: 'rooftop-garden', name: 'Rooftop Garden', steps: ['Load', 'Containers', 'Drainage', 'Review'] },
];

function BuildGardenPage() {
  var route = useRoute();
  var slug = route.params.solutionSlug;
  var solution = BUILD_SOLUTIONS.find(function (s) { return s.slug === slug; })
    || (window.CustomerGrowth && window.CustomerGrowth.getBundleBySlug && window.CustomerGrowth.getBundleBySlug(slug));
  if (!solution) {
    return (
      <main className="container section">
        <h1 className="serif">Solution not found</h1>
        <a className="btn btn--primary" href="#/">Browse collections</a>
      </main>
    );
  }

  var steps = solution.steps || ['Brief', 'Materials', 'Review'];
  var stepState = React.useState(0);
  var step = stepState[0];
  var setStep = stepState[1];
  var formState = React.useState({ name: '', phone: '', email: '', qty: '100', destination: 'Thrissur', notes: '' });
  var form = formState[0];
  var setForm = formState[1];
  var doneState = React.useState(null);
  var done = doneState[0];
  var setDone = doneState[1];

  function submitLead(e) {
    e.preventDefault();
    var ticketRes = window.CustomerForms.openPublicTicket({
      customerName: form.name,
      customerEmail: form.email,
      customerPhone: form.phone,
      category: 'bulk_quote',
      subject: 'Build Your Garden · ' + (solution.name || slug),
      body: 'Solution: ' + slug + '\nQty/area: ' + form.qty + '\nDestination: ' + form.destination + '\nNotes: ' + form.notes,
    });
    if (!ticketRes.ok) return;
    var leadInput = window.CustomerUtm ? window.CustomerUtm.attach({
      name: form.name,
      phone: form.phone,
      email: form.email,
      projectType: solution.name || slug,
      message: form.notes,
      source: 'build_garden',
      ticketId: ticketRes.ticket.id,
    }) : {
      name: form.name,
      phone: form.phone,
      email: form.email,
      projectType: solution.name || slug,
      message: form.notes,
      source: 'build_garden',
      ticketId: ticketRes.ticket.id,
    };
    var leadRes = window.CustomerForms.saveLead(leadInput);
    setDone({ ticket: ticketRes.ticket, lead: leadRes.ok ? leadRes.lead : null });
    HAPStore.notify('Enquiry sent — we will draft a quote');
  }

  if (done) {
    return (
      <main className="container section" style={{ maxWidth: 640, textAlign: 'center' }}>
        <h1 className="serif">Thanks — your {solution.name || slug} brief is in.</h1>
        <p style={{ color: 'var(--muted)', marginTop: 12 }}>Ticket <b>{done.ticket.id}</b>{done.lead ? <> · Lead <b>{done.lead.id}</b></> : null}. Owner will qualify and send a quote — RINPO will not invent prices.</p>
        <a className="btn btn--primary" href={'#/promo/' + slug} style={{ marginTop: 20 }}>View combo offer</a>
      </main>
    );
  }

  return (
    <main className="container section">
      <div className="crumb" style={{ marginBottom: 12 }}>
        <a href="#/">Home</a><span className="sep">/</span>
        <a href={'#/promo/' + slug}>Combo</a><span className="sep">/</span>
        <span className="here">Build</span>
      </div>
      <h1 className="serif" style={{ fontSize: 'var(--fs-hero)', lineHeight: 1 }}>Build Your Garden</h1>
      <p style={{ color: 'var(--muted)', maxWidth: 560, marginTop: 10 }}>{solution.name || slug} — tell us your space; we quote material, freight and on-site work separately.</p>

      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', margin: '24px 0' }}>
        {steps.map(function (label, i) {
          return (
            <button key={label} type="button" className={'btn btn-sm ' + (i === step ? 'btn--primary' : 'btn--ghost')} onClick={function () { setStep(i); }}>
              {i + 1}. {label}
            </button>
          );
        })}
      </div>

      <div style={{ background: 'var(--shell)', border: '1px solid var(--line)', borderRadius: 16, padding: 24, maxWidth: 720 }}>
        {step < steps.length - 1 ? (
          <>
            <h2 className="serif" style={{ fontSize: '1.4rem' }}>{steps[step]}</h2>
            <p style={{ color: 'var(--muted)', marginTop: 8, fontSize: '.9rem' }}>
              {step === 0 && 'Share approximate dimensions or photos — no fabricated prices on this step.'}
              {step === 1 && 'Pick materials from our live catalogue; final totals come from the quote engine.'}
              {step === 2 && 'Optional add-ons: edging, planters, on-site styling around Thrissur.'}
            </p>
            <textarea className="textarea" rows="4" placeholder="Notes for this step" value={form.notes} onChange={function (e) { setForm(Object.assign({}, form, { notes: e.target.value })); }} style={{ marginTop: 16, width: '100%' }} />
            <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
              {step > 0 && <button type="button" className="btn btn--secondary" onClick={function () { setStep(step - 1); }}>Back</button>}
              <button type="button" className="btn btn--primary" onClick={function () { setStep(step + 1); }}>{step === steps.length - 2 ? 'Review' : 'Next'}</button>
            </div>
          </>
        ) : (
          <form onSubmit={submitLead}>
            <h2 className="serif" style={{ fontSize: '1.4rem' }}>Request quote</h2>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 16 }}>
              <input className="input" placeholder="Name" required value={form.name} onChange={function (e) { setForm(Object.assign({}, form, { name: e.target.value })); }} />
              <input className="input" placeholder="Phone" required value={form.phone} onChange={function (e) { setForm(Object.assign({}, form, { phone: e.target.value })); }} />
              <input className="input" type="email" placeholder="Email" style={{ gridColumn: 'span 2' }} value={form.email} onChange={function (e) { setForm(Object.assign({}, form, { email: e.target.value })); }} />
              <input className="input" placeholder="Qty / area" value={form.qty} onChange={function (e) { setForm(Object.assign({}, form, { qty: e.target.value })); }} />
              <input className="input" placeholder="Destination" value={form.destination} onChange={function (e) { setForm(Object.assign({}, form, { destination: e.target.value })); }} />
            </div>
            <button type="submit" className="btn btn--terra btn--lg" style={{ marginTop: 18, width: '100%' }}>Send to Owner · get quote</button>
          </form>
        )}
      </div>
    </main>
  );
}

window.BuildGardenPage = BuildGardenPage;