import React from 'react';
import type { ComponentConfig } from '@measured/puck';
import { Check } from 'lucide-react';
import {
  createDesignControlsFields,
  applyDesignControls,
  type DesignControlsProps,
} from '../../theme';

export interface PlanCta {
  text: string;
  href: string;
}

export interface Plan {
  name: string;
  price: string;
  subtitle?: string;
  features: string[];
  cta: PlanCta;
}

export interface PricingCardsProps extends DesignControlsProps {
  sectionHeading?: string;
  sectionSubheading?: string;
  currency: string;
  billingPeriod: string;
  plans: Plan[];
  highlightIndex: number;
  popularBadgeText?: string;
  variant: 'light' | 'dark';
}

const PricingCardsRender: React.FC<PricingCardsProps> = (props) => {
  const {
    sectionHeading,
    sectionSubheading,
    currency,
    billingPeriod,
    plans,
    highlightIndex,
    popularBadgeText,
    variant,
    ...designControls
  } = props;

  const applied = applyDesignControls(designControls);
  const isDark = variant === 'dark';

  return (
    <section
      id={designControls.anchorId || undefined}
      className={`${applied.className} ${isDark ? 'bg-neutral-900' : ''}`}
      style={applied.style}
    >
      <div
        className={`${applied.containerClassName || 'max-w-7xl'} mx-auto px-4 sm:px-6 lg:px-8`}
      >
        {(sectionHeading || sectionSubheading) && (
          <div className="text-center mb-12">
            {sectionHeading && (
              <h2
                className={`text-3xl sm:text-4xl font-bold ${
                  isDark ? 'text-white' : 'text-neutral-900'
                }`}
              >
                {sectionHeading}
              </h2>
            )}
            {sectionSubheading && (
              <p
                className={`mt-4 text-lg ${
                  isDark ? 'text-neutral-400' : 'text-neutral-600'
                }`}
              >
                {sectionSubheading}
              </p>
            )}
          </div>
        )}

        {plans && plans.length > 0 && (
          <div
            className={`grid grid-cols-1 ${
              plans.length === 2
                ? 'md:grid-cols-2 max-w-4xl'
                : plans.length === 3
                  ? 'lg:grid-cols-3 max-w-6xl'
                  : 'lg:grid-cols-4 max-w-7xl'
            } mx-auto gap-8`}
          >
            {plans.map((plan, index) => {
            const isHighlighted = index === highlightIndex;

            return (
              <div
                key={index}
                className={`relative rounded-2xl p-8 ${
                  isHighlighted
                    ? 'bg-primary-600 text-white ring-4 ring-primary-600 scale-105 z-10'
                    : isDark
                      ? 'bg-neutral-800 text-white'
                      : 'bg-white shadow-lg'
                }`}
              >
                {isHighlighted && popularBadgeText && (
                  <div className="absolute -top-4 left-1/2 -translate-x-1/2">
                    <span className="bg-primary-800 text-white text-sm font-semibold px-4 py-1 rounded-full">
                      {popularBadgeText}
                    </span>
                  </div>
                )}

                <h3
                  className={`text-xl font-semibold ${
                    isHighlighted
                      ? 'text-white'
                      : isDark
                        ? 'text-white'
                        : 'text-neutral-900'
                  }`}
                >
                  {plan.name}
                </h3>

                {plan.subtitle && (
                  <p
                    className={`mt-2 text-sm ${
                      isHighlighted
                        ? 'text-primary-100'
                        : isDark
                          ? 'text-neutral-400'
                          : 'text-neutral-600'
                    }`}
                  >
                    {plan.subtitle}
                  </p>
                )}

                <div className="mt-6">
                  <span
                    className={`text-4xl font-bold ${
                      isHighlighted
                        ? 'text-white'
                        : isDark
                          ? 'text-white'
                          : 'text-neutral-900'
                    }`}
                  >
                    {currency}
                    {plan.price}
                  </span>
                  <span
                    className={`text-sm ${
                      isHighlighted
                        ? 'text-primary-100'
                        : isDark
                          ? 'text-neutral-400'
                          : 'text-neutral-600'
                    }`}
                  >
                    {billingPeriod}
                  </span>
                </div>

                <ul className="mt-8 space-y-4">
                  {plan.features.map((feature, featureIndex) => (
                    <li key={featureIndex} className="flex items-start gap-3">
                      <Check
                        className={`w-5 h-5 flex-shrink-0 ${
                          isHighlighted
                            ? 'text-primary-200'
                            : 'text-primary-600'
                        }`}
                      />
                      <span
                        className={`text-sm ${
                          isHighlighted
                            ? 'text-primary-100'
                            : isDark
                              ? 'text-neutral-300'
                              : 'text-neutral-700'
                        }`}
                      >
                        {feature}
                      </span>
                    </li>
                  ))}
                </ul>

                {plan.cta?.text && (
                  <a
                    href={plan.cta.href || '#'}
                    className={`mt-8 block w-full py-3 px-4 rounded-lg text-center font-semibold transition-colors ${
                      isHighlighted
                        ? 'bg-white text-primary-600 hover:bg-neutral-100'
                        : isDark
                          ? 'bg-primary-600 text-white hover:bg-primary-700'
                          : 'bg-primary-600 text-white hover:bg-primary-700'
                    }`}
                  >
                    {plan.cta.text}
                  </a>
                )}
              </div>
            );
          })}
          </div>
        )}
      </div>
    </section>
  );
};

const designControlFields = createDesignControlsFields();

export const PricingCards: ComponentConfig<PricingCardsProps> = {
  label: 'Pricing Cards',
  fields: {
    sectionHeading: {
      type: 'text',
      label: 'Section Heading',
    },
    sectionSubheading: {
      type: 'text',
      label: 'Section Subheading',
    },
    currency: {
      type: 'text',
      label: 'Currency Symbol',
    },
    billingPeriod: {
      type: 'text',
      label: 'Billing Period Label',
    },
    plans: {
      type: 'array',
      label: 'Plans',
      arrayFields: {
        name: { type: 'text', label: 'Plan Name' },
        price: { type: 'text', label: 'Price' },
        subtitle: { type: 'text', label: 'Subtitle' },
        features: {
          type: 'array',
          label: 'Features',
          arrayFields: {},
        },
        cta: {
          type: 'object',
          label: 'CTA Button',
          objectFields: {
            text: { type: 'text', label: 'Button Text' },
            href: { type: 'text', label: 'Button URL' },
          },
        },
      },
      defaultItemProps: {
        name: 'Plan',
        price: '29',
        subtitle: 'For small teams',
        features: ['Feature 1', 'Feature 2', 'Feature 3'],
        cta: { text: 'Get Started', href: '#' },
      },
    },
    highlightIndex: {
      type: 'number',
      label: 'Highlighted Plan Index (0-based)',
    },
    popularBadgeText: {
      type: 'text',
      label: 'Popular Badge Text',
    },
    variant: {
      type: 'select',
      label: 'Variant',
      options: [
        { label: 'Light', value: 'light' },
        { label: 'Dark', value: 'dark' },
      ],
    },
    // Design Controls
    padding: designControlFields.padding,
    backgroundVariant: designControlFields.backgroundVariant,
    gradientPreset: designControlFields.gradientPreset,
    contentMaxWidth: designControlFields.contentMaxWidth,
    alignment: designControlFields.alignment,
    hideOnMobile: designControlFields.hideOnMobile,
    hideOnTablet: designControlFields.hideOnTablet,
    hideOnDesktop: designControlFields.hideOnDesktop,
    anchorId: designControlFields.anchorId,
  },
  defaultProps: {
    sectionHeading: 'Choose your plan',
    sectionSubheading: 'Select the option that works best for you.',
    currency: '$',
    billingPeriod: '/month',
    plans: [
      {
        name: 'Basic',
        price: '0',
        subtitle: 'Get started',
        features: ['Feature one', 'Feature two', 'Feature three'],
        cta: { text: 'Get Started', href: '#' },
      },
      {
        name: 'Standard',
        price: '49',
        subtitle: 'Most popular',
        features: ['Everything in Basic', 'Feature four', 'Feature five', 'Priority support'],
        cta: { text: 'Get Started', href: '#' },
      },
      {
        name: 'Premium',
        price: '99',
        subtitle: 'For power users',
        features: ['Everything in Standard', 'Feature six', 'Feature seven', 'Dedicated support'],
        cta: { text: 'Contact Us', href: '#' },
      },
    ],
    highlightIndex: 1,
    popularBadgeText: 'Recommended',
    variant: 'light',
    padding: 'xl',
    backgroundVariant: 'light',
    contentMaxWidth: 'wide',
    alignment: 'center',
  },
  render: PricingCardsRender,
};

export default PricingCards;
