import { motion } from 'motion/react';
import BeforeLogin from './BeforeLogin';
import AfterLogin from './AfterLogin';

interface User {
  email: string;
  name: string;
}

interface CTAButtonProps {
  user: User | null;
  onClick: () => void;
  className?: string;
}

// Helper function to generate initials from user data
const generateInitials = (user: User): string => {
  if (user.name && user.name.includes(' ')) {
    // If name has spaces, use first letter of first and last name
    const nameParts = user.name.trim().split(' ');
    return (nameParts[0]?.charAt(0) + nameParts[nameParts.length - 1]?.charAt(0)).toUpperCase();
  } else if (user.name) {
    // If name is single word, use first two letters
    return user.name.substring(0, 2).toUpperCase();
  } else {
    // Fallback to email
    const emailPart = user.email.split('@')[0];
    if (emailPart.length >= 2) {
      return emailPart.substring(0, 2).toUpperCase();
    }
    return emailPart.charAt(0).toUpperCase() + 'X';
  }
};

// Custom AfterLogin component with dynamic initials
function CustomAfterLogin({ initials }: { initials: string }) {
  return (
    <div className="bg-[#f95f62] relative rounded-[3.35544e+07px] shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-4px_rgba(0,0,0,0.1)] size-full" data-name="After Login">
      <div className="flex flex-row items-center justify-center relative size-full">
        <div className="box-border content-stretch flex gap-[4px] items-center justify-center overflow-clip px-[15px] py-[12px] relative size-full">
          {/* User Initials Circle */}
          <div className="box-border content-stretch flex items-center justify-center pl-0 pr-[0.016px] py-0 relative rounded-[3.35544e+07px] shrink-0 size-[28px]" style={{ backgroundImage: "linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(90deg, rgb(249, 95, 98) 0%, rgb(249, 95, 98) 100%)" }}>
            <div className="h-[14px] relative shrink-0 w-[13.703px]">
              <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[14px] relative w-[13.703px]">
                <div className="absolute font-['Poppins:Bold',_sans-serif] leading-[0] left-0 not-italic text-[10.5px] text-nowrap text-white top-0">
                  <p className="leading-[14px] whitespace-pre">{initials}</p>
                </div>
              </div>
            </div>
          </div>
          
          {/* Text */}
          <div className="content-stretch flex h-[17.5px] items-start relative shrink-0 w-[86.047px]">
            <div className="font-['Poppins:SemiBold',_sans-serif] leading-[0] not-italic relative shrink-0 text-[12.25px] text-nowrap text-white">
              <p className="leading-[17.5px] whitespace-pre">MY CITY CARD</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export function CTAButton({ user, onClick, className = "" }: CTAButtonProps) {
  const buttonContent = user ? (
    <CustomAfterLogin initials={generateInitials(user)} />
  ) : (
    <BeforeLogin />
  );

  return (
    <motion.button
      onClick={onClick}
      className={`relative w-[180px] h-[50px] cursor-pointer group ${className}`}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ duration: 0.2 }}
    >
      <motion.div
        key={user ? user.email : 'logged-out'}
        className="w-full h-full"
        // initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.3 }}
      >
        {buttonContent}
      </motion.div>
      
      {/* Hover glow effect */}
      <div className="absolute inset-0 rounded-full opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-gradient-to-r from-primary to-secondary blur-lg -z-10" />
    </motion.button>
  );
}