import React, { forwardRef } from "react";
import { PricingSectionProps } from "../../types";
import { Button } from "../ui/Button";
import { Card, CardContent, CardHeader } from "../ui/Card";
import { CardTitle } from "../ui/CardTitle";

// Client Component version - with event handlers
export const PricingSection = forwardRef<HTMLElement, PricingSectionProps>(
  (
    {
      className = "",
      title = "Choose Your Plan",
      subtitle = "Select the perfect plan for your needs",
      plans = [
        {
          name: "Starter",
          price: "Free",
          description: "Perfect for small projects and getting started",
          features: [
            "Basic UI components",
            "Simple authentication",
            "Community support",
            "Basic documentation",
          ],
          buttonText: "Get Started",
          buttonVariant: "outline" as const,
        },
        {
          name: "Pro",
          price: "$29",
          period: "/month",
          description: "Best for growing teams and serious projects",
          features: [
            "All Starter features",
            "Advanced components",
            "Multiple auth providers",
            "Priority support",
            "Advanced themes",
            "Custom integrations",
          ],
          highlighted: true,
          buttonText: "Start Free Trial",
          buttonVariant: "primary" as const,
        },
        {
          name: "Enterprise",
          price: "Custom",
          description: "For large organizations with specific needs",
          features: [
            "All Pro features",
            "Custom development",
            "Dedicated support",
            "SLA guarantee",
            "On-premise deployment",
            "Training sessions",
          ],
          buttonText: "Contact Sales",
          buttonVariant: "secondary" as const,
        },
      ],
      children,
      ...props
    },
    ref
  ) => {
    return (
      <section
        ref={ref}
        className={`py-16 px-4 sm:px-6 lg:px-8 ${className}`}
        {...props}
      >
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
              {title}
            </h2>
            {subtitle && (
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                {subtitle}
              </p>
            )}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {plans.map((plan, index) => (
              <Card
                key={index}
                className={`relative h-full ${
                  plan.highlighted
                    ? "border-primary shadow-lg scale-105"
                    : "border-border"
                }`}
              >
                {plan.highlighted && (
                  <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                    <span className="bg-primary text-primary-foreground px-4 py-1 rounded-full text-sm font-medium">
                      Most Popular
                    </span>
                  </div>
                )}

                <CardHeader className="text-center pb-4">
                  <CardTitle className="text-xl font-bold mb-2">
                    {plan.name}
                  </CardTitle>

                  <div className="mb-4">
                    <span className="text-4xl font-bold text-foreground">
                      {plan.price}
                    </span>
                    {plan.period && (
                      <span className="text-muted-foreground">
                        {plan.period}
                      </span>
                    )}
                  </div>

                  <p className="text-muted-foreground">{plan.description}</p>
                </CardHeader>

                <CardContent className="pt-0">
                  <ul className="space-y-3 mb-8">
                    {plan.features.map((feature, featureIndex) => (
                      <li
                        key={featureIndex}
                        className="flex items-center text-sm"
                      >
                        <svg
                          className="w-4 h-4 text-green-500 mr-3 flex-shrink-0"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M5 13l4 4L19 7"
                          />
                        </svg>
                        {feature}
                      </li>
                    ))}
                  </ul>

                  <Button
                    variant={plan.buttonVariant || "primary"}
                    className="w-full"
                    onClick={plan.onButtonClick}
                  >
                    {plan.buttonText || "Get Started"}
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>

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

PricingSection.displayName = "PricingSection";

// Server Component version - with href instead of onButtonClick
type ServerPricingPlan = Omit<
  NonNullable<PricingSectionProps["plans"]>[0],
  "onButtonClick"
> & {
  buttonHref?: string;
  buttonTarget?: "_self" | "_blank";
};

type ServerPricingSectionProps = Omit<
  PricingSectionProps,
  "plans" | "onBillingChange"
> & {
  plans?: ServerPricingPlan[];
};

export const PricingSectionServer = forwardRef<
  HTMLElement,
  ServerPricingSectionProps
>(
  (
    {
      className = "",
      title = "Choose Your Plan",
      subtitle = "Select the perfect plan for your needs",
      plans = [
        {
          name: "Starter",
          price: "Free",
          description: "Perfect for small projects and getting started",
          features: [
            "Basic UI components",
            "Simple authentication",
            "Community support",
            "Basic documentation",
          ],
          buttonText: "Get Started",
          buttonVariant: "outline" as const,
          buttonHref: "/signup",
        },
        {
          name: "Pro",
          price: "$29",
          period: "/month",
          description: "Best for growing teams and serious projects",
          features: [
            "All Starter features",
            "Advanced components",
            "Multiple auth providers",
            "Priority support",
            "Advanced themes",
            "Custom integrations",
          ],
          highlighted: true,
          buttonText: "Start Free Trial",
          buttonVariant: "primary" as const,
          buttonHref: "/signup?plan=pro",
        },
        {
          name: "Enterprise",
          price: "Custom",
          description: "For large organizations with specific needs",
          features: [
            "All Pro features",
            "Custom development",
            "Dedicated support",
            "SLA guarantee",
            "On-premise deployment",
            "Training sessions",
          ],
          buttonText: "Contact Sales",
          buttonVariant: "secondary" as const,
          buttonHref: "/contact",
        },
      ],
      children,
      ...props
    },
    ref
  ) => {
    // Explicitly remove event handlers if they exist in props (runtime safety)
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { onBillingChange: _onBillingChange, ...safeProps } = props as Record<
      string,
      unknown
    >;

    const getButtonClasses = (variant: string = "primary") => {
      const baseClasses =
        "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 h-10 px-4 py-2 w-full";

      switch (variant) {
        case "primary":
          return `${baseClasses} bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm`;
        case "secondary":
          return `${baseClasses} bg-secondary text-secondary-foreground hover:bg-secondary/80`;
        case "outline":
          return `${baseClasses} border border-input bg-background hover:bg-accent hover:text-accent-foreground`;
        default:
          return `${baseClasses} bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm`;
      }
    };

    return (
      <section
        ref={ref}
        className={`py-16 px-4 sm:px-6 lg:px-8 ${className}`}
        {...safeProps}
      >
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
              {title}
            </h2>
            {subtitle && (
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                {subtitle}
              </p>
            )}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {plans.map((plan, index) => (
              <Card
                key={index}
                className={`relative h-full ${
                  plan.highlighted
                    ? "border-primary shadow-lg scale-105"
                    : "border-border"
                }`}
              >
                {plan.highlighted && (
                  <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                    <span className="bg-primary text-primary-foreground px-4 py-1 rounded-full text-sm font-medium">
                      Most Popular
                    </span>
                  </div>
                )}

                <CardHeader className="text-center pb-4">
                  <CardTitle className="text-xl font-bold mb-2">
                    {plan.name}
                  </CardTitle>

                  <div className="mb-4">
                    <span className="text-4xl font-bold text-foreground">
                      {plan.price}
                    </span>
                    {plan.period && (
                      <span className="text-muted-foreground">
                        {plan.period}
                      </span>
                    )}
                  </div>

                  <p className="text-muted-foreground">{plan.description}</p>
                </CardHeader>

                <CardContent className="pt-0">
                  <ul className="space-y-3 mb-8">
                    {plan.features.map((feature, featureIndex) => (
                      <li
                        key={featureIndex}
                        className="flex items-center text-sm"
                      >
                        <svg
                          className="w-4 h-4 text-green-500 mr-3 flex-shrink-0"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M5 13l4 4L19 7"
                          />
                        </svg>
                        {feature}
                      </li>
                    ))}
                  </ul>

                  {plan.buttonHref ? (
                    <a
                      href={plan.buttonHref}
                      target={plan.buttonTarget || "_self"}
                      rel={
                        plan.buttonTarget === "_blank"
                          ? "noopener noreferrer"
                          : undefined
                      }
                      className={getButtonClasses(plan.buttonVariant)}
                    >
                      {plan.buttonText || "Get Started"}
                    </a>
                  ) : (
                    <div className={getButtonClasses(plan.buttonVariant)}>
                      {plan.buttonText || "Get Started"}
                    </div>
                  )}
                </CardContent>
              </Card>
            ))}
          </div>

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

PricingSectionServer.displayName = "PricingSectionServer";