"use client";

import React from "react";
import Link from "next/link";
import AuthBranding from "./AuthBranding";
import AuthGuard from "@/components/AuthGuard";
import FcmAuthWarmup from "@/components/auth/FcmAuthWarmup";

interface AuthLayoutProps {
  children: React.ReactNode;
  activeTab: "login" | "register" | "forgot";
}

export default function AuthLayout({ children, activeTab }: Readonly<AuthLayoutProps>) {
  return (
    <AuthGuard variant="auth">
      <FcmAuthWarmup />
      <div className="min-h-screen bg-[#0E1015] flex" dir="rtl">
        {/* Right Brand Pane (55% width) */}
        <div className="w-[55%] hidden lg:block">
          <AuthBranding />
        </div>

        {/* Left Form Pane (45% / flex-1) */}
        <div className="flex-1 bg-[#13151A] flex flex-col justify-between">
          {/* Mobile Header Bar */}
          <div className="flex items-center justify-between px-8 py-5 lg:hidden border-b border-white/5">
            <div className="flex items-center gap-2">
              <span className="text-white font-black text-xl tracking-tighter">
                BEEBPEEP
              </span>
              <img
                src="/imgs/beeb-logo.svg"
                alt="Logo"
                className="w-6 h-7 object-contain"
              />
            </div>
          </div>

          {/* Centered Form Area */}
          <div className="flex-1 flex items-center justify-center px-8 py-10">
            <div className="w-full max-w-md">
              {/* Segmented Tab Control */}
              {activeTab !== "forgot" && (
                <div
                  className="flex bg-[#1E2128] rounded-2xl p-1.5 mb-8 gap-1 w-full"
                  dir="rtl"
                >
                  <Link
                    href="/login"
                    className={`flex-1 text-center py-2.5 rounded-xl text-sm font-bold transition-all cursor-pointer whitespace-nowrap ${
                      activeTab === "login"
                        ? "bg-[#FCD704] text-[#13151A]"
                        : "text-gray-400 hover:text-white"
                    }`}
                  >
                    تسجيل الدخول
                  </Link>
                  <Link
                    href="/register"
                    className={`flex-1 text-center py-2.5 rounded-xl text-sm font-bold transition-all cursor-pointer whitespace-nowrap ${
                      activeTab === "register"
                        ? "bg-[#FCD704] text-[#13151A]"
                        : "text-gray-400 hover:text-white"
                    }`}
                  >
                    إنشاء حساب
                  </Link>
                </div>
              )}

              {/* Children Forms */}
              {children}
            </div>
          </div>

          {/* Footer Bar */}
          <div className="px-8 py-5 border-t border-white/5 flex items-center justify-between">
            <span className="text-gray-600 text-xs">
              جميع الحقوق محفوظة © 2025 BEEBPEEP
            </span>
            <div className="flex items-center gap-4">
              <button className="text-gray-500 text-xs hover:text-gray-300 cursor-pointer whitespace-nowrap">
                سياسة الخصوصية
              </button>
              <button className="text-gray-500 text-xs hover:text-gray-300 cursor-pointer whitespace-nowrap">
                الشروط والأحكام
              </button>
              <button className="text-gray-500 text-xs hover:text-gray-300 cursor-pointer whitespace-nowrap">
                الدعم الفني
              </button>
            </div>
          </div>
        </div>
      </div>
    </AuthGuard>
  );
}