import React, { useState, useRef, useEffect } from 'react'
import {
  Text,
  TouchableOpacity,
  View,
  ScrollView,
  StyleSheet,
  Pressable,
  Modal,
  FlatList,
} from 'react-native'
import appColors from '../../../theme/appColors'
import { Header } from '../../../commonComponents'
import Svg, { Rect, Line } from 'react-native-svg'
import appFonts from '../../../theme/appFonts'
import {
  windowHeight,
  fontSizes,
  windowWidth,
} from '../../../theme/appConstant'
import { useSelector } from 'react-redux'
import Icons from '../../../utils/icons/icons'
import { useValues } from '../../../utils/context'
import localStyles from './styles'
import styles from '../fleetHome/styles'
import { useTheme } from '@react-navigation/native'

export function TotalEarnings() {
  const { dashBoardList } = useSelector(state => state.dashboard)
  const initialEarningsData = dashBoardList?.day?.dayRevenues?.revenues
  const weekEarningsData = dashBoardList?.week?.weekRevenues?.revenues
  const monthEarningsData = dashBoardList?.month?.monthRevenues?.revenues
  const dayLabels = dashBoardList?.day?.dayRevenues?.days
  const weekLabels = dashBoardList?.week?.weekRevenues?.days
  const monthLabels = dashBoardList?.month?.monthRevenues?.months
  const { isDark, rtl } = useValues()
  const { translateData } = useSelector(state => state.setting)
  const [selectedPeriod, setSelectedPeriod] = useState('Day')
  const [chartData, setChartData] = useState(initialEarningsData)
  const chartScrollViewRef = useRef(null)
  const [scrollX, setScrollX] = useState(0)
  const [dropdownVisible, setDropdownVisible] = useState(false)
  const handleScroll = event => setScrollX(event.nativeEvent.contentOffset.x)
  const periodOptions = [
    { id: 'Day', label: translateData?.day },
    { id: 'Week', label: translateData?.week },
    { id: 'Month', label: translateData?.month },
  ]
  const updateChartData = periodId => {
    setSelectedPeriod(periodId)
    setSelectedBarIndex(null)
    switch (periodId) {
      case 'Day':
        setChartData(initialEarningsData)
        break
      case 'Week':
        setChartData(weekEarningsData)
        break
      case 'Month':
        setChartData(monthEarningsData)
        break
      default:
        setChartData(initialEarningsData)
    }
  }
  const getLabels = () => {
    switch (selectedPeriod) {
      case 'Day':
        return dayLabels
      case 'Week':
        return weekLabels
      case 'Month':
        return monthLabels?.slice(0, chartData?.length)
      default:
        return []
    }
  }
  const labels = getLabels()
  const chartHeight = 200
  const chartHorizontalPadding = windowHeight(2)
  const baseBarActualWidth = windowHeight(1.5)
  const baseBarSpacing = windowWidth(8)
  const barActualWidth = baseBarActualWidth
  const barContainerWidth = baseBarActualWidth + baseBarSpacing
  const totalChartContentWidth =
    chartData?.length * barContainerWidth + chartHorizontalPadding * 2
  const maxValue = Math.max(...(chartData || [0]))
  const yAxisMax = Math.max(30, Math.ceil(maxValue / 5) * 5)
  const fixedYAxisLabels = [
    yAxisMax,
    (yAxisMax * 5) / 6,
    (yAxisMax * 4) / 6,
    (yAxisMax * 3) / 6,
    (yAxisMax * 2) / 6,
    yAxisMax / 6,
    0,
  ].map(val => Math.round(val))
  const formatValue = value => {
    if (value >= 1000) return `${(value / 1000).toFixed(1)}K`
    return value?.toString()
  }
  useEffect(() => {
    if (chartScrollViewRef.current)
      chartScrollViewRef.current.scrollTo({ x: 0, animated: true })
  }, [chartData])
  const [selectedBarIndex, setSelectedBarIndex] = useState(null)
  const [tooltipWidth, setTooltipWidth] = useState(0)
  const tooltipMargin = windowHeight(3.5)
  const { colors } = useTheme()
  const AvgCard = ({ earnings, rides }) => (
    <View
      style={{
        flexDirection: rtl ? 'row-reverse' : 'row',
        justifyContent: 'space-between',
        marginHorizontal: windowHeight(2.5),
        marginBottom: windowHeight(2),
      }}
    >
      <View
        style={{
          backgroundColor: isDark ? appColors.primaryFont : appColors.white,
          borderWidth: windowWidth(0.45),
          borderColor: colors.border,
          borderRadius: windowWidth(5),
          width: '48%',
        }}
      >
        <View style={{ flexDirection: 'row', margin: windowHeight(1.5) }}>
          <View
            style={{
              height: windowHeight(5.5),
              width: windowHeight(5.5),
              backgroundColor: appColors.whiteopicity,
              alignItems: 'center',
              justifyContent: 'center',
              borderRadius: windowHeight(0.8),
            }}
          >
            <Icons.Earnings />
          </View>
          <View
            style={{
              height: windowHeight(6.5),
              justifyContent: 'center',
              marginHorizontal: windowWidth(3),
            }}
          >
            <Text
              style={{
                fontFamily: appFonts.bold,
                color: appColors.blueShade,
                fontSize: fontSizes.FONT5,
              }}
            >
              {dashBoardList?.ride?.currency_symbol}
              {earnings}
            </Text>
          </View>
        </View>
        <Text
          style={{
            paddingBottom: windowHeight(1),
            marginHorizontal: windowHeight(1.5),
            fontFamily: appFonts.medium,
            color: isDark ? appColors.white : appColors.black,
          }}
        >
          {translateData?.averageEarnings}
        </Text>
      </View>
      <View
        style={{
          backgroundColor: isDark ? appColors.primaryFont : appColors.white,
          borderWidth: windowWidth(0.45),
          borderColor: colors.border,
          borderRadius: windowWidth(5),
          width: '48%',
        }}
      >
        <View
          style={{
            flexDirection: rtl ? 'row-reverse' : 'row',
            margin: windowHeight(1.5),
          }}
        >
          <View
            style={{
              height: windowHeight(5.5),
              width: windowHeight(5.5),
              backgroundColor: '#FFFBEA',
              alignItems: 'center',
              justifyContent: 'center',
              borderRadius: windowHeight(0.8),
            }}
          >
            <Icons.Rides />
          </View>
          <View
            style={{
              height: windowHeight(6.5),
              justifyContent: 'center',
              marginHorizontal: windowWidth(3),
            }}
          >
            <Text
              style={{
                fontFamily: appFonts.bold,
                color: appColors.pending,
                fontSize: fontSizes.FONT5,
              }}
            >
              {rides} {dashBoardList?.driver_performance?.unit}
            </Text>
          </View>
        </View>
        <Text
          style={{
            paddingBottom: windowHeight(1.5),
            marginHorizontal: windowHeight(1.5),
            fontFamily: appFonts.medium,
            color: isDark ? appColors.white : appColors.black,
            textAlign: rtl ? 'right' : 'left',
          }}
        >
          {translateData?.averageRides}
        </Text>
      </View>
    </View>
  )
  const RecordCard = ({ date, amount }) => (
    <View
      style={[
        localStyles.recordCard,
        { backgroundColor: colors.card },
        { borderColor: colors.border },
      ]}
    >
      {date ? (
        <View>
          <View
            style={[
              localStyles.recordCardContent,
              { flexDirection: rtl ? 'row-reverse' : 'row' },
            ]}
          >
            <Text
              style={[
                localStyles.recordCardLabel,
                {
                  color: appColors.iconColor,
                  textAlign: rtl ? 'right' : 'left',
                },
              ]}
            >
              {translateData?.date}
            </Text>
            <Text
              style={[
                localStyles.recordCardDate,
                { color: appColors.iconColor },
              ]}
            >
              {date}
            </Text>
          </View>
          <View
            style={[
              localStyles.recordCardContent,
              { flexDirection: rtl ? 'row-reverse' : 'row' },
            ]}
          >
            <Text
              style={[
                localStyles.recordCardLabel,
                {
                  color: isDark ? appColors.white : appColors.black,
                  textAlign: rtl ? 'right' : 'left',
                },
              ]}
            >
              {translateData?.totalEarning}
            </Text>

            <Text
              style={[
                localStyles.recordCardAmount,
                { textAlign: rtl ? 'left' : 'right', color: colors.text },
              ]}
            >
              {dashBoardList?.ride?.currency_symbol}
              {amount}
            </Text>
          </View>
        </View>
      ) : (
        <Text
          style={[
            localStyles.nodata,
            {
              color: isDark ? appColors.white : appColors.black,
              textAlign: rtl ? 'right' : 'left',
            },
          ]}
        >
          {translateData?.noDataAvailable}
        </Text>
      )}
    </View>
  )
  const renderAvg = () => {
    switch (selectedPeriod) {
      case 'Day':
        return null
      case 'Week':
        return (
          <AvgCard
            earnings={dashBoardList?.week?.averages?.average_earnings}
            rides={dashBoardList?.week?.averages?.average_rides}
          />
        )
      case 'Month':
        return (
          <AvgCard
            earnings={dashBoardList?.month?.averages?.average_earnings}
            rides={dashBoardList?.month?.averages?.average_rides}
          />
        )
      default:
        return null
    }
  }
  const renderRecord = () => {
    switch (selectedPeriod) {
      case 'Day':
        return (
          <RecordCard
            date={dashBoardList?.day?.highest_records?.daily?.date}
            amount={dashBoardList?.day?.highest_records?.daily?.amount}
          />
        )
      case 'Week':
        return (
          <RecordCard
            date={dashBoardList?.week?.highest_records?.weekly?.date}
            amount={dashBoardList?.week?.highest_records?.weekly?.amount}
          />
        )
      case 'Month':
        return (
          <RecordCard
            date={dashBoardList?.month?.highest_records?.monthly?.date}
            amount={dashBoardList?.month?.highest_records?.monthly?.amount}
          />
        )
      default:
        return null
    }
  }
  return (
    <View style={{ flex: 1, backgroundColor: colors.background }}>
      <Header title={translateData?.totalEarning} style={styles.gap} />
      <View style={{ backgroundColor: colors.background, flex: 1 }}>
        <View
          style={{
            backgroundColor: colors.card,
            width: '90%',
            alignSelf: 'center',
            marginTop: windowHeight(3),
            height: '41%',
            borderRadius: windowWidth(5),
            marginBottom: windowHeight(5),
          }}
        >
          <View
            style={{
              flexDirection: rtl ? 'row-reverse' : 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
            }}
          >
            <Text
              style={[
                localStyles.title,
                {
                  color: isDark ? appColors.white : appColors.black,
                  textAlign: rtl ? 'right' : 'left',
                },
              ]}
            >
              {translateData?.totalEarning}
            </Text>
            <TouchableOpacity
              onPress={() => setDropdownVisible(true)}
              style={{
                flexDirection: rtl ? 'row-reverse' : 'row',
                alignItems: 'center',
                backgroundColor: colors.background,
                borderRadius: windowWidth(35),
                paddingHorizontal: windowWidth(4),
                paddingVertical: 6,
                height: windowHeight(4.5),
                marginHorizontal: windowWidth(3),
                marginTop: windowHeight(1),
                justifyContent: 'space-between',
              }}
            >
              <Text
                style={{
                  fontSize: fontSizes.FONT3HALF1,
                  color: isDark ? appColors.white : appColors.black,
                  fontFamily: appFonts.medium,
                  marginHorizontal: windowWidth(1),
                }}
              >
                {periodOptions.find(p => p.id === selectedPeriod)?.label}
              </Text>
              <View style={{ marginHorizontal: windowWidth(1) }}>
                <Icons.Show color={colors.text} />
              </View>
            </TouchableOpacity>
            <Modal transparent visible={dropdownVisible} animationType="fade">
              <TouchableOpacity
                activeOpacity={1}
                onPress={() => setDropdownVisible(false)}
                style={[
                  stylesModal.overlay,
                  { alignSelf: rtl ? 'flex-start' : 'flex-end' },
                ]}
              >
                <View
                  style={[
                    stylesModal.dropdownContainer,
                    { backgroundColor: colors.card },
                  ]}
                >
                  <FlatList
                    data={periodOptions}
                    keyExtractor={item => item.id}
                    renderItem={({ item }) => (
                      <TouchableOpacity
                        style={[
                          stylesModal.optionItem,
                          selectedPeriod === item.id && {
                            backgroundColor: isDark ? '#333' : '#eee',
                          },
                        ]}
                        onPress={() => {
                          updateChartData(item.id)
                          setDropdownVisible(false)
                        }}
                      >
                        <Text
                          style={[
                            stylesModal.optionText,
                            {
                              color: isDark ? appColors.white : appColors.black,
                            },
                          ]}
                        >
                          {item.label}
                        </Text>
                      </TouchableOpacity>
                    )}
                  />
                </View>
              </TouchableOpacity>
            </Modal>
          </View>
          <View
            style={[
              localStyles.card,
              {
                backgroundColor: isDark
                  ? appColors.primaryFont
                  : appColors.white,
              },
              { borderColor: isDark ? appColors.darkborder : appColors.border },
            ]}
          >
            <View style={[localStyles.chartAndLabelsWrapper]}>
              <View style={localStyles.yAxisLabels}>
                {fixedYAxisLabels.map((value, i) => (
                  <Text
                    key={`y-label-${i}`}
                    style={[
                      localStyles.yAxisLabel,
                      { textAlign: rtl ? 'right' : 'left' },
                    ]}
                  >
                    {value}
                  </Text>
                ))}
              </View>
              <ScrollView
                horizontal
                showsHorizontalScrollIndicator={false}
                ref={chartScrollViewRef}
                scrollEventThrottle={16}
                onScroll={handleScroll}
                contentContainerStyle={{
                  paddingHorizontal: chartHorizontalPadding,
                  flexDirection: 'column',
                  flexGrow: 1,
                }}
              >
                <Svg
                  width={totalChartContentWidth}
                  height={chartHeight}
                  style={localStyles.svg}
                >
                  {Array.from({ length: fixedYAxisLabels.length }).map(
                    (_, i) => {
                      const y =
                        (i / (fixedYAxisLabels.length - 1)) * chartHeight
                      return (
                        <Line
                          key={`grid-line-${i}`}
                          x1="0"
                          y1={y}
                          x2={totalChartContentWidth}
                          y2={y}
                          stroke="#E0E0E0"
                          strokeWidth="0.5"
                          strokeDasharray="4 4"
                        />
                      )
                    },
                  )}
                  {chartData?.map((value, index) => {
                    const barHeight = (value / yAxisMax) * chartHeight
                    const x =
                      index * barContainerWidth +
                      (barContainerWidth - barActualWidth) / 2
                    const y = chartHeight - barHeight
                    return (
                      <Rect
                        key={`bar-${index}`}
                        x={x}
                        y={y}
                        width={barActualWidth}
                        height={barHeight}
                        fill={appColors.online}
                        rx={2}
                      />
                    )
                  })}
                </Svg>
                <View
                  style={[
                    StyleSheet.absoluteFillObject,
                    {
                      flexDirection: rtl ? 'row-reverse' : 'row',
                      left: chartHorizontalPadding,
                      bottom: 0,
                    },
                  ]}
                >
                  {chartData?.map((_, index) => (
                    <Pressable
                      key={`touchable-${index}`}
                      onPress={() => {
                        setSelectedBarIndex(index)
                        const xOffset =
                          index * barContainerWidth - windowWidth(40)
                        chartScrollViewRef.current?.scrollTo({
                          x: xOffset,
                          animated: true,
                        })
                      }}
                      style={{
                        width: barContainerWidth,
                        height: chartHeight,
                        backgroundColor: 'transparent',
                      }}
                    />
                  ))}
                </View>
                <View
                  style={{
                    flexDirection: 'row',
                    marginTop: windowHeight(10),
                    width: totalChartContentWidth,
                    justifyContent: 'flex-start',
                  }}
                >
                  {labels?.map((label, index) => (
                    <View
                      key={`label-${index}`}
                      style={{
                        width: barContainerWidth,
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}
                    >
                      <Text style={localStyles.xAxisLabelText}>{label}</Text>
                    </View>
                  ))}
                </View>
              </ScrollView>
            </View>
            {selectedBarIndex !== null && (
              <View
                onLayout={event =>
                  setTooltipWidth(event.nativeEvent.layout.width)
                }
                style={[
                  localStyles.tooltipContainer,
                  {
                    bottom:
                      (chartData[selectedBarIndex] / yAxisMax) * chartHeight +
                      tooltipMargin,
                    left:
                      chartHorizontalPadding +
                      selectedBarIndex * barContainerWidth +
                      barContainerWidth / 2 -
                      tooltipWidth / 3.9 -
                      scrollX,
                  },
                ]}
              >
                <View
                  style={{
                    flexDirection: rtl ? 'row-reverse' : 'row',
                    justifyContent: 'space-between',
                    gap: 8,
                  }}
                >
                  <Text style={localStyles.tooltipText}>
                    {translateData?.income}:{' '}
                  </Text>
                  <Text
                    style={{
                      color: appColors.black,
                      fontSize: fontSizes.FONT3HALF,
                      fontFamily: appFonts.medium,
                    }}
                  >
                    {dashBoardList?.ride?.currency_symbol}
                    {formatValue(chartData[selectedBarIndex])}
                  </Text>
                </View>
                <View style={localStyles.tooltipArrow} />
              </View>
            )}
          </View>
        </View>
        {renderAvg()}
        <Text
          style={[
            localStyles.highestRecordTitle,
            {
              color: isDark ? appColors.darkText : appColors.iconColor,
              textAlign: rtl ? 'right' : 'left',
            },
          ]}
        >
          {translateData?.highestRecord}
        </Text>
        {renderRecord()}
      </View>
    </View>
  )
}

const stylesModal = StyleSheet.create({
  overlay: {
    flex: 1,
    alignItems: 'flex-end',
    marginTop: windowHeight(20),
    marginHorizontal: windowWidth(8),
  },
  dropdownContainer: {
    width: 120,
    borderRadius: 8,
    elevation: 4,
    paddingVertical: 6,
  },
  optionItem: { paddingVertical: 10, paddingHorizontal: 12 },
  optionText: { fontSize: 14 },
})
