/* ============================================================
   DONATE — widget + full page
   ============================================================ */

const PRESETS = [300, 500, 1000, 3000, 5000];
const IMPACT_BY_AMOUNT = {
  300: 'печать рекламного буклета для привлечения волонтёров',
  500: 'билет на электричку для куратора в маленький город, чтобы найти подростков, кому нужен значимый взрослый',
  1000: 'консультация психолога для наставника в случае, если ему нужна помощь',
  3000: 'проведение групповой супервизии для наставников командой проекта',
  5000: 'участие пары наставник-подопечный в традиционном мероприятии фонда / фотосессии',
};
const fmt = (n) => n.toLocaleString('ru-RU');

function reachDonationGoal(goal, reference, amount) {
  const key = `nl-goal:${goal}:${reference || 'no-reference'}`;
  try {
    if (reference && window.sessionStorage && window.sessionStorage.getItem(key)) return;
  } catch (error) {}
  const sent = window.nlReachGoal ? window.nlReachGoal(goal, { reference, amount }) : false;
  try {
    if (sent && reference && window.sessionStorage) window.sessionStorage.setItem(key, '1');
  } catch (error) {}
}

function readDonationParams() {
  const params = new URLSearchParams(window.location.search);
  return {
    state: params.get('donation') || '',
    reference: params.get('reference') || '',
    mode: params.get('mode') || '',
  };
}

function DonateWidget({ compact }) {
  const [mode, setMode] = useState('month'); // 'month' | 'once'
  const [amount, setAmount] = useState(1000);
  const [custom, setCustom] = useState('');
  const [fields, setFields] = useState({ name: '', email: '', phone: '', consent: false });
  const [errors, setErrors] = useState({});
  const [submitError, setSubmitError] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [feedback, setFeedback] = useState(() => ({ loading: false, state: '', text: '' }));
  const isCustom = amount === 'custom';
  const value = isCustom ? (parseInt(custom, 10) || 0) : amount;
  const impact = !isCustom && IMPACT_BY_AMOUNT[amount];

  useEffect(() => {
    const params = readDonationParams();
    if (!params.state) return;
    let cancelled = false;

    if (params.state === 'success' && params.reference) {
      setFeedback({ loading: true, state: 'info', text: 'Проверяем статус платежа…' });
      const checkStatus = (attempt = 0) => {
        fetch(`/api/donation-status?reference=${encodeURIComponent(params.reference)}&t=${Date.now()}`, { cache: 'no-store' })
          .then((response) => {
            if (!response.ok) throw new Error('status');
            return response.json();
          })
          .then((payload) => {
            if (cancelled) return;
            if (payload.paymentStatus === 'paid') {
              reachDonationGoal(
                params.mode === 'month' ? 'pay_repeat' : 'pay_once',
                params.reference,
                payload.amountRub
              );
              setFeedback({
                loading: false,
                state: 'success',
                text: params.mode === 'month'
                  ? 'Спасибо. Ежемесячное пожертвование оформлено, первое списание прошло успешно.'
                  : 'Спасибо. Платёж прошёл успешно.',
              });
              return;
            }
            if (attempt < 14) {
              setTimeout(() => checkStatus(attempt + 1), attempt < 4 ? 2000 : 5000);
              return;
            }
            setFeedback({
              loading: false,
              state: 'info',
              text: 'Платёжная форма завершена. Ожидаем подтверждение от платёжного сервиса.',
            });
          })
          .catch(() => {
            if (cancelled) return;
            if (attempt < 14) {
              setTimeout(() => checkStatus(attempt + 1), attempt < 4 ? 2000 : 5000);
              return;
            }
            setFeedback({
              loading: false,
              state: 'info',
              text: 'Платёжная форма завершена. Если деньги списались, подтверждение появится через несколько секунд.',
            });
          });
      };
      checkStatus();
      return () => { cancelled = true; };
    }

    if (params.state === 'success') {
      setFeedback({
        loading: false,
        state: 'info',
        text: 'Платёжная форма завершена. Ожидаем подтверждение от платёжного сервиса.',
      });
      return;
    }

    if (params.state === 'fail') {
      setFeedback({
        loading: false,
        state: 'error',
        text: 'Платёж не был завершён. Проверьте данные карты или попробуйте ещё раз.',
      });
    }
  }, []);

  const setField = (key) => (event) => {
    const nextValue = key === 'consent' ? event.target.checked : event.target.value;
    setFields((current) => ({ ...current, [key]: nextValue }));
    setErrors((current) => (current[key] ? { ...current, [key]: '' } : current));
  };

  const validate = () => {
    const nextErrors = {};
    if (value < 50) nextErrors.amount = 'Минимальная сумма пожертвования — 50 ₽';
    if (!fields.email.trim() || !fields.email.includes('@')) nextErrors.email = 'Укажите корректный e-mail';
    if (!fields.consent) nextErrors.consent = 'Нужно согласие с условиями пожертвования';
    setErrors(nextErrors);
    return Object.keys(nextErrors).length === 0;
  };

  const handleDonate = async () => {
    if (submitting) return;
    if (!validate()) return;

    setSubmitting(true);
    setSubmitError('');

    try {
      const response = await fetch('/api/create-donation', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          mode,
          amount: value,
          name: fields.name.trim(),
          email: fields.email.trim(),
          phone: fields.phone.trim(),
          consent: fields.consent,
        }),
      });
      const payload = await response.json();
      if (!response.ok) {
        throw new Error(payload.error || 'Не удалось создать платёж');
      }
      window.location.href = payload.redirectUrl;
    } catch (err) {
      setSubmitError(err.message || 'Не удалось создать платёж');
      setSubmitting(false);
    }
  };

  return (
    <div className={`donate-widget ${compact ? 'is-compact' : ''}`}>
      <div className="dw-modes">
        <button className={`dw-mode ${mode === 'month' ? 'active' : ''}`} onClick={() => setMode('month')}>
          <Icon name="repeat" size={18} /> Ежемесячно
        </button>
        <button className={`dw-mode ${mode === 'once' ? 'active' : ''}`} onClick={() => setMode('once')}>
          <Icon name="heart" size={18} /> Разово
        </button>
      </div>

      {mode === 'month' && (
        <div className="dw-hint"><Icon name="sprout" size={16} /> Регулярная помощь — самая ценная: она даёт фонду уверенность в завтрашнем дне.</div>
      )}

      <div className="dw-amounts">
        {PRESETS.map((p) => (
          <button key={p} className={`dw-amount ${amount === p ? 'active' : ''}`} onClick={() => setAmount(p)}>
            {fmt(p)} ₽
          </button>
        ))}
        <button className={`dw-amount dw-amount-custom ${isCustom ? 'active' : ''}`} onClick={() => setAmount('custom')}>
          Своя сумма
        </button>
      </div>

      {isCustom && (
        <div className="dw-custom">
          <input
            type="number" inputMode="numeric" min="50" placeholder="Введите сумму"
            value={custom} onChange={(e) => setCustom(e.target.value)} autoFocus
          />
          <span>₽</span>
        </div>
      )}

      {impact && (
        <div className="dw-impact">
          <span className="dw-impact-emoji"><Icon name="check" size={16} /></span>
          <span><b>{fmt(amount)} ₽</b> — это {impact}</span>
        </div>
      )}

      <div className="dw-fields">
        <div className="form-group" style={{ marginBottom: 0 }}>
          <label className="form-label">Имя</label>
          <input className="form-input" type="text" value={fields.name} onChange={setField('name')} placeholder="Как к вам обращаться" />
        </div>

        <div className="form-group" style={{ marginBottom: 0 }}>
          <label className="form-label">E-mail <span className="required">*</span></label>
          <input className={`form-input ${errors.email ? 'error' : ''}`} type="email" value={fields.email} onChange={setField('email')} placeholder="name@example.com" />
          {errors.email && <div className="form-error">{errors.email}</div>}
        </div>

        <div className="form-group" style={{ marginBottom: 0 }}>
          <label className="form-label">Телефон</label>
          <input className="form-input" type="tel" value={fields.phone} onChange={setField('phone')} placeholder="+7 (900) 000-00-00" />
        </div>
      </div>

      <label className={`dw-check ${errors.consent ? 'has-error' : ''}`}>
        <input type="checkbox" checked={fields.consent} onChange={setField('consent')} />
        <span>
          Соглашаюсь с{' '}
          <a href="/uploads/offer.pdf" target="_blank" rel="noopener">договором-офертой</a>{' '}
          и даю согласие на обработку персональных данных.
        </span>
      </label>
      {errors.consent && <div className="form-error" style={{ marginTop: -8 }}>{errors.consent}</div>}
      {errors.amount && <div className="form-error" style={{ marginTop: -8 }}>{errors.amount}</div>}

      {feedback.text && (
        <div className={`dw-status is-${feedback.state || 'info'}`}>
          <Icon name={feedback.state === 'error' ? 'close' : feedback.state === 'success' ? 'check' : 'shield'} size={16} />
          <span>{feedback.text}</span>
        </div>
      )}

      {submitError && (
        <div className="dw-status is-error">
          <Icon name="close" size={16} />
          <span>{submitError}</span>
        </div>
      )}

      <button type="button" className="form-submit dw-submit" onClick={handleDonate} disabled={submitting}>
        {submitting ? 'Переходим к оплате…' : mode === 'month' ? 'Помогать каждый месяц' : 'Пожертвовать'}
        {value > 0 ? ` · ${fmt(value)} ₽` : ''}
      </button>

      <div className="dw-pay">
        <span>Безопасная оплата картой</span>
        <div className="dw-pay-cards">
          <span>МИР</span>
          <span>VISA</span>
          <span>MC</span>
        </div>
      </div>
      <DonateNotice />
    </div>
  );
}

/* ---------- full donate page ---------- */
const DONATE_WAYS = [
  { icon: 'repeat', tone: 'green', title: 'Регулярно', text: 'Оформите ежемесячное пожертвование — это самая нужная фонду помощь.' },
  { icon: 'heart', tone: 'orange', title: 'Разово', text: 'Любая сумма в любой момент. Каждое пожертвование идёт в дело.' },
  { icon: 'hands', tone: 'blue', title: 'Бизнесом', text: 'Компании помогают фонду финансово и делами — расскажем как.' },
];
const DONATE_FAQ = [
  { q: 'Куда идут мои деньги?', a: 'На подбор и обучение наставников, работу психолога, встречи и поездки для подростков и развитие проекта «Наставничество». Мы публикуем годовые отчёты в открытом доступе.' },
  { q: 'Это безопасно?', a: 'Да. Оплата проходит через защищённый платёжный сервис Best2Pay от СовкомБанка. Данные вашей карты не попадают в фонд и передаются в зашифрованном виде.' },
  { q: 'Можно ли отменить ежемесячное пожертвование?', a: 'Конечно. Вы в любой момент можете изменить сумму или отменить регулярный платёж — напишите нам на info@fond-nl.ru.' },
  { q: 'Дадите ли вы документы?', a: 'Да, мы предоставляем все необходимые документы о пожертвовании. Свяжитесь с нами, и мы всё оформим.' },
];

function DonatePage() {
  return (
    <div className="page-enter">
      <section className="page-hero page-hero-orange">
        <div className="blob" style={{ width: 300, height: 300, background: 'var(--orange-100)', top: -40, right: '8%' }}></div>
        <div className="wrap page-hero-inner">
          <span className="eyebrow is-orange">Помочь фонду</span>
          <h1 className="h-xl">Подарите подростку <Squiggle color="var(--orange)">надёжного</Squiggle> взрослого</h1>
          <p className="lead" style={{ maxWidth: 640, margin: '18px auto 0' }}>
            Ваше пожертвование — это не абстракция. Это конкретные встречи, поддержка психолога и ощущение ребёнка, что он кому-то по-настоящему нужен.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0, marginTop: -28 }}>
        <div className="wrap donate-layout">
          <div className="donate-main">
            <div className="donate-ways">
              {DONATE_WAYS.map((w, i) => {
                const map = { green: 'var(--green)', orange: 'var(--orange-600)', blue: 'var(--blue-700)' }[w.tone];
                const bg = { green: 'var(--green-50)', orange: 'var(--orange-50)', blue: 'var(--blue-50)' }[w.tone];
                return (
                  <div className="donate-way" key={i}>
                    <div className="donate-way-icon" style={{ background: bg, color: map }}><Icon name={w.icon} size={24} /></div>
                    <div>
                      <h3 className="donate-way-title">{w.title}</h3>
                      <p className="donate-way-text">{w.text}</p>
                    </div>
                  </div>
                );
              })}
            </div>

            

            <div className="donate-faq">
              <h2 className="h-md">Частые вопросы</h2>
              <div className="faq-list">
                {DONATE_FAQ.map((f, i) => <FaqItem key={i} {...f} />)}
              </div>
            </div>
          </div>

          <aside className="donate-aside">
            <div className="donate-aside-sticky">
              <DonateWidget />
            </div>
          </aside>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
            <div className="donate-impact-band">
              <h2 className="h-md">На что пойдёт ваша помощь</h2>
              <div className="donate-impact-rows">
                {IMPACT.map((it, i) => (
                  <div className="donate-impact-row" key={i}>
                    <div className="donate-impact-ic"><Icon name={it.icon} size={22} /></div>
                    <div>
                      <b>{it.title}</b>
                      <span>{it.text}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
        </div>
      </section>
    </div>
  );
}

function DonateNotice() {
  const { go } = useNav();
  return (
    <p className="donate-notice">
      <Icon name="shield" size={18} />
      <span>
        Перед внесением пожертвования ознакомьтесь с{' '}
        <a href="#politika" onClick={(e) => { e.preventDefault(); go('politika'); }}>политикой безопасности платежей</a>{' '}
        и с <a href="/uploads/offer.pdf" target="_blank" rel="noopener">условиями договора-оферты</a>.
      </span>
    </p>
  );
}

function FaqItem({ q, a }) {
  const [open, setOpen] = useState(false);
  return (
    <div className={`faq-item ${open ? 'open' : ''}`}>
      <button className="faq-q" onClick={() => setOpen(!open)}>
        <span>{q}</span>
        <span className="faq-toggle"><Icon name={open ? 'close' : 'arrow'} size={18} /></span>
      </button>
      {open && <p className="faq-a">{a}</p>}
    </div>
  );
}

Object.assign(window, { DonateWidget, DonatePage, FaqItem, DonateNotice });
