"use client";

import { ReactNode } from "react";
import { CurrencyYenIcon, InformationCircleIcon } from "@heroicons/react/24/outline";
import { Formatting } from "@customer-portal/domain/toolkit";
import type { PricingTier } from "@customer-portal/domain/catalog";

const { formatCurrency } = Formatting;

export interface PricingDisplayProps {
  // Single price mode
  monthlyPrice?: number;
  oneTimePrice?: number;
  originalMonthlyPrice?: number; // For discounts
  originalOneTimePrice?: number;

  // Multi-tier mode
  tiers?: PricingTier[];

  // Currency and formatting
  currency?: "JPY" | "USD";
  showCurrencySymbol?: boolean;

  // Features
  features?: string[];

  // Styling
  variant?: "simple" | "detailed" | "comparison";
  size?: "sm" | "md" | "lg";
  alignment?: "left" | "center" | "right";

  // Additional info
  disclaimer?: string;
  infoText?: string;
  children?: ReactNode;
}

export function PricingDisplay({
  monthlyPrice,
  oneTimePrice,
  originalMonthlyPrice,
  originalOneTimePrice,
  tiers,
  currency = "JPY",
  showCurrencySymbol = true,
  features = [],
  variant = "simple",
  size = "md",
  alignment = "left",
  disclaimer,
  infoText,
  children,
}: PricingDisplayProps) {
  const getCurrencyIcon = () => {
    if (!showCurrencySymbol) return null;
    return currency === "JPY" ? <CurrencyYenIcon className="h-5 w-5" /> : "$";
  };

  const alignmentClasses = {
    left: "text-left",
    center: "text-center",
    right: "text-right",
  };

  const sizeClasses = {
    sm: {
      price: "text-lg",
      currency: "h-4 w-4",
      label: "text-xs",
    },
    md: {
      price: "text-2xl",
      currency: "h-5 w-5",
      label: "text-sm",
    },
    lg: {
      price: "text-3xl",
      currency: "h-6 w-6",
      label: "text-base",
    },
  };

  // Multi-tier comparison view
  if (tiers && tiers.length > 0) {
    return (
      <div className={`${alignmentClasses[alignment]}`}>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {tiers.map((tier, index) => (
            <div
              key={index}
              className={`border rounded-lg p-6 ${
                tier.isRecommended
                  ? "border-blue-500 ring-2 ring-blue-100 bg-blue-50"
                  : "border-gray-200 bg-white"
              }`}
            >
              {tier.isRecommended && (
                <div className="text-center mb-4">
                  <span className="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium">
                    Recommended
                  </span>
                </div>
              )}

              <div className="text-center mb-4">
                <h3 className="text-lg font-semibold text-gray-900 mb-2">{tier.name}</h3>
                <div className="flex items-baseline justify-center gap-1">
                  {getCurrencyIcon()}
                  <span className={`font-bold text-gray-900 ${sizeClasses[size].price}`}>
                    {formatCurrency(tier.price)}
                  </span>
                  <span className={`text-gray-500 ${sizeClasses[size].label}`}>
                    /{tier.billingCycle.toLowerCase()}
                  </span>
                </div>
                {tier.description && (
                  <p className="text-gray-600 text-sm mt-2">{tier.description}</p>
                )}
              </div>

              {tier.features && tier.features.length > 0 && (
                <ul className="space-y-2 text-sm text-gray-700">
                  {tier.features.map((feature, featureIndex) => (
                    <li key={featureIndex} className="flex items-start">
                      <span className="text-green-600 mr-2">✓</span>
                      {feature}
                    </li>
                  ))}
                </ul>
              )}
            </div>
          ))}
        </div>

        {disclaimer && (
          <div className="mt-6 p-4 bg-gray-50 rounded-lg">
            <div className="flex items-start gap-2">
              <InformationCircleIcon className="h-5 w-5 text-gray-500 flex-shrink-0 mt-0.5" />
              <p className="text-sm text-gray-600">{disclaimer}</p>
            </div>
          </div>
        )}
      </div>
    );
  }

  // Single price display
  return (
    <div className={`${alignmentClasses[alignment]}`}>
      {variant === "detailed" && (
        <div className="bg-white border border-gray-200 rounded-lg p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">Pricing</h3>

          {/* Monthly pricing */}
          {monthlyPrice && (
            <div className="mb-4">
              <div className="flex items-baseline gap-1">
                {getCurrencyIcon()}
                <span className={`font-bold text-gray-900 ${sizeClasses[size].price}`}>
                  {formatCurrency(monthlyPrice)}
                </span>
                <span className={`text-gray-500 ${sizeClasses[size].label}`}>/month</span>
              </div>
              {originalMonthlyPrice && originalMonthlyPrice > monthlyPrice && (
                <div className="flex items-baseline gap-1 mt-1">
                  <span className="text-gray-400 line-through text-sm">
                    ¥{formatCurrency(originalMonthlyPrice)}
                  </span>
                  <span className="text-green-600 text-sm font-medium">
                    Save ¥{formatCurrency(originalMonthlyPrice - monthlyPrice)}/month
                  </span>
                </div>
              )}
            </div>
          )}

          {/* One-time pricing */}
          {oneTimePrice && (
            <div className="mb-4">
              <div className="flex items-baseline gap-1">
                {getCurrencyIcon()}
                <span className={`font-bold text-orange-600 ${sizeClasses[size].price}`}>
                  {formatCurrency(oneTimePrice)}
                </span>
                <span className={`text-orange-500 ${sizeClasses[size].label}`}>one-time</span>
              </div>
              {originalOneTimePrice && originalOneTimePrice > oneTimePrice && (
                <div className="flex items-baseline gap-1 mt-1">
                  <span className="text-gray-400 line-through text-sm">
                    ¥{formatCurrency(originalOneTimePrice)}
                  </span>
                  <span className="text-green-600 text-sm font-medium">
                    Save ¥{formatCurrency(originalOneTimePrice - oneTimePrice)}
                  </span>
                </div>
              )}
            </div>
          )}

          {/* Features */}
          {features.length > 0 && (
            <div className="mb-4">
              <h4 className="font-medium text-gray-900 mb-2">Included:</h4>
              <ul className="space-y-1 text-sm text-gray-700">
                {features.map((feature, index) => (
                  <li key={index} className="flex items-start">
                    <span className="text-green-600 mr-2">✓</span>
                    {feature}
                  </li>
                ))}
              </ul>
            </div>
          )}

          {children}
        </div>
      )}

      {variant === "simple" && (
        <div>
          {monthlyPrice && (
            <div className="flex items-baseline gap-1 mb-2">
              {getCurrencyIcon()}
              <span className={`font-bold text-gray-900 ${sizeClasses[size].price}`}>
                {formatCurrency(monthlyPrice)}
              </span>
              <span className={`text-gray-500 ${sizeClasses[size].label}`}>/month</span>
            </div>
          )}

          {oneTimePrice && (
            <div className="flex items-baseline gap-1">
              {getCurrencyIcon()}
              <span className={`font-bold text-orange-600 ${sizeClasses[size].price}`}>
                {formatCurrency(oneTimePrice)}
              </span>
              <span className={`text-orange-500 ${sizeClasses[size].label}`}>one-time</span>
            </div>
          )}

          {children}
        </div>
      )}

      {infoText && (
        <div className="mt-4 p-3 bg-blue-50 rounded-lg">
          <div className="flex items-start gap-2">
            <InformationCircleIcon className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
            <p className="text-sm text-blue-700">{infoText}</p>
          </div>
        </div>
      )}

      {disclaimer && (
        <div className="mt-4 p-3 bg-gray-50 rounded-lg">
          <p className="text-xs text-gray-600">{disclaimer}</p>
        </div>
      )}
    </div>
  );
}
