/* global React, sendForm, ArrowUpRight, COMPANY_EMAIL */
const { useState, useEffect, useRef } = React;

// ---------- Shared form primitives ----------
function Field({ label, children, required, hint }) {
  return (
    <label className="block">
      <span className="form-label">{label} {required && <span className="req">*</span>}</span>
      {children}
      {hint && <span className="form-hint">{hint}</span>}
    </label>
  );
}

function FormStatus({ status }) {
  if (!status) return null;
  if (status.state === 'sending') {
    return <div className="form-status sending"><span className="dot-spin"/> Sending…</div>;
  }
  if (status.state === 'sent') {
    return <div className="form-status sent">✓ {status.via === 'mailto' ? 'Email window opened — hit send to finish.' : 'Sent! We\'ll be in touch shortly.'}</div>;
  }
  if (status.state === 'error') {
    return <div className="form-status error">Something went wrong. Please email <a href={`mailto:${COMPANY_EMAIL}`} className="underline">{COMPANY_EMAIL}</a> directly.</div>;
  }
  return null;
}

// ---------- Idea Submission Form (habit/health ideas) ----------
function IdeaForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [title, setTitle] = useState('');
  const [idea, setIdea] = useState('');
  const [status, setStatus] = useState(null);

  async function onSubmit(e) {
    e.preventDefault();
    if (!name || !email || !idea) return;
    setStatus({ state: 'sending' });
    try {
      const res = await sendForm({
        subject: `Idea: ${title || '(untitled)'} — from ${name}`,
        fields: {
          'Type': 'Habit / Health idea submission',
          'Name': name,
          'Email': email,
          'Idea title': title,
          'Idea': idea,
        },
      });
      setStatus({ state: 'sent', via: res.via });
      if (res.via === 'ajax') { setName(''); setEmail(''); setTitle(''); setIdea(''); }
    } catch (err) {
      setStatus({ state: 'error' });
    }
  }

  return (
    <form className="card-form" onSubmit={onSubmit}>
      <div className="card-form-grid">
        <Field label="Your name" required>
          <input className="form-input" value={name} onChange={e => setName(e.target.value)} required placeholder="Jane Doe"/>
        </Field>
        <Field label="Email" required>
          <input type="email" className="form-input" value={email} onChange={e => setEmail(e.target.value)} required placeholder="you@example.com"/>
        </Field>
      </div>
      <Field label="Idea title">
        <input className="form-input" value={title} onChange={e => setTitle(e.target.value)} placeholder="A short headline for your idea"/>
      </Field>
      <Field label="Tell us about your idea" required hint="Be specific — what habit or health problem does it solve? Who is it for?">
        <textarea className="form-input form-textarea" value={idea} onChange={e => setIdea(e.target.value)} required rows={6} placeholder="I've been thinking about a way to…"/>
      </Field>

      <div className="form-actions">
        <FormStatus status={status}/>
        <button type="submit" className="btn-pill btn-pill-dark" disabled={status?.state === 'sending'}>
          {status?.state === 'sending' ? 'Sending…' : 'Submit idea'}
          <span className="icon-mark">
            <ArrowUpRight size={11}/>
          </span>
        </button>
      </div>
    </form>
  );
}

// ---------- Application Modal ----------
function ApplicationModal() {
  const [open, setOpen] = useState(false);
  const [role, setRole] = useState('');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [linkedin, setLinkedin] = useState('');
  const [motivation, setMotivation] = useState('');
  const [status, setStatus] = useState(null);
  const firstRef = useRef(null);

  useEffect(() => {
    const onOpen = (e) => {
      setRole(e.detail?.role || '');
      setStatus(null);
      setOpen(true);
      setTimeout(() => firstRef.current?.focus(), 60);
    };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('open-apply', onOpen);
    window.addEventListener('keydown', onKey);
    return () => {
      window.removeEventListener('open-apply', onOpen);
      window.removeEventListener('keydown', onKey);
    };
  }, []);

  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  async function onSubmit(e) {
    e.preventDefault();
    if (!name || !email || !motivation) return;
    setStatus({ state: 'sending' });
    try {
      const res = await sendForm({
        subject: `Application — ${role || 'Open application'} — ${name}`,
        fields: {
          'Type': 'Job application',
          'Role': role || '(general)',
          'Name': name,
          'Email': email,
          'LinkedIn / portfolio': linkedin || '—',
          'Motivation letter': motivation,
        },
      });
      setStatus({ state: 'sent', via: res.via });
      if (res.via === 'ajax') { setName(''); setEmail(''); setLinkedin(''); setMotivation(''); }
    } catch {
      setStatus({ state: 'error' });
    }
  }

  if (!open) return null;

  return (
    <div className="modal-backdrop" onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}>
      <div className="modal-panel" role="dialog" aria-modal="true" aria-label="Apply">
        <div className="modal-head">
          <div>
            <div className="eyebrow">Apply to Core Habits</div>
            <h3 className="modal-title">{role || 'Open application'}</h3>
            <div className="modal-sub">Vilnius · Hybrid · Sent to {COMPANY_EMAIL}</div>
          </div>
          <button className="modal-close" onClick={() => setOpen(false)} aria-label="Close">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 5l14 14M19 5L5 19"/></svg>
          </button>
        </div>

        <form className="modal-body" onSubmit={onSubmit}>
          <Field label="Your name" required>
            <input ref={firstRef} className="form-input" value={name} onChange={e => setName(e.target.value)} required placeholder="Jane Doe"/>
          </Field>
          <div className="card-form-grid">
            <Field label="Email" required>
              <input type="email" className="form-input" value={email} onChange={e => setEmail(e.target.value)} required placeholder="you@example.com"/>
            </Field>
            <Field label="LinkedIn / portfolio">
              <input className="form-input" value={linkedin} onChange={e => setLinkedin(e.target.value)} placeholder="https://…"/>
            </Field>
          </div>
          {!role && (
            <Field label="Which role?">
              <input className="form-input" value={role} onChange={e => setRole(e.target.value)} placeholder="Senior UI/UX Designer, Dart Developer, …"/>
            </Field>
          )}
          <Field label="Motivation letter" required hint="Why Core Habits? What would you bring? Be specific.">
            <textarea className="form-input form-textarea" value={motivation} onChange={e => setMotivation(e.target.value)} required rows={8} placeholder="I'd love to join Core Habits because…"/>
          </Field>

          <div className="form-actions">
            <FormStatus status={status}/>
            <button type="submit" className="btn-pill btn-pill-dark" disabled={status?.state === 'sending'}>
              {status?.state === 'sending' ? 'Sending…' : 'Send application'}
              <span className="icon-mark">
                <ArrowUpRight size={11}/>
              </span>
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

// ---------- Contact Modal ----------
function ContactModal() {
  const [open, setOpen] = useState(false);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');
  const [status, setStatus] = useState(null);
  const firstRef = useRef(null);

  useEffect(() => {
    const onOpen = () => {
      setStatus(null);
      setOpen(true);
      setTimeout(() => firstRef.current?.focus(), 60);
    };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('open-contact', onOpen);
    window.addEventListener('keydown', onKey);
    return () => {
      window.removeEventListener('open-contact', onOpen);
      window.removeEventListener('keydown', onKey);
    };
  }, []);

  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  async function onSubmit(e) {
    e.preventDefault();
    if (!name || !email || !message) return;
    setStatus({ state: 'sending' });
    try {
      const res = await sendForm({
        subject: `Contact: ${subject || '(no subject)'} — from ${name}`,
        fields: {
          'Type': 'Contact form',
          'Name': name,
          'Email': email,
          'Subject': subject,
          'Message': message,
        },
      });
      setStatus({ state: 'sent', via: res.via });
      if (res.via === 'ajax') { setName(''); setEmail(''); setSubject(''); setMessage(''); }
    } catch {
      setStatus({ state: 'error' });
    }
  }

  if (!open) return null;

  return (
    <div className="modal-backdrop" onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}>
      <div className="modal-panel" role="dialog" aria-modal="true" aria-label="Contact Core Habits">
        <div className="modal-head">
          <div>
            <div className="eyebrow">Contact us</div>
            <h3 className="modal-title">Send us a message</h3>
            <div className="modal-sub">Goes directly to {COMPANY_EMAIL}</div>
          </div>
          <button className="modal-close" onClick={() => setOpen(false)} aria-label="Close">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 5l14 14M19 5L5 19"/></svg>
          </button>
        </div>

        <form className="modal-body" onSubmit={onSubmit}>
          <div className="card-form-grid">
            <Field label="Your name" required>
              <input ref={firstRef} className="form-input" value={name} onChange={e => setName(e.target.value)} required placeholder="Jane Doe"/>
            </Field>
            <Field label="Email" required>
              <input type="email" className="form-input" value={email} onChange={e => setEmail(e.target.value)} required placeholder="you@example.com"/>
            </Field>
          </div>
          <Field label="Subject">
            <input className="form-input" value={subject} onChange={e => setSubject(e.target.value)} placeholder="Partnership, press, general inquiry…"/>
          </Field>
          <Field label="Message" required>
            <textarea className="form-input form-textarea" value={message} onChange={e => setMessage(e.target.value)} required rows={7} placeholder="How can we help?"/>
          </Field>

          <div className="form-actions">
            <FormStatus status={status}/>
            <button type="submit" className="btn-pill btn-pill-dark" disabled={status?.state === 'sending'}>
              {status?.state === 'sending' ? 'Sending…' : 'Send message'}
              <span className="icon-mark">
                <ArrowUpRight size={11}/>
              </span>
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { IdeaForm, ApplicationModal, ContactModal });