import type { LayoutChangeEvent } from 'react-native'
import { LinearGradient } from 'expo-linear-gradient'
import React, { useRef, useState } from 'react'
import { ScrollView, 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 { Fab, FabIcon } from '@/components/ui/fab'
import { Grid, GridItem } from '@/components/ui/grid'
import { AddIcon } from '@/components/ui/icon'
import { Progress, ProgressFilledTrack } from '@/components/ui/progress'
import AddMoneyDrawer from './components/AddDrawer'
import TransactionsList from './components/TransactionsList'

export default function Money() {
  const [showDrawer, setShowDrawer] = useState(false)

  const insets = useSafeAreaInsets()
  const [gradientHeight, setGradientHeight] = useState(200)
  const gridLayout = useRef<{ y: number, height: number } | null>(null)

  const onGridLayout = (e: LayoutChangeEvent) => {
    // 仅首次布局计算高度
    if (!gridLayout.current) {
      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={['#fef6e4', '#fff8e1', '#ffffff']}
        locations={[0, 0.95, 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, paddingLeft: 12, paddingRight: 12 }}>
        <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 className="mt-2">
          {/* 余额区域 */}
          <View className="items-center mb-3">
            <Text className="text-gray-500 text-xs">
              余额
              <Text className="text-red-500">↓20%</Text>
            </Text>
            <Text className="font-bold text-2xl mt-0.5">22,313.00</Text>
          </View>

          {/* 收入/支出/结余 */}
          <View className="flex-row justify-around py-2">
            <View className="items-center">
              <Text className="text-gray-500 text-xs">
                收入
                <Text className="text-green-500">↑20%</Text>
              </Text>
              <Text className="text-lg font-semibold mt-0.5">11.0</Text>
            </View>

            <View className="items-center">
              <Text className="text-gray-500 text-xs">
                支出
                <Text className="text-green-500">↑20%</Text>
              </Text>
              <Text className="text-lg font-semibold mt-0.5">11.0</Text>
            </View>

            <View className="items-center">
              <Text className="text-gray-500 text-xs">
                结余
                <Text className="text-green-500">↑20%</Text>
              </Text>
              <Text className="text-lg font-semibold mt-0.5">11.0</Text>
            </View>
          </View>

          {/* 预算进度 */}
          <View className="flex-row items-center gap-3 mt-3">
            <Text className="text-xs text-gray-600 w-8 text-right">预算</Text>
            <View className="flex-1">
              <Progress size="sm">
                <ProgressFilledTrack />
              </Progress>
            </View>
            <Text className="text-xs text-blue-500">点击设置</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 style={{ flex: 1, paddingHorizontal: 12 }}>
        <ScrollView
          contentContainerStyle={{ paddingBottom: 16 }}
          showsVerticalScrollIndicator={false}
        >
          <TransactionsList />
        </ScrollView>
      </View>

      <Fab onPress={() => {
        setShowDrawer(true)
      }}
      >
        <FabIcon as={AddIcon} />
      </Fab>

      <AddMoneyDrawer
        isOpen={showDrawer}
        onClose={() => {
          setShowDrawer(false)
        }}
      />

    </View>
  )
}