'use client'

import { useState } from 'react'
import { IconButton } from '@/components/ui/button'
import { useRouter, useSearchParams } from 'next/navigation'
import Dashboard from './components/Dashboard'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import RechargeList from './components/RechargeList'
import Link from 'next/link'
import IncomeList from './components/IncomeList'

export enum WalletTab {
  RECHARGE = 'recharge',
  INCOME = 'income',
}

const WalletPage = () => {
  const [activeTab, setActiveTab] = useState<WalletTab>(WalletTab.RECHARGE)
  const router = useRouter()
  const searchParams = useSearchParams()
  const back = searchParams.get('back')

  const handleBack = () => {
    if (back) {
      // 如果是支付成功回来钱包页面，则返回4步
      window.history.go(-3)
      return
    }
    router.back()
  }

  return (
    <div className="mx-auto mt-12 flex max-w-[752px] flex-col gap-6 pb-20">
      {/* 头部标题 */}
      <div className="flex items-center gap-2">
        <IconButton
          variant="ghost"
          size="small"
          onClick={handleBack}
          iconfont="icon-arrow-left"
        ></IconButton>
        <h1 className="txt-title-l text-txt-primary-normal">Wallet</h1>
      </div>

      {/* 标签页切换 */}
      <Tabs
        className="gap-6"
        value={activeTab}
        onValueChange={(value) => setActiveTab(value as WalletTab)}
      >
        <div className="flex items-center justify-between gap-4">
          <TabsList className="gap-3 p-0">
            <TabsTrigger
              value={WalletTab.RECHARGE}
              className="bg-surface-element-normal txt-label-m text-txt-primary-normal data-[state=active]:bg-primary-normal hover:bg-surface-element-hover h-8 cursor-pointer rounded-full px-4 py-1.5 transition-colors"
            >
              Recharge
            </TabsTrigger>
            {/* <TabsTrigger
              value={WalletTab.INCOME}
              className="bg-surface-element-normal px-4 py-1.5 rounded-full txt-label-m text-txt-primary-normal h-8 cursor-pointer data-[state=active]:bg-primary-normal hover:bg-surface-element-hover transition-colors"
            >
              Earnings
            </TabsTrigger> */}
          </TabsList>

          <Link href="/wallet/transactions" className="txt-label-m text-primary-variant-normal">
            Transactions &gt;
          </Link>
        </div>
        <TabsContent value={WalletTab.RECHARGE}>
          <div className="flex flex-col gap-6">
            <Dashboard type={WalletTab.RECHARGE} />
            <RechargeList />
          </div>
        </TabsContent>
        <TabsContent value={WalletTab.INCOME}>
          <div className="flex flex-col gap-6">
            <Dashboard type={WalletTab.INCOME} />
            <IncomeList />
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}

export default WalletPage
