'use client'
import {ReactNode, useContext, useState} from 'react'
import Wrap from '@/components/wrap'
import anno from '@/assets/header/product/anno.svg'
import Link from 'next/link'
import {merge} from '@/lib/utils'
import prod from '@/assets/header/product/prod.svg'
import custom from '@/assets/header/product/custom.svg'
import {useRouter} from 'next/navigation'
import {FragmentTitle, HeaderContext} from './common'

type TabType = 'domestic' | 'oversea'

export default function ProductMenu() {
  const [type, setType] = useState<TabType>('domestic')

  return (
    <Wrap className="flex flex-col items-stretch lg:flex-row gap-4 lg:gap-0">
      <ul role="tablist" className="flex-none lg:basis-36 flex lg:flex-col">
        <Tab selected={type === 'domestic'} onSelect={() => setType('domestic')}>国内代理</Tab>
        <Tab selected={type === 'oversea'} onSelect={() => setType('oversea')}>海外代理</Tab>
      </ul>
      {type === 'domestic'
        ? (
          <Domestic/>
        ) : (
          <Oversea/>
        )
      }
      <aside className="w-full lg:w-64 hidden lg:block">
        <FragmentTitle img={anno} text="网站公告"/>
        <div className="flex flex-col gap-2 p-4">
          <p>官网最新上线，体验再升级！</p>
          <p className="text-gray-400 text-sm">
            1.新增多样使用功能，新增多样使用
            新增多样使用功能
          </p>
          <p className="text-gray-400 text-sm">
            2.新增多样使用功能，新增多样使用
            新增多样使用功能
          </p>
        </div>
      </aside>
    </Wrap>
  )
}

export function Tab(props: {
  selected: boolean
  onSelect: () => void
  children: ReactNode
}) {
  return (
    <li role="tab" className="flex-1 lg:flex-none">
      <button
        className={[
          `w-full p-4 lg:p-6 text-base lg:text-lg cursor-pointer border-b lg:border-b-0 lg:border-r flex justify-center`,
          props.selected ? `bg-linear-to-b lg:bg-linear-to-r from-transparent to-blue-200 border-blue-400` : `border-gray-200`,
        ].join(' ')}
        onClick={props.onSelect}
      >
        {props.children}
      </button>
    </li>
  )
}

export function Domestic(props: {}) {
  return (
    <section role="tabpanel" className="flex-auto flex flex-col lg:flex-row justify-evenly gap-3 lg:gap-0">
      <div className="w-full lg:w-64 flex flex-col">
        <FragmentTitle img={prod} text="代理产品"/>
        <DomesticLink
          label="短效动态 IP"
          desc="全国300+城市级定位节点"
          href="/product?type=short"
          discount={45}
        />
        <DomesticLink
          label="长效动态 IP"
          desc="IP 资源覆盖全国"
          href="/product?type=long"
          discount={45}
        />
        <DomesticLink
          label="静态 IP"
          desc="全国300+城市级定位节点"
          href="/product?type=fixed"
          discount={45}
        />
      </div>
      <div className="w-full lg:w-64 flex flex-col lg:max-lg:hidden">
        <FragmentTitle img={custom} text="业务定制"/>
        <DomesticLink
          label="优质/企业/精选IP"
          desc="超 1000 家企业共同信赖之选！大客户经理全程 1 对 1 沟通，随时为您排忧解难，提供 24 小时不间断支持"
          href="/customized"
        />
      </div>
    </section>
  )
}

export function Oversea(props: {}) {
  return (
    <section role="tabpanel" className="flex-auto flex items-center justify-center">
      <p className="text-2xl text-primary">产品即将上线，敬请期待~</p>
    </section>
  )
}

export function DomesticLink(props: {
  label: string
  desc: string
  href: string
  discount?: number
}) {
  const router = useRouter()
  const ctx = useContext(HeaderContext)
  if (!ctx) {
    throw new Error(`HeaderContext not found`)
  }

  const onClick = () => {
    ctx.setMenu(false)
    router.push(props.href)
  }

  return (
    <Link
      href={props.href}
      className={merge(
        `transition-colors duration-150 ease-in-out`,
        `p-4 rounded-lg flex flex-col gap-1 hover:bg-blue-50`,
      )}
      onClick={onClick}>
      <p className="flex gap-2">
        <span>{props.label}</span>
        {props.discount && (
          <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
            折扣 {props.discount}%
          </span>
        )}
      </p>
      <p className="text-gray-400 text-sm">
        {props.desc}
      </p>
    </Link>
  )
}
