import { useNavigate } from 'react-router-dom'
import { toPersianDigits } from '../utils/formatNumber'
import { getUserRole } from '../utils/role'

export default function NotFound() {
  const navigate = useNavigate()

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-white px-6 text-center">
      <h1 className="text-6xl font-bold text-[#223D5D]">{toPersianDigits('404')}</h1>
      <p className="mt-4 text-lg text-gray-900">صفحه مورد نظر یافت نشد.</p>
      <button
        type="button"
        // owners and customers land on different home screens — mirrors the
        // role-based redirect RequireRole already does on an auth mismatch
        onClick={() => navigate(getUserRole() === 'cafe_owner' ? '/owner/panel' : '/home')}
        className="mt-6 w-full max-w-xs rounded-2xl bg-[#223D5D] py-4 text-lg font-semibold text-white"
      >
        بازگشت به صفحه اصلی
      </button>
    </div>
  )
}