// G-form-modal.jsx — Application + Nomination forms
// Glassy modal with zoom-in/out animation, localStorage progress, ESC + outside close.

const { useEffect, useRef, useState } = React;

const TICKETS = [
  { id: 'reduced', name: 'Reduced', desc: 'Means-based' },
  { id: 'student', name: 'Student', desc: 'Undergraduate' },
  { id: 'phd', name: 'PhD', desc: 'Doctoral' },
  { id: 'professional', name: 'Professional', desc: 'Standard' },
  { id: 'supporter', name: 'Supporter', desc: 'Patron tier' },
];

const APPLY_KEY = 'ursprung-apply-v1';
const NOM_KEY = 'ursprung-nominate-v1';

const APPLY_DEFAULT = {
  name: '', email: '', location: '', age: '',
  portfolio: ['', '', ''],
  ticket: '',
};
const NOM_DEFAULT = {
  nomineeName: '', nomineeLink: '', nominator: '',
  yourName: '', yourContact: '', theirContact: '',
};

function loadFromStorage(key, def) {
  try {
    const raw = localStorage.getItem(key);
    if (!raw) return def;
    return { ...def, ...JSON.parse(raw) };
  } catch (e) { return def; }
}

function ApplyForm({ data, setData, submitted }) {
  const setField = (k, v) => setData({ ...data, [k]: v });
  const setPortfolio = (i, v) => {
    const next = [...data.portfolio];
    next[i] = v;
    setData({ ...data, portfolio: next });
  };
  const addPortfolio = () => setData({ ...data, portfolio: [...data.portfolio, ''] });
  const removePortfolio = (i) => {
    const next = data.portfolio.filter((_, idx) => idx !== i);
    setData({ ...data, portfolio: next.length ? next : [''] });
  };

  return (
    <form onSubmit={(e) => { e.preventDefault(); submitted(); }}>
      <div className="form-eyebrow">Application</div>
      <h3 className="form-title"><em>Apply</em></h3>
      <p className="form-lede">A few details so we can get to know you. All fields are required unless noted.</p>

      <div className="form-field-row">
        <div className="form-field">
          <label className="form-label">Name<span className="req">*</span></label>
          <input className="form-input" required value={data.name} onChange={(e) => setField('name', e.target.value)} placeholder="Your full name" />
        </div>
        <div className="form-field">
          <label className="form-label">Email<span className="req">*</span></label>
          <input className="form-input" type="email" required value={data.email} onChange={(e) => setField('email', e.target.value)} placeholder="you@domain.com" />
        </div>
      </div>

      <div className="form-field-row">
        <div className="form-field">
          <label className="form-label">Location<span className="req">*</span></label>
          <input className="form-input" required value={data.location} onChange={(e) => setField('location', e.target.value)} placeholder="City, country" />
        </div>
        <div className="form-field">
          <label className="form-label">Age<span className="req">*</span></label>
          <input className="form-input" type="number" min="14" max="120" required value={data.age} onChange={(e) => setField('age', e.target.value)} placeholder="—" />
        </div>
      </div>

      <div className="form-field">
        <label className="form-label">Creative portfolio<span className="req">*</span></label>
        {data.portfolio.map((link, i) => (
          <div className="form-portfolio-row" key={i}>
            <input
              className="form-input"
              type="url"
              required={i === 0}
              value={link}
              onChange={(e) => setPortfolio(i, e.target.value)}
              placeholder={i === 0 ? 'https://your-work.com' : 'Another link (optional)'}
            />
            {data.portfolio.length > 1 && (
              <button type="button" className="form-portfolio-remove" onClick={() => removePortfolio(i)} aria-label="Remove link">×</button>
            )}
          </div>
        ))}
        <button type="button" className="form-portfolio-add" onClick={addPortfolio}>+ Add another link</button>
      </div>

      <div className="form-field">
        <label className="form-label">Ticket<span className="req">*</span></label>
        <div className="form-radio-group">
          {TICKETS.map((t) => (
            <label key={t.id} className={`form-radio ${data.ticket === t.id ? 'selected' : ''}`}>
              <input
                type="radio"
                name="ticket"
                value={t.id}
                checked={data.ticket === t.id}
                onChange={() => setField('ticket', t.id)}
                style={{ display: 'none' }}
                required
              />
              <span className="form-radio-circle" />
              <span className="form-radio-name"><em>{t.name}</em></span>
              <span className="form-radio-desc">{t.desc}</span>
            </label>
          ))}
        </div>
      </div>

      <div className="form-actions">
        <span className="form-saved-note">Progress saved automatically</span>
        <button type="submit" className="form-submit">Submit application</button>
      </div>
    </form>
  );
}

function NominateForm({ data, setData, submitted }) {
  const setField = (k, v) => setData({ ...data, [k]: v });
  return (
    <form onSubmit={(e) => { e.preventDefault(); submitted(); }}>
      <div className="form-eyebrow">Nomination</div>
      <h3 className="form-title"><em>Nominate</em></h3>
      <p className="form-lede">Tell us about someone whose work you'd like us to know.</p>

      <div className="form-field">
        <label className="form-label">Who are you nominating?<span className="req">*</span></label>
        <input className="form-input" required value={data.nomineeName} onChange={(e) => setField('nomineeName', e.target.value)} placeholder="Their full name" />
      </div>

      <div className="form-field">
        <label className="form-label">Link to their portfolio<span className="req">*</span></label>
        <input className="form-input" type="url" required value={data.nomineeLink} onChange={(e) => setField('nomineeLink', e.target.value)} placeholder="https://" />
      </div>

      <div className="form-field">
        <label className="form-label">Their name<span className="req">*</span></label>
        <input className="form-input" required value={data.nominator} onChange={(e) => setField('nominator', e.target.value)} placeholder="As they'd like to be addressed" />
      </div>

      <div className="form-field-row">
        <div className="form-field">
          <label className="form-label">Your name<span className="opt">optional</span></label>
          <input className="form-input" value={data.yourName} onChange={(e) => setField('yourName', e.target.value)} placeholder="—" />
        </div>
        <div className="form-field">
          <label className="form-label">Your contact<span className="opt">optional</span></label>
          <input className="form-input" value={data.yourContact} onChange={(e) => setField('yourContact', e.target.value)} placeholder="Email or other" />
        </div>
      </div>

      <div className="form-field">
        <label className="form-label">Their contact<span className="opt">optional</span></label>
        <input className="form-input" value={data.theirContact} onChange={(e) => setField('theirContact', e.target.value)} placeholder="If you have it" />
      </div>

      <div className="form-actions">
        <span className="form-saved-note">Progress saved automatically</span>
        <button type="submit" className="form-submit">Submit nomination</button>
      </div>
    </form>
  );
}

function FormModal({ kind, origin, onClose }) {
  const [renderKind, setRenderKind] = useState(null);
  const [renderOrigin, setRenderOrigin] = useState(null);
  const [open, setOpen] = useState(false);
  const [success, setSuccess] = useState(false);

  const [applyData, setApplyData] = useState(() => loadFromStorage(APPLY_KEY, APPLY_DEFAULT));
  const [nomData, setNomData] = useState(() => loadFromStorage(NOM_KEY, NOM_DEFAULT));

  // persist on change
  useEffect(() => { localStorage.setItem(APPLY_KEY, JSON.stringify(applyData)); }, [applyData]);
  useEffect(() => { localStorage.setItem(NOM_KEY, JSON.stringify(nomData)); }, [nomData]);

  // Open: mount with closed style first, then in next frame flip `open` so transition runs.
  // Close: flip `open` to false immediately, then unmount after transition.
  useEffect(() => {
    if (kind) {
      setRenderKind(kind);
      setRenderOrigin(origin);
      setSuccess(false);
      // mount with open=false then flip to true on next frame so the transition runs
      requestAnimationFrame(() => {
        requestAnimationFrame(() => setOpen(true));
      });
    } else {
      setOpen(false);
      const t = setTimeout(() => { setRenderKind(null); setRenderOrigin(null); }, 600);
      return () => clearTimeout(t);
    }
  }, [kind, origin]);

  // ESC to close
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  // lock body scroll while open
  useEffect(() => {
    if (open) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = prev; };
    }
  }, [open]);

  // Note: the stage's own component owns the .stage-form-open class
  // (driven by formKind in App), so we don't toggle it here.

  if (!renderKind && !open) return null;

  // Compute transform-origin so the zoom emerges from the clicked tile.
  let panelStyle = {};
  if (renderOrigin) {
    const cx = renderOrigin.x + renderOrigin.w / 2;
    const cy = renderOrigin.y + renderOrigin.h / 2;
    const xPct = (cx / window.innerWidth) * 100;
    const yPct = (cy / window.innerHeight) * 100;
    panelStyle = { transformOrigin: `${xPct}% ${yPct}%` };
  }

  const handleSubmit = (which) => {
    setSuccess(true);
    if (which === 'apply') setApplyData(APPLY_DEFAULT);
    if (which === 'nominate') setNomData(NOM_DEFAULT);
    // close after a moment
    setTimeout(() => onClose(), 2400);
  };

  return (
    <div className={`form-modal ${open ? 'open' : ''}`} aria-hidden={!open}>
      <div className="form-backdrop" onClick={onClose} />
      <div className="form-panel" role="dialog" aria-modal="true" style={panelStyle}>
        <button className="form-close" onClick={onClose} aria-label="Close">×</button>
        <div className="form-scroll">
          {renderKind === 'apply' && (
            <ApplyForm data={applyData} setData={setApplyData} submitted={() => handleSubmit('apply')} />
          )}
          {renderKind === 'nominate' && (
            <NominateForm data={nomData} setData={setNomData} submitted={() => handleSubmit('nominate')} />
          )}
        </div>
        <div className={`form-success ${success ? 'show' : ''}`}>
          <div className="form-success-h"><em>Thank you.</em></div>
          <div className="form-success-p">We'll be in touch.</div>
        </div>
      </div>
    </div>
  );
}

window.FormModal = FormModal;