import { View, Text, Image, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState, useEffect, useCallback, useMemo } from 'react'
import './index.scss'
import { PRODUCTS } from '../../../utils/productConfig'
import { ProductCategory } from '../../../types'
import { useSafeArea } from '../../../hooks/useSafeArea'
import { useStatusBar } from '../../../hooks/useStatusBar'
import { useThemeContext } from '../../../context/ThemeContext'
import ThemedPageMeta from '../../../components/ThemedPageMeta'

const clamp = (v: number, min: number, max: number) => Math.min(Math.max(v, min), max)
const lerp = (a: number, b: number, t: number) => a + (b - a) * t
const easeOut = (t: number) => 1 - Math.pow(1 - t, 3)

export default function ShopDetailPage() {
  const { resolvedTheme } = useThemeContext()
  const [winHeight, setWinHeight] = useState(667)
  const [progress, setProgress] = useState(0)
  const safe = useSafeArea()
  // 顶部为沉浸式商品图，状态栏始终使用白字。
  useStatusBar(resolvedTheme, { mode: 'light' })

  const routerParams = Taro.getCurrentInstance().router
  const routerParamsValues = routerParams ? routerParams.params : undefined
  const productId = routerParamsValues ? routerParamsValues.id : ''
  const product: ProductCategory | undefined = PRODUCTS.find(p => p.id === productId)

  useEffect(() => {
    try {
      const info = Taro.getSystemInfoSync()
      setWinHeight(info.windowHeight)
    } catch (e) {
      // fallback to safe default
    }
  }, [])

  const handleScroll = useCallback((e: any) => {
    const st = (e.detail && e.detail.scrollTop) || 0
    const total = winHeight * 1.2
    const p = clamp(st / total, 0, 1)
    setProgress(p)
  }, [winHeight])

  /* Scroll-progress → multi-stage hero & content animations */
  const heroStyles = useMemo(() => {
    const p = progress

    // 1. Image crop insets (vh %)
    let topCrop = 0, bottomCrop = 0
    if (p <= 0.4) {
      const t = easeOut(p / 0.4)
      topCrop = lerp(0, 32, t)
      bottomCrop = lerp(0, 38, t)
    } else if (p <= 0.55) {
      const t = (p - 0.4) / 0.15
      topCrop = lerp(32, 34, t)
      bottomCrop = lerp(38, 41, t)
    } else {
      topCrop = 34; bottomCrop = 41
    }

    // 2. Hero translateY
    let translateY = 0
    if (p <= 0.4) translateY = 0
    else if (p <= 0.7) translateY = lerp(0, -75, (p - 0.4) / 0.3)
    else translateY = -75

    // 3. Hero bottom info opacity (always visible on open, fades after scroll)
    let heroInfoOpacity = 1
    if (p <= 0.35) heroInfoOpacity = 1
    else if (p <= 0.48) heroInfoOpacity = clamp(1 - (p - 0.35) / 0.13, 0, 1)
    else heroInfoOpacity = 0

    // 4. Transition band opacity
    let bandOpacity = 0
    if (p <= 0.55) bandOpacity = 0
    else if (p <= 0.7) bandOpacity = (p - 0.55) / 0.15
    else bandOpacity = 1

    // 5. Content reveal
    let contentOpacity = 1, contentOffset = 0
    if (p <= 0.05) { contentOpacity = 0; contentOffset = 60 }
    else if (p <= 0.22) {
      const t = (p - 0.05) / 0.17
      contentOpacity = easeOut(t)
      contentOffset = lerp(60, 0, easeOut(t))
    }

    // 6. Back button (fade out as hero scrolls)
    let backBtnOpacity = 1
    if (p <= 0.15) backBtnOpacity = clamp(1 - p / 0.15, 0, 1)

    return {
      topCrop,
      bottomCrop,
      translateY,
      heroInfoOpacity,
      bandOpacity,
      contentOpacity,
      contentOffset,
      backBtnOpacity,
      visibleHeight: 100 - topCrop - bottomCrop
    }
  }, [progress])

  const tone = useMemo(() => (product ? product.tone : [28, 22, 18]), [product])

  if (!product) {
    return (
      <View className="shop-detail-page">
        <ThemedPageMeta darkTop />
        <Text style={{ color: '#fff', padding: '40rpx' }}>商品不存在</Text>
      </View>
    )
  }

  return (
    <View className="shop-detail-page">
      <ThemedPageMeta darkTop />
      {/* Fixed Hero */}
      <View className="shop-hero-fixed">
        <View
          className="shop-hero-clip"
          style={{
            height: `${winHeight * heroStyles.visibleHeight / 100}px`,
            overflow: 'hidden',
            transform: `translateY(${winHeight * heroStyles.translateY / 100}px)`
          }}
        >
          <Image
            className="shop-hero-img"
            src={(product.images && product.images[0]) || product.iconImg || ''}
            mode="aspectFill"
            style={{
              width: '100%',
              height: `${winHeight}px`,
              position: 'absolute',
              top: `${-winHeight * heroStyles.topCrop / 100}px`,
              left: 0
            }}
          />
        </View>

        {/* Bottom gradient overlay driven by product tone */}
        <View
          className="shop-hero-overlay"
          style={{
            background: `linear-gradient(to bottom, rgba(${tone[0]}, ${tone[1]}, ${tone[2]}, 0) 0%, rgba(${tone[0]}, ${tone[1]}, ${tone[2]}, 0.55) 40%, rgba(${tone[0]}, ${tone[1]}, ${tone[2]}, 0.95) 100%)`
          }}
        />

        <View
          className="shop-hero-info"
          style={{ opacity: heroStyles.heroInfoOpacity }}
        >
          <Text className="shop-hero-title">{product.name}</Text>
          <Text className="shop-hero-subtitle">{product.subtitle || product.desc}</Text>
          <View className="shop-hero-price-row">
            <Text className="shop-hero-price">¥{product.price}</Text>
            {product.originalPrice && product.originalPrice > product.price && (
              <Text className="shop-hero-original">¥{product.originalPrice}</Text>
            )}
          </View>
        </View>
      </View>

      {/* Scrollable content sits above the fixed hero */}
      <ScrollView
        key={product.id}
        className="shop-scroll"
        scrollY
        scrollEventThrottle={16}
        style={{ height: `${winHeight}px` }}
        onScroll={handleScroll}
      >
        {/* Transparent spacer pushes content below hero */}
        <View style={{ height: `${winHeight * 0.65}px` }} />

        <View
          className="shop-content"
          style={{ backgroundColor: `rgb(${tone[0]}, ${tone[1]}, ${tone[2]})` }}
        >
          {/* Transition band — appears as hero scrolls away */}
          <View
            className="shop-band"
            style={{
              top: `${safe.statusBarHeight}px`,
              opacity: heroStyles.bandOpacity,
              backgroundColor: `rgba(${tone[0]}, ${tone[1]}, ${tone[2]}, 0.88)`,
              backdropFilter: 'blur(12px)',
              WebkitBackdropFilter: 'blur(12px)'
            }}
          >
            <Text className="shop-band-title">{product.name}</Text>
            <Text className="shop-band-subtitle">{product.subtitle || product.desc}</Text>
            <View className="shop-band-price-row">
              <Text className="shop-band-price">¥{product.price}</Text>
              {product.originalPrice && product.originalPrice > product.price && (
                <Text className="shop-band-original">¥{product.originalPrice}</Text>
              )}
            </View>
          </View>

          {/* Main copy blocks */}
          <View
            className="shop-detail-body"
            style={{
              opacity: heroStyles.contentOpacity,
              transform: `translateY(${heroStyles.contentOffset}px)`
            }}
          >
            {product.story && (
              <View className="shop-section">
                <Text className="shop-section-title">设计理念</Text>
                <Text className="shop-section-text">{product.story}</Text>
              </View>
            )}

            <View className="shop-divider" />

            {product.scene && (
              <View className="shop-section">
                <Text className="shop-section-title">使用场景</Text>
                <Text className="shop-section-text">{product.scene}</Text>
              </View>
            )}

            {product.tags && product.tags.length > 0 && (
              <View className="shop-section">
                <View className="shop-tag-row">
                  {product.tags.map(tag => (
                    <View key={tag} className="shop-tag">
                      <Text className="shop-tag-text">{tag}</Text>
                    </View>
                  ))}
                </View>
              </View>
            )}

            <View className="shop-divider" />

            {product.specs && product.specs.length > 0 && (
              <View className="shop-section">
                <Text className="shop-section-title">规格参数</Text>
                <View className="shop-spec-table">
                  {product.specs.map(([k, v]) => (
                    <View key={k} className="shop-spec-row">
                      <Text className="shop-spec-key">{k}</Text>
                      <Text className="shop-spec-val">{v}</Text>
                    </View>
                  ))}
                </View>
              </View>
            )}

            <View className="shop-bottom-spacer" />
          </View>
        </View>
      </ScrollView>

      {/* Back button — glass morphism circle */}
      <View
        className="shop-back-btn"
        onTap={() => Taro.navigateBack()}
        style={{ top: `${safe.backBtnPaddingTop}px`, opacity: heroStyles.backBtnOpacity }}
      >
        <Text className="shop-back-arrow">←</Text>
      </View>

      {/* Bottom CTA — fixed, glass, links to existing product page */}
      <View
        className="shop-cta-bar"
        style={{ backgroundColor: `rgba(${tone[0]}, ${tone[1]}, ${tone[2]}, 0.92)` }}
      >
        <View className="shop-cta-price-col">
          <Text className="shop-cta-price">¥{product.price}</Text>
          {product.originalPrice && product.originalPrice > product.price && (
            <Text className="shop-cta-original">¥{product.originalPrice}</Text>
          )}
        </View>
        <View
          className="shop-cta-btn"
          onTap={() => Taro.navigateTo({ url: `/pages/product/index?id=${product.id}` })}
        >
          <Text className="shop-cta-btn-text">立即定制</Text>
        </View>
      </View>
    </View>
  )
}