"use client";

import Image from "next/image";
import mbhsLogo from "@/public/images/mbhs-logo.png";
import LoginForm from "@/components/LoginForm";
import ImageCarousel from "@/components/ImageCarousel";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";
import { useEffect, useState } from "react";

type LogoutBanner = {
  tone: 'amber' | 'red';
  message: string;
} | null;

export default function LoginPage() {
  const t = useTranslations("login");
  const [logoutBanner, setLogoutBanner] = useState<LogoutBanner>(null);

  useEffect(() => {
    const reason = sessionStorage.getItem('auth_logout_reason');
    if (!reason) return;
    sessionStorage.removeItem('auth_logout_reason');

    const banners: Record<string, LogoutBanner> = {
      session_expired: { tone: 'amber', message: t("sessionExpired") },
      complimentary_revoked: {
        tone: 'red',
        message: 'Your complimentary access has been revoked. Please contact your administrator.',
      },
      complimentary_expired: {
        tone: 'amber',
        message: 'Your complimentary access has ended. Subscribe to continue using MBHS.',
      },
      subscription_ended: {
        tone: 'amber',
        message: 'Your subscription has been cancelled and the access period has ended.',
      },
    };

    const banner = banners[reason];
    if (banner) setLogoutBanner(banner);
  }, [t]);

  return (
    <main className="min-h-screen flex bg-gradient-to-br from-[#E8F4F8] via-[#EEF6F9] to-[#E5EEF2]">
      {/* Left Side - Form */}
      <div className="w-full lg:w-1/2 flex flex-col justify-center px-8 py-12 lg:px-16 xl:px-24">
        <div className="max-w-[520px] w-full">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-3 mb-12 w-fit cursor-pointer hover:opacity-80 transition">
            <Image src={mbhsLogo} alt="MBHS" width={56} height={56} className="rounded-xl" />
            <span className="text-[36px] font-extrabold text-gray-900 tracking-tight">MBHS</span>
          </Link>

          {/* Logout Reason Banner — session expired / complimentary revoked / etc. */}
          {logoutBanner && (
            <div
              className={`flex items-start gap-3 border rounded-xl px-4 py-3 mb-6 ${
                logoutBanner.tone === 'red'
                  ? 'bg-red-50 border-red-200'
                  : 'bg-amber-50 border-amber-200'
              }`}
            >
              <svg
                className={`w-5 h-5 flex-shrink-0 mt-0.5 ${
                  logoutBanner.tone === 'red' ? 'text-red-500' : 'text-amber-500'
                }`}
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={2}
              >
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
              </svg>
              <p className={`text-sm ${logoutBanner.tone === 'red' ? 'text-red-800' : 'text-amber-800'}`}>
                {logoutBanner.message}
              </p>
            </div>
          )}

          {/* Title */}
          <h1 className="text-[28px] font-bold text-gray-900 mb-2">
            {t("title")}
          </h1>
          <p className="text-gray-500 text-sm mb-8">
            {t("subtitle")}
          </p>

          {/* Login Form */}
          <LoginForm />
        </div>
      </div>

      {/* Right Side - Image Carousel */}
      <div className="hidden lg:flex lg:w-1/2 items-center justify-center p-8">
        <ImageCarousel />
      </div>
    </main>
  );
}