"use client";

import { ReactNode } from "react";
import { CurrencyYenIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
import { AnimatedCard } from "@/components/molecules";
import { Button } from "@/components/atoms/button";
import { useRouter } from "next/navigation";

export interface ProductCardProps {
  // Core product info
  id: string;
  name: string;
  sku: string;
  description?: string;

  // Pricing
  monthlyPrice?: number;
  oneTimePrice?: number;

  // Visual elements
  icon?: ReactNode;
  badge?: {
    text: string;
    variant: "default" | "recommended" | "family" | "success";
  };

  // Features list
  features?: string[];

  // Styling
  variant?: "default" | "highlighted" | "success";
  size?: "compact" | "standard" | "large";

  // Actions
  href?: string;
  onClick?: () => void;
  actionLabel?: string;
  disabled?: boolean;

  // Additional content
  children?: ReactNode;
  footer?: ReactNode;
}

const BADGE_CLASSES: Record<string, string> = {
  recommended: "bg-green-100 text-green-800 border-green-300",
  family: "bg-blue-100 text-blue-800 border-blue-300",
  success: "bg-emerald-100 text-emerald-800 border-emerald-300",
};

const DEFAULT_BADGE_CLASS = "bg-muted text-foreground border-border";

const SIZE_CLASSES = {
  compact: "p-4",
  standard: "p-6",
  large: "p-8",
} as const;

function PricingHeader({
  monthlyPrice,
  oneTimePrice,
}: {
  monthlyPrice: number | undefined;
  oneTimePrice: number | undefined;
}) {
  if (!monthlyPrice && !oneTimePrice) return null;

  return (
    <div className="text-right flex-shrink-0">
      {monthlyPrice && (
        <div className="flex items-baseline justify-end gap-1 text-2xl font-bold text-foreground">
          <CurrencyYenIcon className="h-6 w-6" />
          <span>{monthlyPrice.toLocaleString()}</span>
          <span className="text-sm text-muted-foreground font-normal whitespace-nowrap">
            /month
          </span>
        </div>
      )}
      {oneTimePrice && (
        <div className="flex items-baseline justify-end gap-1 text-lg font-semibold text-orange-600 mt-1">
          <CurrencyYenIcon className="h-4 w-4" />
          <span>{oneTimePrice.toLocaleString()}</span>
          <span className="text-xs text-orange-500 font-normal">one-time</span>
        </div>
      )}
    </div>
  );
}

function ProductAction({
  href,
  onClick,
  actionLabel,
  disabled,
}: {
  href: string | undefined;
  onClick: (() => void) | undefined;
  actionLabel: string;
  disabled: boolean;
}) {
  const router = useRouter();

  if (href) {
    return (
      <Button
        className="w-full group"
        disabled={disabled}
        rightIcon={<ArrowRightIcon className="w-4 h-4" />}
        onClick={() => {
          if (!disabled) router.push(href);
        }}
      >
        {actionLabel}
      </Button>
    );
  }

  if (onClick) {
    return (
      <Button
        onClick={onClick}
        className="w-full group"
        disabled={disabled}
        rightIcon={<ArrowRightIcon className="w-4 h-4" />}
      >
        {actionLabel}
      </Button>
    );
  }

  return null;
}

export function ProductCard({
  name,
  description,
  monthlyPrice,
  oneTimePrice,
  icon,
  badge,
  features = [],
  variant = "default",
  size = "standard",
  href,
  onClick,
  actionLabel = "Configure",
  disabled = false,
  children,
  footer,
}: ProductCardProps) {
  return (
    <AnimatedCard
      variant={variant}
      className={`overflow-hidden flex flex-col h-full ${SIZE_CLASSES[size]}`}
      onClick={onClick}
      disabled={disabled}
    >
      <div className="flex items-start justify-between mb-4">
        <div className="flex items-center gap-3">
          {icon && <div className="flex-shrink-0">{icon}</div>}
          <div className="flex flex-col gap-2">
            {badge && (
              <span
                className={`px-3 py-1 rounded-full text-sm font-medium border ${BADGE_CLASSES[badge.variant] ?? DEFAULT_BADGE_CLASS}`}
              >
                {badge.text}
              </span>
            )}
          </div>
        </div>
        <PricingHeader monthlyPrice={monthlyPrice} oneTimePrice={oneTimePrice} />
      </div>

      <div className="mb-4">
        <h3 className="text-xl font-semibold text-foreground mb-2">{name}</h3>
        {description && (
          <p className="text-muted-foreground text-sm leading-relaxed">{description}</p>
        )}
      </div>

      {features.length > 0 && (
        <div className="mb-6 flex-grow">
          <h4 className="font-medium text-foreground mb-3">Features:</h4>
          <ul className="space-y-2 text-sm text-foreground">
            {features.map((feature, index) => (
              <li key={index} className="flex items-start">
                <span className="text-green-600 mr-2 flex-shrink-0">✓</span>
                <span>{feature}</span>
              </li>
            ))}
          </ul>
        </div>
      )}

      {children && <div className="mb-4 flex-grow">{children}</div>}

      <div className="mt-auto">
        <ProductAction
          href={href}
          onClick={onClick}
          actionLabel={actionLabel}
          disabled={disabled}
        />
      </div>

      {footer && <div className="mt-4 pt-4 border-t border-border">{footer}</div>}
    </AnimatedCard>
  );
}
