import {ReactNode} from 'react'
import Image from 'next/image'
import logo from '@/assets/logo.webp'
import Profile from '@/app/admin/_server/profile'
import Wrap from '@/components/wrap'
import {merge} from '@/lib/utils'
import Link from 'next/link'

export type DashboardLayoutProps = {
  children: ReactNode
}

export default async function DashboardLayout(props: DashboardLayoutProps) {
  return (
    <div className={`h-screen flex flex-col overflow-hidden`}>
      {/* background */}
      <div className={`-z-10 relative`}>
        <div className={`absolute w-screen h-screen bg-gray-50`}></div>
        <div className={`absolute w-[2000px] h-[2000px] -left-[1000px] -top-[1000px] bg-radial from-blue-50 from-10% to-transparent to-50%`}></div>
        <div className={`absolute w-[2000px] h-[2000px] -right-[1000px] -top-[1000px] bg-radial from-blue-50 from-10% to-transparent to-50%`}></div>
      </div>

      {/* content */}
      <header className={`flex-none basis-20 flex items-stretch`}>
        {/* logo */}
        <div className={`flex-none basis-60 flex items-center justify-center`}>
          <Image src={logo} alt={`logo`} height={40}/>
        </div>

        {/* title */}
        <div className={`flex-auto overflow-hidden flex items-center`}>
          欢迎来到，蓝狐代理
        </div>

        {/* profile */}
        <div className={`flex-none basis-80 flex items-center justify-end`}>
          <Profile/>
        </div>
      </header>

      <div className={`flex-auto overflow-hidden flex items-stretch gap-4`}>
        <nav className={merge(
          `flex-none basis-60 rounded-tr-xl bg-white p-4`,
          `flex flex-col overflow-auto`,
        )}>
          <NavItem href={'/admin/dashboard'} icon={`🏠`} label={`账户总览`}/>
          <NavTitle label={`套餐管理`}/>
          <NavItem href={`/admin/package`} icon={`🛒`} label={`购买套餐`}/>
          <NavItem href={`/admin/package/my`} icon={`📦`} label={`我的套餐`}/>
          <NavTitle label={`IP 管理`}/>
          <NavItem href={`/admin/ip/extract`} icon={`📤`} label={`IP提取`}/>
          <NavItem href={`/admin/ip/extract/record`} icon={`📜`} label={`IP提取记录`}/>
          <NavItem href={`/admin/ip/view`} icon={`👁️`} label={`查看提取IP`}/>
          <NavItem href={`/admin/ip/view/used`} icon={`🗂️`} label={`查看使用IP`}/>
          <NavTitle label={`个人信息`}/>
          <NavItem href={`/admin/profile`} icon={`📝`} label={`个人信息修改`}/>
          <NavItem href={`/admin/bill`} icon={`💰`} label={`我的账单`}/>
          <NavItem href={`/admin/identify`} icon={`🆔`} label={`实名认证`}/>
          <NavItem href={`/admin/whitelist`} icon={`🔒`} label={`白名单`}/>
        </nav>

        {props.children}
      </div>
    </div>
  )
}

function NavTitle(props: {
  label: string
}) {
  return (
    <p className={`px-4 py-2 text-sm text-gray-500`}>
      {props.label}
    </p>
  )
}

function NavItem(props: {
  href: string
  icon?: ReactNode
  label: string
}) {
  return (
    <Link className={merge(
      `px-4 py-2 flex items-center rounded-md`,
      `hover:bg-gray-100`,
    )} href={props.href}>
      {props.icon}
      <span className={`ml-2`}>{props.label}</span>
    </Link>
  )
}