プライシングカード

import React, { useState } from 'react';

export interface PricingFeature {
  /** 機能名 */
  name: string;
  /** 含まれているかどうか */
  included: boolean;
  /** 追加の説明 */
  description?: string;
  /** 制限がある場合（例：「月5回まで」） */
  limit?: string;
}

export interface PricingPlan {
  /** プラン名 */
  name: string;
  /** 説明 */
  description: string;
  /** 価格 */
  price: number;
  /** 通貨 */
  currency?: string;
  /** 課金サイクル */
  billingCycle?: 'monthly' | 'yearly' | 'one-time';
  /** 割引価格（年間プランなど） */
  discountPrice?: number;
  /** 人気プランかどうか */
  popular?: boolean;
  /** 機能リスト */
  features: PricingFeature[];
  /** CTAボタンテキスト */
  buttonText: string;
  /** CTAボタンのリンク */
  buttonLink?: string;
  /** 無料プランかどうか */
  isFree?: boolean;
  /** プランの詳細ページリンク */
  detailsLink?: string;
}

export interface PricingCardProps {
  /** プラン情報 */
  plan: PricingPlan;
  /** テーマ */
  theme?: 'default' | 'modern' | 'minimal' | 'gradient' | 'dark';
  /** サイズ */
  size?: 'sm' | 'md' | 'lg';
  /** 年間/月間切り替え */
  billingToggle?: boolean;
  /** 現在の課金サイクル */
  currentBilling?: 'monthly' | 'yearly';
  /** CTAボタンクリック時のコールバック */
  onButtonClick?: (plan: PricingPlan) => void;
  /** 詳細リンククリック時のコールバック */
  onDetailsClick?: (plan: PricingPlan) => void;
  /** カスタムクラス */
  className?: string;
}

const PricingCard: React.FC<PricingCardProps> = ({
  plan,
  theme = 'default',
  size = 'md',
  billingToggle = false,
  currentBilling = 'monthly',
  onButtonClick,
  onDetailsClick,
  className = ''
}) => {
  const [hovering, setHovering] = useState(false);

  // テーマ設定
  const themes = {
    default: {
      card: 'bg-white border border-gray-200 shadow-lg',
      popularBadge: 'bg-blue-500 text-white',
      header: 'bg-gray-50',
      price: 'text-gray-900',
      originalPrice: 'text-gray-500 line-through',
      description: 'text-gray-600',
      feature: 'text-gray-700',
      featureIcon: 'text-green-500',
      notIncluded: 'text-gray-400',
      button: plan.popular 
        ? 'bg-blue-500 hover:bg-blue-600 text-white' 
        : 'bg-gray-100 hover:bg-gray-200 text-gray-900',
      detailsLink: 'text-blue-500 hover:text-blue-600'
    },
    modern: {
      card: 'bg-white border border-gray-200 shadow-xl rounded-2xl',
      popularBadge: 'bg-gradient-to-r from-purple-500 to-pink-500 text-white',
      header: 'bg-gradient-to-br from-gray-50 to-gray-100',
      price: 'text-gray-900',
      originalPrice: 'text-gray-500 line-through',
      description: 'text-gray-600',
      feature: 'text-gray-700',
      featureIcon: 'text-green-500',
      notIncluded: 'text-gray-400',
      button: plan.popular 
        ? 'bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white' 
        : 'bg-gray-100 hover:bg-gray-200 text-gray-900',
      detailsLink: 'text-purple-500 hover:text-purple-600'
    },
    minimal: {
      card: 'bg-white border border-gray-100 shadow-sm',
      popularBadge: 'bg-gray-900 text-white',
      header: 'bg-transparent',
      price: 'text-gray-900',
      originalPrice: 'text-gray-400 line-through',
      description: 'text-gray-500',
      feature: 'text-gray-600',
      featureIcon: 'text-gray-900',
      notIncluded: 'text-gray-300',
      button: plan.popular 
        ? 'bg-gray-900 hover:bg-gray-800 text-white' 
        : 'bg-gray-50 hover:bg-gray-100 text-gray-900 border border-gray-200',
      detailsLink: 'text-gray-500 hover:text-gray-700'
    },
    gradient: {
      card: plan.popular 
        ? 'bg-gradient-to-br from-blue-500 to-purple-600 text-white border-0 shadow-2xl'
        : 'bg-white border border-gray-200 shadow-lg',
      popularBadge: 'bg-yellow-400 text-gray-900',
      header: plan.popular ? 'bg-white bg-opacity-10' : 'bg-gray-50',
      price: plan.popular ? 'text-white' : 'text-gray-900',
      originalPrice: plan.popular ? 'text-blue-200 line-through' : 'text-gray-500 line-through',
      description: plan.popular ? 'text-blue-100' : 'text-gray-600',
      feature: plan.popular ? 'text-white' : 'text-gray-700',
      featureIcon: plan.popular ? 'text-blue-200' : 'text-green-500',
      notIncluded: plan.popular ? 'text-blue-300' : 'text-gray-400',
      button: plan.popular 
        ? 'bg-white text-blue-600 hover:bg-gray-100' 
        : 'bg-blue-500 hover:bg-blue-600 text-white',
      detailsLink: plan.popular ? 'text-blue-200 hover:text-white' : 'text-blue-500 hover:text-blue-600'
    },
    dark: {
      card: 'bg-gray-900 border border-gray-700 shadow-xl text-white',
      popularBadge: 'bg-blue-500 text-white',
      header: 'bg-gray-800',
      price: 'text-white',
      originalPrice: 'text-gray-400 line-through',
      description: 'text-gray-300',
      feature: 'text-gray-200',
      featureIcon: 'text-green-400',
      notIncluded: 'text-gray-500',
      button: plan.popular 
        ? 'bg-blue-500 hover:bg-blue-600 text-white' 
        : 'bg-gray-700 hover:bg-gray-600 text-white',
      detailsLink: 'text-blue-400 hover:text-blue-300'
    }
  };

  // サイズ設定
  const sizes = {
    sm: {
      card: 'p-4',
      header: 'p-4 pb-2',
      body: 'p-4 pt-2',
      price: 'text-2xl',
      planName: 'text-lg',
      description: 'text-sm',
      feature: 'text-sm',
      button: 'py-2 px-4 text-sm'
    },
    md: {
      card: 'p-6',
      header: 'p-6 pb-4',
      body: 'p-6 pt-4',
      price: 'text-4xl',
      planName: 'text-xl',
      description: 'text-base',
      feature: 'text-sm',
      button: 'py-3 px-6 text-base'
    },
    lg: {
      card: 'p-8',
      header: 'p-8 pb-6',
      body: 'p-8 pt-6',
      price: 'text-5xl',
      planName: 'text-2xl',
      description: 'text-lg',
      feature: 'text-base',
      button: 'py-4 px-8 text-lg'
    }
  };

  const themeConfig = themes[theme];
  const sizeConfig = sizes[size];

  // 現在の価格を取得
  const getCurrentPrice = () => {
    if (plan.isFree) return 0;
    if (currentBilling === 'yearly' && plan.discountPrice) {
      return plan.discountPrice;
    }
    return plan.price;
  };

  // 元の価格を取得（割引がある場合）
  const getOriginalPrice = () => {
    if (currentBilling === 'yearly' && plan.discountPrice && plan.discountPrice < plan.price) {
      return plan.price;
    }
    return null;
  };

  // 課金サイクルテキスト
  const getBillingText = () => {
    switch (plan.billingCycle || currentBilling) {
      case 'yearly':
        return '/年';
      case 'monthly':
        return '/月';
      case 'one-time':
        return '買い切り';
      default:
        return '/月';
    }
  };

  const currentPrice = getCurrentPrice();
  const originalPrice = getOriginalPrice();

  return (
    <div 
      className={`relative rounded-lg transition-all duration-300 ${themeConfig.card} ${sizeConfig.card} ${className} ${
        hovering && !plan.popular ? 'transform scale-105 shadow-xl' : ''
      } ${plan.popular ? 'ring-2 ring-blue-500 ring-opacity-50' : ''}`}
      onMouseEnter={() => setHovering(true)}
      onMouseLeave={() => setHovering(false)}
    >
      {/* 人気プランバッジ */}
      {plan.popular && (
        <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
          <div className={`${themeConfig.popularBadge} px-4 py-1 rounded-full text-xs font-semibold`}>
            人気プラン
          </div>
        </div>
      )}

      {/* ヘッダー */}
      <div className={`${themeConfig.header} ${sizeConfig.header} rounded-t-lg`}>
        <h3 className={`${sizeConfig.planName} font-bold ${theme === 'gradient' && plan.popular ? 'text-white' : 'text-gray-900'}`}>
          {plan.name}
        </h3>
        <p className={`${sizeConfig.description} ${themeConfig.description} mt-1`}>
          {plan.description}
        </p>
      </div>

      {/* 価格セクション */}
      <div className={`${sizeConfig.body}`}>
        <div className="flex items-baseline justify-center mb-6">
          {plan.isFree ? (
            <span className={`${sizeConfig.price} font-bold ${themeConfig.price}`}>
              無料
            </span>
          ) : (
            <>
              <span className={`${sizeConfig.price} font-bold ${themeConfig.price}`}>
                {plan.currency || '¥'}{currentPrice.toLocaleString()}
              </span>
              <span className={`ml-1 ${sizeConfig.feature} ${themeConfig.description}`}>
                {getBillingText()}
              </span>
              {originalPrice && (
                <span className={`ml-2 ${sizeConfig.feature} ${themeConfig.originalPrice}`}>
                  {plan.currency || '¥'}{originalPrice.toLocaleString()}
                </span>
              )}
            </>
          )}
        </div>

        {/* 機能リスト */}
        <ul className="space-y-3 mb-8">
          {plan.features.map((feature, index) => (
            <li key={index} className="flex items-start">
              <svg 
                className={`w-5 h-5 mt-0.5 mr-3 flex-shrink-0 ${
                  feature.included ? themeConfig.featureIcon : themeConfig.notIncluded
                }`}
                fill="none" 
                stroke="currentColor" 
                viewBox="0 0 24 24"
              >
                {feature.included ? (
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                ) : (
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                )}
              </svg>
              <div className="flex-1">
                <span className={`${sizeConfig.feature} ${
                  feature.included ? themeConfig.feature : themeConfig.notIncluded
                }`}>
                  {feature.name}
                </span>
                {feature.limit && (
                  <span className={`ml-2 text-xs ${themeConfig.description}`}>
                    ({feature.limit})
                  </span>
                )}
                {feature.description && (
                  <p className={`text-xs ${themeConfig.description} mt-1`}>
                    {feature.description}
                  </p>
                )}
              </div>
            </li>
          ))}
        </ul>

        {/* CTAボタン */}
        <button
          onClick={() => onButtonClick?.(plan)}
          className={`w-full ${sizeConfig.button} font-semibold rounded-lg transition-colors duration-200 ${themeConfig.button}`}
        >
          {plan.buttonText}
        </button>

        {/* 詳細リンク */}
        {plan.detailsLink && (
          <div className="text-center mt-4">
            <button
              onClick={() => onDetailsClick?.(plan)}
              className={`${sizeConfig.feature} ${themeConfig.detailsLink} hover:underline`}
            >
              詳細を見る
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default PricingCard;