<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import shareMenuIcon from '@/assets/share-menu-icon.png'

const router = useRouter()

const homeUrl = computed(() => {
  if (typeof window === 'undefined') return 'https://hao858.com/m'
  return `${window.location.origin}/m`
})

const displayHost = computed(() => {
  if (typeof window === 'undefined') return 'hao858.com'
  return window.location.host || 'hao858.com'
})

async function copyHomeUrl() {
  try {
    await navigator.clipboard.writeText(homeUrl.value)
    showToast({ message: '首页链接已复制', icon: 'success' })
  } catch {
    showToast({ message: '复制失败，请手动复制浏览器地址', icon: 'cross' })
  }
}
</script>

<template>
  <main class="add-home-guide">
    <header class="page-header">
      <button class="back-btn" type="button" @click="router.back()">
        <van-icon name="arrow-left" :size="20" />
      </button>
      <h1>添加到桌面</h1>
      <button class="home-btn" type="button" @click="router.push('/m')">首页</button>
    </header>

    <section class="guide-hero">
      <div class="guide-hero-copy">
        <span>大锤商行</span>
        <h2>如何添加到手机</h2>
        <p>添加后可从桌面直接进入，找号、下单和查看消息更顺手。</p>
      </div>
      <div class="hammer-badge" aria-hidden="true">锤</div>
    </section>

    <section class="guide-step">
      <div class="step-index">1</div>
      <div class="step-body">
        <h3>点击浏览器「分享/共享」</h3>
        <p>请先用 Safari、Chrome 或系统浏览器打开大锤商行，在底部工具栏或菜单里找到入口。</p>
        <div class="browser-demo" aria-label="浏览器分享或共享按钮示意">
          <div class="demo-nav">
            <span>AA</span>
            <strong>{{ displayHost }}</strong>
            <van-icon name="replay" :size="18" />
          </div>
          <div class="share-action">
            <img :src="shareMenuIcon" alt="分享或共享" />
          </div>
        </div>
      </div>
    </section>

    <section class="guide-step">
      <div class="step-index">2</div>
      <div class="step-body">
        <h3>下滑点击「添加到主屏幕」</h3>
        <p>在分享/共享菜单中找到添加入口，确认名称后保存即可。</p>
        <div class="menu-demo" aria-label="添加到主屏幕菜单示意">
          <div class="menu-row">
            <span>添加到阅读列表</span>
            <van-icon name="eye-o" :size="20" />
          </div>
          <div class="menu-row">
            <span>添加书签</span>
            <van-icon name="bookmark-o" :size="20" />
          </div>
          <div class="menu-row">
            <span>添加到个人收藏</span>
            <van-icon name="star-o" :size="20" />
          </div>
          <div class="menu-row is-active">
            <strong>添加到主屏幕</strong>
            <span class="plus-box">+</span>
          </div>
        </div>
      </div>
    </section>

    <section class="guide-note">
      <van-icon name="info-o" :size="18" />
      <p>
        如果当前在微信或 QQ 内置浏览器，请先点右上角「...」选择在系统浏览器打开，再按上方步骤添加。
      </p>
    </section>

    <div class="guide-actions">
      <button class="primary-action" type="button" @click="copyHomeUrl">复制首页链接</button>
      <button class="secondary-action" type="button" @click="router.push('/m')">返回首页</button>
    </div>

    <footer class="guide-footer">
      <span>找回包赔</span>
      <span>安心服务</span>
      <span>真实号源</span>
    </footer>
  </main>
</template>

<style scoped>
.add-home-guide {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  background: #f6f8fb;
  color: #17233d;
}

.page-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 44px 1fr 52px;
  align-items: center;
  height: 48px;
  padding: 0 8px;
  border-bottom: 1px solid #edf0f5;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.page-header h1 {
  margin: 0;
  color: #111827;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}

.back-btn,
.home-btn {
  display: grid;
  height: 40px;
  place-items: center;
  border: 0;
  background: transparent;
  color: #374151;
}

.back-btn {
  width: 40px;
}

.home-btn {
  justify-self: end;
  padding: 0 8px;
  color: #ff6a00;
  font-size: 13px;
  font-weight: 900;
}

.guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 16px;
  align-items: center;
  margin: 12px;
  padding: 18px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 58%, #eef6ff 100%);
}

.guide-hero-copy {
  min-width: 0;
}

.guide-hero-copy span {
  color: #c2410c;
  font-size: 13px;
  font-weight: 900;
}

.guide-hero-copy h2 {
  margin: 7px 0 0;
  color: #1f1308;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.18;
}

.guide-hero-copy p {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.hammer-badge {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(135deg, #ff9a3d, #ef4444);
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 18px 36px rgba(239, 68, 68, 0.2);
  transform: rotate(-8deg);
}

.guide-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  margin: 12px;
}

.step-index {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: #ff8a1f;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(255, 138, 31, 0.18);
}

.step-body {
  min-width: 0;
}

.step-body h3 {
  margin: 2px 0 6px;
  color: #111827;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
}

.step-body p {
  margin: 0 0 10px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.browser-demo,
.menu-demo {
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.browser-demo {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 22px 16px 18px;
}

.demo-nav {
  display: grid;
  width: 100%;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 8px;
  background: #f8fafc;
  color: #111827;
  box-shadow: inset 0 0 0 1px #eef2f7;
}

.demo-nav span,
.demo-nav strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-nav span {
  font-size: 15px;
  font-weight: 900;
}

.demo-nav strong {
  font-size: 17px;
  font-weight: 900;
  text-align: center;
}

.share-action {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 16px;
  background: #eff6ff;
  color: #1683ff;
  box-shadow: 0 10px 22px rgba(22, 131, 255, 0.14);
}

.share-action img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.menu-demo {
  display: grid;
  padding: 8px 0;
}

.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 18px;
  border-bottom: 1px solid #eef2f7;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
}

.menu-row:last-child {
  border-bottom: 0;
}

.menu-row.is-active {
  margin: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: #fff7ed;
  color: #c2410c;
  box-shadow: 0 10px 22px rgba(255, 106, 0, 0.12);
}

.plus-box {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 2px solid #111827;
  border-radius: 7px;
  color: #111827;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.guide-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 12px;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
}

.guide-note p {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.guide-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 12px 0;
}

.primary-action,
.secondary-action {
  height: 42px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
}

.primary-action {
  border: 0;
  background: #ff6a00;
  color: #fff;
}

.secondary-action {
  border: 1px solid #dbe3ee;
  background: #fff;
  color: #475569;
}

.primary-action:active,
.secondary-action:active,
.home-btn:active,
.back-btn:active {
  transform: translateY(1px);
}

.guide-footer {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
  color: #7c8899;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 360px) {
  .guide-hero {
    grid-template-columns: minmax(0, 1fr) 70px;
    padding: 16px;
  }

  .guide-hero-copy h2 {
    font-size: 24px;
  }

  .hammer-badge {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    font-size: 24px;
  }

  .guide-actions {
    grid-template-columns: 1fr;
  }

  .guide-footer {
    gap: 10px;
  }
}
</style>
