// propose.jsx — "Föreslå ett projekt" popup-modal

function LightField({ label, placeholder, type = 'text', textarea, name }) {
  const T = SITE_TOKENS;
  const Tag = textarea ? 'textarea' : 'input';
  return (
    <div>
      <label style={{
        display: 'block', fontSize: 11, fontWeight: 600,
        color: T.muted, marginBottom: 7,
        letterSpacing: '0.06em', textTransform: 'uppercase',
      }}>
        {label}
      </label>
      <Tag
        name={name}
        type={textarea ? undefined : type}
        placeholder={placeholder}
        rows={textarea ? 4 : undefined}
        style={{
          width: '100%', padding: '13px 16px', borderRadius: 12,
          border: 0, background: T.cream,
          color: T.ink, fontSize: 14, fontFamily: 'inherit',
          outline: 'none', resize: textarea ? 'vertical' : undefined,
          boxShadow: `inset 0 0 0 1.5px ${T.line}`,
          transition: 'box-shadow .15s',
        }}
        onFocus={e => { e.target.style.boxShadow = `inset 0 0 0 1.5px ${T.forest}`; }}
        onBlur={e  => { e.target.style.boxShadow = `inset 0 0 0 1.5px ${T.line}`; }}
      />
    </div>
  );
}

function ForeslaProjektModal({ onClose }) {
  const [submitted, setSubmitted] = React.useState(false);
  const T = SITE_TOKENS;

  // Stäng med Escape-tangenten
  React.useEffect(() => {
    const handler = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [onClose]);

  // Lås scroll på body när modal är öppen
  React.useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, []);

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0,
        background: 'rgba(31,42,36,0.62)',
        backdropFilter: 'blur(7px)',
        WebkitBackdropFilter: 'blur(7px)',
        zIndex: 2000,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 20,
      }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          background: T.paper, borderRadius: 28,
          padding: 44, width: '100%', maxWidth: 520,
          boxShadow: '0 40px 100px rgba(31,42,36,0.28), 0 1px 0 rgba(255,255,255,0.4)',
          position: 'relative',
          maxHeight: '90vh', overflowY: 'auto',
        }}
      >
        {/* Stäng-knapp */}
        <button
          onClick={onClose}
          aria-label="Stäng"
          style={{
            position: 'absolute', top: 18, right: 18,
            width: 36, height: 36, borderRadius: '50%',
            background: T.cream2, border: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', transition: 'background .15s',
          }}
          onMouseEnter={e => e.currentTarget.style.background = T.line}
          onMouseLeave={e => e.currentTarget.style.background = T.cream2}
        >
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M1 1 L11 11 M11 1 L1 11" stroke={T.ink2} strokeWidth="2" strokeLinecap="round"/>
          </svg>
        </button>

        {submitted ? (
          /* ── Tack-vy ── */
          <div style={{ textAlign: 'center', padding: '8px 0 4px' }}>
            <div style={{
              width: 72, height: 72, borderRadius: '50%',
              background: T.forest, margin: '0 auto 22px',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="34" height="34" viewBox="0 0 24 24">
                <path d="M4 13 L9 18 L20 6" stroke="#FBF7F0" strokeWidth="2.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
            <h2 style={{ fontSize: 28, color: T.ink }}>Tack för ditt förslag!</h2>
            <p style={{ fontSize: 15, color: T.ink2, marginTop: 14, lineHeight: 1.6, maxWidth: 360, margin: '14px auto 0' }}>
              Vi tar upp det på nästa styrelsemöte. Hör vi att vi behöver mer info kontaktar vi dig.
            </p>
            <button
              onClick={onClose}
              className="btn btn-primary"
              style={{ marginTop: 28 }}
            >
              Stäng fönstret
            </button>
          </div>
        ) : (
          /* ── Formulär ── */
          <>
            {/* Ikon-badge */}
            <div style={{
              width: 50, height: 50, borderRadius: 16,
              background: T.coral + '18',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 18,
            }}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={T.coral} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12 2 L15.09 8.26 L22 9.27 L17 14.14 L18.18 21.02 L12 17.77 L5.82 21.02 L7 14.14 L2 9.27 L8.91 8.26 Z"/>
              </svg>
            </div>

            <div className="eyebrow" style={{ marginBottom: 10 }}>Projektidé</div>
            <h2 style={{ fontSize: 28, lineHeight: 1.1 }}>
              Saknar du något i{' '}
              <span className="serif" style={{ color: T.coral }}>Sandared?</span>
            </h2>
            <p style={{ fontSize: 14, color: T.ink2, marginTop: 10, lineHeight: 1.6 }}>
              Fyll i ditt namn, adress och vad du vill föreslå — styrelsen tittar på alla inkomna idéer.
            </p>

            {/* Formulär */}
            <form onSubmit={(e) => {
              e.preventDefault();
              const fd = new FormData(e.target);
              API.post('proposals', {
                namn:    fd.get('namn')    || '',
                telefon: fd.get('telefon') || '',
                adress:  fd.get('adress')  || '',
                forslag: fd.get('forslag') || '',
              })
                .then(() => setSubmitted(true))
                .catch(() => alert('Något gick fel när förslaget skulle skickas. Försök igen.'));
            }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 24 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <LightField name="namn"    label="Ditt namn" placeholder="Anna Andersson"/>
                  <LightField name="telefon" label="Telefon (valfritt)" placeholder="070-000 00 00" type="tel"/>
                </div>
                <LightField name="adress" label="Adress" placeholder="Storgatan 1, Sandared"/>
                <LightField
                  name="forslag"
                  label="Ditt förslag"
                  placeholder="Berätta vad du saknar eller vill förbättra i Sandared…"
                  textarea
                />
              </div>

              {/* Info-rad */}
              <div style={{
                marginTop: 16, padding: '11px 14px', borderRadius: 10,
                background: T.cream,
                display: 'flex', alignItems: 'flex-start', gap: 10,
              }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={T.forest} strokeWidth="2" style={{ flexShrink: 0, marginTop: 1 }}>
                  <circle cx="12" cy="12" r="10"/><path d="M12 8 v5"/><circle cx="12" cy="16" r=".5" fill={T.forest}/>
                </svg>
                <span style={{ fontSize: 12, color: T.muted, lineHeight: 1.55 }}>
                  Dina uppgifter används enbart för att vi ska kunna kontakta dig och delas aldrig vidare.
                </span>
              </div>

              <button
                type="submit"
                className="btn btn-primary"
                style={{ width: '100%', justifyContent: 'center', marginTop: 18, padding: '17px 24px', fontSize: 15 }}
              >
                Skicka in förslag →
              </button>
            </form>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { LightField, ForeslaProjektModal });