import { Button, LinearBorderContainer } from '@afilmory/ui'
import { useLocation, useNavigate } from 'react-router'

export function NotFound() {
  const location = useLocation()
  const navigate = useNavigate()

  return (
    <div className="relative flex min-h-dvh flex-1 flex-col bg-background text-text">
      <div className="flex flex-1 items-center justify-center px-4 py-10 sm:px-6">
        <LinearBorderContainer>
          <div className="relative w-full max-w-[640px] overflow-hidden border border-white/5">
            {/* Glassmorphic background effects */}
            <div className="pointer-events-none absolute inset-0 opacity-60">
              <div className="absolute -inset-32 bg-linear-to-br from-accent/20 via-transparent to-transparent blur-3xl" />
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.08),transparent_55%)]" />
            </div>

            <div className="relative p-10 sm:p-12">
              <div>
                <p className="text-text-tertiary mb-3 text-xs font-semibold uppercase tracking-[0.55em]">404</p>
                <h1 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">Page Not Found</h1>
                <p className="text-text-secondary mb-6 text-base leading-relaxed">
                  The page you're looking for doesn't exist. It may have been moved or deleted. Please check the URL or
                  navigate back to continue using the dashboard.
                </p>

                <div className="bg-material-medium/40 border-fill-tertiary mb-6 rounded-2xl border px-5 py-4 text-sm">
                  <p className="text-text-secondary">
                    Requested URL: <span className="text-text font-medium">{location.pathname}</span>
                  </p>
                </div>

                <div className="flex flex-col gap-3 sm:flex-row">
                  <Button variant="primary" className="glassmorphic-btn flex-1" onClick={() => navigate('/')}>
                    Go Home
                  </Button>
                  <Button variant="ghost" className="flex-1" onClick={() => navigate(-1)}>
                    Go Back
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </LinearBorderContainer>
      </div>
    </div>
  )
}
