"use client";
import { useNavigation } from "@hooks/goto";
import { IPlan } from "@core/Models/Plans.model";
import { formatPrice } from "@helpers/Numbers";
import { motion } from "motion/react";
import { ScrollToTop } from "@core/app/components/ScrollTop";

export interface PricingProps {
    data: IPlan[];
}

interface PricingElementProps {
    item: IPlan;
    onClick?: (planId: string) => void;
}

const PricingElement = (props: PricingElementProps) => {
    const { item } = props;
    
    // Highlight ONLY if the API explicitly marks it as 'featured'
    const highlight = item.featured === true;
    
    // Dynamic styling based on whether it's the highlighted plan
    const cardBg = highlight ? "linear-gradient(180deg, var(--wine-superdark) 0%, var(--wine-darkest) 100%)" : "var(--white)";
    const textColor = highlight ? "var(--white)" : "var(--wine-superdark)";
    const descColor = highlight ? "var(--white-darkest)" : "var(--gray-dark)";
    const priceColor = highlight ? "var(--white)" : "var(--wine-darkest)";
    const scale = highlight ? 1.05 : 1;
    const shadow = highlight ? "0 20px 40px rgba(127, 42, 255, 0.4)" : "0 10px 30px rgba(0, 0, 0, 0.05)";
    const border = highlight ? "2px solid var(--wine-red)" : "1px solid var(--white-darkest)";

    return (
        <motion.div
            key={item.name}
            whileHover={{ y: -10, boxShadow: highlight ? "0 25px 50px rgba(127, 42, 255, 0.6)" : "0 20px 40px rgba(0, 0, 0, 0.1)" }}
            whileTap={{ scale: 0.98 }}
            style={{
                flex: "0 0 auto",
                width: "320px",
                background: cardBg,
                borderRadius: "24px",
                boxShadow: shadow,
                textAlign: "left",
                padding: "40px 30px",
                margin: "20px",
                border: border,
                cursor: "pointer",
                color: textColor,
                display: "flex",
                flexDirection: "column",
                position: "relative",
                transform: `scale(${scale})`,
                zIndex: highlight ? 10 : 1,
            }}
            onClick={() => {
                if (props.onClick) {
                    if (!item.id) return;
                    if (!item.active) return;
                    props.onClick(item.id);
                }
            }}
        >
            {highlight && (
                <div style={{ 
                    position: "absolute", 
                    top: "-2px", 
                    left: "-2px", 
                    right: "-2px", 
                    background: "linear-gradient(90deg, var(--wine-red) 0%, #ff5e99 100%)", 
                    color: "white", 
                    padding: "8px", 
                    fontSize: "0.85rem", 
                    fontWeight: "800", 
                    textAlign: "center", 
                    textTransform: "uppercase", 
                    letterSpacing: "2px",
                    borderTopLeftRadius: "24px",
                    borderTopRightRadius: "24px"
                }}>
                    Más Elegido
                </div>
            )}
            
            <h1 style={{ fontSize: "2rem", color: textColor, marginBottom: "10px", marginTop: highlight ? "15px" : "0", fontWeight: "800" }}>{item.name}</h1>
            <p style={{ marginBottom: "25px", fontSize: "1rem", color: descColor, lineHeight: "1.5" }}>{item.description}</p>
            
            <div style={{ margin: "10px 0 25px 0", borderBottom: `1px solid ${highlight ? "rgba(255,255,255,0.1)" : "var(--white-darkest)"}`, paddingBottom: "25px", display: "flex", alignItems: "baseline", flexWrap: "wrap", rowGap: "5px" }}>
                <span style={{ fontWeight: "900", fontSize: "2.6rem", color: priceColor, lineHeight: "1" }}>{formatPrice(item.price)}</span>
                <span style={{ fontSize: "1rem", color: descColor, marginLeft: "5px" }}>/ mes</span>
            </div>
            
            <ul style={{ marginTop: "10px", flexGrow: 1, padding: 0 }}>
                {item.features.map((feature, idx) => (
                    <li
                        key={idx}
                        style={{
                            display: "flex",
                            alignItems: "flex-start",
                            marginBottom: "15px",
                            listStyle: "none",
                            fontSize: "0.95rem",
                            color: highlight ? "var(--white)" : "var(--black)",
                        }}
                    >
                        <svg style={{ minWidth: "20px", height: "20px", marginRight: "10px", color: "var(--green-darkestX1)", marginTop: "2px" }} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path></svg>
                        <span style={{ lineHeight: "1.4" }}>{feature}</span>
                    </li>
                ))}
            </ul>

            <div style={{ marginTop: "30px", width: "100%" }}>
                {!item.active ? (
                    <div style={{ background: "var(--gray-lighter)", color: "var(--gray-dark)", padding: "15px", borderRadius: "12px", textAlign: "center", fontWeight: "bold" }}>NO DISPONIBLE</div>
                ) : (
                    <div style={{ 
                        background: highlight ? "var(--white)" : "var(--wine-darkest)", 
                        color: highlight ? "var(--wine-darkest)" : "var(--white)", 
                        padding: "16px", 
                        borderRadius: "12px", 
                        textAlign: "center", 
                        fontWeight: "800", 
                        fontSize: "1.1rem",
                        boxShadow: highlight ? "0 4px 15px rgba(255,255,255,0.2)" : "0 4px 15px rgba(51,0,128,0.3)",
                        transition: "all 0.3s ease",
                        width: "100%"
                    }}>
                        Comenzar Ahora
                    </div>
                )}
            </div>
        </motion.div>
    );
};

export default function Pricing(props: PricingProps) {
    const { data } = props;
    const { goTo } = useNavigation();

    const henclePlanClick = (item: IPlan) => {
        goTo("/landing/subscription/" + item.id);
    };

    return (
        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", alignItems: "stretch", gap: "20px", marginTop: "20px" }}>
            <ScrollToTop />
            {data.map((item) => (
                <PricingElement
                    key={item.name}
                    item={item}
                    onClick={() => {
                        henclePlanClick(item);
                    }}
                />
            ))}
        </div>
    );
}
