/*
 * SCR-P5 참가업체 마이크로사이트 공개 뷰 (M17) — 비로그인 공개.
 * design.md §3B. 브랜드 히어로 + 부스 위치 카드(플로어플랜 딥링크) + 제품 + AI 예상샷 갤러리(워터마크) + 미팅 예약 CTA.
 * 데이터: GET /api/public/microsites/{exhibitorId} (cms 팀 계약). shape 확정 전 관용적 옵셔널 처리 — 미배포/부분 응답 시 안내 콘텐츠로 폴백.
 */
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom';
import { PublicShell } from './PublicShell';
import { publicApi, type PublicMicrosite } from './publicApi';
import { IconPin, IconMap, IconArrowRight } from './publicIcons';

const PRODUCT_ACCENTS = ['#0066b3', '#6d4aff', '#0e8a5f'];

export function PublicMicrositePage() {
  const { t } = useTranslation();
  const { exhibitorId } = useParams<{ exhibitorId: string }>();
  const [site, setSite] = useState<PublicMicrosite | null>(null);

  useEffect(() => {
    if (!exhibitorId) return;
    let alive = true;
    publicApi
      .getMicrosite(exhibitorId)
      .then((s) => alive && setSite(s))
      .catch(() => {
        // cms 마이크로사이트 API 미배포/미공개 — 안내 콘텐츠로 폴백(차단 없음).
        if (alive) setSite(null);
      });
    return () => {
      alive = false;
    };
  }, [exhibitorId]);

  const brand = site?.brandName ?? t('microsite.defaultBrand');
  const tagline = site?.tagline ?? t('microsite.defaultTagline');
  const boothLoc =
    site?.boothNo || site?.hallLabel
      ? `${t('microsite.boothPrefix')} ${site?.boothNo ?? t('microsite.boothUndetermined')}${site?.hallLabel ? ` · ${site.hallLabel}` : ''}`
      : t('microsite.defaultBoothLoc');
  const defaultProducts = [
    { tag: t('microsite.product1Tag'), title: t('microsite.product1Title'), desc: t('microsite.product1Desc'), accent: PRODUCT_ACCENTS[0] },
    { tag: t('microsite.product2Tag'), title: t('microsite.product2Title'), desc: t('microsite.product2Desc'), accent: PRODUCT_ACCENTS[1] },
    { tag: t('microsite.product3Tag'), title: t('microsite.product3Title'), desc: t('microsite.product3Desc'), accent: PRODUCT_ACCENTS[2] },
  ];
  const products =
    site?.products && site.products.length > 0
      ? site.products.map((p, i) => ({
          tag: p.tag ?? t('microsite.product'),
          title: p.title ?? t('microsite.product'),
          desc: p.description ?? '',
          accent: PRODUCT_ACCENTS[i % 3],
        }))
      : defaultProducts;

  return (
    <PublicShell active="exhibit" brand={brand} cta={t('shell.footer.supportContact')} search={false}>
      {/* 브랜드 히어로 */}
      <section
        className="kxp-hero"
        aria-label={t('microsite.introAria', { brand })}
        style={{ backgroundColor: 'var(--color-canvas-bg)' }}
      >
        <div
          className="kxp-hero__bg"
          style={{ background: 'linear-gradient(120deg, #0b1b2e 0%, #12395f 55%, #0066b3 130%)' }}
          aria-hidden
        />
        <div className="kxp-hero__scrim" aria-hidden />
        <div className="kxp-hero__inner">
          <div className="kxp-hero__content">
            <span className="kxp-hero__eyebrow">{t('microsite.eyebrow')}</span>
            <h1 className="kxp-hero__title">{brand}</h1>
            <p className="kxp-hero__lead">{tagline}</p>
            <div className="kxp-hero__actions">
              <a className="kxp-btn kxp-btn--primary kxp-btn--lg" href="#meeting">
                {t('microsite.ctaMeeting')}
              </a>
              <a className="kxp-btn kxp-btn--ghost kxp-btn--lg" href="#products">
                {t('microsite.ctaBrochure')}
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* 부스 위치 카드 (플로어플랜 딥링크) */}
      <div className="kxp-ms-booth">
        <div className="kxp-ms-booth__card">
          <div className="kxp-ms-booth__left">
            <span className="kxp-ms-booth__ic">
              <IconPin />
            </span>
            <div>
              <div style={{ fontSize: 'var(--fs-caption)', color: 'var(--color-neutral-500)' }}>
                {t('microsite.boothLocLabel')}
              </div>
              <div className="kxp-ms-booth__loc">{boothLoc}</div>
            </div>
          </div>
          <a className="kxp-btn kxp-btn--outline" href="#top">
            <IconMap width={18} height={18} /> {t('microsite.viewMap')}
          </a>
        </div>
      </div>

      {/* 제품 라인업 */}
      <section className="kxp-section" id="products" aria-label={t('microsite.productsAria')}>
        <div className="kxp-wrap">
          <div className="kxp-section__head">
            <div>
              <h2 className="kxp-section__title">{t('microsite.productsTitle')}</h2>
              <p className="kxp-section__sub">{t('microsite.productsSub')}</p>
            </div>
          </div>
          <div className="kxp-products">
            {products.map((p) => (
              <article className="kxp-product" key={p.title} style={{ borderLeftColor: p.accent }}>
                <div
                  className="kxp-product__media"
                  style={{ background: `linear-gradient(135deg, ${p.accent} 0%, #101828 170%)` }}
                  role="img"
                  aria-label={t('microsite.productImgAria', { title: p.title })}
                />
                <div className="kxp-product__body">
                  <span className="kxp-tag">{p.tag}</span>
                  <h4>{p.title}</h4>
                  <p>{p.desc}</p>
                  <a className="kxp-btn kxp-btn--outline kxp-btn--block" href="#top">
                    {t('common.actions.viewMore')}
                  </a>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* AI 부스 예상샷 갤러리 (워터마크 고지) */}
      <section className="kxp-section kxp-section--alt" aria-label={t('microsite.previewAria')}>
        <div className="kxp-wrap">
          <div className="kxp-section__head" style={{ justifyContent: 'center', textAlign: 'center', flexDirection: 'column' }}>
            <h2 className="kxp-section__title">{t('microsite.previewTitle')}</h2>
            <p className="kxp-section__sub">{t('microsite.previewSub')}</p>
          </div>
          <div className="kxp-gallery">
            {[
              { g: 'linear-gradient(135deg, #1f3a5f 0%, #0066b3 100%)', label: t('microsite.galleryMain') },
              { g: 'linear-gradient(135deg, #2a2350 0%, #6d4aff 120%)', label: t('microsite.galleryVip') },
            ].map((it) => (
              <div
                key={it.label}
                className="kxp-gallery__item"
                style={{ background: it.g }}
                role="img"
                aria-label={t('microsite.galleryAria', { label: it.label })}
              >
                <span className="kxp-aiwm">{t('microsite.watermark')}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 미팅 예약 CTA */}
      <section className="kxp-cta-banner" id="meeting" aria-label={t('microsite.meetingAria')}>
        <h2>{t('microsite.ctaBanner')}</h2>
        <a className="kxp-btn kxp-btn--outline kxp-btn--lg" href="#top">
          {t('microsite.ctaBannerBtn')} <IconArrowRight width={18} height={18} />
        </a>
      </section>
    </PublicShell>
  );
}
