import React from "react";
import PageLayout from "../../../PageLayout";
import RouteProtection from "../../../RouteProtection";
import GlobalAnimatedBackground from "../../../../background/GlobalAnimatedBackground";
import StatusUserManagement from "../components/StatusUserManagement";
import StatusPermissionManagement from "../components/StatusPermissionManagement";
import StatusServerLogs from "../components/StatusServerLogs";
import { useTranslation } from "react-i18next";

function AdminDashboard() {
  const { t } = useTranslation('admin_dashboard');
  return (
    <RouteProtection requiredRole="admin">
      <PageLayout showHeader={true} showFooter={true}>
        <div className="relative min-h-screen w-full flex flex-col overflow-hidden">
          <GlobalAnimatedBackground />
          <div className="relative z-10 w-full flex justify-center">
            <div
              className="rounded-lg shadow-lg p-4 sm:p-8 bg-gray-100 w-full"
              style={{
                marginTop: "0.5%", // Match dashboard/referral management top margin
                marginBottom: "2%",
                width: "100%",
                maxWidth: "1600px",
              }}
            >
              {/* Header and subheader, consistent with Dashboard/Referral Management */}
              <h2 className="text-2xl sm:text-5xl font-extrabold text-blue-900 mb-2 text-center tracking-tight">
                {t('heading.main')}
              </h2>
              <p className="text-xs sm:text-base text-blue-900 text-center font-semibold mb-4 sm:mb-8">
                {t('subtitle.main')}
              </p>
              <div className="bg-white bg-opacity-90 rounded-lg shadow-lg p-4 sm:p-6 mb-8">
                {/* Prominent warning banner */}
                <div className="w-full mb-8">
                  <div className="flex items-center w-full bg-red-100 border-2 border-red-500 rounded-xl shadow px-4 sm:px-8 py-4 sm:py-5">
                    <svg
                      className="w-7 h-7 sm:w-8 sm:h-8 text-red-600 mr-3 sm:mr-4"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        d="M12 9v2m0 4h.01M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z"
                      />
                    </svg>
                    <span className="font-bold text-red-700 text-base sm:text-xl">
                      {t('warning.banner')}
                    </span>
                  </div>
                </div>
                <p className="text-gray-600 text-sm sm:text-base text-center">
                  {t('subtitle.main')}
                </p>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 mb-12">
                <StatusUserManagement />
                <StatusPermissionManagement />
              </div>
              <div className="mt-10 sm:mt-16">
                <StatusServerLogs />
              </div>
            </div>
          </div>
        </div>
      </PageLayout>
    </RouteProtection>
  );
}

export default AdminDashboard;