// pages/NotFound.jsx
import React from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import { Home, ArrowLeft, Search } from 'lucide-react'

const NotFound = () => {
  const { user, isAuthenticated } = useAuth()
  const navigate = useNavigate()

  const handleGoBack = () => {
    navigate(-1)
  }

  const getDashboardLink = () => {
    if (!isAuthenticated()) return '/home'
    
    switch (user?.role) {
      case 'admin':
        return '/home'
      case 'farmer':
        return '/home'
      case 'customer':
        return 'home'
      default:
        return '/home'
    }
  }

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col justify-center items-center px-4">
      <div className="max-w-lg w-full text-center">
        {/* 404 Illustration */}
        <div className="mb-8">
          <div className="text-9xl font-bold text-gray-300 mb-4">404</div>
          <div className="w-32 h-32 mx-auto mb-6 bg-gray-200 rounded-full flex items-center justify-center">
            <Search className="w-16 h-16 text-gray-400" />
          </div>
        </div>

        {/* Error Message */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-4">Page Not Found</h1>
          <p className="text-lg text-gray-600 mb-2">
            Oops! The page you're looking for doesn't exist.
          </p>
          <p className="text-gray-500">
            It might have been moved, deleted, or you entered the wrong URL.
          </p>
        </div>

        {/* Action Buttons */}
        <div className="space-y-4">
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button
              onClick={handleGoBack}
              className="flex items-center justify-center space-x-2 px-6 py-3 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition-colors"
            >
              <ArrowLeft className="w-4 h-4" />
              <span>Go Back</span>
            </button>

            <Link
              to="/home"
              className="flex items-center justify-center space-x-2 px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors"
            >
              <Home className="w-4 h-4" />
              <span>Go Home</span>
            </Link>
          </div>

          {isAuthenticated() && (
            <Link
              to={getDashboardLink()}
              className="inline-flex items-center justify-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
            >
              <span>Go to Dashboard</span>
            </Link>
          )}
        </div>

        {/* Help Text */}
        <div className="mt-12 pt-8 border-t border-gray-200">
          <p className="text-sm text-gray-500 mb-4">
            If you think this is a mistake, please contact our support team.
          </p>
          
          {/* Popular Links */}
          <div className="text-sm">
            <p className="text-gray-600 mb-2 font-medium">Popular pages:</p>
            <div className="flex flex-wrap justify-center gap-4">
              <Link to="/home" className="text-green-600 hover:text-green-800 hover:underline">
                Products
              </Link>
              {!isAuthenticated() ? (
                <>
                  <Link to="/login" className="text-blue-600 hover:text-blue-800 hover:underline">
                    Sign In
                  </Link>
                  <Link to="/register" className="text-blue-600 hover:text-blue-800 hover:underline">
                    Sign Up
                  </Link>
                </>
              ) : (
                <Link to={getDashboardLink()} className="text-blue-600 hover:text-blue-800 hover:underline">
                  Dashboard
                </Link>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default NotFound