'use client'

import {useContext, useEffect, useState} from 'react'
import {useRouter} from 'next/navigation'
import {X} from 'lucide-react'
import {HeaderContext} from './common'
import Image, {StaticImageData} from 'next/image'
import prod from '@/assets/header/product/prod.svg'
import custom from '@/assets/header/product/custom.svg'
import s01 from '@/assets/header/solution/01.svg'
import s02 from '@/assets/header/solution/02.svg'
import s03 from '@/assets/header/solution/03.svg'
import s04 from '@/assets/header/solution/04.svg'
import s05 from '@/assets/header/solution/05.svg'
import s06 from '@/assets/header/solution/06.svg'
import s07 from '@/assets/header/solution/07.svg'
import s08 from '@/assets/header/solution/08.svg'
import h01 from '@/assets/header/help/01.svg'
import h02 from '@/assets/header/help/02.svg'
import h03 from '@/assets/header/help/03.svg'
import {merge} from '@/lib/utils'
import Link from 'next/link'
import logo from '@/assets/logo.webp'
import {Product} from '@/lib/models/product'
import {listProductHome} from '@/actions/product'

export type MobileMenuProps = {}

export default function MobileMenu(props: MobileMenuProps) {
  const ctx = useContext(HeaderContext)
  const router = useRouter()
  const [productTab, setProductTab] = useState<'domestic' | 'oversea'>('domestic')

  if (!ctx) {
    throw new Error(`HeaderContext not found`)
  }

  const navigate = (href: string) => {
    ctx.setMenu(false)
    router.push(href)
  }
  const [productList, setProductList] = useState<Product[]>([])
  useEffect(() => {
    const fetchProducts = async () => {
      const res = await listProductHome({})
      if (res.success) {
        setProductList(res.data)
      }
    }
    fetchProducts()
  }, [])
  const shortProduct = productList.find(p => p.name?.includes('短效') || p.code === 'short')
  const longProduct = productList.find(p => p.name?.includes('长效') || p.code === 'long')
  return (
    <div className="h-full flex flex-col bg-white">
      <div className="flex items-center justify-between px-4 h-16 border-b border-gray-100">
        {/* logo */}
        <Link href="/" className="flex items-center">
          <Image src={logo} alt="logo" height={40} className="translate-y-0.5"/>
        </Link>
        <button
          type="button"
          className="rounded-md p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-50 transition-colors"
          onClick={() => ctx.setMenu(false)}
          aria-label="关闭菜单"
        >
          <X className="h-5 w-5"/>
        </button>
      </div>

      <div className="flex-1 overflow-y-auto px-4 py-6 space-y-8">
        <div className="space-y-3">
          <h3 className="text-sm font-semibold text-gray-500 tracking-wide">
            产品订购
          </h3>
          <div className="flex rounded-lg bg-gray-100">
            <button
              className={merge(
                'flex-1 py-2.5 text-sm font-medium rounded-md transition-all',
                productTab === 'domestic'
                  ? 'bg-white text-blue-600 shadow-sm'
                  : 'text-gray-600 hover:text-gray-900',
              )}
              onClick={() => setProductTab('domestic')}
            >
              国内代理
            </button>
            <button
              className={merge(
                'flex-1 py-2.5 text-sm font-medium rounded-md transition-all',
                productTab === 'oversea'
                  ? 'bg-white text-blue-600 shadow-sm'
                  : 'text-gray-600 hover:text-gray-900',
              )}
              onClick={() => setProductTab('oversea')}
            >
              海外代理
            </button>
          </div>

          {productTab === 'domestic' && (
            <div className="space-y-2">
              {shortProduct && (
                <ProductItem
                  icon={prod}
                  label="短效动态IP"
                  badge="最低4.5折"
                  href={`/product?type=${shortProduct.code}`}
                  onNavigate={navigate}
                />
              )}
              {longProduct && (
                <ProductItem
                  icon={prod}
                  label="长效静态IP"
                  badge="最低4.5折"
                  href={`/product?type=${longProduct.code}`}
                  onNavigate={navigate}
                />
              )}
              <ProductItem
                icon={custom}
                label="优质/企业/精选IP"
                badge="专属定制"
                href="/custom"
                onNavigate={navigate}
              />
            </div>
          )}

          {productTab === 'oversea' && (
            <div className="mt-4 p-4 bg-blue-50 rounded-lg">
              <p className="text-sm text-blue-600 text-center">
                更多海外节点即将上线，敬请期待～
              </p>
            </div>
          )}
        </div>

        <MenuSection title="业务场景">
          <div className="grid grid-cols-2 gap-3">
            <SolutionItem
              icon={s01}
              label="数据采集"
              href="/data-capture"
              onNavigate={navigate}
            />
            <SolutionItem
              icon={s02}
              label="电商运营"
              href="/e-commerce"
              onNavigate={navigate}
            />
            <SolutionItem
              icon={s03}
              label="市场调研"
              href="/market-research"
              onNavigate={navigate}
            />
            <SolutionItem
              icon={s04}
              label="SEO优化"
              href="/seo-optimization"
              onNavigate={navigate}
            />
            <SolutionItem
              icon={s05}
              label="社交媒体"
              href="/social-media"
              onNavigate={navigate}
            />
            <SolutionItem
              icon={s06}
              label="广告投放"
              href="/advertising"
              onNavigate={navigate}
            />
            <SolutionItem
              icon={s07}
              label="账号管理"
              href="/account-management"
              onNavigate={navigate}
            />
            <SolutionItem
              icon={s08}
              label="网络测试"
              href="/network-testing"
              onNavigate={navigate}
            />
          </div>
        </MenuSection>

        <MenuSection title="帮助中心">
          <div className="space-y-2">
            <HelpItem
              icon={h01}
              label="短效IP提取"
              onClick={() => navigate('/collect?type=short')}
            />
            <HelpItem
              icon={h02}
              label="操作指南"
              onClick={() => navigate('/docs/profile-settings')}
            />
            <HelpItem
              icon={h03}
              label="平台教程"
              onClick={() => navigate('/docs/ios-proxy')}
            />
          </div>
        </MenuSection>

        <div className="space-y-2 pt-2">
          <OtherLink
            label="业务定制"
            href="/custom"
            onNavigate={navigate}
          />
        </div>
      </div>
    </div>
  )
}

function MenuSection(props: {title: string, children: React.ReactNode}) {
  return (
    <div className="space-y-3">
      <h3 className="text-sm font-semibold text-gray-500 tracking-wide">
        {props.title}
      </h3>
      {props.children}
    </div>
  )
}

function ProductItem(props: {
  icon: StaticImageData
  label: string
  badge?: string
  href: string
  onNavigate: (href: string) => void
}) {
  return (
    <button
      type="button"
      className="w-full flex items-center gap-3 rounded-lg border border-gray-100 bg-white px-4 py-3 text-left transition-all hover:border-blue-200 hover:shadow-sm"
      onClick={() => props.onNavigate(props.href)}
    >
      <div className="shrink-0 w-8 h-8 bg-linear-to-br from-blue-50 to-cyan-50 rounded-lg flex items-center justify-center">
        <Image src={props.icon} alt="" width={20} height={20} className="opacity-80"/>
      </div>
      <span className="flex-1 font-medium text-sm text-gray-900">{props.label}</span>
      {props.badge && (
        <span className="text-xs text-orange-600 bg-orange-50 px-2 py-1 rounded-full">
          {props.badge}
        </span>
      )}
    </button>
  )
}

function SolutionItem(props: {
  icon: StaticImageData
  label: string
  href: string
  onNavigate: (href: string) => void
}) {
  return (
    <button
      type="button"
      className="flex flex-col items-center gap-2 p-3 rounded-lg border border-gray-100 hover:border-blue-200 hover:bg-blue-50/50 transition-all"
      onClick={() => props.onNavigate(props.href)}
    >
      <div className="w-10 h-10 bg-linear-to-br from-blue-50 to-cyan-50 rounded-full flex items-center justify-center">
        <Image src={props.icon} alt="" width={20} height={20} className="opacity-80"/>
      </div>
      <span className="text-xs font-medium text-gray-700">{props.label}</span>
    </button>
  )
}

function HelpItem(props: {
  icon: StaticImageData
  label: string
  onClick: () => void
}) {
  return (
    <button
      type="button"
      className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-gray-50 transition-colors"
      onClick={props.onClick}
    >
      <Image src={props.icon} alt="" width={20} height={20} className="opacity-70"/>
      <span className="text-sm text-gray-700">{props.label}</span>
    </button>
  )
}

function OtherLink(props: {
  label: string
  href: string
  onNavigate: (href: string) => void
}) {
  return (
    <button
      type="button"
      className="w-full flex items-center px-3 py-2.5 text-sm text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
      onClick={() => props.onNavigate(props.href)}
    >
      {props.label}
    </button>
  )
}