"use client";

import React, { useState } from "react";
import { ProductCardProps } from "./types";

import { Button } from "@shared/components/button";
import { Checklist } from "@shared/components/checklist";
import { Image } from "@shared/components/image";
import { MaterialIcon } from "@shared/components/material-icon";
import { SelectPlanButton } from "@shared/components/select-plan-button";
import { Text } from "@shared/components/text";
import { cx } from "@shared/utils";

export const ProductCard: React.FC<ProductCardProps> = ({
  planName,
  planSubtext,
  speed,
  price,
  description,
  bestValue = false,
  bestValueText = "best value",
  giftBadge,
  innerBadge,
  theme = "light",
  featuresTitle = "Business Ready Internet features",
  features = [],
  isExpanded: controlledExpanded,
  onToggleExpand,
  onCtaClick,
  renderCheckPlans,
  cta,
  techType,
  ismaxSpeed,
}) => {
  const [internalExpanded, setInternalExpanded] = useState(false);
  // Use parent state if provided, otherwise use internal state
  const isExpanded =
    controlledExpanded !== undefined ? controlledExpanded : internalExpanded;

  const handleToggle = () => {
    if (onToggleExpand) {
      onToggleExpand();
    } else {
      setInternalExpanded(!internalExpanded);
    }
  };

  const isDark = theme === "dark";

  return (
    <article
      className={cx(
        "relative flex h-full w-full max-w-[392px] flex-col",
        !bestValue && "md:pt-[38px]"
      )}
    >
      {/* Best Value Banner */}
      {bestValue && (
        <div className="label3 rounded-t-[20px] bg-bg-fill-brand-accent px-6 py-2 text-center text-text">
          {bestValueText}
        </div>
      )}

      {/* Main Card */}
      <div
        className={cx(
          "flex flex-grow flex-col gap-5 rounded-card px-5 py-7 shadow-cardDrop",
          isDark
            ? "text-inverse border-2 border-border-accent bg-bg-fill-inverse"
            : "bg-bg text-text",
          bestValue ? "rounded-t-none border-t-0" : ""
        )}
      >
        {/* Plan Name & Price */}
        <header className="overflow-none flex items-start justify-between gap-4">
          <div className="flex flex-col">
            <Text
              as="h3"
              className={cx(
                "subheading2",
                isDark ? "text-text-accent-on-bg-inverse" : "text-text-brand"
              )}
            >
              {planName}
            </Text>
            <Text
              as="p"
              className={`label3 text-wrap ${isDark ? "text-text-accent-on-bg-inverse" : "text-text-brand"}`}
            >
              {planSubtext}
            </Text>
          </div>
          <div className="flex items-start">
            <Text
              as="span"
              className={cx(
                "label2 mr-1 mt-[2px]",
                isDark ? "text-text-inverse" : "text-text"
              )}
            >
              $
            </Text>
            <Text
              as="span"
              className={cx(
                "subheading6",
                isDark ? "text-text-inverse" : "text-text"
              )}
            >
              {price.split(".")[0]}
            </Text>
            <Text
              as="span"
              className={cx(
                "label2",
                isDark ? "text-text-inverse" : "text-text"
              )}
            >
              {price.split(".")[1]}/mo
            </Text>
          </div>
        </header>

        {/* Description */}
        <section>
          <Text
            className={cx("body2", isDark ? "text-text-inverse" : "text-text")}
          >
            {description}
          </Text>
        </section>

        {/* Gift Badge */}
        {giftBadge?.length ? (
          <div
            className={cx(
              "flex-col items-center rounded-surface-sm p-2",
              isDark ? "bg-bg-surface-inverse" : "bg-bg-surface-info"
            )}
          >
            {giftBadge?.map((badge: any) => {
              return (
                <div key={badge.title} className="flex items-center gap-2">
                  <Image
                    src={badge.icon}
                    alt={badge.title}
                    width={24}
                    height={24}
                  />
                  <Text
                    as="div"
                    className={cx(
                      "body3",
                      isDark ? "text-text-inverse" : "text-text"
                    )}
                  >
                    {badge.title}
                  </Text>
                </div>
              );
            })}
          </div>
        ) : null}

        {/* CTA */}
        <SelectPlanButton
          onSelect={onCtaClick}
          speed={speed}
          isSelected={isDark}
          renderCheckPlans={renderCheckPlans}
          cta={cta}
          iconSize={40}
          techType={techType}
          isMax={ismaxSpeed}
        />
        {/* Features */}
        {features.length > 0 && (
          <section className="flex flex-col gap-3">
            <Button
              onClick={handleToggle}
              className="group flex w-full items-center gap-2 text-left"
            >
              <Text
                as="h4"
                className={cx(
                  "label3",
                  isDark ? "text-text-inverse" : "text-text"
                )}
              >
                {featuresTitle}
              </Text>
              <MaterialIcon
                name="keyboard_arrow_down"
                fill={1}
                size={24}
                className={cx(
                  "transition-transform duration-300",
                  isExpanded && "rotate-180",
                  isDark ? "text-text-inverse" : "text-text"
                )}
              />
            </Button>
            <div
              className={cx(
                "overflow-hidden transition-all duration-200 ease-in-out",
                isExpanded ? "opacity-100" : "max-h-0 opacity-0"
              )}
            >
              <div className="flex flex-col">
                <Checklist
                  items={features}
                  iconSize={24}
                  iconPosition="top"
                  iconClassName="mt-0"
                  iconColor={isDark ? "yellow" : "green"}
                  listContainerClassName="mt-0 space-y-0 flex flex-col gap-3"
                  listItemClassName={`${isDark ? "text-text-inverse" : "text-text"}`}
                />
              </div>
              {innerBadge?.badgeIcon ? (
                <div className="flex items-center gap-2 text-center">
                  <Image
                    src={innerBadge.badgeIcon}
                    alt="Inner Badge"
                    width={12}
                    height={12}
                  />
                  <span className="footnote text-text">
                    {innerBadge.badgeText.includes("|") ? (
                      <>
                        <span className="font-bold">
                          {innerBadge.badgeText.split("|")[0]}
                        </span>
                        <span className="font-normal">
                          {innerBadge.badgeText.split("|")[1]}
                        </span>
                      </>
                    ) : (
                      <Text className="font-bold">{innerBadge.badgeText}</Text>
                    )}
                  </span>
                </div>
              ) : null}
            </div>
          </section>
        )}
      </div>
    </article>
  );
};
export default ProductCard;