'use client'

import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { HugeiconsIcon } from '@hugeicons/react'
import { ArrowLeft01Icon, Home01Icon, CustomerSupportIcon } from '@hugeicons/core-free-icons'

import { Button } from '@/components/ui/button'

export default function NotFoundPage() {
  const router = useRouter()

  return (
    <div className="flex min-h-svh flex-col items-center justify-center bg-background px-6 text-center">
      {/* Wordmark */}
      <div className="mb-10 flex items-center gap-2">
        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground text-sm font-bold">
          D
        </div>
        <span className="font-semibold text-foreground">Distribution</span>
      </div>

      {/* 404 badge */}
      <div className="mb-4 inline-flex items-center rounded-full border border-border bg-muted px-3 py-1 text-xs font-medium text-muted-foreground tracking-widest uppercase">
        Error 404
      </div>

      {/* Heading */}
      <h1 className="mb-3 font-heading text-4xl font-semibold text-foreground sm:text-5xl">
        Page not found
      </h1>

      {/* Assurance copy */}
      <p className="mb-2 max-w-md text-base text-muted-foreground">
        This URL doesn&apos;t exist in the system — but everything else is working fine.
      </p>
      <p className="mb-10 max-w-md text-sm text-muted-foreground">
        Your data, orders, and operations are all safe and unaffected. You may have followed a broken link or typed an address that has changed.
      </p>

      {/* CTAs */}
      <div className="flex flex-col gap-3 sm:flex-row sm:gap-2">
        <Button variant="outline" onClick={() => router.back()}>
          <HugeiconsIcon icon={ArrowLeft01Icon} size={16} />
          Go back
        </Button>
        <Button render={<Link href="/" />} nativeButton={false}>
          <HugeiconsIcon icon={Home01Icon} size={16} />
          Back to Dashboard
        </Button>
      </div>

      {/* Support nudge */}
      <p className="mt-12 flex items-center gap-1.5 text-xs text-muted-foreground">
        <HugeiconsIcon icon={CustomerSupportIcon} size={13} />
        If you believe this is a mistake, contact your system administrator.
      </p>
    </div>
  )
}