import { useState } from "react";
import styles from "./steptwonew.module.css";

interface StepTwoProps {
    handleFinish: (data: any) => void;
    handleBack: () => void;
}

const CheckIcon = () => (
    <svg className={styles.featureIcon} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
);

const CrossIcon = () => (
    <svg className={styles.featureIconCross} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
    </svg>
);

const PLANS = [
    {
        name: "Free",
        description: "For solo entrepreneurs who need basic live chat and FAQs at no cost.",
        price: "0.00",
        buttonText: "Continue as free",
        features: [
            { text: "50 lifetime AI conversations", included: true },
            { text: "100 product training", included: true },
            { text: "1 email channel", included: true },
            { text: "90 days chat history", included: true },
            { text: "Professional FAQs page", included: true },
            { text: "Multiple agents", included: false },
            { text: "Fully-customizable chatbot", included: false },
            { text: "Additional AI conversations", included: false },
            { text: "Translation", included: false },
        ],
    },
    {
        name: "Basic",
        description: "For solo entrepreneurs who need basic live chat and FAQs at no cost.",
        price: "19.99",
        buttonText: "Start 7-day free trial",
        features: [
            { text: "50 AI conversations / month", included: true },
            { text: "500 product training items", included: true },
            { text: "Basic AI model", included: true },
            { text: "Multi-channel support", included: true },
            { text: "Up to 5 team members", included: true },
            { text: "12-month chat history", included: true },
            { text: "Fully-customizable chatbot", included: true },
            { text: "Basic analytics", included: true },
        ],
    },
    {
        name: "Pro",
        description: "For growing teams needing advanced, flexible support.",
        price: "49.99",
        buttonText: "Start 7-day free trial",
        recommended: true,
        features: [
            { text: "300 AI conversations / month", included: true },
            { text: "8,000 product training items", included: true },
            { text: "Pro AI model", included: true },
            { text: "Up to 10 team members", included: true },
            { text: "Multi-channel support", included: true },
            { text: "Unlimited chat history", included: true },
            { text: "Fully-customizable chatbot", included: true },
            { text: "Advanced analytics", included: true },
            { text: "AI across all channels", included: true },
        ],
    },
    {
        name: "Plus",
        description: "For enterprises handling high-volume support with unlimited AI.",
        price: "99.99",
        buttonText: "Start 7-day free trial",
        features: [
            { text: "700 AI conversations / month", included: true },
            { text: "20,000 product training items", included: true },
            { text: "Pro AI model", included: true },
            { text: "Unlimited team members", included: true },
            { text: "Multi-channel support", included: true },
            { text: "Unlimited chat history", included: true },
            { text: "Fully-customizable chatbot", included: true },
            { text: "Advanced analytics", included: true },
            { text: "Dedicated AI consultant", included: true },
        ],
    },
];

export default function StepTwoNew({ handleFinish, handleBack }: StepTwoProps) {
    const [billingPeriod, setBillingPeriod] = useState<"monthly" | "yearly">("monthly");
    const [selectedPlan, setSelectedPlan] = useState<string>("Pro");

    return (
        <div className={styles.container}>
            <h1 className={styles.title}>Choose the plan that fits your business.</h1>

            <div className={styles.toggleContainer}>
                <div className={styles.toggleWrapper}>
                    <button
                        className={`${styles.toggleButton} ${billingPeriod === "monthly" ? styles.toggleButtonActive : ""}`}
                        onClick={() => setBillingPeriod("monthly")}
                    >
                        Monthly
                    </button>
                    <button
                        className={`${styles.toggleButton} ${billingPeriod === "yearly" ? styles.toggleButtonActive : ""}`}
                        onClick={() => setBillingPeriod("yearly")}
                    >
                        Yearly
                        <span className={styles.yearlyBadge}>15% off</span>
                    </button>
                </div>
            </div>

            <div className={styles.plansGrid}>
                {PLANS.map((plan) => (
                    <div
                        key={plan.name}
                        className={`${styles.planCard} ${plan.recommended ? styles.planCardActive : ""}`}
                    >
                        <div className={styles.planMain}>
                            <h3 className={styles.planName}>{plan.name}</h3>
                            <p className={styles.planDescription}>{plan.description}</p>
                            <div className={styles.planPrice}>
                                <span className={styles.priceValue}>${plan.price}</span>
                                <span className={styles.pricePeriod}>/month</span>
                            </div>
                            <button
                                className={`${styles.subscribeButton} ${plan.recommended ? styles.subscribeButtonActive : ""}`}
                                onClick={() => handleFinish({ plan: plan.name, billing: billingPeriod })}
                            >
                                {plan.buttonText}
                            </button>
                        </div>
                        <div className={styles.planFeatures}>
                            {plan.features.map((feature, idx) => (
                                <div key={idx} className={styles.featureItem}>
                                    {feature.included ? <CheckIcon /> : <CrossIcon />}
                                    <span>{feature.text}</span>
                                </div>
                            ))}
                        </div>
                    </div>
                ))}
            </div>

            <div style={{ display: "flex", justifyContent: "center", marginTop: "24px", paddingBottom: "24px" }}>
                <button
                    onClick={handleBack}
                    style={{
                        background: "none",
                        border: "none",
                        color: "#6d7175",
                        cursor: "pointer",
                        fontSize: "14px",
                        textDecoration: "underline"
                    }}
                >
                    Back to previous step
                </button>
            </div>
        </div>
    );
}