import { View, Text, Image, ShareElement, ScrollView, GridView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useEffect } from 'react'
import { useThemeContext } from '../../context/ThemeContext'
import { useSafeArea } from '../../hooks/useSafeArea'
import { useStatusBar } from '../../hooks/useStatusBar'
import { registerSharedElementRoute } from '../../utils/sharedElementRoute'
import CustomTabBar from '../../custom-tab-bar'
import './index.scss'
import { PRODUCTS } from '../../utils/productConfig'

export default function ShopPage() {
  const { resolvedTheme } = useThemeContext()
  const safe = useSafeArea()
  useStatusBar(resolvedTheme)

  useEffect(() => {
    registerSharedElementRoute()
  }, [])

  const openDetail = (productId: string) => {
    // The initial app page may be WebView, so ensure registration here too.
    registerSharedElementRoute()
    Taro.navigateTo({
      url: `/pages/shop/detail/index?id=${productId}`,
      // @ts-ignore - routeType is a Skyline custom route option
      routeType: 'sharedElementRoute'
    } as any)
  }

  return (
    <View className={`shop-page theme-${resolvedTheme}`}>
      <ScrollView type="custom" scrollY className="shop-scroll">
        <View className="shop-header" style={{ paddingTop: `${safe.headerPaddingTop}px` }}>
          <Text className="shop-header-title">智绘精选</Text>
          <Text className="shop-header-sub">激光微雕定制好物</Text>
        </View>

        <GridView
          type="aligned"
          crossAxisCount={2}
          mainAxisGap={10}
          crossAxisGap={10}
          padding={[0, 12, 12, 12]}
          className="shop-grid"
        >
          {PRODUCTS.map(product => (
            <View
              key={product.id}
              className="shop-card"
              onTap={() => openDetail(product.id)}
            >
              <View className="shop-card-img-wrap">
                <ShareElement
                  mapkey={`product-${product.id}`}
                  duration={300}
                  className='shop-card-share'
                >
                  <Image
                    className="shop-card-img"
                    src={product.images?.[0] || product.iconImg || ''}
                    mode="aspectFill"
                  />
                </ShareElement>
              </View>
              <View
                className="shop-card-info"
                style={{
                  backgroundColor: `rgba(${product.tone?.[0] || 28}, ${product.tone?.[1] || 22}, ${product.tone?.[2] || 18}, 0.92)`
                }}
              >
                <Text className="shop-card-name">{product.name}</Text>
                <Text className="shop-card-price">¥{product.price}</Text>
              </View>
            </View>
          ))}
        </GridView>

        {/* TabBar spacer */}
        <View style={{ height: '160px' }} />
      </ScrollView>

      <CustomTabBar />
    </View>
  )
}