'use client'
import {ReactNode, use, 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 {usePathname, useRouter, useSearchParams} from 'next/navigation'
import SelfDesc from '@/components/features/self-desc'
import {listProduct, listProductHome, ProductItem} from '@/actions/product'
import {useProfileStore} from '@/components/stores/profile'
export type TabType = 'short' | 'long' | 'fixed' | 'custom'

export default function Purchase() {
  const router = useRouter()
  const path = usePathname()
  const params = useSearchParams()

  const [productList, setProductList] = useState<ProductItem[]>([])
  const tab = (params.get('type') as TabType) || productList[0]?.code || 'short'

  const updateTab = (tab: string) => {
    const newParams = new URLSearchParams(params)
    newParams.set('type', tab)
    router.push(`${path}?${newParams.toString()}`)
  }
  const profile = use(useProfileStore(store => store.profile))

  useEffect(() => {
    const fetchProducts = async () => {
      const res = profile
        ? await listProduct({})
        : await listProductHome({})

      if (res.success) {
        setProductList(res.data)
      }
    }
    fetchProducts()
  }, [profile])

  const componentMap: Record<string, React.FC<{skuList: ProductItem['skus']}>> = {
    short: ShortForm,
    long: LongForm,
  }
  return (
    <div className="flex flex-col gap-4">
      <Tabs value={tab} onValueChange={updateTab} className="gap-4">
        <TabsList className="w-full p-2 bg-white rounded-lg justify-start md:justify-center overflow-auto">
          {productList.map(item => (
            <Tab key={item.code} value={item.code}>
              {item.name}
            </Tab>
          ))}
          {/* 固定的定制套餐tab */}
          <Tab value="custom">定制套餐</Tab>
        </TabsList>
        {productList.map((item) => {
          const Component = componentMap[item.code]
          const skuList = item.skus || []
          return (
            <TabsContent key={item.code} value={item.code}>
              {Component ? <Component skuList={skuList}/> : <div>页面待开发中</div>}
            </TabsContent>
          )
        })}

        <TabsContent value="custom">
          <SelfDesc onInquiry={() => router.push('/custom')}/>
        </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>
  )
}