<template>
  <view class="index-page">
    <view class="page-content">
      <view class="hero-card">
        <text class="hero-eyebrow">觉林寺小程序</text>
        <text class="hero-title">首页</text>
        <text class="hero-desc">
          当前先完成首页、消息、我的三栏结构，测试能力统一收口到测试中心，避免首页继续堆放调试按钮。
        </text>
      </view>

      <view class="status-card">
        <view>
          <text class="section-label">当前授权状态</text>
          <text class="status-text">应用启动时会优先尝试静默授权</text>
        </view>
        <text class="status-tag" :class="{ authed: isAuthed }">
          {{ isAuthed ? '已授权' : '未授权' }}
        </text>
      </view>

      <view class="overview-grid">
        <view class="overview-card">
          <text class="card-title">首页</text>
          <text class="card-desc">展示当前项目概览、地图导览与测试入口。</text>
        </view>
        <view class="overview-card">
          <text class="card-title">消息</text>
          <text class="card-desc">后续承接通知、订单提醒与系统消息。</text>
        </view>
        <view class="overview-card">
          <text class="card-title">我的</text>
          <text class="card-desc">后续承接个人信息、授权状态与常用功能。</text>
        </view>
      </view>

      <view class="map-entry-card">
        <text class="section-label">地图导览</text>
        <text class="map-entry-desc">
          当前通过小程序 WebView 承载地图项目，方便从首页直接进入步行导览页面。
        </text>
        <button class="primary-btn" @tap="goToMapGuide">打开地图导览</button>
      </view>

      <view class="webview-entry-card">
        <text class="section-label">模拟 WebView</text>
        <text class="webview-entry-desc">
          这里提供一个首页直达的测试 WebView 入口，用于验证通用 WebView 承载能力。
        </text>
        <button class="outline-btn" @tap="goToMockWebview">打开模拟 WebView</button>
      </view>

      <view class="test-entry-card">
        <text class="section-label">测试入口</text>
        <text class="test-entry-desc">
          支付测试等调试能力仍统一收口到测试中心，方便集中联调。
        </text>
        <button class="outline-btn" @tap="goToTestCenter">进入测试中心</button>
      </view>
    </view>

    <AppTabbar current="home" />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro, { useDidShow } from '@tarojs/taro'
import AppTabbar from '@/components/AppTabbar.vue'
import { hasAuth } from '@/utils/authRedirect'
import { buildWebviewPreviewUrl } from '@/utils/webview'

const mock_webview_url = 'https://oa-dev.onwall.cn/f/futian_home/?f=f&p=futian_list'
const mock_webview_title = '福田首页'

const isAuthed = ref(false)

const refreshAuthStatus = () => {
  isAuthed.value = hasAuth()
}

const goToMapGuide = () => {
  Taro.navigateTo({
    url: '/pages/map-guide/index',
  })
}

const goToMockWebview = () => {
  Taro.navigateTo({
    url: buildWebviewPreviewUrl(mock_webview_url, mock_webview_title),
  })
}

const goToTestCenter = () => {
  Taro.navigateTo({
    url: '/pages/pay-test/index',
  })
}

useDidShow(() => {
  refreshAuthStatus()
})
</script>

<style lang="less">
.index-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(166, 121, 57, 0.18), transparent 32%),
    linear-gradient(180deg, #fffaf3 0%, #f6f7fb 100%);

  .page-content {
    padding: 32rpx 24rpx 0;
    box-sizing: border-box;
  }

  .hero-card,
  .status-card,
  .overview-card,
  .map-entry-card,
  .webview-entry-card,
  .test-entry-card {
    background: rgba(255, 255, 255, 0.94);
    border: 2rpx solid rgba(166, 121, 57, 0.08);
    border-radius: 28rpx;
    box-shadow: 0 20rpx 60rpx rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
  }

  .hero-card {
    display: flex;
    flex-direction: column;
    padding: 36rpx 32rpx;
  }

  .hero-eyebrow {
    font-size: 24rpx;
    font-weight: 600;
    letter-spacing: 4rpx;
    color: #a67939;
  }

  .hero-title {
    margin-top: 12rpx;
    font-size: 52rpx;
    font-weight: 700;
    color: #1f2937;
  }

  .hero-desc {
    margin-top: 18rpx;
    font-size: 26rpx;
    line-height: 1.8;
    color: #6b7280;
  }

  .status-card {
    margin-top: 24rpx;
    padding: 28rpx 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24rpx;
  }

  .section-label {
    display: block;
    font-size: 30rpx;
    font-weight: 600;
    color: #111827;
  }

  .status-text,
  .card-desc,
  .map-entry-desc,
  .webview-entry-desc,
  .test-entry-desc {
    display: block;
    margin-top: 12rpx;
    font-size: 24rpx;
    line-height: 1.7;
    color: #6b7280;
  }

  .status-tag {
    flex-shrink: 0;
    padding: 12rpx 22rpx;
    border-radius: 999rpx;
    font-size: 24rpx;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
  }

  .status-tag.authed {
    color: #166534;
    background: #dcfce7;
  }

  .overview-grid {
    margin-top: 24rpx;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20rpx;
  }

  .overview-card {
    padding: 28rpx;
  }

  .overview-card:last-child {
    grid-column: 1 / span 2;
  }

  .card-title {
    display: block;
    font-size: 30rpx;
    font-weight: 600;
    color: #111827;
  }

  .map-entry-card,
  .webview-entry-card,
  .test-entry-card {
    margin-top: 24rpx;
    padding: 32rpx;
  }

  .primary-btn,
  .outline-btn {
    margin-top: 24rpx;
    border-radius: 999rpx;
    font-size: 30rpx;
    line-height: 88rpx;
  }

  .primary-btn {
    color: #fff;
    background: linear-gradient(135deg, #a67939, #8f5e20);
  }

  .outline-btn {
    color: #0f172a;
    background: #fff;
    border: 2rpx solid #d1d5db;
  }
}
</style>