import React, { useEffect } from 'react';
import svgPaths from "../imports/svg-i1joeov37f";
import { navigateTo } from './Router';

interface PrimaryCTAButtonProps {
  text: string;
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  className?: string;
  ariaLabel?: string;
  debugId?: string; // Add debug identifier
}

export const PrimaryCTAButton: React.FC<PrimaryCTAButtonProps> = ({
  text,
  onClick,
  className = '',
  ariaLabel,
  debugId = 'unknown'
}) => {
  // Debug: Log when component mounts
  useEffect(() => {
    console.log(`PrimaryCTAButton ${debugId} mounted`);
  }, [debugId]);

  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    console.log(`Primary CTA Button ${debugId} clicked with text: "${text}"`); // Debug log
    // Handle webinars navigation
    if (text === "Join Our Webinars" || text === "Explore Webinars" || text === "View Webinars") {
      console.log(`Navigating to webinars page for ${debugId}`);
      navigateTo('/webinars');
    } else if (text === "Register Free" || text === "Watch Replay" || text === "Launch in Zoom") {
      // These are handled by individual webinar detail pages
      console.log(`Webinar CTA handled by detail page for ${debugId}`);
    } else if (onClick) {
      console.log(`Custom onClick handler found for ${debugId}, executing it`); // Debug log
      onClick(e);
    } else {
      console.log(`No custom onClick for ${debugId}, navigating to webcast page`); // Debug log
      // Navigate to webcast page by default
      navigateTo('/learning/webcast');
    }
  };

  return (
    <button 
        className={`primary-cta-button group box-border content-stretch flex flex-row gap-2.5 items-center justify-start p-0 relative cursor-pointer overflow-hidden ${className}`}
        style={{ 
          background: 'transparent',
          border: 'none',
          width: 'fit-content' // Perfect width - no extra horizontal space
        }}
        onClick={handleClick}
        aria-label={ariaLabel || text}
      >
        {/* Icon Container with Slide Animation */}
        <div className="relative shrink-0 size-[50px] overflow-hidden">
          {/* Background Rectangle - Consistent Yellow Color */}
          <div className="absolute inset-0 bg-[#F8C301]" />
          
          {/* Icon Layer - Sliding Animation */}
          <div className="icon-layer absolute inset-0 w-full h-full">
            {/* Primary Arrow - Slides out diagonally up-right */}
            <div className="icon absolute inset-0 flex items-center justify-center transition-all duration-300 ease-in-out group-hover:translate-x-6 group-hover:-translate-y-6 group-hover:opacity-0">
              <svg
                className="block w-full h-full"
                fill="none"
                preserveAspectRatio="none"
                viewBox="0 0 50 50"
              >
                <g clipPath="url(#clip0_primary_cta_primary)">
                  <path d={svgPaths.p5b8d700} fill="white" />
                  <path d={svgPaths.p30b71a00} fill="white" />
                </g>
                <defs>
                  <clipPath id="clip0_primary_cta_primary">
                    <rect fill="white" height="50" width="50" />
                  </clipPath>
                </defs>
              </svg>
            </div>
            
            {/* Secondary Arrow - Slides in from bottom-left */}
            <div className="icon absolute inset-0 flex items-center justify-center opacity-0 -translate-x-6 translate-y-6 transition-all duration-300 ease-in-out group-hover:translate-x-0 group-hover:translate-y-0 group-hover:opacity-100">
              <svg
                className="block w-full h-full"
                fill="none"
                preserveAspectRatio="none"
                viewBox="0 0 50 50"
              >
                <g clipPath="url(#clip0_primary_cta_secondary)">
                  <path d={svgPaths.p5b8d700} fill="white" />
                  <path d={svgPaths.p30b71a00} fill="white" />
                </g>
                <defs>
                  <clipPath id="clip0_primary_cta_secondary">
                    <rect fill="white" height="50" width="50" />
                  </clipPath>
                </defs>
              </svg>
            </div>
          </div>
        </div>

        {/* Text Section with Vertical Slide Animation */}
        <div className="text-layer relative shrink-0 overflow-hidden flex items-center" style={{ 
          height: '28px',
          fontFamily: 'Inter, sans-serif',
          fontSize: '20px',
          fontWeight: '400',
          lineHeight: '28px',
          whiteSpace: 'nowrap',
          color: '#ffffff',
          width: 'fit-content' // Perfect text width - no extra horizontal space
        }}>
          {/* Primary Text - Slides up and out */}
          <div 
            className="text-element absolute inset-0 flex items-center justify-start transition-all duration-300 ease-in-out group-hover:-translate-y-full group-hover:opacity-0" 
            style={{
              color: '#ffffff',
              fontFamily: 'Inter, sans-serif',
              fontSize: '20px',
              fontWeight: '400',
              lineHeight: '28px'
            }}
          >
            {text}
          </div>
          
          {/* Secondary Text - Slides in from bottom */}
          <div 
            className="text-element absolute inset-0 flex items-center justify-start translate-y-full opacity-0 transition-all duration-300 ease-in-out group-hover:translate-y-0 group-hover:opacity-100" 
            style={{
              color: '#ffffff',
              fontFamily: 'Inter, sans-serif',
              fontSize: '20px',
              fontWeight: '400',
              lineHeight: '28px'
            }}
          >
            {text}
          </div>
        </div>
      </button>
  );
};