/* global React, useLang, useReveal, ProjectThumb, Star, Sparkle, Cloud, SOLUTIONS, SOLUTION_CATS, SOLUTION_DEMOS */
/* solutions.jsx — 솔루션 마켓 리스트 섹션 + 카드 + 상세 모달 (ResumeModal 패턴 재사용) */

const { useState: useStateSol, useEffect: useEffectSol, useRef: useRefSol } = React;

function solPick(lang, ko, en, ja) { return lang === 'ko' ? ko : (lang === 'ja' ? (ja || en) : en); }

/* 솔루션 데모(메인화면/관리자페이지)는 moai.page(shop-mall)에 있다.
   - 현재 선택 언어(useLang)를 shop-mall 30개 로케일로 매핑(미지원 언어는 en 폴백) → 지정 언어로 바로 진입.
   - 베이스 URL은 환경 자동 판별(로컬은 shop-mall dev :3001, 그 외 moai.page). */
const MOAI_LOCALES = new Set(['ko','en','ja','es','ru','hi','pt','de','fr','vi','it','th','id','ar','bn','cs','da','el','fa','fi','he','hu','ms','nl','no','pl','ro','sv','tr','uk']);
function moaiLocale(lang) { return MOAI_LOCALES.has(lang) ? lang : 'en'; }
function shopBaseUrl() {
  const h = (typeof location !== 'undefined' && location.hostname) || '';
  if (h === 'localhost' || h === '127.0.0.1') return `${location.protocol}//${h}:3001`;
  return 'https://moai.page';
}
function solMainUrl(lang, id) { return `${shopBaseUrl()}/${moaiLocale(lang)}/solutions/${id}`; }
function solAdminUrl(lang, id) { return `${solMainUrl(lang, id)}/admin`; }

/* 솔루션 콘텐츠 30개 언어 오버레이(window._WCS_SOL_I18N, sol-content-i18n-*.jsx가 채움).
   shop-mall content-i18n 재사용. 오버레이에 없으면 인라인 ko/en/ja(solPick)로 폴백 → 빌드/렌더 안전. */
function solT(sol, field, lang) {
  const o = (typeof window !== 'undefined' && window._WCS_SOL_I18N || {})[sol.id];
  const v = o && o[field] && o[field][lang];
  if (v) return v;
  if (field === 'title') return solPick(lang, sol.title, sol.titleEn, sol.titleJa);
  if (field === 'tagline') return solPick(lang, sol.tagline, sol.taglineEn, sol.taglineJa);
  if (field === 'overview') return solPick(lang, sol.overview, sol.overviewEn, sol.overviewJa);
  return '';
}
function solFeat(sol, i, lang) {
  const o = (typeof window !== 'undefined' && window._WCS_SOL_I18N || {})[sol.id];
  const v = o && o.features && o.features[i] && o.features[i][lang];
  if (v) return v;
  const f = (sol.features || [])[i];
  return f ? solPick(lang, f.ko, f.en, f.ja) : '';
}

/* 생성 이미지 → 실패 시 픽셀 목업 폴백 */
function SolThumb({ src, thumb, size, alt }) {
  const [err, setErr] = useStateSol(false);
  if (src && !err) {
    return <img src={src} alt={alt || ''} className="solution-thumb-img" onError={() => setErr(true)} />;
  }
  return <div className="solution-thumb-mock"><ProjectThumb kind={thumb} size={size} /></div>;
}

/* 언어 → 통화/환율 매핑. krwPer = 해당 통화 1단위당 원화(근사 환율, 2026 기준 · 필요시 갱신).
   price_foreign = priceKRW / krwPer → round 단위로 반올림. pos: 기호 위치(pre/post). */
const CURRENCY = {
  ko: { code: 'KRW', won: true },
  en: { code: 'USD', sym: '$', krwPer: 1350, round: 100, pos: 'pre' },
  ja: { code: 'JPY', sym: '¥', krwPer: 9, round: 10000, pos: 'pre' },
  es: { code: 'EUR', sym: '€', krwPer: 1450, round: 100, pos: 'pre' },
  fr: { code: 'EUR', sym: '€', krwPer: 1450, round: 100, pos: 'pre' },
  de: { code: 'EUR', sym: '€', krwPer: 1450, round: 100, pos: 'pre' },
  it: { code: 'EUR', sym: '€', krwPer: 1450, round: 100, pos: 'pre' },
  pt: { code: 'EUR', sym: '€', krwPer: 1450, round: 100, pos: 'pre' },
  nl: { code: 'EUR', sym: '€', krwPer: 1450, round: 100, pos: 'pre' },
  el: { code: 'EUR', sym: '€', krwPer: 1450, round: 100, pos: 'pre' },
  fi: { code: 'EUR', sym: '€', krwPer: 1450, round: 100, pos: 'pre' },
  ru: { code: 'RUB', sym: '₽', krwPer: 15, round: 1000, pos: 'pre' },
  hi: { code: 'INR', sym: '₹', krwPer: 16, round: 100, pos: 'pre' },
  vi: { code: 'VND', sym: '₫', krwPer: 0.054, round: 1000000, pos: 'pre' },
  th: { code: 'THB', sym: '฿', krwPer: 39, round: 100, pos: 'pre' },
  id: { code: 'IDR', sym: 'Rp', krwPer: 0.085, round: 1000000, pos: 'pre' },
  ms: { code: 'MYR', sym: 'RM', krwPer: 300, round: 10, pos: 'pre' },
  tr: { code: 'TRY', sym: '₺', krwPer: 40, round: 100, pos: 'pre' },
  pl: { code: 'PLN', sym: 'zł', krwPer: 340, round: 10, pos: 'post' },
  cs: { code: 'CZK', sym: 'Kč', krwPer: 58, round: 100, pos: 'post' },
  ro: { code: 'RON', sym: 'lei', krwPer: 290, round: 10, pos: 'post' },
  hu: { code: 'HUF', sym: 'Ft', krwPer: 3.7, round: 1000, pos: 'post' },
  sv: { code: 'SEK', sym: 'kr', krwPer: 128, round: 10, pos: 'post' },
  da: { code: 'DKK', sym: 'kr', krwPer: 195, round: 10, pos: 'post' },
  no: { code: 'NOK', sym: 'kr', krwPer: 128, round: 10, pos: 'post' },
  uk: { code: 'UAH', sym: '₴', krwPer: 33, round: 100, pos: 'pre' },
  he: { code: 'ILS', sym: '₪', krwPer: 365, round: 10, pos: 'pre' },
  bn: { code: 'BDT', sym: '৳', krwPer: 11.5, round: 1000, pos: 'pre' },
  tl: { code: 'PHP', sym: '₱', krwPer: 24, round: 100, pos: 'pre' },
  _default: { code: 'USD', sym: '$', krwPer: 1350, round: 100, pos: 'pre' },
};

function fmtPrice(lang, krw) {
  const n = krw || 0;
  const c = CURRENCY[lang] || CURRENCY._default;
  if (c.won) return `${n.toLocaleString('en-US')}원~`;
  const v = Math.round((n / c.krwPer) / c.round) * c.round;
  const num = v.toLocaleString('en-US');
  return c.pos === 'post' ? `${num} ${c.sym}~` : `${c.sym}${num}~`;
}
function fmtDuration(lang, t, n) {
  const tpl = t('sol_duration') || (lang === 'ko' ? '약 {n}일' : 'about {n} days');
  return tpl.replace('{n}', n);
}

/* ── 리스트 섹션 ── */
function Solutions({ onOpenSolution }) {
  const [ref, seen] = useReveal();
  const { t, lang } = useLang();
  const [cat, setCat] = useStateSol('all');
  const cats = (typeof SOLUTION_CATS !== 'undefined' && SOLUTION_CATS) || [];
  const all = (typeof SOLUTIONS !== 'undefined' && SOLUTIONS) || [];
  const list = cat === 'all' ? all : all.filter(s => s.cat === cat);

  return (
    <section className="section tint-mint" id="solutions">
      <div className="section-bg-tint"></div>
      <Cloud size={5} className="deco-cloud" style={{ top: 90, left: '6%' }} />
      <Sparkle size={4} className="deco-star twinkle" style={{ top: 150, right: '10%' }} />
      <div className="section-inner">
        <div ref={ref} className={`s-head reveal ${seen ? 'in' : ''}`}>
          <span className="eyebrow"><span className="eyebrow-dot"></span>SOLUTION MARKET</span>
          <h2>{t('sol_heading')}</h2>
          <p className="s-sub">{t('sol_sub')}</p>
        </div>

        <div className="sol-cat-tabs">
          {cats.map(c => (
            <button key={c.id} className={`sol-cat-tab ${cat === c.id ? 'on' : ''}`} onClick={() => setCat(c.id)}>
              {t('cat_' + c.id)}
            </button>
          ))}
        </div>

        <div className={`sol-grid reveal-stagger ${seen ? 'in' : ''}`}>
          {list.map(s => (
            <SolutionCard key={s.id} sol={s} lang={lang} t={t} onOpen={onOpenSolution} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── 카드 ── */
function SolutionCard({ sol, lang, t, onOpen }) {
  const catLabel = ((typeof SOLUTION_CATS !== 'undefined' && SOLUTION_CATS) || []).find(c => c.id === sol.cat);
  const open = () => onOpen(sol.id);
  const stop = (e) => e.stopPropagation(); // 액션 링크 클릭 시 모달 열림 방지
  return (
    <div
      className="solution-card"
      data-c={sol.bg}
      role="button"
      tabIndex={0}
      onClick={open}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); } }}
    >
      <div className={`solution-thumb thumb-bg ${sol.bg}`}>
        <SolThumb src={sol.mainImage} thumb={sol.thumb} size={7} alt={solT(sol, 'title', lang)} />
        <span className="solution-cat">{catLabel ? t('cat_' + catLabel.id) : ''}</span>
        <span className="solution-live"><span className="solution-live-dot"></span>LIVE DEMO</span>
      </div>
      <div className="solution-meta">
        <h3 className="solution-title">{solT(sol, 'title', lang)}</h3>
        <p className="solution-tagline">{solT(sol, 'tagline', lang)}</p>
        <div className="solution-foot">
          <span className="solution-price">{fmtPrice(lang, sol.priceFrom)}</span>
          <span className="solution-dur">{fmtDuration(lang, t, sol.durationDays)}</span>
        </div>
        {/* 간략히(기존 모달) / 메인화면·관리자 데모(현재 선택 언어로 새 탭 이동). 모두 카드 클릭과 분리. */}
        <div className="solution-actions">
          <button type="button" className="sol-action-btn brief" onClick={(e) => { stop(e); open(); }}>
            {t('sol_btn_brief')}
          </button>
          <a className="sol-action-btn" href={solMainUrl(lang, sol.id)} target="_blank" rel="noopener noreferrer" onClick={stop}>
            {t('sol_btn_main')}
          </a>
          <a className="sol-action-btn admin" href={solAdminUrl(lang, sol.id)} target="_blank" rel="noopener noreferrer" onClick={stop}>
            {t('sol_btn_admin')}
          </a>
        </div>
      </div>
    </div>
  );
}

/* ── 상세 모달 — 단일 스크롤(개요·기술스택·주요기능·라이브데모 전부 표시, 탭 없음) ── */
function SolutionModal({ solutionId, onClose }) {
  const { lang, t } = useLang();
  const sheetRef = useRefSol(null);
  const all = (typeof SOLUTIONS !== 'undefined' && SOLUTIONS) || [];
  const sol = all.find(s => s.id === solutionId);

  useEffectSol(() => {
    if (!solutionId) return;
    document.body.style.overflow = 'hidden';
    if (sheetRef.current) sheetRef.current.scrollTop = 0;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onKey); };
  }, [solutionId, onClose]);

  if (!sol) return null;
  const pick = (ko, en, ja) => solPick(lang, ko, en, ja);
  const catLabel = ((typeof SOLUTION_CATS !== 'undefined' && SOLUTION_CATS) || []).find(c => c.id === sol.cat);
  const Demo = (typeof SOLUTION_DEMOS !== 'undefined' && SOLUTION_DEMOS) ? SOLUTION_DEMOS[sol.demo] : null;

  return (
    <div className="rm-overlay" onClick={onClose}>
      <button className="rm-close" onClick={onClose} aria-label="Close"><span>✕</span></button>
      <div className="rm-sheet sol-sheet" ref={sheetRef} onClick={(e) => e.stopPropagation()} data-c={sol.bg}>
        {/* 히어로 배너 */}
        <div className="sol-hero" data-c={sol.bg}>
          <SolThumb src={sol.mainImage} thumb={sol.thumb} size={9} alt={solT(sol, 'title', lang)} />
          <span className="sol-hero-cat">{catLabel ? t('cat_' + catLabel.id) : ''}</span>
        </div>

        {/* 본문 (단일 스크롤) */}
        <div className="sol-modal-content">
          <h2 className="sol-modal-title">{solT(sol, 'title', lang)}</h2>
          <p className="sol-modal-tagline">{solT(sol, 'tagline', lang)}</p>
          <div className="sol-modal-meta">
            <span className="sol-modal-price">{fmtPrice(lang, sol.priceFrom)}</span>
            <span className="sol-modal-dur">{t('sol_duration_label')} {fmtDuration(lang, t, sol.durationDays)}</span>
          </div>
          <div className="sol-chips">
            {(sol.tags || []).map(tg => <span key={tg} className="sol-chip">{tg}</span>)}
          </div>

          {/* 개요 */}
          <section className="sol-section">
            <h3 className="sol-sec-h">{t('sol_tab_overview')}</h3>
            <p className="sol-sec-p">{solT(sol, 'overview', lang)}</p>
          </section>

          {/* 기술 스택 */}
          {sol.tech && sol.tech.length > 0 && (
            <section className="sol-section">
              <h3 className="sol-sec-h">{t('sol_tech')}</h3>
              <div className="sol-chips">{sol.tech.map(x => <span key={x} className="sol-chip tech">{x}</span>)}</div>
            </section>
          )}

          {/* 주요 기능 */}
          <section className="sol-section">
            <h3 className="sol-sec-h">{t('sol_tab_features')}</h3>
            <ul className="sol-features">
              {(sol.features || []).map((f, i) => (
                <li key={i}><span className="sol-feat-dot"></span>{solFeat(sol, i, lang)}</li>
              ))}
            </ul>
          </section>

          {/* 라이브 데모 */}
          <section className="sol-section">
            <h3 className="sol-sec-h">{t('sol_tab_demo')}<span className="sol-live-pill">LIVE</span></h3>
            <div className="sol-demo-wrap">
              <div className="sol-demo-label">{t('sol_demo_hint')}</div>
              {Demo ? <Demo data={sol.mock || {}} bg={sol.bg} />
                : <div className="sol-demo-soon">{t('sol_demo_soon')}</div>}
            </div>
          </section>
        </div>

        {/* Footer — 닫기 / 메인화면·관리자 데모(지정 언어로 바로 이동, 새 탭) / 문의 */}
        <div className="rm-footer">
          <button className="btn ghost" onClick={onClose}>{t('modal_close')}</button>
          <a className="btn ghost" href={solMainUrl(lang, sol.id)} target="_blank" rel="noopener noreferrer">
            {t('sol_btn_main')}
          </a>
          <a className="btn ghost" href={solAdminUrl(lang, sol.id)} target="_blank" rel="noopener noreferrer">
            {t('sol_btn_admin')}
          </a>
          <a className="btn" href="#contact" onClick={onClose}>{t('nav_cta')}</a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Solutions, SolutionCard, SolutionModal });