'use client'
import {ReactNode} 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 Link from 'next/link'
import {useSearchParams} from 'next/navigation'

export type TabType = 'short' | 'long' | 'fixed' | 'custom'

export default function Purchase() {
  const searchParams = useSearchParams()
  const defaultTab = searchParams?.get('type') as TabType || 'short'
  return (
    <>
      <div className="flex flex-col gap-4">
        <Tabs value={defaultTab} 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 (
    <Link
      href={{
        pathname: '/product',
        query: {type: props.value},
      }}
      passHref
      legacyBehavior // 如果需要兼容旧版行为
    >
      <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>
    </Link>
  )
}