import React from 'react';
import './RevisionStatusIndicator.css';

/**
 * 리비전 상태 표시 컴포넌트
 */
const RevisionStatusIndicator = ({ 
    status, 
    size = 'medium', 
    showText = true, 
    className = '' 
}) => {
    const getStatusConfig = (status) => {
        const configs = {
            'NEW': {
                color: '#10b981',
                bgColor: '#d1fae5',
                text: '신규',
                icon: '✨'
            },
            'ADDITIONAL': {
                color: '#ef4444',
                bgColor: '#fee2e2',
                text: '추가구매',
                icon: '➕'
            },
            'EXCESS': {
                color: '#f59e0b',
                bgColor: '#fef3c7',
                text: '잉여재고',
                icon: '📦'
            },
            'UPDATED': {
                color: '#3b82f6',
                bgColor: '#dbeafe',
                text: '수량변경',
                icon: '🔄'
            },
            'PENDING': {
                color: '#6366f1',
                bgColor: '#e0e7ff',
                text: '구매대기',
                icon: '⏳'
            },
            'COMPLETED': {
                color: '#6b7280',
                bgColor: '#f3f4f6',
                text: '완료',
                icon: '✅'
            },
            'DELETED': {
                color: '#dc2626',
                bgColor: '#fecaca',
                text: '삭제',
                icon: '❌'
            },
            'INVENTORY': {
                color: '#f97316',
                bgColor: '#fed7aa',
                text: '재고',
                icon: '🏪'
            }
        };

        return configs[status] || {
            color: '#6b7280',
            bgColor: '#f3f4f6',
            text: status || 'Unknown',
            icon: '❓'
        };
    };

    const config = getStatusConfig(status);
    const sizeClass = `revision-status-${size}`;

    return (
        <div 
            className={`revision-status-indicator ${sizeClass} ${className}`}
            style={{
                backgroundColor: config.bgColor,
                color: config.color,
                borderColor: config.color
            }}
        >
            <span className="status-icon">{config.icon}</span>
            {showText && <span className="status-text">{config.text}</span>}
        </div>
    );
};

/**
 * 리비전 처리 우선순위 표시
 */
export const RevisionPriorityBadge = ({ priority, className = '' }) => {
    const getPriorityConfig = (priority) => {
        const configs = {
            'high': {
                color: '#dc2626',
                bgColor: '#fecaca',
                text: '높음',
                icon: '🔥'
            },
            'medium': {
                color: '#f59e0b',
                bgColor: '#fef3c7',
                text: '보통',
                icon: '⚡'
            },
            'low': {
                color: '#10b981',
                bgColor: '#d1fae5',
                text: '낮음',
                icon: '🌱'
            }
        };

        return configs[priority] || configs['medium'];
    };

    const config = getPriorityConfig(priority);

    return (
        <div 
            className={`revision-priority-badge ${className}`}
            style={{
                backgroundColor: config.bgColor,
                color: config.color
            }}
        >
            <span className="priority-icon">{config.icon}</span>
            <span className="priority-text">{config.text}</span>
        </div>
    );
};

/**
 * 리비전 진행률 표시
 */
export const RevisionProgressBar = ({ 
    current, 
    total, 
    label = '', 
    showPercentage = true,
    className = '' 
}) => {
    const percentage = total > 0 ? Math.round((current / total) * 100) : 0;
    
    const getProgressColor = (percentage) => {
        if (percentage >= 100) return '#10b981';
        if (percentage >= 80) return '#3b82f6';
        if (percentage >= 50) return '#f59e0b';
        return '#ef4444';
    };

    const progressColor = getProgressColor(percentage);

    return (
        <div className={`revision-progress-bar ${className}`}>
            {label && <div className="progress-label">{label}</div>}
            <div className="progress-container">
                <div className="progress-track">
                    <div 
                        className="progress-fill"
                        style={{
                            width: `${percentage}%`,
                            backgroundColor: progressColor
                        }}
                    />
                </div>
                <div className="progress-info">
                    <span className="progress-count">{current}/{total}</span>
                    {showPercentage && (
                        <span className="progress-percentage">{percentage}%</span>
                    )}
                </div>
            </div>
        </div>
    );
};

/**
 * 리비전 카테고리 상태 요약
 */
export const RevisionCategorySummary = ({ categoryStats, className = '' }) => {
    if (!categoryStats) return null;

    const totalMaterials = Object.values(categoryStats).reduce(
        (sum, stats) => sum + stats.total, 0
    );
    
    const processedMaterials = Object.values(categoryStats).reduce(
        (sum, stats) => sum + stats.processed, 0
    );

    return (
        <div className={`revision-category-summary ${className}`}>
            <div className="summary-header">
                <h4>카테고리별 처리 현황</h4>
                <RevisionProgressBar 
                    current={processedMaterials}
                    total={totalMaterials}
                    label="전체 진행률"
                />
            </div>
            
            <div className="category-list">
                {Object.entries(categoryStats).map(([category, stats]) => (
                    <div key={category} className="category-item">
                        <div className="category-info">
                            <span className="category-name">{category}</span>
                            <span className="category-count">
                                {stats.processed}/{stats.total}
                            </span>
                        </div>
                        <div className="category-progress">
                            <div 
                                className="category-progress-bar"
                                style={{
                                    width: `${stats.total > 0 ? (stats.processed / stats.total) * 100 : 0}%`
                                }}
                            />
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

/**
 * 리비전 변경사항 요약 카드
 */
export const RevisionChangeSummary = ({ changes, className = '' }) => {
    if (!changes) return null;

    const changeTypes = [
        { key: 'added', label: '추가', icon: '➕', color: '#10b981' },
        { key: 'modified', label: '수정', icon: '🔄', color: '#3b82f6' },
        { key: 'removed', label: '제거', icon: '➖', color: '#ef4444' },
        { key: 'unchanged', label: '변경없음', icon: '✅', color: '#6b7280' }
    ];

    const totalChanges = changeTypes.reduce(
        (sum, type) => sum + (changes[type.key]?.length || 0), 0
    );

    return (
        <div className={`revision-change-summary ${className}`}>
            <div className="summary-title">
                <h4>변경사항 요약</h4>
                <span className="total-count">총 {totalChanges}개</span>
            </div>
            
            <div className="change-grid">
                {changeTypes.map(type => {
                    const count = changes[type.key]?.length || 0;
                    const percentage = totalChanges > 0 ? (count / totalChanges) * 100 : 0;
                    
                    return (
                        <div key={type.key} className="change-item">
                            <div className="change-header">
                                <span className="change-icon">{type.icon}</span>
                                <span className="change-label">{type.label}</span>
                            </div>
                            <div className="change-count" style={{ color: type.color }}>
                                {count}
                            </div>
                            <div className="change-percentage">
                                {percentage.toFixed(1)}%
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
};

export default RevisionStatusIndicator;
