"use client";

import React, { forwardRef } from "react";
import { HeroSectionProps } from "../../types";
import { Button } from "../ui/Button";

// Server Component version - no event handlers
export const HeroSectionServer = forwardRef<
  HTMLElement,
  Omit<HeroSectionProps, "onCtaClick">
>(
  (
    {
      className = "",
      title = "Welcome to Our Platform",
      subtitle = "Build amazing applications with our component library",
      ctaText = "Get Started",
      backgroundImage,
      ctaHref,
      ctaTarget = "_self",
      children,
      ...props
    },
    ref
  ) => {
    // Explicitly remove onCtaClick if it exists in props (runtime safety)
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { onCtaClick: _onCtaClick, ...safeProps } = props as Record<
      string,
      unknown
    >;

    const backgroundStyle = backgroundImage
      ? { backgroundImage: `url(${backgroundImage})` }
      : {};

    const renderCTA = () => {
      if (!ctaHref) return null;

      return (
        <a
          href={ctaHref}
          target={ctaTarget}
          rel={ctaTarget === "_blank" ? "noopener noreferrer" : undefined}
          className="inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm h-11 px-8 text-lg gap-2.5"
        >
          {ctaText}
        </a>
      );
    };

    return (
      <section
        ref={ref}
        className={`relative py-20 px-4 sm:px-6 lg:px-8 ${className}`}
        style={backgroundStyle}
        {...safeProps}
      >
        {backgroundImage && (
          <div className="absolute inset-0 bg-black/50 z-0" />
        )}

        <div className="relative z-10 max-w-4xl mx-auto text-center">
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-foreground mb-6">
            {title}
          </h1>

          {subtitle && (
            <p className="text-lg sm:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
              {subtitle}
            </p>
          )}

          {renderCTA()}

          {children}
        </div>
      </section>
    );
  }
);

HeroSectionServer.displayName = "HeroSectionServer";

// Client Component version - with event handlers
export const HeroSectionClient = forwardRef<HTMLElement, HeroSectionProps>(
  (
    {
      className = "",
      title = "Welcome to Our Platform",
      subtitle = "Build amazing applications with our component library",
      ctaText = "Get Started",
      backgroundImage,
      onCtaClick,
      ctaHref,
      ctaTarget = "_self",
      children,
      ...props
    },
    ref
  ) => {
    const backgroundStyle = backgroundImage
      ? { backgroundImage: `url(${backgroundImage})` }
      : {};

    const renderCTA = () => {
      if (!onCtaClick && !ctaHref) return null;

      if (ctaHref) {
        // Use native anchor tag for external links or when Next.js Link is not available
        return (
          <a
            href={ctaHref}
            target={ctaTarget}
            rel={ctaTarget === "_blank" ? "noopener noreferrer" : undefined}
            className="inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm h-11 px-8 text-lg gap-2.5"
          >
            {ctaText}
          </a>
        );
      }

      return (
        <Button size="lg" onClick={onCtaClick} className="text-lg px-8 py-3">
          {ctaText}
        </Button>
      );
    };

    return (
      <section
        ref={ref}
        className={`relative py-20 px-4 sm:px-6 lg:px-8 ${className}`}
        style={backgroundStyle}
        {...props}
      >
        {backgroundImage && (
          <div className="absolute inset-0 bg-black/50 z-0" />
        )}

        <div className="relative z-10 max-w-4xl mx-auto text-center">
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-foreground mb-6">
            {title}
          </h1>

          {subtitle && (
            <p className="text-lg sm:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
              {subtitle}
            </p>
          )}

          {renderCTA()}

          {children}
        </div>
      </section>
    );
  }
);

HeroSectionClient.displayName = "HeroSectionClient";

// Default export for backward compatibility (client component)
export const HeroSection = HeroSectionClient;