"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;
}

export function ProductCard({
  name,
  description,
  monthlyPrice,
  oneTimePrice,
  icon,
  badge,
  features = [],
  variant = "default",
  size = "standard",
  href,
  onClick,
  actionLabel = "Configure",
  disabled = false,
  children,
  footer,
}: ProductCardProps) {
  const router = useRouter();
  const sizeClasses = {
    compact: "p-4",
    standard: "p-6",
    large: "p-8",
  };

  const getBadgeClasses = (badgeVariant: string) => {
    switch (badgeVariant) {
      case "recommended":
        return "bg-green-100 text-green-800 border-green-300";
      case "family":
        return "bg-blue-100 text-blue-800 border-blue-300";
      case "success":
        return "bg-emerald-100 text-emerald-800 border-emerald-300";
      default:
        return "bg-gray-100 text-gray-800 border-gray-300";
    }
  };

  return (
    <AnimatedCard
      variant={variant}
      className={`overflow-hidden flex flex-col h-full ${sizeClasses[size]}`}
      onClick={onClick}
      disabled={disabled}
    >
      {/* Header with badge and icon */}
      <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 ${getBadgeClasses(badge.variant)}`}
              >
                {badge.text}
              </span>
            )}
          </div>
        </div>

        {/* Pricing display */}
        {(monthlyPrice || oneTimePrice) && (
          <div className="text-right flex-shrink-0">
            {monthlyPrice && (
              <div className="flex items-baseline justify-end gap-1 text-2xl font-bold text-gray-900">
                <CurrencyYenIcon className="h-6 w-6" />
                <span>{monthlyPrice.toLocaleString()}</span>
                <span className="text-sm text-gray-500 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>
        )}
      </div>

      {/* Product name and description */}
      <div className="mb-4">
        <h3 className="text-xl font-semibold text-gray-900 mb-2">{name}</h3>
        {description && <p className="text-gray-600 text-sm leading-relaxed">{description}</p>}
      </div>

      {/* Features list */}
      {features.length > 0 && (
        <div className="mb-6 flex-grow">
          <h4 className="font-medium text-gray-900 mb-3">Features:</h4>
          <ul className="space-y-2 text-sm text-gray-700">
            {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>
      )}

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

      {/* Action button */}
      <div className="mt-auto">
        {href ? (
          <Button
            className="w-full group"
            disabled={disabled}
            rightIcon={<ArrowRightIcon className="w-4 h-4" />}
            onClick={() => {
              if (disabled) return;
              router.push(href);
            }}
          >
            {actionLabel}
          </Button>
        ) : onClick ? (
          <Button
            onClick={onClick}
            className="w-full group"
            disabled={disabled}
            rightIcon={<ArrowRightIcon className="w-4 h-4" />}
          >
            {actionLabel}
          </Button>
        ) : null}
      </div>

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