/**
 * Shared UI components: Header, Footer, ProductCard, CartToast
 * Header now includes visible Language / Channel / Theme popovers and an
 * Account button that opens the auth modal.
 */

window.Header = function Header({ lang, theme, channel, cartCount, user, onNav, onOpenCart, onOpenAuth, onChangeLang, onChangeChannel, onChangeTheme, activeNav }) {
  const channels = window.YY_CHANNELS || [];
  const langs    = window.YY_LANGS    || [];
  const themes   = window.YY_THEMES   || {};
  const themeOrder = window.YY_THEME_ORDER || Object.keys(themes);

  const chObj   = channels.find(c => c.id === channel) || channels[0] || { flag:'', name:{en:''} };
  const langObj = langs.find(l => l.id === lang) || { id: lang, native: lang.toUpperCase(), flag: lang.toUpperCase() };
  const themeObj = themes[theme] || { label: theme, swatch: ['#000','#fff'], accent: '#000' };

  const [open, setOpen] = React.useState(null); // 'lang' | 'channel' | 'theme' | 'account' | null
  const [q, setQ]       = React.useState('');
  const rootRef   = React.useRef(null);
  const searchRef = React.useRef(null);

  React.useEffect(() => {
    function onDoc(e) {
      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(null);
    }
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);

  function toggle(n) { setOpen(o => o === n ? null : n); }
  function pick(n, cb) { return (v) => { cb(v); setOpen(null); }; }
  function submitSearch() {
    const query = (q || '').trim();
    if (!query) { searchRef.current && searchRef.current.focus(); return; }
    onNav('search', null, query);
  }

  return (
    <header className="yy-header" ref={rootRef}>
      <div className="yy-logo" onClick={() => onNav('home')} style={{ cursor: 'pointer' }}>
        <span className="yy-logo-mark">悦</span>
        <span>YYShop</span>
      </div>

      <nav className="yy-nav">
        {(() => {
          // Data-driven top nav: if site_sections are configured, render them.
          // Otherwise fall back to the original hardcoded items so existing
          // deploys without a sections seed still work.
          const sections = (window.YY_SITE_SECTIONS || []).filter(s => s.active);
          if (sections.length > 0) {
            return sections
              .slice()
              .sort((a, b) => (a.sort_order||0) - (b.sort_order||0))
              .map(s => {
                const label = (s.name_i18n && (s.name_i18n[lang] || s.name_i18n.en)) || s.id;
                const isSale = s.id === 'sale' || (s.accent && /red|danger/i.test(s.accent));
                const isActive = activeNav === ('section:' + s.id);
                const extraClass = s.layout === 'culture' ? 'yy-nav-culture ' : '';
                return (
                  <a key={s.id}
                     className={extraClass + (isActive ? 'active' : '')}
                     style={isSale ? { color: 'var(--danger)' } : undefined}
                     onClick={() => onNav('section', null, s.id)}>
                    {label}
                  </a>
                );
              });
          }
          // Fallback — original hardcoded menu.
          return [
            <a key="n" className={activeNav === 'new' ? 'active' : ''} onClick={() => onNav('category', null, '__new')}>{t('nav.new', lang)}</a>,
            <a key="f" className={activeNav === 'fashion' ? 'active' : ''} onClick={() => onNav('category', null, 'fashion')}>{t('nav.fashion', lang)}</a>,
            <a key="b" className={activeNav === 'beauty' ? 'active' : ''} onClick={() => onNav('category', null, 'beauty')}>{t('nav.beauty', lang)}</a>,
            <a key="c" className={'yy-nav-culture ' + (activeNav === 'culture' ? 'active' : '')} onClick={() => onNav('culture')}>{t('nav.culture', lang)}</a>,
            <a key="h" className={activeNav === 'home-goods' ? 'active' : ''} onClick={() => onNav('category', null, '__home')}>{t('nav.home', lang)}</a>,
            <a key="s" className={activeNav === 'sale' ? 'active' : ''} style={{ color: 'var(--danger)' }} onClick={() => onNav('category', null, '__sale')}>{t('nav.sale', lang)}</a>,
          ];
        })()}
      </nav>

      <div className="yy-actions">
        <div className="yy-search" onClick={() => searchRef.current && searchRef.current.focus()} style={{ cursor: 'text' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" onClick={(e) => { e.stopPropagation(); submitSearch(); }} style={{ cursor: 'pointer' }}><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
          <input
            ref={searchRef}
            type="text"
            value={q}
            onChange={(e) => setQ(e.target.value)}
            onKeyDown={(e) => { if (e.key === 'Enter') submitSearch(); }}
            placeholder={t('common.search', lang)}
            aria-label={t('common.search', lang)}
            style={{ background:'transparent', border:0, outline:'none', color:'inherit', font:'inherit', width: 150, padding: 0 }}
          />
        </div>

        {/* ---- LANGUAGE ---- */}
        <div className="yy-pop-wrap">
          <div className={'yy-pop-btn ' + (open==='lang'?'active':'')} onClick={() => toggle('lang')} title="Language">
            <span className="flag">{langObj.id.toUpperCase()}</span>
            <span className="lbl">{langObj.native || langObj.name}</span>
            <span className="caret">▾</span>
          </div>
          {open==='lang' && (
            <div className="yy-pop yy-pop-lang">
              {langs.map(l => (
                <div key={l.id} className={'yy-pop-row ' + (l.id===lang?'on':'')} onClick={pick('lang', () => onChangeLang(l.id))}>
                  <span className="flag">{l.id.toUpperCase()}</span>
                  <span className="lbl">{l.native}</span>
                  <span className="sub">{l.name}</span>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* ---- CHANNEL ---- */}
        <div className="yy-pop-wrap">
          <div className={'yy-pop-btn ' + (open==='channel'?'active':'')} onClick={() => toggle('channel')} title="Region / Channel">
            <span className="flag">{chObj.flag && chObj.flag.length > 2 ? chObj.flag.slice(0,2) : chObj.flag}</span>
            <span className="lbl">{(chObj.name && (chObj.name[lang] || chObj.name.en)) || chObj.id}</span>
            <span className="caret">▾</span>
          </div>
          {open==='channel' && (
            <div className="yy-pop yy-pop-channel">
              {channels.map(c => (
                <div key={c.id} className={'yy-pop-row ' + (c.id===channel?'on':'')} onClick={pick('channel', () => onChangeChannel(c.id))}>
                  <span className="flag">{c.flag && c.flag.length > 2 ? c.flag.slice(0,2) : c.flag}</span>
                  <span className="lbl">{(c.name && (c.name[lang] || c.name.en)) || c.id}</span>
                  <span className="sub">{(c.desc && (c.desc[lang] || c.desc.en)) || ''}</span>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* ---- THEME / SKIN ---- */}
        <div className="yy-pop-wrap">
          <div className={'yy-pop-btn ' + (open==='theme'?'active':'')} onClick={() => toggle('theme')} title="Skin / Theme">
            <span className="swatch-dots">
              {(themeObj.swatch||[]).slice(0,3).map((c,i) => <i key={i} style={{background:c}}/>)}
            </span>
            <span className="lbl">{themeObj.label || theme}</span>
            <span className="caret">▾</span>
          </div>
          {open==='theme' && (
            <div className="yy-pop yy-pop-theme">
              {themeOrder.map(code => {
                const t0 = themes[code];
                if (!t0) return null;
                return (
                  <div key={code} className={'yy-pop-row ' + (code===theme?'on':'')} onClick={pick('theme', () => onChangeTheme(code))}>
                    <span className="swatch-dots">
                      {(t0.swatch||[]).slice(0,3).map((c,i) => <i key={i} style={{background:c}}/>)}
                    </span>
                    <span className="lbl">{t0.label || code}</span>
                    <span className="sub">{(t0.name && (t0.name[lang] || t0.name.en)) || ''}</span>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        <div className="yy-icon-btn" title="Wishlist">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
        </div>

        {/* ---- ACCOUNT ---- */}
        <div className="yy-pop-wrap">
          <div className={'yy-icon-btn ' + (user?'logged-in':'')} onClick={() => user ? toggle('account') : onOpenAuth()} style={{cursor:'pointer'}} title={user ? user.email : 'Sign in'}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            {user && <span className="yy-dot-online"/>}
          </div>
          {open==='account' && user && (
            <div className="yy-pop yy-pop-account">
              <div className="yy-pop-head">
                <div className="big">{user.name || user.email}</div>
                <div className="sub">{user.email}</div>
              </div>
              <div className="yy-pop-row" onClick={pick('account', () => onNav('account'))}>
                <span className="lbl">{lang === 'zh' ? '用户中心' : 'User center'}</span>
              </div>
              <div className="yy-pop-row" onClick={pick('account', () => onNav('account', null, 'orders'))}>
                <span className="lbl">{lang === 'zh' ? '我的订单' : 'My orders'}</span>
              </div>
              <div className="yy-pop-row" onClick={pick('account', () => onNav('account', null, 'addresses'))}>
                <span className="lbl">{lang === 'zh' ? '收货地址' : 'Addresses'}</span>
              </div>
              <div className="yy-pop-row" onClick={pick('account', () => onNav('account', null, 'support'))}>
                <span className="lbl">{lang === 'zh' ? '帮助与客服' : 'Help & support'}</span>
              </div>
              <div className="yy-pop-row" onClick={pick('account', () => { window.YY_API.logout().then(() => window.location.reload()); })}>
                <span className="lbl">{lang === 'zh' ? '退出登录' : 'Sign out'}</span>
              </div>
            </div>
          )}
        </div>

        <div className="yy-icon-btn" onClick={onOpenCart} style={{ cursor: 'pointer' }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
          {cartCount > 0 && <span className="yy-badge">{cartCount}</span>}
        </div>
      </div>
    </header>
  );
};

window.Footer = function Footer({ lang }) {
  return (
    <footer className="yy-footer">
      <div>
        <div className="fbrand">YYShop 悦</div>
        <div style={{ fontSize: 13, opacity: 0.75, maxWidth: 280 }}>
          A cross-border marketplace bringing Chinese heritage craft and global contemporary design to 40+ countries.
        </div>
      </div>
      <div>
        <h4>Shop</h4>
        <ul>
          <li>{t('nav.new', lang)}</li>
          <li>{t('nav.fashion', lang)}</li>
          <li>{t('nav.beauty', lang)}</li>
          <li>{t('nav.culture', lang)}</li>
          <li>{t('nav.sale', lang)}</li>
        </ul>
      </div>
      <div>
        <h4>Help</h4>
        <ul>
          <li>Shipping & Delivery</li>
          <li>Returns</li>
          <li>Size Guide</li>
          <li>Customs & Duties</li>
          <li>Contact</li>
        </ul>
      </div>
      <div>
        <h4>Regions</h4>
        <ul>
          <li>🇺🇸 United States · USD</li>
          <li>🇬🇧 United Kingdom · GBP</li>
          <li>🇮🇩 Indonesia · IDR</li>
          <li>🇹🇭 Thailand · THB</li>
          <li>🇻🇳 Vietnam · VND</li>
        </ul>
      </div>
    </footer>
  );
};

window.ProductCard = function ProductCard({ product, lang, onClick }) {
  return (
    <div className="pcard" onClick={onClick}>
      <ProductVisual product={product} />
      <div className="pcard-info">
        <div className="pcard-name">{product.name[lang] || product.name.en}</div>
        <div className="pcard-price">
          ${product.price}
          {product.was && <span className="pcard-was">${product.was}</span>}
        </div>
      </div>
    </div>
  );
};

window.CartToast = function CartToast({ show, name }) {
  return (
    <div className={'cart-toast ' + (show ? 'show' : '')}>
      ✓ Added to bag — {name}
    </div>
  );
};

// ============================================================================
// AuthModal — Sign-in + two-step Register (email+password → 6-digit code).
// ============================================================================
window.AuthModal = function AuthModal({ show, onClose, onLoggedIn, lang }) {
  const L = lang || 'zh';
  const zh = L === 'zh';
  const tx = (z, e) => zh ? z : e;

  const [tab, setTab]           = React.useState('login');
  const [step, setStep]         = React.useState('form'); // 'form' | 'code'
  const [email, setEmail]       = React.useState('');
  const [password, setPassword] = React.useState('');
  const [name, setName]         = React.useState('');
  const [phone, setPhone]       = React.useState('');
  const [code, setCode]         = React.useState('');
  const [err, setErr]           = React.useState('');
  const [busy, setBusy]         = React.useState(false);
  const [resendIn, setResendIn] = React.useState(0);

  React.useEffect(() => { if (show) { setErr(''); setBusy(false); setStep('form'); setCode(''); } }, [show]);
  React.useEffect(() => {
    if (resendIn <= 0) return;
    const t = setTimeout(() => setResendIn(x => x - 1), 1000);
    return () => clearTimeout(t);
  }, [resendIn]);
  if (!show) return null;

  function errMsg(code) {
    return ({
      bad_credentials:      tx('邮箱或密码错误', 'Incorrect email or password.'),
      email_exists:         tx('该邮箱已注册', 'An account already exists for this email.'),
      invalid_email:        tx('请输入正确的邮箱地址', 'Please enter a valid email address.'),
      password_too_short:   tx('密码至少 6 位', 'Password must be at least 6 characters.'),
      bad_code:             tx('验证码错误', 'Incorrect code.'),
      code_expired:         tx('验证码已过期,请重新获取', 'Code expired — request a new one.'),
      too_many_attempts:    tx('尝试次数过多,请重新获取验证码', 'Too many attempts — request a new code.'),
      no_pending_signup:    tx('请先获取验证码', 'Request a code first.'),
      'missing: email,password': tx('邮箱和密码必填', 'Email and password are required.'),
      'missing: email,code':     tx('邮箱和验证码必填', 'Email and code are required.'),
    })[code] || code;
  }

  async function submitLogin(e) {
    e.preventDefault();
    setErr(''); setBusy(true);
    try {
      const res = await window.YY_API.login(email.trim(), password);
      if (onLoggedIn) onLoggedIn(res.user);
      onClose();
    } catch (e) { setErr(errMsg(e.body?.error || e.message)); }
    finally { setBusy(false); }
  }

  async function sendCode(e) {
    if (e) e.preventDefault();
    setErr(''); setBusy(true);
    try {
      await window.YY_API.signupStart(email.trim(), password, { name, phone, locale: L });
      setStep('code');
      setResendIn(60);
    } catch (e) { setErr(errMsg(e.body?.error || e.message)); }
    finally { setBusy(false); }
  }

  async function resend() {
    if (resendIn > 0) return;
    setErr(''); setBusy(true);
    try {
      await window.YY_API.signupResend(email.trim());
      setResendIn(60);
    } catch (e) { setErr(errMsg(e.body?.error || e.message)); }
    finally { setBusy(false); }
  }

  async function verifyCode(e) {
    e.preventDefault();
    setErr(''); setBusy(true);
    try {
      const res = await window.YY_API.signupVerify(email.trim(), code.trim());
      if (onLoggedIn) onLoggedIn(res.user);
      onClose();
    } catch (e) { setErr(errMsg(e.body?.error || e.message)); }
    finally { setBusy(false); }
  }

  return (
    <div className="yy-auth-backdrop" onClick={onClose}>
      <div className="yy-auth-modal" onClick={e => e.stopPropagation()}>
        <div className="yy-auth-tabs">
          <div className={'yy-auth-tab ' + (tab==='login'?'on':'')} onClick={() => { setTab('login'); setStep('form'); setErr(''); }}>
            {tx('登录', 'Sign in')}
          </div>
          <div className={'yy-auth-tab ' + (tab==='register'?'on':'')} onClick={() => { setTab('register'); setStep('form'); setErr(''); }}>
            {tx('注册', 'Register')}
          </div>
          <button className="yy-auth-close" onClick={onClose} aria-label="Close">×</button>
        </div>

        {tab === 'login' && (
          <form className="yy-auth-body" onSubmit={submitLogin}>
            <label>{tx('邮箱', 'Email')}</label>
            <input type="email" required autoFocus value={email} onChange={e => setEmail(e.target.value)} placeholder="you@example.com"/>
            <label>{tx('密码', 'Password')}</label>
            <input type="password" required minLength="6" value={password} onChange={e => setPassword(e.target.value)} placeholder={tx('至少 6 位', 'At least 6 characters')}/>
            {err && <div className="yy-auth-err">{err}</div>}
            <button type="submit" className="yy-auth-submit" disabled={busy}>{busy ? '…' : tx('登录', 'Sign in')}</button>
            <div className="yy-auth-switch">
              <span>{tx('还没有账号?', 'New to YYShop?')} <a onClick={() => { setTab('register'); setStep('form'); }}>{tx('注册新账号', 'Create an account')}</a></span>
            </div>
          </form>
        )}

        {tab === 'register' && step === 'form' && (
          <form className="yy-auth-body" onSubmit={sendCode}>
            <label>{tx('邮箱', 'Email')}</label>
            <input type="email" required autoFocus value={email} onChange={e => setEmail(e.target.value)} placeholder="you@example.com"/>
            <label>{tx('密码', 'Password')}</label>
            <input type="password" required minLength="6" value={password} onChange={e => setPassword(e.target.value)} placeholder={tx('至少 6 位', 'At least 6 characters')}/>
            <label>{tx('姓名', 'Name')} <span className="opt">{tx('(选填)', '(optional)')}</span></label>
            <input type="text" value={name} onChange={e => setName(e.target.value)} placeholder={tx('您的姓名', 'Your name')}/>
            <label>{tx('手机号', 'Phone')} <span className="opt">{tx('(选填)', '(optional)')}</span></label>
            <input type="tel" value={phone} onChange={e => setPhone(e.target.value)} placeholder="+86 …"/>
            {err && <div className="yy-auth-err">{err}</div>}
            <button type="submit" className="yy-auth-submit" disabled={busy}>
              {busy ? '…' : tx('获取验证码', 'Send verification code')}
            </button>
            <div className="yy-auth-switch">
              <span>{tx('已有账号?', 'Already have an account?')} <a onClick={() => setTab('login')}>{tx('立即登录', 'Sign in')}</a></span>
            </div>
          </form>
        )}

        {tab === 'register' && step === 'code' && (
          <form className="yy-auth-body" onSubmit={verifyCode}>
            <div style={{ marginBottom: 8, color: 'var(--fg-muted, #666)', fontSize: 13, lineHeight: 1.55 }}>
              {tx('我们已将 6 位验证码发送至', "We've sent a 6-digit code to")} <strong>{email}</strong>。
              {tx(' 验证码 10 分钟内有效。', ' The code is valid for 10 minutes.')}
            </div>
            <label>{tx('验证码', 'Verification code')}</label>
            <input
              type="text"
              required
              autoFocus
              maxLength="6"
              inputMode="numeric"
              pattern="[0-9]{6}"
              value={code}
              onChange={e => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
              placeholder="123456"
              style={{ letterSpacing: '0.3em', fontSize: 20, textAlign: 'center' }}
            />
            {err && <div className="yy-auth-err">{err}</div>}
            <button type="submit" className="yy-auth-submit" disabled={busy || code.length !== 6}>
              {busy ? '…' : tx('完成注册', 'Complete sign-up')}
            </button>
            <div className="yy-auth-switch" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <a onClick={() => { setStep('form'); setErr(''); }}>← {tx('修改邮箱', 'Change email')}</a>
              {resendIn > 0
                ? <span style={{ color: 'var(--fg-muted, #888)' }}>{tx(`${resendIn}s 后可重新发送`, `Resend in ${resendIn}s`)}</span>
                : <a onClick={resend}>{tx('重新发送验证码', 'Resend code')}</a>}
            </div>
          </form>
        )}
      </div>
    </div>
  );
};