/* global React, Icon, MOCK_IP, CopyBtn, pushHistory, useHistory, timeAgo,
          fetchMyIP, checkLocalRateLimit, markLocalRateLimited, fmtCountdown,
          useT, useLocale, getRegion */

// ── Ad-blocker detection ───────────────────────────────────────────────────
function detectAdBlocker() {
  return new Promise((resolve) => {
    const bait = document.createElement('div');
    bait.className = 'ad-unit ads adsense doubleclick ad-placement banner-ad';
    bait.style.cssText = 'position:absolute;top:-9999px;left:-9999px;width:1px;height:1px;pointer-events:none;';
    bait.setAttribute('aria-hidden', 'true');
    document.body.appendChild(bait);
    setTimeout(() => {
      const style   = window.getComputedStyle(bait);
      const blocked = !bait.offsetParent && bait.offsetHeight === 0 ||
                      style.display      === 'none'    ||
                      style.visibility   === 'hidden'  ||
                      style.opacity      === '0';
      document.body.removeChild(bait);
      resolve(blocked);
    }, 400);
  });
}

// ── Ad-blocker modal ───────────────────────────────────────────────────────
function AdBlockModal({ onDismiss }) {
  const t = useT();
  return (
    <div className="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="adb-title">
      <div className="modal-box fade-in">
        <div style={{ color: 'var(--warn)', marginBottom: 16 }}><Icon.ban width="48" height="48"/></div>
        <h2 id="adb-title" style={{ margin: '0 0 10px', fontSize: 20, fontWeight: 600 }}>{t('adblock.title')}</h2>
        <p style={{ margin: '0 0 20px', color: 'var(--text-2)', lineHeight: 1.65, fontSize: 14 }}
           dangerouslySetInnerHTML={{ __html: t('adblock.desc') }}/>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <a href="https://support.google.com/chrome/answer/2765944" target="_blank" rel="noopener noreferrer"
             className="btn btn-primary" style={{ justifyContent: 'center' }}>
            {t('adblock.btn1')}
          </a>
          <button className="btn btn-ghost" style={{ justifyContent: 'center', fontSize: 13 }} onClick={onDismiss}>
            {t('adblock.btn2')}
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Rate-limit modal ───────────────────────────────────────────────────────
function RateLimitModal({ retryTs }) {
  const t = useT();
  const [remaining, setRemaining] = useState(retryTs - Date.now());
  useEffect(() => {
    const timer = setInterval(() => {
      const r = retryTs - Date.now();
      setRemaining(r);
      if (r <= 0) clearInterval(timer);
    }, 1000);
    return () => clearInterval(timer);
  }, [retryTs]);

  return (
    <div className="card card-pad-lg fade-in" style={{ textAlign: 'center' }}>
      <div style={{ color: 'var(--warn)', marginBottom: 16 }}><Icon.clock width="36" height="36"/></div>
      <h2 style={{ margin: '0 0 8px', fontSize: 20, fontWeight: 600 }}>{t('rateLimit.title')}</h2>
      <p style={{ margin: '0 0 20px', color: 'var(--text-2)', fontSize: 14, lineHeight: 1.65 }}
         dangerouslySetInnerHTML={{ __html: t('rateLimit.desc') }}/>
      <div className="mono" style={{ fontSize: 40, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--accent)', margin: '0 0 20px' }}>
        {remaining > 0 ? fmtCountdown(remaining) : '00:00:00'}
      </div>
      <p style={{ margin: '0 0 16px', color: 'var(--text-3)', fontSize: 13 }}>{t('rateLimit.vpnHint')}</p>
      <a href="#" className="btn btn-primary" style={{ justifyContent: 'center' }}>
        <Icon.shield/> {t('rateLimit.vpnCta')}
      </a>
    </div>
  );
}

// ── Map placeholder ────────────────────────────────────────────────────────
function MapPlaceholder({ lat, lon, city, region }) {
  return (
    <div className="map-side">
      <svg className="map-svg" viewBox="0 0 400 360" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
        <defs>
          <pattern id="mapgrid" width="32" height="32" patternUnits="userSpaceOnUse">
            <path d="M32 0 H0 V32" fill="none" stroke="oklch(from var(--text-3) l c h / 0.12)" strokeWidth="0.6"/>
          </pattern>
          <radialGradient id="mapglow" cx="55%" cy="50%" r="60%">
            <stop offset="0%" stopColor="oklch(from var(--accent) l c h / 0.18)"/>
            <stop offset="100%" stopColor="transparent"/>
          </radialGradient>
        </defs>
        <rect width="400" height="360" fill="var(--bg-2)"/>
        <rect width="400" height="360" fill="url(#mapglow)"/>
        <rect width="400" height="360" fill="url(#mapgrid)"/>
        <path d="M-20 220 Q60 180 120 200 T260 190 Q320 180 420 210 L420 380 L-20 380Z"
              fill="oklch(from var(--text-3) l c h / 0.07)" stroke="oklch(from var(--text-3) l c h / 0.12)" strokeWidth="0.8"/>
        <path d="M-20 90 Q40 70 100 80 Q160 95 220 80 Q280 65 360 80 Q400 88 420 80 L420 -10 L-20 -10Z"
              fill="oklch(from var(--text-3) l c h / 0.05)" stroke="oklch(from var(--text-3) l c h / 0.1)" strokeWidth="0.8"/>
        <g stroke="oklch(from var(--text-3) l c h / 0.18)" strokeWidth="1.2" fill="none">
          <path d="M0 240 Q120 220 220 200 T400 180"/>
          <path d="M40 -10 Q60 120 220 200 Q300 240 360 380"/>
          <path d="M-10 300 Q140 280 260 220 Q340 180 410 160"/>
        </g>
      </svg>
      <span className="map-pin" style={{ left: '55%', top: '48%' }}/>
      <div className="map-overlay">
        <span className="row" style={{ gap: 8 }}><Icon.pin/> <strong>{city}</strong>, {region}</span>
        <span className="mono" style={{ fontSize: 12, color: 'var(--text-3)' }}>{lat.toFixed(4)}, {lon.toFixed(4)}</span>
      </div>
    </div>
  );
}

// ── IP card ────────────────────────────────────────────────────────────────
function MyIPCard({ data, loading }) {
  const t = useT();
  const locale = useLocale();
  const region = getRegion(data.countryCode);
  const postalLabel = region.postal[locale] || region.postal.en;

  return (
    <div className="card ip-card fade-in">
      <div className="ip-card-grid">
        <div className="ip-main">
          <div className="row" style={{ justifyContent: 'space-between' }}>
            <span className="eyebrow">{t('ipCard.label')}</span>
            <span className="chip green"><span className="dot green"/> {t('ipCard.connected')}</span>
          </div>

          <div className="ip-row">
            <div>
              <div className="label">IPv4</div>
              <div className="value">{loading ? <span className="skeleton" style={{ width: 180 }}/> : (data.ipv4 || '—')}</div>
            </div>
            {!loading && data.ipv4 && <CopyBtn value={data.ipv4} label={t('common.copy')}/>}
          </div>

          <div className="ip-row">
            <div style={{ minWidth: 0, flex: 1 }}>
              <div className="label">IPv6</div>
              <div className="value mono" style={{ fontSize: 14, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {loading ? <span className="skeleton" style={{ width: 240 }}/> : (data.ipv6 || '—')}
              </div>
            </div>
            {!loading && data.ipv6 && <CopyBtn value={data.ipv6} label={t('common.copy')}/>}
          </div>

          <div className="ip-meta">
            <Cell k={t('ipCard.city')}     v={loading ? '—' : data.city}/>
            <Cell k={t('ipCard.state')}    v={loading ? '—' : data.region}/>
            <Cell k={t('ipCard.country')}  v={loading ? '—' : `${data.country} (${data.countryCode})`}/>
            <Cell k={postalLabel}          v={loading ? '—' : data.postal} mono/>
            <Cell k={t('ipCard.timezone')} v={loading ? '—' : data.timezone}/>
            <Cell k={t('ipCard.asn')}      v={loading ? '—' : data.asn} mono/>
            <Cell k={t('ipCard.isp')}      v={loading ? '—' : data.isp} span={2}/>
            <Cell k={t('ipCard.hostname')} v={loading ? '—' : data.hostname} mono span={2}/>
          </div>
        </div>
        <MapPlaceholder lat={data.lat} lon={data.lon} city={data.city} region={data.region}/>
      </div>
    </div>
  );
}

function Cell({ k, v, mono, span }) {
  return (
    <div className="ip-meta-cell" style={span === 2 ? { gridColumn: 'span 2' } : undefined}>
      <div className="k">{k}</div>
      <div className={'v' + (mono ? ' mono' : '')} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{v}</div>
    </div>
  );
}

// ── Quick tools ────────────────────────────────────────────────────────────
function QuickTools() {
  const t = useT();
  const tools = [
    { href: '#/dns',        icon: <Icon.dns/>,     k: 'dns'     },
    { href: '#/ping',       icon: <Icon.ping/>,    k: 'ping'    },
    { href: '#/whois',      icon: <Icon.whois/>,   k: 'whois'   },
    { href: '#/velocidade', icon: <Icon.speed/>,   k: 'speed'   },
    { href: '#/reverse',    icon: <Icon.reverse/>, k: 'reverse' },
    { href: '#/',           icon: <Icon.globe/>,   k: 'myip'    },
  ];
  return (
    <div className="quick-tools" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
      {tools.map((tool, i) => (
        <a key={i} href={tool.href} className="quick-tool">
          <span className="ic">{tool.icon}</span>
          <span style={{ minWidth: 0 }}>
            <div className="t">{t(`qt.${tool.k}.t`)}</div>
            <div className="s">{t(`qt.${tool.k}.s`)}</div>
          </span>
        </a>
      ))}
    </div>
  );
}

// ── VPN affiliate card ─────────────────────────────────────────────────────
function VPNCard({ countryCode }) {
  const t = useT();
  const locale = useLocale();
  const region = getRegion(countryCode);
  const price   = region.vpnPrice[locale]  || region.vpnPrice.en;
  const period  = region.vpnPeriod[locale] || region.vpnPeriod.en;

  return (
    <div className="vpn-card">
      <div className="ic"><Icon.shield/></div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div className="vpn-affiliate-tag">{t('vpn.tag')}</div>
        <div className="t">{t('vpn.title')}</div>
        <div className="s">{t('vpn.desc', { sym: region.symbol, price, period })}</div>
      </div>
      <a href="#" className="btn btn-primary cta">{t('vpn.cta')} <Icon.arrow/></a>
    </div>
  );
}

// ── History panel ──────────────────────────────────────────────────────────
function HistoryPanel() {
  const t = useT();
  const [items, clear] = useHistory();
  if (!items.length) {
    return (
      <div className="card card-pad">
        <div className="eyebrow">{t('history.title')}</div>
        <p style={{ color: 'var(--text-3)', margin: '12px 0 0', fontSize: 13 }}>{t('history.empty')}</p>
      </div>
    );
  }
  return (
    <div className="card card-pad">
      <div className="between" style={{ marginBottom: 12 }}>
        <span className="eyebrow">{t('history.title')}</span>
        <button className="btn btn-sm btn-ghost" onClick={clear}><Icon.trash/> {t('history.clear')}</button>
      </div>
      <div className="history">
        {items.map((it, i) => (
          <div key={i} className="history-item">
            <span className="chip" style={{ fontSize: 11 }}>{it.kind}</span>
            <span className="mono">{it.q}</span>
            <span className="when">{timeAgo(it.t)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── FAQ ────────────────────────────────────────────────────────────────────
function FAQ() {
  const t = useT();
  const items = t('faq.items') || [];
  return (
    <section className="block" id="faq">
      <div className="container-narrow">
        <span className="eyebrow">{t('faq.eyebrow')}</span>
        <h2 style={{ marginTop: 6 }}>{t('faq.title')}</h2>
        <p className="sub">{t('faq.sub')}</p>
        <div>
          {items.map((it, i) => (
            <details key={i} className="faq-item" open={i === 0}>
              <summary className="faq-summary">{it.q}<span className="chev"><Icon.chev/></span></summary>
              <div className="faq-body">{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Home page ──────────────────────────────────────────────────────────────
function HomePage({ tweaks }) {
  const t = useT();
  const [loading, setLoading]               = useState(true);
  const [data, setData]                     = useState(MOCK_IP);
  const [rateLimited, setRateLimited]       = useState(null);
  const [adBlockDetected, setAdBlockDetected]   = useState(false);
  const [adBlockDismissed, setAdBlockDismissed] = useState(false);

  useEffect(() => {
    const rl = checkLocalRateLimit();
    if (!rl.allowed) {
      setRateLimited({ retryTs: rl.retryTs });
      setLoading(false);
      return;
    }
    fetchMyIP()
      .then((d) => { setData(d); setLoading(false); })
      .catch((err) => {
        if (err.code === 'rate_limited') {
          markLocalRateLimited(err.retryTs);
          setRateLimited({ retryTs: err.retryTs });
        }
        setLoading(false);
      });
  }, []);

  useEffect(() => {
    if (sessionStorage.getItem('vermeip:adb-dismissed')) return;
    detectAdBlocker().then((blocked) => { if (blocked) setAdBlockDetected(true); });
  }, []);

  const dismissAdBlock = () => {
    sessionStorage.setItem('vermeip:adb-dismissed', '1');
    setAdBlockDismissed(true);
  };

  return (
    <div className="page">
      {adBlockDetected && !adBlockDismissed && <AdBlockModal onDismiss={dismissAdBlock}/>}

      <section className="hero">
        <div className="container">
          <span className="eyebrow">{t('home.eyebrow')}</span>
          <h1 style={{ marginTop: 8 }}>
            {t('home.titleA')}<span style={{ color: 'var(--accent)' }}>{t('home.titleHi')}</span>{t('home.titleZ')}
          </h1>
          <p className="lede">{t('home.lede')}</p>

          {/* Mobile/tablet-only ad — between lede and IP card */}
          {tweaks?.showAds !== false && (
            <div className="ad-slot h-banner ad-mobile-only" style={{ marginBottom: 24 }}>
              {t('tools.adMobile')}
            </div>
          )}

          <div className="grid-2">
            <div className="stack-lg">
              {rateLimited
                ? <RateLimitModal retryTs={rateLimited.retryTs}/>
                : <MyIPCard data={data} loading={loading}/>
              }
              {tweaks?.showQuickTools !== false && <QuickTools/>}
              {tweaks?.showVPN !== false && <VPNCard countryCode={data.countryCode}/>}
            </div>
            <div className="stack-lg">
              {tweaks?.showAds !== false && (
                <div className="ad-slot h-square ad-desktop-only">{t('tools.adSlot')}<br/>300×250</div>
              )}
              <HistoryPanel/>
            </div>
          </div>
        </div>
      </section>

      {tweaks?.showAds !== false && (
        <div className="container" style={{ marginTop: 24 }}>
          <div className="ad-slot h-leader">{t('tools.adLeader')}</div>
        </div>
      )}

      <FAQ/>
    </div>
  );
}

Object.assign(window, { HomePage, detectAdBlocker, AdBlockModal, RateLimitModal });