/**
 * Feature Gate
 * Pro機能へのアクセス制御（React Component）
 */

import { __ } from '@wordpress/i18n';
import { Button, Notice } from '@wordpress/components';
import { isFeatureAvailable, FEATURES } from './feature-definitions';
import { isPro } from '../utils/is-pro';

/**
 * Pro機能ゲートコンポーネント
 * Pro版のみの機能を制御するWrapper
 * 
 * @param {Object} props
 * @param {string} props.feature 機能名（FEATURES内のキー）
 * @param {React.ReactNode} props.children 表示するコンテンツ
 * @param {React.ReactNode} props.fallback Pro版でない場合に表示するコンテンツ
 * @param {boolean} props.showProBadge Proバッジを表示するか
 * @param {boolean} props.showUpgradeNotice アップグレード通知を表示するか
 * @param {string} props.upgradeMessage カスタムアップグレードメッセージ
 */
export function FeatureGate({
    feature,
    children,
    fallback = null,
    showProBadge = true,
    showUpgradeNotice = false,
    upgradeMessage = null,
}) {
    const available = isFeatureAvailable(feature);
    const featureInfo = FEATURES[feature];

    // 機能が利用可能な場合は子要素をそのまま表示
    if (available) {
        return children;
    }

    // Pro機能の場合
    if (featureInfo?.tier === 'pro') {
        // アップグレード通知を表示
        if (showUpgradeNotice) {
            return (
                <div className="zenblocks-feature-gate">
                    <UpgradeNotice
                        feature={feature}
                        message={upgradeMessage}
                    />
                    {fallback}
                </div>
            );
        }

        // Proバッジ付きでロック表示
        if (showProBadge) {
            return (
                <div className="zenblocks-pro-feature-locked">
                    {children}
                    <ProBadge feature={feature} />
                </div>
            );
        }
    }

    // フォールバックコンテンツを表示
    return fallback;
}

/**
 * Proバッジコンポーネント
 * Pro機能にロックアイコンとバッジを表示
 * 
 * @param {Object} props
 * @param {string} props.feature 機能名
 */
export function ProBadge({ feature }) {
    const featureInfo = FEATURES[feature];
    const featureName = featureInfo?.name || feature;

    return (
        <div className="zenblocks-pro-badge" title={__('Pro-only Feature', 'zenblocks')}>
            <span className="dashicons dashicons-lock"></span>
            <span className="badge-text">Pro</span>
            {featureInfo?.description && (
                <div className="zenblocks-pro-tooltip">
                    {featureInfo.description}
                </div>
            )}
        </div>
    );
}

/**
 * アップグレード通知コンポーネント
 * Pro版へのアップグレードを促す通知
 * 
 * @param {Object} props
 * @param {string} props.feature 機能名
 * @param {string} props.message カスタムメッセージ
 */
export function UpgradeNotice({ feature, message = null }) {
    const featureInfo = FEATURES[feature];
    const featureName = featureInfo?.name || feature;

    const defaultMessage = message || __(
        `"${featureName}" is a Pro feature. Please upgrade to Pro to use this feature.`,
        'zenblocks'
    );

    return (
        <Notice status="warning" isDismissible={false}>
            <div className="zenblocks-upgrade-notice">
                <p>
                    <span className="dashicons dashicons-lock"></span>
                    {defaultMessage}
                </p>
                <Button
                    variant="primary"
                    href="/wp-admin/admin.php?page=zenblocks"
                    target="_blank"
                >
                    {__('View Pro', 'zenblocks')}
                </Button>
            </div>
        </Notice>
    );
}

/**
 * 機能制限通知コンポーネント
 * 無料版の制限を表示
 * 
 * @param {Object} props
 * @param {string} props.feature 機能名
 * @param {number} props.current 現在の使用数
 * @param {number} props.limit 制限数
 */
export function LimitNotice({ feature, current, limit }) {
    const featureInfo = FEATURES[feature];
    const featureName = featureInfo?.name || feature;

    if (isPro()) {
        return null;
    }

    const percentage = (current / limit) * 100;
    const isNearLimit = percentage >= 80;
    const isAtLimit = current >= limit;

    if (!isNearLimit) {
        return null;
    }

    return (
        <Notice
            status={isAtLimit ? 'error' : 'warning'}
            isDismissible={false}
        >
            <p>
                {isAtLimit
                    ? __(
                          `Free version ${featureName} limit (${limit}) reached.`,
                          'zenblocks'
                      )
                    : __(
                          `${limit - current} remaining until free version ${featureName} limit.`,
                          'zenblocks'
                      )}
            </p>
            {isAtLimit && (
                <Button
                    variant="primary"
                    href="/wp-admin/admin.php?page=zenblocks"
                    target="_blank"
                >
                    {__('Unlimited with Pro', 'zenblocks')}
                </Button>
            )}
        </Notice>
    );
}

/**
 * Pro機能プレビューコンポーネント
 * Pro機能のプレビューを表示（クリック不可）
 * 
 * @param {Object} props
 * @param {string} props.feature 機能名
 * @param {React.ReactNode} props.children プレビューコンテンツ
 */
export function ProFeaturePreview({ feature, children }) {
    if (isPro()) {
        return children;
    }

    return (
        <div className="zenblocks-pro-preview">
            <div className="zenblocks-pro-preview-overlay">
                <div className="zenblocks-pro-preview-content">
                    <span className="dashicons dashicons-lock"></span>
                    <h3>{__('Pro-only Feature', 'zenblocks')}</h3>
                    <p>{FEATURES[feature]?.description}</p>
                    <Button
                        variant="primary"
                        href="/wp-admin/admin.php?page=zenblocks"
                        target="_blank"
                    >
                        {__('View Pro', 'zenblocks')}
                    </Button>
                </div>
            </div>
            <div className="zenblocks-pro-preview-blur">
                {children}
            </div>
        </div>
    );
}

// デフォルトエクスポート
export default FeatureGate;