'use client';

import { MotionConfig, motion } from 'framer-motion';
import { CheckCircle2 } from 'lucide-react';
import { cn } from '@/lib/utils';

const EASE = [0.32, 0.72, 0, 1] as const;

export interface SubscriptionFeature {
  icon: React.ReactNode;
  text: string;
}

interface SubscriptionScreenProps {
  backgroundImageSrc: string;
  /** Floating graphic that sits on the top edge of the panel. */
  headerGraphic: React.ReactNode;
  appName: string;
  planType: string;
  features: SubscriptionFeature[];
  price: string;
  period: string;
  badge?: string;
  /** The call to action, e.g. a link styled as a button. */
  action: React.ReactNode;
  footerText?: React.ReactNode;
  className?: string;
}

/**
 * A photo card with a frosted panel that slides up when it scrolls into view.
 * Adapted from a mobile paywall: there is a single price, so it shows as one highlighted row rather than a picker.
 */
export const SubscriptionScreen = ({
  backgroundImageSrc,
  headerGraphic,
  appName,
  planType,
  features,
  price,
  period,
  badge,
  action,
  footerText,
  className,
}: SubscriptionScreenProps) => {
  return (
    <MotionConfig reducedMotion="user">
      <motion.div
        initial="hidden"
        whileInView="shown"
        viewport={{ once: true, amount: 0.3 }}
        className={cn(
          'relative flex min-h-[620px] w-full max-w-md flex-col items-center justify-end overflow-hidden rounded-2xl bg-background shadow-2xl',
          className,
        )}
      >
        <img src={backgroundImageSrc} alt="" className="absolute inset-0 z-0 h-full w-full object-cover object-top" />

        <motion.div
          variants={{ hidden: { y: '100%' }, shown: { y: 0 } }}
          transition={{ duration: 0.7, ease: EASE }}
          className="relative z-10 flex w-full flex-col items-center rounded-t-3xl bg-background/85 px-6 pb-6 pt-8 backdrop-blur-xl"
        >
          <motion.div
            className="absolute -top-14 drop-shadow-xl"
            variants={{ hidden: { y: 40, opacity: 0 }, shown: { y: 0, opacity: 1 } }}
            transition={{ duration: 0.5, delay: 0.5, ease: 'easeOut' }}
          >
            {headerGraphic}
          </motion.div>

          <div className="mt-10 text-center">
            <h3 className="m-0 text-2xl text-foreground">
              {appName} <span className="font-medium text-primary">{planType}</span>
            </h3>
          </div>

          <ul className="m-0 mt-6 list-none space-y-3 self-start p-0">
            {features.map((feature, index) => (
              <motion.li
                key={index}
                className="flex items-center gap-3 text-sm text-foreground/80"
                variants={{ hidden: { opacity: 0, x: -20 }, shown: { opacity: 1, x: 0 } }}
                transition={{ duration: 0.5, delay: 0.6 + index * 0.1, ease: 'easeOut' }}
              >
                <span className="shrink-0 text-primary">{feature.icon}</span>
                <span>{feature.text}</span>
              </motion.li>
            ))}
          </ul>

          <div className="mt-7 flex w-full items-center justify-between gap-3 rounded-lg border-2 border-primary bg-primary/10 p-4">
            <div className="flex items-baseline gap-2">
              <CheckCircle2 aria-hidden="true" className="size-5 shrink-0 self-center text-primary" />
              <span className="font-serif text-2xl font-semibold leading-none text-foreground">{price}</span>
              <span className="text-sm text-muted-foreground">{period}</span>
            </div>
            {badge && (
              <span className="whitespace-nowrap rounded-full bg-primary px-3 py-1 text-xs font-semibold text-primary-foreground">
                {badge}
              </span>
            )}
          </div>

          <div className="mt-6 w-full">{action}</div>

          {footerText && <p className="m-0 mt-4 text-center text-xs text-muted-foreground">{footerText}</p>}
        </motion.div>
      </motion.div>
    </MotionConfig>
  );
};

export default SubscriptionScreen;