import { t } from "i18next";
import { useAuthUser } from "../hooks/useAuthUser";
import { useNavigate } from "react-router-dom";

const DelegationView = () => {
  const { logout } = useAuthUser();
  const navigate = useNavigate();

  const handleLogout = () => {
    logout();
  };

  const handleNavigateToDelegation = () => {
    navigate("/record-management/delegation");
  };

  return (
    <div className="flex-1 flex items-center justify-center p-4 bg-gradient-to-br from-red-50 via-orange-50 to-amber-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
      <div className="w-full max-w-2xl bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg rounded-3xl border border-red-200/60 dark:border-red-800/60 shadow-2xl p-8">
        {/* Main Icon Container */}
        <div className="relative mb-8">
          <div className="relative w-24 h-24 bg-gradient-to-br from-red-100 to-orange-100 dark:from-red-900/40 dark:to-orange-900/40 rounded-full flex items-center justify-center shadow-lg animate-soft-pulse mx-auto">
            <div className="absolute inset-0 bg-white/30 dark:bg-gray-700/30 rounded-full animate-ping opacity-60"></div>
            <svg
              className="w-12 h-12 text-red-600 dark:text-red-400 relative z-10"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path
                fillRule="evenodd"
                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                clipRule="evenodd"
              />
            </svg>
          </div>

          {/* Decorative elements */}
          <div className="absolute top-0 right-10 w-8 h-8 bg-yellow-100 dark:bg-yellow-900/40 rounded-full animate-bounce"></div>
          <div className="absolute bottom-2 left-10 w-6 h-6 bg-orange-100 dark:bg-orange-900/40 rounded-full animate-bounce delay-300"></div>
        </div>

        {/* Main Content */}
        <div className="text-center mb-8">
          <h2 className="text-3xl font-bold bg-gradient-to-r from-red-700 to-orange-700 dark:from-red-400 dark:to-orange-400 bg-clip-text text-transparent mb-4">
            {t("msg.accessDenied")}
          </h2>

          <div className="bg-white/80 dark:bg-gray-700/80 p-6 rounded-xl border border-gray-100 dark:border-gray-600 shadow-sm mb-6 max-w-md mx-auto">
            <p className="text-sm text-gray-600 dark:text-gray-300 opacity-90 leading-6">
              {t("userIncoming.errDelegation")}
            </p>
          </div>
        </div>

        {/* Action Buttons */}
        <div className="flex flex-col sm:flex-row gap-4 w-full max-w-md mx-auto">
          {/* Sign Out Button */}
          <button
            onClick={handleLogout}
            className="group flex-1 px-6 py-4 bg-white dark:bg-gray-700 border border-red-200 dark:border-red-700 text-red-700 dark:text-red-400 rounded-xl hover:bg-red-50 dark:hover:bg-red-900/20 hover:border-red-300 dark:hover:border-red-600 hover:shadow-lg transition-all duration-300 font-semibold flex items-center justify-center gap-3 shadow-sm hover:scale-105"
          >
            <svg
              className="w-5 h-5 group-hover:scale-110 transition-transform duration-300"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
              />
            </svg>
            {t("profile.signOut")}
          </button>

          {/* Delegation Management Button */}
          <button
            onClick={handleNavigateToDelegation}
            className="group flex-1 px-6 py-4 bg-gradient-to-r from-red-600 to-orange-600 text-white rounded-xl hover:from-red-700 hover:to-orange-700 hover:shadow-xl transition-all duration-300 font-semibold flex items-center justify-center gap-3 shadow-md hover:scale-105"
          >
            <svg
              className="w-5 h-5 group-hover:scale-110 transition-transform duration-300"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"
              />
            </svg>
            {t("header.navigation.delegation")}
          </button>
        </div>
      </div>
    </div>
  );
};

export default DelegationView;
