/*
 * F-C1 관심 행사 구독 폼 (공개) — POST /api/public/events/{eventId}/subscribe.
 * 오픈 예정/진행 행사에만 노출(호출부가 deriveStatus 로 판정). 개인정보 동의(필수) 미체크 시 차단.
 * 3상태: 폼 → 성공(emailMasked·신규/재활성) · 이미구독(alreadySubscribed) · 오류(멱등·rate 포함).
 * Nifty 문자 그대로: kxp-subcard/kxp-field/kxp-input/kxp-check/kxp-btn + kx 토큰(publicExtras.css). 하드코딩 0.
 */
import { useId, useState, type FormEvent } from 'react';
import { useTranslation } from 'react-i18next';
import { publicApi, type SubscribeResult } from './publicApi';
import { errorMessage } from './publicFormat';
import { IconBell, IconCheckCircle } from './publicIcons';
import './publicExtras.css';

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
/** 이메일 위치 무관 분할용 고유 센티넬(제어문자 — 어떤 번역문에도 미등장). */
const EMAIL_SENTINEL = String.fromCharCode(0);

export function EventSubscribeForm({
  eventId,
  variant = 'card',
}: {
  eventId: string;
  variant?: 'card' | 'banner';
}) {
  const { t } = useTranslation();
  const fid = useId();
  const [email, setEmail] = useState('');
  const [agree, setAgree] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState('');
  const [result, setResult] = useState<SubscribeResult | null>(null);

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    setError('');
    if (!agree) {
      setError(t('subscribe.errPrivacy', { defaultValue: '구독 알림 수신을 위한 개인정보 수집·이용 동의가 필요합니다.' }));
      return;
    }
    if (!EMAIL_RE.test(email.trim())) {
      setError(t('subscribe.errEmail', { defaultValue: '올바른 이메일 주소를 입력해 주세요.' }));
      return;
    }
    setSubmitting(true);
    try {
      const r = await publicApi.subscribeEvent(eventId, { email: email.trim(), agreePrivacy: agree });
      setResult(r);
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setSubmitting(false);
    }
  }

  // ── 성공/이미구독 상태 ──
  if (result) {
    const already = result.alreadySubscribed;
    // {{email}} 위치 무관: 센티넬로 분할해 emailMasked 를 굵게 유지(전 로케일 견고).
    const key = already ? 'subscribe.already' : 'subscribe.done';
    const dv = already
      ? '{{email}} 주소는 이미 오픈 알림을 신청하셨습니다.'
      : '{{email}} 주소로 티켓 오픈 시 알림을 보내드립니다.';
    const [pre, post = ''] = t(key, { email: EMAIL_SENTINEL, defaultValue: dv }).split(EMAIL_SENTINEL);
    return (
      <div className={`kxp-subcard${variant === 'banner' ? ' kxp-subcard--banner' : ''}`}>
        <div className={`kxp-subresult ${already ? 'kxp-subresult--warn' : 'kxp-subresult--ok'}`} role="status">
          <span className="kxp-subresult__ic" aria-hidden>
            <IconCheckCircle width={22} height={22} />
          </span>
          <div>
            <span>
              {pre}
              <span className="kxp-subresult__strong">{result.emailMasked}</span>
              {post}
            </span>
            <div style={{ marginTop: 'var(--space-1)', color: 'var(--color-neutral-500)', fontSize: 'var(--fs-nano)' }}>
              {t('subscribe.unsubNote', { defaultValue: '알림 메일 하단의 수신거부 링크로 언제든 해지할 수 있습니다.' })}
            </div>
          </div>
        </div>
      </div>
    );
  }

  // ── 입력 폼 상태 ──
  return (
    <form className={`kxp-subcard${variant === 'banner' ? ' kxp-subcard--banner' : ''}`} onSubmit={onSubmit}>
      <div>
        <div className="kxp-subcard__head">
          <IconBell width={20} height={20} />
          <h3 className="kxp-subcard__title">{t('subscribe.title', { defaultValue: '오픈 알림 받기' })}</h3>
        </div>
        <p className="kxp-subcard__sub">
          {t('subscribe.sub', { defaultValue: '티켓 판매가 시작되면 이메일로 가장 먼저 알려드립니다.' })}
        </p>
      </div>

      <div className="kxp-subform">
        <div className="kxp-field kxp-subform__field">
          <label htmlFor={`${fid}-email`}>{t('subscribe.email', { defaultValue: '이메일' })}</label>
          <input
            id={`${fid}-email`}
            className="kxp-input"
            type="email"
            inputMode="email"
            autoComplete="email"
            placeholder="you@example.com"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>

        <div className="kxp-subform__consent">
          <label className="kxp-check">
            <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)} />
            <span>
              {t('subscribe.consent', { defaultValue: '오픈 알림 수신을 위한 개인정보 수집·이용에 동의합니다.' })}{' '}
              <span className="kxp-check__req">{t('register.required', { defaultValue: '필수' })}</span>
            </span>
          </label>
        </div>

        <button type="submit" className="kxp-btn kxp-btn--primary" disabled={submitting}>
          {submitting
            ? t('subscribe.submitting', { defaultValue: '신청 중…' })
            : t('subscribe.submit', { defaultValue: '알림 신청' })}
        </button>
      </div>

      {error && (
        <p className="kxp-suberror" role="alert">
          {error}
        </p>
      )}
    </form>
  );
}
