'use client'
import {ReactNode, useCallback, useEffect, useMemo, useState} from 'react'
import Link from 'next/link'
import Wrap from '@/components/wrap'

export type HeaderProps = {}

export default function Header(props: HeaderProps) {

  // ======================
  // 滚动条状态
  // ======================

  const [scroll, setScroll] = useState(false) // Changed to false for client-side rendering

  const handleScroll = useCallback(() => {
    setScroll(window.scrollY > 48)
  }, [])

  useEffect(() => {
    // Initialize scroll state on client
    setScroll(window.scrollY > 48)
    window.addEventListener('scroll', handleScroll)
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [handleScroll])

  // ======================
  // 菜单状态
  // ======================

  const [menu, setMenu] = useState(false)
  const [page, setPage] = useState(0)
  const pages = useMemo(() => [
    <ProductMenu key={`product`}/>,
    <SolutionMenu key={`solution`}/>,
    <HelpMenu key={`help`}/>,
  ], [])

  // ======================
  // 覆盖状态
  // ======================

  const [overlay, setOverlay] = useState(false)
  useEffect(() => {
    setOverlay(scroll || menu)
  }, [menu, scroll])

  // ======================
  // 渲染组件
  // ======================

  const LinkItem = (props: {
    text: string
    href: string
  }) => (
    <li className={`group relative`}>
      <Link
        href={props.href}
        className={[
          `h-full px-4 flex items-center text-lg`,
          `transition-colors duration-200 ease-in-out`,
          `hover:text-blue-500`,
        ].join(' ')}
      >
        {props.text}
      </Link>
      <div className={[
        `absolute bottom-0 w-full h-0.5 bg-transparent `,
        `transition-colors duration-200`,
        `group-hover:bg-blue-500`,
      ].join(' ')}>
      </div>
    </li>
  )

  const MenuItem = (props: {
    text: string
    page: number
  }) => (
    <li className={`group relative`}>
      <button
        onPointerEnter={() => {
          setMenu(true)
          setPage(props.page)
        }}
        onPointerLeave={() => {
          setMenu(false)
        }}
        className={[
          `h-full px-4 flex gap-3 items-center cursor-pointer text-lg`,
          `transition-colors duration-200 ease-in-out`,
          menu && page === props.page
            ? `text-blue-500`
            : ``,
        ].join(' ')}
      >
        <span>{props.text}</span>
        <img
          src={`/header/down.svg`}
          alt={`drop_menu`}
          className={[
            `transition-transform duration-200 ease-in-out`,
            menu && page === props.page
              ? `rotate-180`
              : ``,
          ].join(' ')}
        />
      </button>
      <div className={[
        `absolute bottom-0 w-full h-0.5 bg-transparent pointer-events-none`,
        `transition-colors duration-200`,
        menu && page === props.page ? `bg-blue-500` : '',
      ].join(' ')}>
      </div>
    </li>

  )

  return (
    <header className={[
      `fixed top-0 w-full z-10`,
    ].join(' ')}>
      <div className={[
        ``,
        `transition-[background, shadow] duration-200 ease-in-out`,
        menu
          ? `bg-[#fffe] backdrop-blur-sm`
          : scroll
            ? `bg-[#fffe] backdrop-blur-sm shadow-lg`
            : `bg-transparent shadow-none`,
      ].join(' ')}>
        <Wrap className="h-20 max-md:h-16 flex justify-between">
          <div className="flex justify-between gap-8">
            {/* logo */}
            <Link href="/public" className={`flex items-center`}>
              <img src={`/logo.svg`} alt={`logo`} className={`w-16 max-md:w-12 h-16 max-md:h-12 rounded-full bg-gray-100`}/>
            </Link>

            {/* 菜单 */}
            <nav>
              <ul className="h-full flex items-stretch max-lg:hidden">
                <LinkItem text={`首页`} href={`/`}/>
                <MenuItem text={`产品订购`} page={0}/>
                <MenuItem text={`业务场景`} page={1}/>
                <MenuItem text={`帮助中心`} page={2}/>
                <LinkItem text={`企业服务`} href={`#`}/>
                <LinkItem text={`推广返利`} href={`#`}/>
              </ul>
            </nav>
          </div>
          {/* 登录 */}
          <div className={`flex items-center`}>
            <a
              href="#"
              className={`w-24 h-12 flex items-center justify-center lg:text-lg font-medium`}
            >
              <span>登录</span>
            </a>
            <a
              href="#"
              className={`w-20 lg:w-24 h-10 lg:h-12 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-sm flex items-center justify-center lg:text-lg font-medium text-white`}
            >
              <span>注册</span>
            </a>
          </div>
        </Wrap>
      </div>

      {/* 下拉菜单 */}
      <div
        className={[
          `shadow-lg`,
          `overflow-hidden bg-[#fffe] backdrop-blur-sm`,
          `transition-[opacity,padding,height] transition-discrete duration-200 ease-in-out`,
          menu
            ? `delay-[0s,0s,0s] opacity-100 py-8 h-auto`
            : `delay-[0s,0s,0.2s] opacity-0 py-0 h-0`,
        ].join(' ')}
        onPointerEnter={() => setMenu(true)}
        onPointerLeave={() => setMenu(false)}
      >
        {pages[page]}
      </div>
    </header>
  )
}

function ProductMenu() {

  // ====================
  // Tab 选项
  // ====================

  type TabType = 'domestic' | 'oversea'
  const [type, setType] = useState<TabType>('domestic')

  const Tab = (props: {
    type: TabType,
    children: ReactNode
  }) => {
    return (
      <li role="tab">
        <button
          className={[
            `p-8 text-lg cursor-pointer border-r`,
            type === props.type ? `bg-gradient-to-r from-transparent to-blue-200 border-blue-400` : `border-gray-200`,
          ].join(' ')}
          onClick={() => setType(props.type)}
        >
          {props.children}
        </button>
      </li>
    )
  }

  // ====================
  // 渲染组件
  // ====================

  return (
    <Wrap className="flex">
      <ul role="tablist" className="w-48">
        <Tab type="domestic">国内代理</Tab>
        <Tab type="oversea">海外代理</Tab>
      </ul>
      <div className="flex-1">
        {type === 'domestic'
          ? (
            <section role="tabpanel" className="flex gap-16 mr-16">
              <div className="w-64 flex flex-col gap-6">
                <h3 className="font-bold mb-2 flex items-center gap-3">
                  <img src={`/prod.svg`} alt={`产品`} className={`w-10 h-=10`}/>
                  <span>代理产品</span>
                </h3>
                <div className="flex flex-col gap-2">
                  <p className="flex gap-2">
                    <span>短效动态IP</span>
                    <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
                      折扣45%
                    </span>
                  </p>
                  <p className="text-gray-400 text-sm">
                    全国300+城市级定位节点
                  </p>
                </div>
                <div className="flex flex-col gap-2">
                  <p className="flex gap-2">
                    <span>长效静态IP</span>
                    <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
                      折扣45%
                    </span>
                  </p>
                  <p className="text-gray-400 text-sm">
                    IPI资源覆盖全国
                  </p>
                </div>
                <div>
                  <p className="flex gap-2">
                    <span>固定IP</span>
                    <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
                      折扣45%
                    </span>
                  </p>
                </div>
              </div>
              <div className="w-64 flex flex-col gap-4">
                <h3 className="font-bold mb-2 flex items-center gap-3">
                  <img src="/custom.svg" alt="定制" className="w-10 h-10"/>
                  <span>业务定制</span>
                </h3>
                <div className="flex flex-col gap-2">
                  <p>优质/企业/精选IP</p>
                  <p className="text-gray-400 text-sm">
                    超 1000 家企业共同信赖之选！大客户经理全
                    程 1 对 1 沟通，随时为您排忧解难，提供 24
                    小时不间断支持
                  </p>
                </div>
              </div>
            </section>
          ) : (
            <section role="tabpanel">

            </section>
          )
        }
      </div>
      <aside className="w-64">
        <h3 className="flex gap-3 items-center mb-4">
          <img src={`/anno.svg`} alt={`公告`} className={`w-10 h-10`}/>
          <span>网站公告</span>
        </h3>
        <div className="flex flex-col gap-2">
          <p>官网最新上线，体验再升级！</p>
          <p className="text-gray-400 text-sm">
            1.新增多样使用功能，新增多样使用
            新增多样使用功能
          </p>
          <p className="text-gray-400 text-sm">
            2.新增多样使用功能，新增多样使用
            新增多样使用功能
          </p>
        </div>
      </aside>
    </Wrap>
  )
}

function SolutionMenu() {

  const SolutionItem = (props: {
    icon: string
    title: string
    desc: string
  }) => {
    return (
      <div
        className={[
          `h-full p-4 flex gap-4 items-start rounded-md cursor-pointer`,
          `transition-colors duration-200 hover:bg-blue-100`,
        ].join(' ')}
      >
        <img src={`/header/solution/${props.icon}.svg`} alt={props.title} className="w-10 h-10"/>
        <div className="flex flex-col gap-1">
          <h3 className="font-bold">{props.title}</h3>
          <p className="text-gray-400 text-sm">{props.desc}</p>
        </div>
      </div>
    )
  }

  return (
    <Wrap className="grid grid-cols-4 auto-rows-fr gap-4">
      <SolutionItem
        icon="01"
        title="数据抓取"
        desc="高效采集和分析大量数据，助力企业获取大量情报"
      />
      <SolutionItem
        icon="02"
        title="广告验证"
        desc="确保广告点击和展示数据的真实性，帮助企业，提升广告效果"
      />
      <SolutionItem
        icon="03"
        title="市场调查"
        desc="收集全网行业数据，了解竞争对手动态"
      />
      <SolutionItem
        icon="04"
        title="SEO优化"
        desc="收集搜索引擎情报，提高网站在搜索引擎的排名"
      />
      <SolutionItem
        icon="05"
        title="品牌保护"
        desc="保护品牌商标打造，优质品牌形象，为企业获得更多用户"
      />
      <SolutionItem
        icon="06"
        title="价格监控"
        desc="利用优质代理IP，实时监控行业价格信息，提高市场竞争力"
      />
      <SolutionItem
        icon="07"
        title="金融数据"
        desc="快速获取金融市场实时数据，帮助投资者分析趋势，使其做出精准决策"
      />
      <SolutionItem
        icon="08"
        title="网站测试"
        desc="在不同环境下对网站进行性能和兼容的测试，让用户有高质量体验"
      />
    </Wrap>
  )
}

function HelpMenu() {

  const Column = (props: {
    icon: string,
    title: string,
    items: {
      lead: string
      href: string
    }[]
  }) => (
    <div className="flex flex-col gap-4">
      <h3 className="font-bold flex gap-3 items-center">
        <img src={`/header/help/${props.icon}.svg`} alt={props.title} className="w-10 h-10"/>
        <span>{props.title}</span>
      </h3>
      <ul className=" text-gray-500 text-sm flex flex-col items-end gap-2">
        {props.items.map((item, index) => (
          <li key={index}><Link href={item.href}>{item.lead}</Link></li>
        ))}
      </ul>
    </div>
  )

  return (
    <Wrap className="w-full grid grid-cols-4 gap-4 justify-items-center">
      <Column
        icon="01"
        title="提取IP"
        items={[
          {lead: '短效动态IP提取', href: '#'},
          {lead: '长效静态IP提取', href: '#'},
        ]}
      />
      <Column
        icon="02"
        title="使用教程"
        items={[
          {lead: '快速入手', href: '#'},
          {lead: '代码下载', href: '#'},
          {lead: 'API文档', href: '#'},
        ]}
      />
      <Column
        icon="03"
        title="产品功能"
        items={[
          {lead: '常见问题', href: '#'},
          {lead: '产品介绍', href: '#'},
          {lead: '行业资讯', href: '#'},
        ]}
      />
      <img src={`/header/help/banner.webp`} alt={`banner`} className={``}/>
    </Wrap>
  )
}