<template>
  <view class="page-shell home-page">
    <view class="page-blur"></view>
    <view class="page-blur-secondary"></view>
    <view class="page-blur-tertiary"></view>

    <view class="page-content">
      <view class="topbar capsule-safe">
        <view>
          <text class="brand-name">绿纤美业</text>
          <text class="brand-subtitle">会员专属 SPA 与肌肤管理</text>
        </view>
      </view>

      <view class="hero-card glass-card">
        <view class="hero-copy">
          <text class="hero-tag">TODAY'S BEAUTY RITUAL</text>
          <text class="hero-title">今日专属护理</text>
          <text class="hero-desc">
            在线预约、会员权益与到店体验，在一份更安静、更柔和的界面里被重新组织。
          </text>
        </view>
        <view class="hero-art-wrap">
          <image class="hero-art" src="/static/images/art-home.png" mode="aspectFill" />
        </view>

        <view class="quick-grid">
          <view v-for="item in quickEntries" :key="item.key" class="quick-item" @tap="handleQuick(item)">
            <view class="quick-icon" :class="item.iconType">
              <view class="icon-core"></view>
            </view>
            <text class="quick-title">{{ item.title }}</text>
            <text class="quick-subtitle">{{ item.subtitle }}</text>
          </view>
        </view>
      </view>

      <view class="section-block">
        <view class="section-head">
          <text class="section-title">最新预约记录</text>
          <text class="section-link" @tap="goRecord">查看全部</text>
        </view>
        <view class="record-card glass-card" @tap="goBookingDetail">
          <view class="record-status-row">
            <text class="record-status">{{ latestBooking.status }}</text>
            <text class="record-time">{{ latestBooking.date }} · {{ latestBooking.displayTime }}</text>
          </view>
          <text class="record-store">{{ latestBooking.store }}</text>
          <view class="record-meta-panel">
            <view class="record-meta-item">
              <text class="meta-label">护理顾问</text>
              <text class="meta-value">{{ latestBooking.therapist }}</text>
            </view>
            <view class="record-meta-item">
              <text class="meta-label">护理空间</text>
              <text class="meta-value">{{ latestBooking.room }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="section-block stores-section">
        <view class="section-head">
          <text class="section-title">附近门店</text>
          <text class="section-link" @tap="goStoreList">全部门店</text>
        </view>
        <view
          v-for="store in stores"
          :key="store.name"
          class="store-card glass-card"
          @tap="goStoreDetail(store)"
        >
          <view class="store-cover">
            <image class="store-cover-image" :src="store.cover" mode="aspectFill" />
            <view class="store-cover-overlay"></view>
            <text class="store-cover-badge">{{ store.tag }}</text>
            <text class="store-cover-title">{{ store.coverTitle }}</text>
          </view>
          <view class="store-body">
            <view class="store-headline">
              <text class="store-name">{{ store.name }}</text>
              <text class="store-distance">{{ store.distance }}</text>
            </view>
            <text class="store-address">{{ store.address }}</text>
            <view class="store-meta-row">
              <text class="store-meta">营业时间 {{ store.hours }}</text>
              <text class="store-meta">{{ store.phone }}</text>
            </view>
            <view class="store-actions">
              <view class="mini-button" @tap.stop="callStore(store.phone)">电话</view>
              <view class="mini-button" @tap.stop="openMap(store)">导航</view>
              <view class="mini-button primary-mini" @tap.stop="bookStore(store)">预约</view>
            </view>
          </view>
        </view>
      </view>

      <view class="safe-bottom-space"></view>
    </view>

    <view class="lf-tabbar-wrap">
      <view class="lf-tabbar-panel">
        <view
          v-for="item in tabs"
          :key="item.key"
          class="lf-tabbar-item"
          :class="{ active: item.key === 'home' }"
          @tap="goTab(item)"
        >
          <view class="lf-tabbar-icon-shell">
            <image
              class="lf-tabbar-icon"
              :src="item.key === 'home' ? item.activeIcon : item.icon"
              mode="aspectFit"
            />
          </view>
          <text class="lf-tabbar-label">{{ item.label }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { stores, bookingRecords } from '@/data/mock'

export default {
  data() {
    return {
      tabs: [
        {
          key: 'home',
          label: '首页',
          path: '/pages/home/home',
          icon: '/static/images/tab-home.png',
          activeIcon: '/static/images/tab-home-active.png'
        },
        {
          key: 'booking',
          label: '预约',
          path: '/pages/booking/booking',
          icon: '/static/images/tab-booking.png',
          activeIcon: '/static/images/tab-booking-active.png'
        },
        {
          key: 'mall',
          label: '商城',
          path: '/packageMall/main/main',
          icon: '/static/images/tab-mall.png',
          activeIcon: '/static/images/tab-mall-active.png'
        },
        {
          key: 'profile',
          label: '我的',
          path: '/pages/profile/profile',
          icon: '/static/images/tab-profile.png',
          activeIcon: '/static/images/tab-profile-active.png'
        }
      ],
      quickEntries: [
        {
          key: 'booking',
          title: '在线预约',
          subtitle: '锁定到店时段',
          iconType: 'orb'
        },
        {
          key: 'mall',
          title: '美容商城',
          subtitle: '浏览精选好物',
          iconType: 'leaf'
        },
        {
          key: 'record',
          title: '预约记录',
          subtitle: '查看最近安排',
          iconType: 'wave'
        }
      ],
      latestBooking: bookingRecords[0],
      stores: stores.slice(0, 3)
    }
  },
  methods: {
    handleQuick(item) {
      if (item.key === 'record') {
        this.goRecord()
        return
      }
      const pathMap = {
        booking: '/pages/booking/booking',
        mall: '/packageMall/main/main'
      }
      uni.redirectTo({
        url: pathMap[item.key]
      })
    },
    goRecord() {
      uni.navigateTo({
        url: '/packageBooking/record/record'
      })
    },
    goBookingDetail() {
      uni.navigateTo({
        url: `/packageBooking/detail/detail?id=${this.latestBooking.id}`
      })
    },
    goStoreList() {
      uni.navigateTo({
        url: '/packageBooking/stores/stores'
      })
    },
    goStoreDetail(store) {
      uni.navigateTo({
        url: `/packageBooking/store-detail/store-detail?id=${store.id}`
      })
    },
    callStore(phone) {
      uni.makePhoneCall({
        phoneNumber: phone
      })
    },
    openMap(store) {
      uni.showToast({
        title: `已为您准备 ${store.name} 导航`,
        icon: 'none'
      })
    },
    bookStore(store) {
      uni.redirectTo({
        url: `/pages/booking/booking?storeId=${store.id}`
      })
    },
    goTab(item) {
      if (item.key === 'home') {
        return
      }
      uni.redirectTo({
        url: item.path
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28rpx;
}

.brand-name {
  display: block;
  font-size: 42rpx;
  font-weight: 700;
  letter-spacing: 2rpx;
}

.brand-subtitle {
  display: block;
  margin-top: 10rpx;
  font-size: 24rpx;
  color: $text-secondary;
}

.hero-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 28rpx;
  padding: 42rpx;
  min-height: 420rpx;

  &::after {
    content: '';
    position: absolute;
    right: -84rpx;
    top: 8rpx;
    width: 420rpx;
    height: 420rpx;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100, 140, 118, 0.045), rgba(100, 140, 118, 0));
    z-index: 0;
  }

  &::before {
    content: '';
    position: absolute;
    right: 0;
    top: 76rpx;
    width: 250rpx;
    height: 250rpx;
    border-radius: 50%;
    border: 2rpx solid rgba(100, 140, 118, 0.038);
    z-index: 1;
  }
}

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 100%;
  padding-right: 36rpx;
}

.hero-tag {
  display: inline-block;
  margin-bottom: 18rpx;
  font-size: 20rpx;
  letter-spacing: 3rpx;
  color: $brand-primary;
}

.hero-title {
  display: block;
  font-size: 62rpx;
  line-height: 1.15;
  font-weight: 700;
  color: $brand-ink;
  white-space: nowrap;
}

.hero-desc {
  display: block;
  margin-top: 20rpx;
  color: $text-secondary;
  font-size: 28rpx;
  line-height: 1.7;
  max-width: 100%;
}

.hero-art-wrap {
  position: absolute;
  right: -118rpx;
  top: -8rpx;
  z-index: 1;
  width: 460rpx;
  height: 460rpx;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.085;
  pointer-events: none;
  filter: saturate(0.72) brightness(1.04);

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 34% 40%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.10) 44%, rgba(255, 255, 255, 0));
  }
}

.hero-art {
  width: 520rpx;
  height: 520rpx;
  margin-left: -66rpx;
  margin-top: -34rpx;
  transform: rotate(-12deg) scale(1.06);
}

.quick-grid {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  margin-top: 36rpx;
}

.quick-item {
  @include outlined-card(0.8);
  width: calc((100% - 24rpx) / 3);
  padding: 28rpx 20rpx;
  border-radius: 28rpx;
}

.quick-icon {
  position: relative;
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: rgba(210, 191, 156, 0.18);
  border: 1rpx solid rgba(210, 191, 156, 0.18);
}

.quick-icon.leaf {
  background: rgba(182, 142, 154, 0.14);
  border-color: rgba(182, 142, 154, 0.16);
}

.quick-icon.wave {
  background: rgba(175, 194, 181, 0.18);
  border-color: rgba(100, 140, 118, 0.12);
}

.icon-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22rpx;
  height: 22rpx;
  margin-left: -11rpx;
  margin-top: -11rpx;
  border-radius: 50%;
  background: $brand-primary-deep;
}

.quick-icon.leaf::before,
.quick-icon.wave::before,
.quick-icon.wave::after,
.quick-icon.orb::before {
  content: '';
  position: absolute;
}

.quick-icon.orb::before {
  width: 42rpx;
  height: 42rpx;
  left: 15rpx;
  top: 15rpx;
  border-radius: 50%;
  border: 3rpx solid rgba(36, 74, 61, 0.30);
}

.quick-icon.leaf::before {
  width: 26rpx;
  height: 40rpx;
  left: 24rpx;
  top: 16rpx;
  border-radius: 50% 0 50% 0;
  background: rgba(36, 74, 61, 0.22);
  transform: rotate(-24deg);
}

.quick-icon.wave::before,
.quick-icon.wave::after {
  width: 18rpx;
  height: 18rpx;
  border: 3rpx solid rgba(36, 74, 61, 0.28);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 18rpx 0 0;
  transform: rotate(45deg);
}

.quick-icon.wave::before {
  left: 19rpx;
  top: 28rpx;
}

.quick-icon.wave::after {
  left: 35rpx;
  top: 20rpx;
}

.quick-title {
  display: block;
  margin-top: 20rpx;
  font-size: 28rpx;
  font-weight: 600;
}

.quick-subtitle {
  display: block;
  margin-top: 8rpx;
  font-size: 22rpx;
  line-height: 1.5;
  color: $text-secondary;
}

.section-block {
  margin-bottom: 28rpx;
}

.record-card {
  padding: 34rpx;
}

.record-status-row,
.store-headline,
.store-meta-row,
.store-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.record-status {
  @include chip-status;
  font-weight: 600;
}

.record-time,
.record-store,
.store-address,
.store-meta,
.meta-label {
  font-size: 24rpx;
  color: $text-secondary;
}

.record-store {
  display: block;
  margin: 20rpx 0 22rpx;
  font-size: 34rpx;
  line-height: 1.4;
  font-weight: 700;
  color: $text-primary;
}

.record-meta-panel {
  display: flex;
  justify-content: space-between;
  padding: 22rpx 24rpx;
  border-radius: 28rpx;
  background: rgba(210, 191, 156, 0.10);
  box-shadow: $shadow-soft;
}

.record-meta-item {
  width: 48%;
}

.meta-label,
.meta-value {
  display: block;
}

.meta-value {
  margin-top: 8rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: $brand-primary-deep;
}

.store-card {
  overflow: hidden;
  margin-bottom: 24rpx;
  padding: 0;
}

.store-cover {
  position: relative;
  height: 240rpx;
  padding: 28rpx;
  color: #fff;
}

.store-cover-image,
.store-cover-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.store-cover-overlay {
  background: linear-gradient(120deg, rgba(36, 74, 61, 0.18), rgba(36, 74, 61, 0.50));
}

.store-cover-badge,
.store-cover-title {
  position: relative;
  z-index: 2;
}

.store-cover-badge {
  @include chip-inverse;
}

.store-cover-title {
  position: absolute;
  left: 28rpx;
  right: 28rpx;
  bottom: 28rpx;
  font-size: 38rpx;
  line-height: 1.35;
  font-weight: 700;
}

.store-body {
  padding: 30rpx;
}

.store-name {
  font-size: 32rpx;
  font-weight: 700;
}

.store-distance {
  font-size: 24rpx;
  color: $brand-accent;
  font-weight: 600;
}

.store-address {
  display: block;
  margin: 14rpx 0;
  line-height: 1.6;
}

.store-actions {
  margin-top: 26rpx;
}

.mini-button {
  width: calc((100% - 24rpx) / 3);
  height: 72rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 500;
  background: rgba(100, 140, 118, 0.08);
  color: $brand-primary-deep;
}

.primary-mini {
  color: #fff;
  background: $brand-primary-deep;
  border: 1rpx solid rgba(210, 191, 156, 0.22);
  box-shadow: $shadow-chip;
}
</style>
