"use client";

import { memo } from "react";
import { Star } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import Button from "@/components/button/Button";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import { getButtonProps } from "@/lib/buttonUtils";
import { cls } from "@/lib/utils";
import type { ButtonConfig } from "@/types/button";
import ProductDetailGallery from "./ProductDetailGallery";
import ProductDetailVariantSelect from "./ProductDetailVariantSelect";

export interface ProductVariant {
    label: string;
    options: string[];
    selected: string;
    onChange: (value: string) => void;
}

interface ProductDetailCardProps {
    layout: "page" | "section";
    name: string;
    price: string;
    showRating?: boolean;
    rating?: number;
    ratingIcon?: LucideIcon;
    description?: string;
    images: { src: string; alt: string }[];
    variants?: ProductVariant[];
    quantity?: ProductVariant;
    buttons: ButtonConfig[];
    className?: string;
    imageContainerClassName?: string;
    infoContainerClassName?: string;
    nameClassName?: string;
    priceClassName?: string;
    descriptionClassName?: string;
    variantSelectClassName?: string;
    variantLabelClassName?: string;
    buttonClassName?: string;
}

const ProductDetailCard = ({
    layout,
    name,
    price,
    showRating = true,
    rating = 0,
    ratingIcon: RatingIcon = Star,
    description,
    images,
    variants,
    quantity,
    buttons,
    className = "",
    imageContainerClassName = "",
    infoContainerClassName = "",
    nameClassName = "",
    priceClassName = "",
    descriptionClassName = "",
    variantSelectClassName = "",
    variantLabelClassName = "",
    buttonClassName = "",
}: ProductDetailCardProps) => {
    const theme = useTheme();

    const getButtonConfigProps = () => {
        if (theme.defaultButtonVariant === "hover-bubble") {
            return { bgClassName: "w-full" };
        }
        if (theme.defaultButtonVariant === "icon-arrow") {
            return { className: "justify-between" };
        }
        return {};
    };

    return (
        <article
            className={cls(
                "relative w-content-width mx-auto",
                layout === "page" ? "pt-hero-page-padding pb-20" : "py-20",
                className
            )}
        >
            <div className="flex flex-col md:flex-row gap-6">
                <ProductDetailGallery
                    images={images}
                    className={cls("md:w-1/2", imageContainerClassName)}
                />

                <div
                    className={cls(
                        "w-full md:w-1/2 p-6 card rounded-theme-capped flex flex-col gap-6",
                        infoContainerClassName
                    )}
                >
                    <h2
                        className={cls(
                            "text-2xl md:text-3xl font-medium text-foreground leading-tight",
                            nameClassName
                        )}
                    >
                        {name}
                    </h2>
                    <div className="w-full h-px bg-background-accent" />
                    <div className="w-full flex items-center justify-between gap-6">
                        <p
                            className={cls(
                                "text-xl md:text-2xl font-medium text-foreground leading-tight",
                                priceClassName
                            )}
                        >
                            {price}
                        </p>
                        {showRating && (
                            <div className="flex items-center gap-1">
                                {[...Array(5)].map((_, i) => (
                                    <RatingIcon
                                        key={i}
                                        className={cls(
                                            "h-(--text-xl) md:h-(--text-2xl) w-auto",
                                            i < Math.floor(rating)
                                                ? "text-accent fill-accent"
                                                : "text-accent opacity-20"
                                        )}
                                        strokeWidth={1.5}
                                    />
                                ))}
                            </div>
                        )}
                    </div>
                    {description && (
                        <p
                            className={cls(
                                "text-sm md:text-base text-foreground/75 leading-tight",
                                descriptionClassName
                            )}
                        >
                            {description}
                        </p>
                    )}
                    {variants && variants.length > 0 && (
                        <div className="flex flex-wrap gap-6">
                            {variants.map((variant, index) => (
                                <div
                                    key={variant.label}
                                    className={cls(
                                        "min-w-0",
                                        variants.length === 1 || (variants.length % 2 !== 0 && index === variants.length - 1)
                                            ? "w-full"
                                            : "flex-1"
                                    )}
                                >
                                    <ProductDetailVariantSelect
                                        variant={variant}
                                        selectClassName={variantSelectClassName}
                                        labelClassName={variantLabelClassName}
                                    />
                                </div>
                            ))}
                        </div>
                    )}
                    {quantity && (
                        <ProductDetailVariantSelect
                            variant={quantity}
                            selectClassName={variantSelectClassName}
                            labelClassName={variantLabelClassName}
                        />
                    )}

                    <div className="flex flex-col gap-3 mt-auto pt-6">
                        {buttons.slice(0, 2).map((button, index) => (
                            <Button
                                key={`${button.text}-${index}`}
                                {...getButtonProps(
                                    { ...button, props: { ...button.props, ...getButtonConfigProps() } },
                                    index,
                                    theme.defaultButtonVariant,
                                    cls("w-full", buttonClassName)
                                )}
                            />
                        ))}
                    </div>
                </div>
            </div>
        </article>
    );
};

ProductDetailCard.displayName = "ProductDetailCard";

export default memo(ProductDetailCard);