'use client'
import {ReactNode, useEffect, useState} from 'react'
import {merge} from '@/lib/utils'
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
import LongForm from '@/components/composites/purchase/long/form'
import ShortForm from '@/components/composites/purchase/short/form'
import {useProfileStore} from '@/components/stores-provider'
import {useRouter} from 'next/navigation'
export type TabType = 'short' | 'long' | 'fixed' | 'custom'

type PurchaseProps = {
  defaultType: TabType
}

export default function Purchase(props: PurchaseProps) {
  const [currentTab, setCurrentTab] = useState<string>(props.defaultType)
  const profile = useProfileStore(store => store.profile)
  const router = useRouter()
  useEffect(() => {
    setCurrentTab(props.defaultType)
    // if (!profile) {
    //   router.push('/login?redirect=/admin/purchase') // 未登录用户重定向到登录页
    // }
  }, [props.defaultType, profile, router])

  return (
    <div className="flex flex-col gap-4">
      <Tabs value={currentTab} onValueChange={setCurrentTab} className="gap-4">
        <TabsList className="w-full p-2 bg-white rounded-lg justify-start md:justify-center overflow-auto">
          <Tab value="short">短效动态</Tab>
          <Tab value="long">长效静态</Tab>
          <Tab value="fixed">固定套餐</Tab>
          <Tab value="custom">定制套餐</Tab>
        </TabsList>
        <TabsContent value="short">
          <ShortForm/>
        </TabsContent>
        <TabsContent value="long">
          <LongForm/>
        </TabsContent>
      </Tabs>
    </div>
  )
}

function Tab(props: {
  value: string
  children: ReactNode
}) {
  return (
    <TabsTrigger
      className={merge(
        `w-36 h-12 text-base font-normal flex-none`,
        `data-[state=active]:text-primary data-[state=active]:bg-primary-muted`,
      )}
      value={props.value}
    >
      {props.children}
    </TabsTrigger>
  )
}