/*
 * SCR-P6 참가/부스 신청 문의 (M12) — 비로그인 공개.
 * design.md §3B. 참가 안내(부스 유형·요금) + 문의 폼 + 담당 연락처 + 로그인 유도.
 * 제출: POST /api/public/inquiries (접수번호 반환). 개인정보 동의(필수) 미체크 시 차단.
 */
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PublicShell } from './PublicShell';
import { publicApi } from './publicApi';
import { errorMessage } from './publicFormat';
import { IconPhone, IconMail, IconPin, IconSend, IconArrowRight, IconCheckCircle } from './publicIcons';

const BOOTH_TYPES = [
  { tierKey: 'inquiry.booth1Tier', titleKey: 'inquiry.booth1Title', descKey: 'inquiry.booth1Desc', priceKey: 'inquiry.booth1Price' },
  { tierKey: 'inquiry.booth2Tier', titleKey: 'inquiry.booth2Title', descKey: 'inquiry.booth2Desc', priceKey: 'inquiry.booth2Price' },
  { tierKey: 'inquiry.booth3Tier', titleKey: 'inquiry.booth3Title', descKey: 'inquiry.booth3Desc', priceKey: 'inquiry.booth3Price' },
];

export function PublicInquiryPage() {
  const { t } = useTranslation();
  const [company, setCompany] = useState('');
  const [name, setName] = useState('');
  const [contact, setContact] = useState('');
  const [scale, setScale] = useState('');
  const [hall, setHall] = useState('');
  const [message, setMessage] = useState('');
  const [agree, setAgree] = useState(false);
  const [sent, setSent] = useState(false);
  const [receiptNo, setReceiptNo] = useState('');
  const [error, setError] = useState('');
  const [submitting, setSubmitting] = useState(false);

  const submit = async () => {
    setError('');
    if (!agree) {
      setError(t('inquiry.errAgree'));
      return;
    }
    if (!name.trim()) {
      setError(t('inquiry.errName'));
      return;
    }
    if (!contact.trim()) {
      setError(t('inquiry.errContact'));
      return;
    }
    if (!message.trim()) {
      setError(t('inquiry.errMessage'));
      return;
    }
    const isEmail = contact.includes('@');
    setSubmitting(true);
    try {
      const r = await publicApi.submitInquiry({
        company: company.trim() || undefined,
        contactName: name.trim(),
        email: isEmail ? contact.trim() : undefined,
        phone: isEmail ? undefined : contact.trim(),
        scale: scale || undefined,
        hallPref: hall || undefined,
        message: message.trim(),
        agreePrivacy: agree,
      });
      setReceiptNo(r.receiptNo);
      setSent(true);
    } catch (e) {
      setError(errorMessage(e));
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <PublicShell active="exhibit" cta={t('inquiry.cta')} search={false}>
      {/* 히어로 */}
      <section
        className="kxp-hero"
        aria-label={t('inquiry.heroAria')}
        style={{ backgroundColor: 'var(--color-canvas-bg)', minHeight: 360 }}
      >
        <div
          className="kxp-hero__bg"
          style={{ background: 'linear-gradient(120deg, #004c86 0%, #0066b3 60%, #12395f 130%)' }}
          aria-hidden
        />
        <div className="kxp-hero__scrim" aria-hidden />
        <div className="kxp-hero__inner">
          <div className="kxp-hero__content">
            <h1 className="kxp-hero__title" style={{ fontSize: 'clamp(28px, 5vw, 40px)' }}>
              {t('inquiry.heroTitle')}
            </h1>
            <p className="kxp-hero__lead">{t('inquiry.heroLead')}</p>
          </div>
        </div>
      </section>

      {/* 참가 안내 */}
      <section className="kxp-section" aria-label={t('inquiry.guideAria')}>
        <div className="kxp-wrap">
          <div className="kxp-section__head" style={{ justifyContent: 'center', flexDirection: 'column', textAlign: 'center' }}>
            <h2 className="kxp-section__title">{t('inquiry.guideTitle')}</h2>
          </div>
          <div className="kxp-boothtypes">
            {BOOTH_TYPES.map((b) => (
              <article className="kxp-boothtype" key={b.titleKey}>
                <div
                  className="kxp-boothtype__media"
                  style={{ background: 'linear-gradient(135deg, #d9eaf7 0%, #eff6fc 100%)' }}
                  role="img"
                  aria-label={t('inquiry.boothExampleAria', { title: t(b.titleKey) })}
                />
                <div className="kxp-boothtype__body">
                  <span className="kxp-tag">{t(b.tierKey)}</span>
                  <h3>{t(b.titleKey)}</h3>
                  <p>{t(b.descKey)}</p>
                  <div className="kxp-boothtype__price">{t(b.priceKey)}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* 문의 폼 */}
      <section className="kxp-section kxp-section--alt" aria-label={t('inquiry.formAria')}>
        <div className="kxp-wrap">
          <div className="kxp-inquiry">
            {/* 좌: 안내·연락처 */}
            <div>
              <h2 className="kxp-section__title" style={{ fontSize: 24 }}>
                {t('inquiry.formTitle')}
              </h2>
              <p className="kxp-section__sub" style={{ marginBottom: 20 }}>
                {t('inquiry.formSub')}
              </p>
              <div className="kxp-contacts">
                <div className="kxp-contact">
                  <span className="kxp-contact__ic">
                    <IconPhone width={18} height={18} />
                  </span>
                  <div>
                    <small>{t('inquiry.contactPhone')}</small>
                    <strong>{t('inquiry.contactPhoneVal')}</strong>
                  </div>
                </div>
                <div className="kxp-contact">
                  <span className="kxp-contact__ic">
                    <IconMail width={18} height={18} />
                  </span>
                  <div>
                    <small>{t('inquiry.contactEmail')}</small>
                    <strong>{t('inquiry.contactEmailVal')}</strong>
                  </div>
                </div>
                <div className="kxp-contact">
                  <span className="kxp-contact__ic">
                    <IconPin width={18} height={18} />
                  </span>
                  <div>
                    <small>{t('inquiry.contactLoc')}</small>
                    <strong>{t('inquiry.contactLocVal')}</strong>
                  </div>
                </div>
              </div>
              <div className="kxp-login-hint" style={{ marginTop: 16 }}>
                <p>{t('inquiry.loginHintQ')}</p>
                <a href="#top">
                  {t('inquiry.loginHintA')} <IconArrowRight width={16} height={16} />
                </a>
              </div>
            </div>

            {/* 우: 폼 */}
            <div className="kxp-formcard">
              {sent && (
                <div className="kxp-alert kxp-alert--success" role="status">
                  <IconCheckCircle width={18} height={18} /> {t('inquiry.success', { no: receiptNo })}
                </div>
              )}
              <div className="kxp-formgrid kxp-formgrid--2">
                <div className="kxp-field">
                  <label htmlFor="iq-company">{t('inquiry.company')}</label>
                  <input
                    id="iq-company"
                    className="kxp-input"
                    placeholder={t('inquiry.companyPh')}
                    value={company}
                    onChange={(e) => setCompany(e.target.value)}
                  />
                </div>
                <div className="kxp-field">
                  <label htmlFor="iq-name">{t('inquiry.name')}</label>
                  <input
                    id="iq-name"
                    className="kxp-input"
                    placeholder={t('inquiry.namePh')}
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                  />
                </div>
              </div>
              <div className="kxp-field">
                <label htmlFor="iq-contact">{t('inquiry.contact')}</label>
                <input
                  id="iq-contact"
                  className="kxp-input"
                  placeholder={t('inquiry.contactPh')}
                  value={contact}
                  onChange={(e) => setContact(e.target.value)}
                />
              </div>
              <div className="kxp-formgrid kxp-formgrid--2">
                <div className="kxp-field">
                  <label htmlFor="iq-scale">{t('inquiry.scale')}</label>
                  <select
                    id="iq-scale"
                    className="kxp-select"
                    value={scale}
                    onChange={(e) => setScale(e.target.value)}
                  >
                    <option value="">{t('inquiry.scaleSelect')}</option>
                    <option>{t('inquiry.scale1')}</option>
                    <option>{t('inquiry.scale2')}</option>
                    <option>{t('inquiry.scale3')}</option>
                    <option>{t('inquiry.scale4')}</option>
                  </select>
                </div>
                <div className="kxp-field">
                  <label htmlFor="iq-hall">{t('inquiry.hall')}</label>
                  <select
                    id="iq-hall"
                    className="kxp-select"
                    value={hall}
                    onChange={(e) => setHall(e.target.value)}
                  >
                    <option value="">{t('inquiry.hallSelect')}</option>
                    {Array.from({ length: 10 }, (_, i) => (
                      <option key={i}>Hall {i + 1}</option>
                    ))}
                  </select>
                </div>
              </div>
              <div className="kxp-field">
                <label htmlFor="iq-msg">{t('inquiry.message')}</label>
                <textarea
                  id="iq-msg"
                  className="kxp-textarea"
                  placeholder={t('inquiry.messagePh')}
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                />
              </div>
              <label className="kxp-check">
                <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)} />
                <span>
                  {t('inquiry.agree')} <span className="kxp-check__req">{t('inquiry.required')}</span>
                </span>
              </label>
              {error && (
                <p role="alert" style={{ color: 'var(--color-error)', fontSize: 'var(--fs-body)', margin: 0 }}>
                  {error}
                </p>
              )}
              <button
                type="button"
                className="kxp-btn kxp-btn--primary kxp-btn--block kxp-btn--lg"
                onClick={submit}
                disabled={submitting}
              >
                {submitting ? t('inquiry.submitting') : t('inquiry.submit')} <IconSend width={18} height={18} />
              </button>
            </div>
          </div>
        </div>
      </section>
    </PublicShell>
  );
}
