import type { LayoutChangeEvent } from 'react-native'
import { LinearGradient } from 'expo-linear-gradient'
import React, { useRef, useState } from 'react'
import { Text, View } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { LucideIcon } from '@/components/common/ao'
import { IconJiaotong } from '@/components/iconfont'
import { Grid, GridItem } from '@/components/ui/grid'
import { Progress, ProgressFilledTrack } from '@/components/ui/progress'

export default function Money() {
  const insets = useSafeAreaInsets()
  const [gradientHeight, setGradientHeight] = useState(200) // 默认渐变高度
  const gridLayout = useRef({ y: 0, height: 0 })
  const onGridLayout = (e: LayoutChangeEvent) => {
    const { y, height } = e.nativeEvent.layout
    gridLayout.current = { y, height }
    setGradientHeight(y + height / 2 + 16 + insets.top)
  }
  return (
    <View
      className="flex-1 relative bg-white"
      style={{
        paddingTop: insets.top,
      }}
    >
      <LinearGradient
        colors={['#a3f7bf', '#d4f9e2', '#ffffff']}
        locations={[0, 0.85, 1]}

        start={{ x: 0, y: 0 }}
        end={{ x: 0, y: 1 }}
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: gradientHeight,
          zIndex: 0,
        }}
      />

      {/* 页面内容 */}
      <View style={{ zIndex: 10, padding: 8 }}>
        <View className="flex flex-row justify-between items-center py-2">
          <View className="flex flex-row items-center gap-2">
            <Text className="font-bold text-base">2025/11/10</Text>
            <LucideIcon icon="CircleChevronDown" size={14} />
          </View>
          <View className="flex flex-row  items-center gap-2">
            <LucideIcon icon="SlidersHorizontal" />
          </View>
        </View>

        <View>
          <View className="flex flex-col items-center">
            <Text className="text-gray-600 text-xs">
              <Text>余额</Text>
              <Text className="text-green-500">↑20%</Text>
            </Text>
            <Text className="font-bold text-xl">
              22313.00
            </Text>
          </View>

          <View className="flex flex-row  justify-between mt-2">
            <View className="flex flex-col items-center">
              <Text className="text-gray-600 text-xs">
                <Text>收入</Text>
                <Text className="text-green-500">↑20%</Text>
              </Text>
              <Text className="text-lg font-bold">11.0</Text>
            </View>
            <View className="flex flex-col items-center">
              <Text className="text-gray-600 text-xs">
                <Text>支出</Text>
                <Text className="text-green-500">↑20%</Text>
              </Text>
              <Text className="text-lg font-bold">11.0</Text>
            </View>
            <View className="flex flex-col items-center">
              <Text className="text-gray-600 text-xs">
                <Text>结余</Text>
                <Text className="text-green-500">↑20%</Text>
              </Text>
              <Text className="text-lg font-bold">11.0</Text>
            </View>
          </View>

          <View className="flex flex-row items-center gap-4 mt-4 ">
            <Text className="text-xs text-gray-600">预算</Text>

            <View className="flex-1">
              <Progress>
                <ProgressFilledTrack />
              </Progress>
            </View>

            <Text className="text-xs text-gray-600">点击设置</Text>
          </View>
        </View>

        <View
          onLayout={onGridLayout}
          className="mt-4 pt-2 pb-2 bg-white rounded-md"
        >
          <Grid
            _extra={{ className: 'grid-cols-5' }}
          >
            {[...Array.from({ length: 5 })].map((_, i) => (
              <GridItem
                key={i}
                className="flex flex-col items-center"
                _extra={{ className: 'col-span-1' }}
              >
                <IconJiaotong size={28} />
                <Text className="text-xs mt-1 text-gray-500">账单</Text>
              </GridItem>
            ))}
          </Grid>
        </View>

      </View>
    </View>
  )
}