"use client";

import { ReactNode } from "react";
import { CheckIcon, XMarkIcon, CurrencyYenIcon } from "@heroicons/react/24/outline";
import { AnimatedCard } from "@/components/molecules/AnimatedCard/AnimatedCard";
import { Button } from "@/components/atoms/button";

export interface ComparisonProduct {
  id: string;
  name: string;
  sku: string;
  description?: string;
  monthlyPrice?: number;
  oneTimePrice?: number;
  isRecommended?: boolean;
  badge?: string;
  href?: string;
  actionLabel?: string;
}

export interface ComparisonFeature {
  name: string;
  description?: string;
  values: (string | boolean | number | null)[];
}

export interface ProductComparisonProps {
  products: ComparisonProduct[];
  features: ComparisonFeature[];
  title?: string;
  description?: string;
  maxColumns?: number;
  showPricing?: boolean;
  showActions?: boolean;
  variant?: "table" | "cards";
  children?: ReactNode;
}

export function ProductComparison({
  products,
  features,
  title = "Compare Plans",
  description,
  maxColumns = 4,
  showPricing = true,
  showActions = true,
  variant = "table",
  children,
}: ProductComparisonProps) {
  const displayProducts = products.slice(0, maxColumns);

  const renderFeatureValue = (value: string | boolean | number | null) => {
    if (value === null || value === undefined) {
      return <span className="text-gray-400">—</span>;
    }

    if (typeof value === "boolean") {
      return value ? (
        <CheckIcon className="h-5 w-5 text-green-600 mx-auto" />
      ) : (
        <XMarkIcon className="h-5 w-5 text-gray-400 mx-auto" />
      );
    }

    if (typeof value === "number") {
      return <span className="font-medium">{value.toLocaleString()}</span>;
    }

    return <span className="text-sm">{value}</span>;
  };

  if (variant === "cards") {
    return (
      <div className="space-y-8">
        {title && (
          <div className="text-center">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">{title}</h2>
            {description && (
              <p className="text-lg text-gray-600 max-w-3xl mx-auto">{description}</p>
            )}
          </div>
        )}

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {displayProducts.map(product => (
            <AnimatedCard
              key={product.id}
              variant={product.isRecommended ? "highlighted" : "default"}
              className="p-6 h-full flex flex-col"
            >
              {/* Header */}
              <div className="text-center mb-6">
                {product.isRecommended && (
                  <div className="mb-3">
                    <span className="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium">
                      Recommended
                    </span>
                  </div>
                )}
                {product.badge && !product.isRecommended && (
                  <div className="mb-3">
                    <span className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm font-medium">
                      {product.badge}
                    </span>
                  </div>
                )}

                <h3 className="text-xl font-bold text-gray-900 mb-2">{product.name}</h3>
                {product.description && (
                  <p className="text-gray-600 text-sm">{product.description}</p>
                )}

                {showPricing && (product.monthlyPrice || product.oneTimePrice) && (
                  <div className="mt-4">
                    {product.monthlyPrice && (
                      <div className="flex items-baseline justify-center gap-1 text-2xl font-bold text-gray-900">
                        <CurrencyYenIcon className="h-6 w-6" />
                        <span>{product.monthlyPrice.toLocaleString()}</span>
                        <span className="text-sm text-gray-500 font-normal">/month</span>
                      </div>
                    )}
                    {product.oneTimePrice && (
                      <div className="flex items-baseline justify-center gap-1 text-lg font-semibold text-orange-600 mt-1">
                        <CurrencyYenIcon className="h-4 w-4" />
                        <span>{product.oneTimePrice.toLocaleString()}</span>
                        <span className="text-xs text-orange-500 font-normal">one-time</span>
                      </div>
                    )}
                  </div>
                )}
              </div>

              {/* Features */}
              <div className="flex-grow mb-6">
                <ul className="space-y-3">
                  {features.map((feature, featureIndex) => {
                    const productIndex = displayProducts.findIndex(p => p.id === product.id);
                    const value = feature.values[productIndex];

                    return (
                      <li key={featureIndex} className="flex items-start justify-between">
                        <span className="text-sm text-gray-700 flex-1">{feature.name}</span>
                        <div className="ml-3 flex-shrink-0">{renderFeatureValue(value)}</div>
                      </li>
                    );
                  })}
                </ul>
              </div>

              {/* Action */}
              {showActions && product.href && (
                <Button
                  as="a"
                  href={product.href}
                  className="w-full"
                  variant={product.isRecommended ? "default" : "outline"}
                >
                  {product.actionLabel || "Select Plan"}
                </Button>
              )}
            </AnimatedCard>
          ))}
        </div>

        {children}
      </div>
    );
  }

  // Table variant
  return (
    <div className="space-y-8">
      {title && (
        <div className="text-center">
          <h2 className="text-3xl font-bold text-gray-900 mb-4">{title}</h2>
          {description && <p className="text-lg text-gray-600 max-w-3xl mx-auto">{description}</p>}
        </div>
      )}

      <AnimatedCard className="overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            {/* Header */}
            <thead>
              <tr className="border-b border-gray-200">
                <th className="text-left py-4 px-6 font-medium text-gray-900 bg-gray-50">
                  Features
                </th>
                {displayProducts.map(product => (
                  <th key={product.id} className="text-center py-4 px-6 bg-gray-50 min-w-[200px]">
                    <div className="space-y-2">
                      {product.isRecommended && (
                        <div>
                          <span className="bg-blue-500 text-white px-2 py-1 rounded-full text-xs font-medium">
                            Recommended
                          </span>
                        </div>
                      )}
                      {product.badge && !product.isRecommended && (
                        <div>
                          <span className="bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs font-medium">
                            {product.badge}
                          </span>
                        </div>
                      )}
                      <div className="font-bold text-gray-900">{product.name}</div>
                      {product.description && (
                        <div className="text-sm text-gray-600">{product.description}</div>
                      )}
                      {showPricing && (product.monthlyPrice || product.oneTimePrice) && (
                        <div className="space-y-1">
                          {product.monthlyPrice && (
                            <div className="flex items-baseline justify-center gap-1 text-lg font-bold text-gray-900">
                              <CurrencyYenIcon className="h-4 w-4" />
                              <span>{product.monthlyPrice.toLocaleString()}</span>
                              <span className="text-xs text-gray-500 font-normal">/mo</span>
                            </div>
                          )}
                          {product.oneTimePrice && (
                            <div className="flex items-baseline justify-center gap-1 text-sm font-semibold text-orange-600">
                              <CurrencyYenIcon className="h-3 w-3" />
                              <span>{product.oneTimePrice.toLocaleString()}</span>
                              <span className="text-xs text-orange-500 font-normal">one-time</span>
                            </div>
                          )}
                        </div>
                      )}
                    </div>
                  </th>
                ))}
              </tr>
            </thead>

            {/* Features */}
            <tbody>
              {features.map((feature, featureIndex) => (
                <tr key={featureIndex} className="border-b border-gray-100 hover:bg-gray-50">
                  <td className="py-4 px-6">
                    <div>
                      <div className="font-medium text-gray-900">{feature.name}</div>
                      {feature.description && (
                        <div className="text-sm text-gray-600 mt-1">{feature.description}</div>
                      )}
                    </div>
                  </td>
                  {displayProducts.map((product, productIndex) => (
                    <td key={product.id} className="py-4 px-6 text-center">
                      {renderFeatureValue(feature.values[productIndex])}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>

            {/* Actions */}
            {showActions && (
              <tfoot>
                <tr>
                  <td className="py-6 px-6"></td>
                  {displayProducts.map(product => (
                    <td key={product.id} className="py-6 px-6 text-center">
                      {product.href && (
                        <Button
                          as="a"
                          href={product.href}
                          className="w-full"
                          variant={product.isRecommended ? "default" : "outline"}
                        >
                          {product.actionLabel || "Select Plan"}
                        </Button>
                      )}
                    </td>
                  ))}
                </tr>
              </tfoot>
            )}
          </table>
        </div>
      </AnimatedCard>

      {children}
    </div>
  );
}
