'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { ArrowRight, Home, SearchX } from 'lucide-react'
import { BrandLogo } from '@/components/shared/BrandLogo'
import { BRAND_NAME } from '@/lib/brand'

function primaryHref(pathname: string) {
  if (pathname.startsWith('/admin')) return { href: '/admin', label: '返回后台' }
  if (pathname.startsWith('/staff')) return { href: '/staff', label: '返回工作台' }
  return { href: '/', label: '返回首页' }
}

export default function NotFound() {
  const pathname = usePathname()
  const primary = primaryHref(pathname)

  return (
    <section className="min-h-[calc(100vh-70px)] bg-bg px-5 py-10 md:px-8 md:py-14">
      <div className="mx-auto w-full max-w-[980px]">
        <div className="border border-line bg-white">
          <div className="border-b border-line px-5 py-4 md:px-7">
            <div className="flex items-center gap-3">
              <BrandLogo className="h-10 w-10 rounded-full bg-white shadow-sm" />
              <div>
                <div className="text-sm font-bold text-ink">{BRAND_NAME}</div>
                <div className="text-xs text-muted">页面状态</div>
              </div>
            </div>
          </div>

          <div className="grid gap-7 px-5 py-8 md:grid-cols-[auto_1fr] md:items-start md:px-7 md:py-10">
            <span className="grid h-14 w-14 place-items-center border border-line-dark bg-bg text-brand">
              <SearchX className="h-7 w-7" />
            </span>

            <div>
              <h1 className="text-2xl font-bold text-ink md:text-3xl">没有找到这个页面</h1>
              <p className="mt-3 max-w-2xl text-sm leading-7 text-muted">
                链接可能已失效，或内容已经下线。你可以回到常用入口继续访问服务。
              </p>

              <div className="mt-6 flex flex-wrap gap-3">
                <Link
                  href={primary.href}
                  className="inline-flex h-11 items-center gap-2 bg-brand px-5 text-sm font-bold text-white hover:bg-brand-dark"
                >
                  <Home className="h-4 w-4" />
                  {primary.label}
                </Link>
                {!pathname.startsWith('/admin') && !pathname.startsWith('/staff') && (
                  <Link
                    href="/courses"
                    className="inline-flex h-11 items-center gap-2 border border-line bg-white px-5 text-sm font-bold text-ink hover:border-brand hover:text-brand"
                  >
                    查看服务
                    <ArrowRight className="h-4 w-4" />
                  </Link>
                )}
              </div>

              <div className="mt-6 border border-line bg-bg px-4 py-3 text-xs text-muted">
                当前路径：<span className="font-mono text-ink">{pathname || '/'}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
