/**
 * Override Summary Component
 * 
 * Shows a compact summary of how many fields are overridden.
 * 
 * @since 1.5.0
 */

import React from 'react';
import { Palette, AlertCircle, Check, Link2 } from 'lucide-react';
import { AppearanceOverrides } from './index';
import { t, sprintf } from '@/lib/i18n';

interface OverrideSummaryProps {
    presetName?: string;
    overrides: AppearanceOverrides | null;
    onClick?: () => void;
}

export const OverrideSummary: React.FC<OverrideSummaryProps> = ({
    presetName,
    overrides,
    onClick,
}) => {
    // Count total overrides
    const countOverrides = () => {
        if (!overrides) return 0;
        let count = 0;
        if (overrides.colors) count += Object.keys(overrides.colors).length;
        if (overrides.typography) count += Object.keys(overrides.typography).length;
        if (overrides.elements) count += Object.keys(overrides.elements).length;
        return count;
    };

    const overrideCount = countOverrides();

    if (!presetName) {
        return (
            <div
                onClick={onClick}
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: '10px',
                    padding: '12px 16px',
                    background: '#FEF3C7',
                    borderRadius: '10px',
                    cursor: onClick ? 'pointer' : 'default',
                    border: '1px solid #FCD34D',
                }}
            >
                <AlertCircle size={18} color="#F59E0B" />
                <span style={{ fontSize: '13px', color: '#92400E' }}>
                    {t('No appearance Preset selected')}
                </span>
            </div>
        );
    }

    return (
        <div
            onClick={onClick}
            style={{
                display: 'flex',
                alignItems: 'center',
                gap: '12px',
                padding: '12px 16px',
                background: overrideCount > 0 ? '#FFFBEB' : '#F0FDF4',
                borderRadius: '10px',
                cursor: onClick ? 'pointer' : 'default',
                border: `1px solid ${overrideCount > 0 ? '#FCD34D' : '#86EFAC'}`,
                transition: 'all 0.2s ease',
            }}
        >
            {/* Icon */}
            <div
                style={{
                    width: '36px',
                    height: '36px',
                    borderRadius: '8px',
                    background: overrideCount > 0 ? '#FEF3C7' : '#DCFCE7',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}
            >
                <Palette size={18} color={overrideCount > 0 ? '#F59E0B' : '#22C55E'} />
            </div>

            {/* Info */}
            <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                    {overrideCount === 0 ? (
                        <Check size={14} color="#22C55E" />
                    ) : (
                        <Link2 size={14} color="#F59E0B" />
                    )}
                    <span style={{ fontSize: '14px', fontWeight: 500, color: '#374151' }}>
                        {presetName}
                    </span>
                </div>
                <span 
                    style={{ 
                        fontSize: '12px', 
                        color: overrideCount > 0 ? '#92400E' : '#16A34A',
                    }}
                >
                    {overrideCount === 0 
                        ? t('All settings from Preset')
                        : sprintf(t('%s settings overridden'), overrideCount)}
                </span>
            </div>

            {/* Badge */}
            {overrideCount > 0 && (
                <span
                    style={{
                        background: '#F59E0B',
                        color: '#FFFFFF',
                        fontSize: '11px',
                        fontWeight: 600,
                        padding: '4px 10px',
                        borderRadius: '12px',
                    }}
                >
                    {overrideCount}
                </span>
            )}
        </div>
    );
};

export default OverrideSummary;


