/* global React, t */

function ContactPage() {
  const [form, setForm] = React.useState({
    name: '',
    email: '',
    subject: '',
    message: '',
    website: '',
  });
  const [sending, setSending] = React.useState(false);
  const [result, setResult] = React.useState({ error: '', success: '' });

  const onChange = (key) => (event) => {
    const value = event.target.value;
    setForm((prev) => ({ ...prev, [key]: value }));
  };

  const onSubmit = async (event) => {
    event.preventDefault();
    if (sending) return;
    setResult({ error: '', success: '' });
    setSending(true);

    try {
      const payload = {
        name: form.name.trim(),
        email: form.email.trim(),
        subject: form.subject.trim(),
        message: form.message.trim(),
        website: form.website.trim(), // honeypot
        source: 'hub',
        path: '#contact',
      };

      const res = await fetch('/contact/submit', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const data = await res.json().catch(() => ({}));

      if (!res.ok || data.ok === false) {
        throw new Error(data.error || 'Unable to send your message right now.');
      }

      setForm({ name: '', email: '', subject: '', message: '', website: '' });
      setResult({ error: '', success: 'Message sent. We usually reply within 1–3 days.' });
    } catch (err) {
      setResult({ error: err.message || 'Unable to send your message right now.', success: '' });
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="section container">
      <h1>{t('footer.contact')}</h1>
      <p className="section__lead" style={{ maxWidth: 720 }}>
        Need support, found a bug, or have partnership ideas? Send a message below.
      </p>

      <form className="card" style={{ marginTop: 16, display: 'grid', gap: 12, maxWidth: 820 }} onSubmit={onSubmit}>
        <div style={{ display: 'grid', gap: 8 }}>
          <label htmlFor="contact-name">Name</label>
          <input id="contact-name" className="input" autoComplete="name" value={form.name} onChange={onChange('name')} maxLength={120} required />
        </div>

        <div style={{ display: 'grid', gap: 8 }}>
          <label htmlFor="contact-email">Email</label>
          <input id="contact-email" className="input" type="email" autoComplete="email" value={form.email} onChange={onChange('email')} maxLength={160} required />
        </div>

        <div style={{ display: 'grid', gap: 8 }}>
          <label htmlFor="contact-subject">Subject</label>
          <input id="contact-subject" className="input" value={form.subject} onChange={onChange('subject')} maxLength={180} required />
        </div>

        <div style={{ display: 'grid', gap: 8 }}>
          <label htmlFor="contact-message">Message</label>
          <textarea id="contact-message" className="input" rows={7} value={form.message} onChange={onChange('message')} maxLength={8000} required />
        </div>

        <input
          tabIndex={-1}
          autoComplete="off"
          value={form.website}
          onChange={onChange('website')}
          name="website"
          aria-hidden="true"
          style={{ position: 'absolute', opacity: 0, pointerEvents: 'none' }}
        />

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center' }}>
          <button type="submit" className="btn btn--primary" disabled={sending}>
            {sending ? 'Sending…' : 'Send message'}
          </button>
          <a className="btn btn--ghost" href="mailto:support@shastes.com">Email instead</a>
          <a className="btn btn--ghost" href="https://discord.gg/dySkhAz5" target="_blank" rel="noopener">Join Discord</a>
        </div>
      </form>

      {result.error && <div className="card" style={{ marginTop: 14, maxWidth: 820, borderColor: 'rgba(255,92,169,.5)', color: '#ffc4de' }}>{result.error}</div>}
      {result.success && <div className="card" style={{ marginTop: 14, maxWidth: 820, borderColor: 'rgba(96,220,140,.5)', color: '#ccffd9' }}>{result.success}</div>}
    </section>
  );
}