import Image from "next/image";
import MultiStepProzess from "./MultiStepProzess";
import Logo from "@/src/public/logo-gelb.png";
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/src/components/ui/card";
import Link from "next/link";

interface AuthSidebarComponentProps {
  title: string;
  description?: string;
  footer: string;
  isSteps?: boolean;
  step?: number;
  totalSteps?: number;
  onStepChange?: (step: number) => void;
  className?: string;
  /** Short label shown on mobile only, e.g. "Login", "Registrieren" */
  pageLabel?: string;
}

const AuthSidebarComponent: React.FC<AuthSidebarComponentProps> = ({
  title,
  description,
  footer,
  isSteps,
  step = 1,
  totalSteps = 2,
  onStepChange,
  className = "rounded-2xl",
  pageLabel,
}) => {
  return (
    <div className={`relative w-full h-auto lg:h-full overflow-hidden ${className}`}>
      {/* Animated Gradient Background */}
      <div className="absolute inset-0 -z-10 bg-blue auth-animated-gradient opacity-90">
        <div className="absolute -top-1/3 -left-1/4 w-[80%] h-[80%] rounded-full bg-[oklch(0.6_0.1_240/_0.45)] blur-3xl auth-gradient-blob" />
        <div className="absolute -bottom-1/3 -right-1/4 w-[80%] h-[80%] rounded-full bg-[oklch(0.85_0.15_85/_0.35)] blur-3xl auth-gradient-blob auth-gradient-blob-delay" />
      </div>

      <Card
        className={`relative border border-white/15 bg-blue/60 backdrop-blur-2xl shadow-2xl w-full h-auto lg:h-full p-6 lg:p-8 xl:p-12 flex flex-col justify-center lg:justify-between ${className}`}
      >
        <CardHeader className="p-0 pb-4 hidden lg:grid">
          <CardTitle>
            <Link href="/">
              <Image
                src={Logo}
                width={150}
                height={150}
                alt="Logo"
                className="w-auto h-auto max-w-[120px] lg:max-w-[150px]"
              />
            </Link>
          </CardTitle>
        </CardHeader>

        {/* Mobile-only: short page label (e.g. "Login") */}
        {pageLabel && (
          <p className="lg:hidden text-center text-2xl font-bold text-yellow">{pageLabel}</p>
        )}

        <CardContent className="hidden lg:flex text-yellow flex-col gap-4 lg:gap-6 xl:gap-8 flex-1 p-0">
          <h1 className="text-2xl lg:text-3xl xl:text-[40px] max-w-full font-bold lg:mt-4 xl:mt-8">
            {title}
          </h1>
          {description && <p className="text-sm lg:text-base">{description}</p>}
          {isSteps && (
            <MultiStepProzess step={step} totalSteps={totalSteps} onStepChange={onStepChange} />
          )}
        </CardContent>
        <CardFooter className="pointer-events-auto p-0 pt-4 mt-auto hidden lg:flex">
          <p className="text-yellow text-sm lg:text-base break-words">
            Bei Fragen:{" "}
            <a href={`mailto:${footer}`} className="hover:underline">
              {footer}
            </a>
          </p>
        </CardFooter>
      </Card>
    </div>
  );
};

export default AuthSidebarComponent;