/* =========================================================================
   Morning Mob — register interest
   No payment is taken. Visitors leave their contact details to register
   interest in the tee, and we reach out when it's ready. This view
   repurposes the former checkout route (still keyed 'checkout' in the app).
   ========================================================================= */

/* Register-interest submissions are forwarded to a Google Form. The form has
   Name / Email / Note / "interested in?" questions — but the last is a
   multiple-choice field, which only accepts its preset options, so we fold the
   tee selection (and newsletter opt-in) into the free-text Note instead. That
   way nothing a visitor tells us is ever dropped. Field IDs come from the
   form's HTML (the `entry.NNN` names). Update GFORM if the form is rebuilt. */
const GFORM = {
  action: 'https://docs.google.com/forms/d/e/1FAIpQLSfW0g0D2EE47ywzVMDIaAkeXRusW0Nudn71nvRZMdNONJM_JA/formResponse',
  name: 'entry.1771799390',
  email: 'entry.296265152',
  note: 'entry.2126383156',
};

/* The one place anything reaches the Google Form. Used by register-interest and by
   the contact form on the Contact page — before this existed, contact messages were
   silently discarded while telling the sender they had been received. */
function postToGoogleForm({ name, email, note }) {
  const body = new URLSearchParams();
  body.append(GFORM.name, (name || '').trim());
  body.append(GFORM.email, (email || '').trim());
  body.append(GFORM.note, note || '');

  // no-cors: Google's endpoint doesn't return CORS headers, so we can't read
  // the response — but the submission is still recorded. Failures are swallowed
  // so a network hiccup never blocks the visitor's confirmation screen.
  fetch(GFORM.action, {
    method: 'POST',
    mode: 'no-cors',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: body.toString(),
  }).catch(() => {});
}

function sendToGoogleForm(f, items) {
  const interest = (items || [])
    .map((it) => it.product.name
      + (it.colour ? ' — ' + it.colour : '')
      + (it.size ? ' / ' + it.size : '')
      + (it.qty ? ' ×' + it.qty : ''))
    .join('; ');
  const note = [
    f.note && f.note.trim(),
    interest && 'Interested in: ' + interest,
    'Newsletter: ' + (f.news ? 'yes' : 'no'),
  ].filter(Boolean).join('\n');

  postToGoogleForm({ name: f.name, email: f.email, note });
}

/* Buttondown — the list proper, and the same list the band feeds. Fires only when
   the visitor ticks the box; the Google Form submission above always fires and is
   what carries the product, colourway and size Linus needs in order to reply. */
function sendToList(email) {
  if (!MM_LIST_USERNAME) return;
  const body = new URLSearchParams();
  body.append('email', email.trim());
  body.append('embed', '1');
  body.append('tag', 'register-interest');
  fetch(mmListAction(), {
    method: 'POST',
    mode: 'no-cors',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: body.toString(),
  }).catch(() => {});
}

function Field({ label, value, onChange, type = 'text', placeholder, error, half, autoComplete, textarea }) {
  const [focus, setFocus] = useState(false);
  const base = { width: '100%', padding: textarea ? '12px 14px' : '0 14px', background: '#fff', borderRadius: 0, outline: 'none',
    border: '1px solid ' + (error ? 'var(--rust)' : focus ? 'var(--hairline-strong)' : 'var(--hairline)'),
    fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 300, color: 'var(--ink)' };
  return (
    <label style={{ display: 'block', gridColumn: half ? 'span 1' : '1 / -1' }}>
      <span style={{ display: 'block', fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400,
        letterSpacing: '1.5px', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 8 }}>{label}</span>
      {textarea ? (
        <textarea value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} rows={3}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={{ ...base, resize: 'vertical', lineHeight: 1.5 }} />
      ) : (
        <input value={value} onChange={(e) => onChange(e.target.value)} type={type} placeholder={placeholder}
          autoComplete={autoComplete} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={{ ...base, height: 46 }} />
      )}
      {error && <span style={{ display: 'block', fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 300, color: 'var(--rust)', marginTop: 6 }}>{error}</span>}
    </label>
  );
}

/* The tees the visitor has flagged interest in — no totals, no payment. */
function InterestSummary({ items }) {
  return (
    <aside style={{ background: 'var(--surface-soft)', padding: 28, position: 'sticky', top: 96, alignSelf: 'start' }}>
      <Eyebrow color="var(--ink)" style={{ display: 'block', marginBottom: 20 }}>You're interested in</Eyebrow>
      {items.map((it) => (
        <div key={it.product.id + (it.size || '') + (it.colour || '')} style={{ display: 'flex', gap: 14, paddingBottom: 18, marginBottom: 18, borderBottom: '1px solid var(--hairline)' }}>
          <div style={{ width: 56, flex: 'none' }}><Photo id={'sum-' + it.product.id + '-' + (it.colour || '')} src={itemThumb(it)} label="" /></div>
          <div style={{ flex: 1 }}>
            <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 15, fontWeight: 400, color: 'var(--ink)', margin: 0 }}>{it.product.name}</h3>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 300, color: 'var(--muted)', marginTop: 4 }}>{[it.colour, it.size && 'Size ' + it.size, 'Qty ' + it.qty].filter(Boolean).join(' · ')}</div>
          </div>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 300, color: 'var(--body)', whiteSpace: 'nowrap' }}>{money(it.product.price)}</span>
        </div>
      ))}
      <p style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 300, color: 'var(--muted)', margin: 0, lineHeight: 1.6, letterSpacing: '0.3px' }}>
        No payment is taken here. Register your interest and we'll be in touch — nothing else in between.</p>
    </aside>
  );
}

function Checkout({ items, onDone, onShop, go }) {
  /* `news` starts false on purpose. PDPA wants consent to be affirmative, and a
     pre-ticked box is an assumption rather than a choice. */
  const [f, setF] = useState({ name: '', email: '', note: '', news: false });
  const [errs, setErrs] = useState({});
  const [done, setDone] = useState(false);
  const set = (k) => (v) => setF((p) => ({ ...p, [k]: v }));

  if (done) return <Confirmation email={f.email} news={f.news} onShop={onShop} go={go} />;

  if (items.length === 0) {
    return (
      <div style={{ maxWidth: 640, margin: '0 auto', padding: '96px 28px', textAlign: 'center' }}>
        <h1 style={{ fontFamily: 'var(--font-serif)', fontSize: 32, fontWeight: 400, color: 'var(--ink)', margin: 0 }}>Nothing saved yet</h1>
        <p style={{ marginTop: 16, color: 'var(--body)' }}>Add the tee to register your interest.</p>
        <button onClick={onShop} style={primaryBtn}>Shop the tee</button>
      </div>
    );
  }

  const submit = () => {
    const e = {};
    if (!f.name.trim()) e.name = 'Required';
    if (!f.email.trim()) e.email = 'Required';
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.email)) e.email = 'Enter a valid email';
    setErrs(e);
    if (Object.keys(e).length) return;
    sendToGoogleForm(f, items);
    if (f.news) sendToList(f.email);
    setDone(true);
    onDone();
    window.scrollTo(0, 0);
  };

  return (
    <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '40px 28px 96px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 36 }}>
        <h1 style={{ fontFamily: 'var(--font-serif)', fontSize: 28, fontWeight: 400, color: 'var(--ink)', margin: 0 }}>Register interest</h1>
        <button onClick={onShop} style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '1px',
          textTransform: 'uppercase', color: 'var(--muted)', background: 'none', border: 'none', cursor: 'pointer' }}>Continue shopping</button>
      </div>

      <div className="mm-checkout" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'start' }}>
        <div>
          <p style={{ color: 'var(--body)', margin: '0 0 28px', maxWidth: 460, lineHeight: 1.6 }}>
            We're not taking payment on the site right now. Leave your details to register your interest and we'll be in touch — no payment, no spam.</p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Field label="Name" value={f.name} onChange={set('name')} error={errs.name} autoComplete="name" />
            <Field label="Email address" value={f.email} onChange={set('email')} type="email" placeholder="you@example.com" error={errs.email} autoComplete="email" />
            <Field label="Anything you'd like us to know (optional)" value={f.note} onChange={set('note')} textarea placeholder="Size you're after, a question, or just hello." />
            <label style={{ gridColumn: '1 / -1', display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
              <input type="checkbox" checked={f.news} onChange={(e) => set('news')(e.target.checked)} style={{ width: 16, height: 16, accentColor: '#000' }} />
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 300, color: 'var(--body)' }}>Also put me on the list — a note when a drop is coming, and 10% off my first order.</span>
            </label>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', marginTop: 36 }}>
            <button onClick={submit} style={{ ...primaryBtn, marginLeft: 'auto', marginTop: 0, width: 'auto', padding: '0 40px' }}>Register interest</button>
          </div>
        </div>

        <InterestSummary items={items} />
      </div>
    </div>
  );
}

function Confirmation({ email, news, onShop, go }) {
  return (
    <div style={{ maxWidth: 640, margin: '0 auto', padding: '96px 28px', textAlign: 'center' }}>
      <div style={{ width: 56, height: 56, margin: '0 auto 28px', border: '1px solid var(--hairline-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--success)' }}>
        <Icon name="check" size={26} stroke={1.4} />
      </div>
      <Eyebrow color="var(--success)">Interest registered</Eyebrow>
      <h1 style={{ fontFamily: 'var(--font-serif)', fontSize: 36, fontWeight: 400, color: 'var(--ink)', margin: '16px 0 0', lineHeight: 1.15 }}>Thank you.</h1>
      <p style={{ marginTop: 20, color: 'var(--body)', maxWidth: 440, marginInline: 'auto' }}>
        We'll be in touch at {email || 'your inbox'} about the Mocha Mode Tee — we'll confirm the piece, the price and the postage, and take it from there.</p>
      {news && (
        <p style={{ marginTop: 14, color: 'var(--body)', maxWidth: 440, marginInline: 'auto' }}>
          Check your email for a note too — your 10% is in it. Reply when you're ready and we'll take it off.</p>
      )}
      <div style={{ display: 'flex', gap: 16, justifyContent: 'center', marginTop: 36, flexWrap: 'wrap' }}>
        <button onClick={onShop} style={{ ...primaryBtn, marginTop: 0, width: 'auto', padding: '0 32px' }}>Continue shopping</button>
        <a href="https://www.instagram.com/morning_mob/" target="_blank" rel="noopener noreferrer" style={{ ...ghostBtn, marginTop: 0, width: 'auto', padding: '0 32px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none' }}>Follow @morning_mob</a>
      </div>
    </div>
  );
}

const primaryBtn = { height: 48, marginTop: 32, background: 'var(--ink)', color: '#fff', border: 'none',
  fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '2px', textTransform: 'uppercase', cursor: 'pointer' };
const ghostBtn = { height: 48, background: 'none', color: 'var(--ink)', border: '1px solid var(--ink)',
  fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '2px', textTransform: 'uppercase', cursor: 'pointer' };

Object.assign(window, { Checkout, primaryBtn, ghostBtn, postToGoogleForm });