import React from 'react';
import { motion } from 'framer-motion';
import { AlertTriangle, CheckCircle, Info } from 'lucide-react';

interface CriticFeedbackProps {
    isApproved: boolean;
    feedback: string;
    severity: 'low' | 'medium' | 'high';
    onApplyFixes?: () => void;
}

const CriticFeedbackPanel: React.FC<CriticFeedbackProps> = ({ isApproved, feedback, severity, onApplyFixes }) => {
    
    const getColors = () => {
        if (isApproved) return { border: 'var(--accent-green)', bg: 'rgba(16, 185, 129, 0.1)', header: 'var(--accent-green)', icon: <CheckCircle size={20}/> };
        if (severity === 'high') return { border: '#EF4444', bg: 'rgba(239, 68, 68, 0.1)', header: '#FCA5A5', icon: <AlertTriangle size={20}/> };
        if (severity === 'medium') return { border: '#F59E0B', bg: 'rgba(245, 158, 11, 0.1)', header: '#FCD34D', icon: <AlertTriangle size={20}/> };
        return { border: 'var(--accent-blue)', bg: 'rgba(59, 130, 246, 0.1)', header: '#93C5FD', icon: <Info size={20}/> };
    };

    const colors = getColors();

    return (
        <motion.div 
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            className="glass-card" 
            style={{ 
                borderLeft: `4px solid ${colors.border}`,
                padding: '1.2rem',
                display: 'flex',
                flexDirection: 'column',
                gap: '0.8rem'
            }}
        >
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', color: colors.header, fontWeight: 'bold' }}>
                {colors.icon}
                <span>Zgodność i Ocena (AI Critic)</span>
            </div>
            <div style={{ fontSize: '0.9rem', color: 'var(--text-secondary)', lineHeight: 1.5, background: 'rgba(0,0,0,0.2)', padding: '1rem', borderRadius: '8px' }}>
                {feedback}
            </div>
            {!isApproved && (
                <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', display: 'flex', flexDirection: 'column', gap: '0.8rem' }}>
                    <span>Wprowadź poprawki do tekstu powyżej i poproś o ponowną ewaluację.</span>
                    {onApplyFixes && (
                        <button 
                            onClick={onApplyFixes}
                            className="btn hover-lift"
                            style={{ alignSelf: 'flex-start', background: 'rgba(59, 130, 246, 0.15)', color: 'var(--accent-blue)', border: '1px solid rgba(59, 130, 246, 0.3)', padding: '0.4rem 0.8rem', fontSize: '0.8rem' }}
                        >
                            Zastosuj sugerowane poprawki
                        </button>
                    )}
                </div>
            )}
        </motion.div>
    );
};

export default CriticFeedbackPanel;