"use client";
import React from 'react';
import { FileQuestion, AlertCircle, Home, RefreshCw } from 'lucide-react';

import { useRouter } from 'next/navigation';

export const NotFoundPage = () => {
  const router = useRouter();
  return (
    <div className="min-h-[80vh] flex items-center justify-center p-6" dir="rtl">
      <div className="max-w-lg w-full text-center">
        <div className="relative mb-12 overflow-hidden">
          <div className="text-[7rem] sm:text-[15rem] font-black text-medical-gray-100 leading-none select-none">۴۰۴</div>
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="w-32 h-32 bg-white rounded-[3rem] shadow-2xl flex items-center justify-center">
               <FileQuestion className="w-16 h-16 text-canina-blue" />
            </div>
          </div>
        </div>
        
        <h1 className="text-4xl font-black text-medical-gray-900 mb-4">صفحه پیدا نشد!</h1>
        <p className="text-medical-gray-500 mb-12 font-bold text-lg">
          متأسفانه صفحه‌ای که به دنبال آن هستید وجود ندارد یا جابجا شده است.
        </p>

        <button
          onClick={() => router.push('/')}
          className="bg-medical-gray-900 text-white px-10 py-5 rounded-2xl font-black flex items-center justify-center gap-3 mx-auto hover:bg-canina-blue transition-all shadow-2xl shadow-medical-gray-900/10"
        >
          <Home className="w-5 h-5" />
          بازگشت به خانه
        </button>
      </div>
    </div>
  );
};

export const ServerErrorPage = ({ onRetry }: { onRetry: () => void }) => {
  return (
    <div className="min-h-[80vh] flex items-center justify-center p-6" dir="rtl">
      <div className="max-w-lg w-full text-center">
         <div className="w-24 h-24 bg-rose-50 rounded-[2.5rem] flex items-center justify-center mx-auto mb-8">
            <AlertCircle className="w-12 h-12 text-rose-500" />
         </div>
        
        <h1 className="text-4xl font-black text-medical-gray-900 mb-4">خطای داخلی سیستم</h1>
        <p className="text-medical-gray-500 mb-12 font-bold text-lg">
           ارتباط با دیتابیس کانینا با مشکل مواجه شده است. در حال بررسی موضوع هستیم.
        </p>

        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <button
            onClick={onRetry}
            className="bg-canina-blue text-white px-10 py-5 rounded-2xl font-black flex items-center justify-center gap-3 hover:scale-105 transition-all shadow-xl shadow-canina-blue/20"
          >
            <RefreshCw className="w-5 h-5" />
            تلاش مجدد
          </button>
        </div>
      </div>
    </div>
  );
};