import React, { useState, useEffect } from 'react';
import type { AgentReview, SubReview, RagStatus, OverallStatus } from '../types';
import { CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon } from './icons/StatusIcons';
import { FlagIcon } from './icons/FlagIcon';
import { XIcon } from './icons/XIcon';
import { BugIcon } from './icons/BugIcon';
import { ExportIcon } from './icons/ExportIcon';
import { LegalIcon } from './icons/LegalIcon';


const RagStatusBadge: React.FC<{ status: RagStatus; isLarge?: boolean }> = ({ status, isLarge = false }) => {
    let colorClasses = '';
    let iconColor = '';
    
    switch (status) {
        case 'Red':
            colorClasses = 'bg-red-50 border-red-200 text-red-800 shadow-red-100';
            iconColor = 'text-red-600';
            break;
        case 'Amber':
            colorClasses = 'bg-amber-50 border-amber-200 text-amber-800 shadow-amber-100';
            iconColor = 'text-amber-600';
            break;
        case 'Green':
            colorClasses = 'bg-emerald-50 border-emerald-200 text-emerald-800 shadow-emerald-100';
            iconColor = 'text-emerald-600';
            break;
        case 'Error':
            colorClasses = 'bg-slate-50 border-slate-200 text-slate-700 shadow-slate-100';
            iconColor = 'text-slate-500';
            break;
    }

    const sizeClasses = isLarge ? 'px-4 py-1.5 text-sm rounded-xl border shadow-sm' : 'px-2.5 py-1 text-xs rounded-lg border shadow-sm';

    return (
        <div className={`inline-flex items-center font-bold tracking-wide ${sizeClasses} ${colorClasses} backdrop-blur-sm`}>
            {status === 'Red' && <ExclamationTriangleIcon className={`h-4 w-4 mr-1.5 ${iconColor}`} />}
            {status === 'Amber' && <InformationCircleIcon className={`h-4 w-4 mr-1.5 ${iconColor}`} />}
            {status === 'Green' && <CheckCircleIcon className={`h-4 w-4 mr-1.5 ${iconColor}`} />}
            {status === 'Error' && <BugIcon className={`h-4 w-4 mr-1.5 ${iconColor}`} />}
            <span>{status}</span>
        </div>
    );
};

const ResolveIssueModal: React.FC<{
    isOpen: boolean;
    onClose: () => void;
    onSubmit: (reason: string) => void;
    issueText: string;
}> = ({ isOpen, onClose, onSubmit, issueText }) => {
    if (!isOpen) return null;

    const [reason, setReason] = useState('');

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        if (reason.trim()) {
            onSubmit(reason);
        }
    };

    return (
        <div 
            className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center z-50 transition-all duration-300"
            onClick={onClose}
        >
            <div 
                className="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-lg transform transition-all border border-white/20 ring-1 ring-black/5"
                onClick={(e) => e.stopPropagation()}
            >
                <h3 className="text-2xl font-bold text-brand-dark-blue mb-2">Resolve Issue</h3>
                <p className="text-slate-600 mb-6">Please provide a reason for manually resolving this issue.</p>
                
                <div className="my-6 p-4 bg-slate-50 border border-slate-200 rounded-xl text-slate-700 italic text-sm">
                    "{issueText}"
                </div>
                
                <form onSubmit={handleSubmit}>
                    <label htmlFor="resolution-reason" className="block text-sm font-bold text-slate-700 mb-2">Reason for resolution</label>
                    <textarea
                        id="resolution-reason"
                        value={reason}
                        onChange={(e) => setReason(e.target.value)}
                        className="w-full p-4 border border-slate-200 rounded-xl focus:ring-2 focus:ring-brand-accent/50 focus:border-brand-accent transition-all bg-slate-50 focus:bg-white resize-none"
                        rows={4}
                        placeholder="e.g. 'Legal team has approved this exception via email...'"
                        required
                    />
                    <div className="mt-8 flex justify-end gap-3">
                        <button 
                            type="button" 
                            onClick={onClose} 
                            className="px-5 py-2.5 rounded-xl text-slate-600 font-semibold hover:bg-slate-100 transition-colors"
                        >
                            Cancel
                        </button>
                        <button 
                            type="submit" 
                            className="px-5 py-2.5 rounded-xl bg-brand-accent text-white font-bold shadow-lg shadow-brand-accent/30 hover:bg-brand-light-blue transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                            disabled={!reason.trim()}
                        >
                            Submit Resolution
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

const FlagIssueModal: React.FC<{
    isOpen: boolean;
    onClose: () => void;
    onSubmit: (comments: string) => void;
    agentName: string;
}> = ({ isOpen, onClose, onSubmit, agentName }) => {
    if (!isOpen) return null;

    const [comments, setComments] = useState('');

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        onSubmit(comments);
    };

    return (
        <div
            className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center z-50 transition-opacity duration-300"
            onClick={onClose}
        >
            <div
                className="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-lg transform transition-all border border-white/20 ring-1 ring-black/5"
                onClick={(e) => e.stopPropagation()}
            >
                <div className="flex justify-between items-start mb-6">
                    <div>
                        <h3 className="text-2xl font-bold text-brand-dark-blue">Flag Feedback</h3>
                        <p className="text-slate-500 text-sm mt-1">Reporting incorrect feedback from <span className="font-semibold text-brand-accent">{agentName}</span></p>
                    </div>
                    <button onClick={onClose} className="p-2 rounded-full hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-colors">
                        <XIcon className="h-6 w-6" />
                    </button>
                </div>

                <form onSubmit={handleSubmit}>
                    <label htmlFor="flag-comments" className="block text-sm font-bold text-slate-700 mb-2">Additional Comments</label>
                    <textarea
                        id="flag-comments"
                        value={comments}
                        onChange={(e) => setComments(e.target.value)}
                        className="w-full p-4 border border-slate-200 rounded-xl focus:ring-2 focus:ring-red-500/30 focus:border-red-500 transition-all bg-slate-50 focus:bg-white resize-none"
                        rows={5}
                        placeholder="Please explain why this feedback is incorrect..."
                    />
                    <div className="mt-8 flex justify-end gap-3">
                        <button
                            type="button"
                            onClick={onClose}
                            className="px-5 py-2.5 rounded-xl text-slate-600 font-semibold hover:bg-slate-100 transition-colors"
                        >
                            Cancel
                        </button>
                        <button
                            type="submit"
                            className="px-5 py-2.5 rounded-xl bg-red-600 text-white font-bold shadow-lg shadow-red-600/30 hover:bg-red-500 transition-all"
                        >
                            Submit Flag
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

const SubReviewCard: React.FC<{ 
    title: string; 
    review: SubReview; 
    onFlag: () => void;
    onResolve: (issueText: string, reason: string) => void;
}> = ({ title, review, onFlag, onResolve }) => {
    interface IssueState {
        text: string;
        status: 'actionable' | 'resolved';
        reason?: string;
    }

    const [issues, setIssues] = useState<IssueState[]>([]);
    const [currentStatus, setCurrentStatus] = useState<RagStatus>(review.ragStatus);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [activeIssueIndex, setActiveIssueIndex] = useState<number | null>(null);
    
    useEffect(() => {
        setIssues(review.issues.map(text => ({ text, status: 'actionable', reason: undefined })));
        setCurrentStatus(review.ragStatus);
    }, [review]);

    useEffect(() => {
        if (review.ragStatus === 'Error') {
             setCurrentStatus('Error');
             return;
        }
        if (issues.length > 0 && issues.every(issue => issue.status === 'resolved')) {
            setCurrentStatus('Green');
        } else if (issues.some(issue => issue.status === 'actionable')) {
            setCurrentStatus(review.ragStatus); 
        }
    }, [issues, review.ragStatus]);


    const handleOpenModal = (index: number) => {
        setActiveIssueIndex(index);
        setIsModalOpen(true);
    };

    const handleCloseModal = () => {
        setIsModalOpen(false);
        setActiveIssueIndex(null);
    };

    const handleResolve = (reason: string) => {
        if (activeIssueIndex === null) return;
        const issueText = issues[activeIssueIndex].text;
        
        setIssues(currentIssues =>
            currentIssues.map((issue, index) =>
                index === activeIssueIndex
                    ? { ...issue, status: 'resolved', reason }
                    : issue
            )
        );
        
        onResolve(issueText, reason);
        handleCloseModal();
    };
    
    const handleReopen = (indexToReopen: number) => {
        setIssues(currentIssues =>
            currentIssues.map((issue, index) =>
                index === indexToReopen
                    ? { ...issue, status: 'actionable', reason: undefined }
                    : issue
            )
        );
    };

    // Determine styles based on status
    let containerStyles = 'bg-white border-slate-100';
    let gradientOverlay = 'from-slate-50/50 to-white';
    let headerColor = 'text-slate-800';
    let issueIconColor = 'text-slate-400';
    let issueIcon = <InformationCircleIcon className="h-5 w-5 text-slate-400 mt-0.5 flex-shrink-0" />;

    if (currentStatus === 'Green') {
        containerStyles = 'bg-white border-emerald-100 hover:border-emerald-200';
        gradientOverlay = 'from-emerald-50/40 to-white';
        headerColor = 'text-emerald-900';
    } else if (currentStatus === 'Amber') {
        containerStyles = 'bg-white border-amber-100 hover:border-amber-200';
        gradientOverlay = 'from-amber-50/40 to-white';
        headerColor = 'text-amber-900';
        issueIconColor = 'text-amber-500';
        issueIcon = <ExclamationTriangleIcon className="h-5 w-5 text-amber-500 mt-0.5 flex-shrink-0" />;
    } else if (currentStatus === 'Red') {
        containerStyles = 'bg-white border-red-100 hover:border-red-200';
        gradientOverlay = 'from-red-50/40 to-white';
        headerColor = 'text-red-900';
        issueIconColor = 'text-red-500';
        issueIcon = <ExclamationTriangleIcon className="h-5 w-5 text-red-500 mt-0.5 flex-shrink-0" />;
    }

    return (
        <>
            <ResolveIssueModal
                isOpen={isModalOpen}
                onClose={handleCloseModal}
                onSubmit={handleResolve}
                issueText={activeIssueIndex !== null ? issues[activeIssueIndex].text : ''}
            />
            <div className={`relative rounded-2xl border p-6 shadow-sm transition-all duration-300 hover:shadow-md ${containerStyles} overflow-hidden group`}>
                {/* Subtle gradient background */}
                <div className={`absolute inset-0 bg-gradient-to-br ${gradientOverlay} pointer-events-none`}></div>
                
                <div className="relative z-10">
                    <div className="flex justify-between items-center gap-4 mb-5">
                        <div className="flex items-center gap-3">
                            <h4 className={`text-lg font-bold ${headerColor}`}>{title}</h4>
                        </div>
                        <div className="flex items-center gap-3">
                             <RagStatusBadge status={currentStatus} />
                             <button
                                onClick={onFlag}
                                className="p-1.5 text-slate-400 rounded-lg hover:bg-red-50 hover:text-red-500 transition-colors"
                                title="Flag as incorrect"
                                aria-label="Flag this feedback as incorrect"
                            >
                                <FlagIcon className="h-4 w-4" />
                            </button>
                        </div>
                    </div>

                    <p className="text-slate-600 text-sm leading-relaxed mb-6">{review.feedback}</p>
                    
                    {currentStatus !== 'Error' && issues.length > 0 && (
                        <div className="bg-white/50 rounded-xl border border-slate-100 p-4">
                            <h5 className={`text-xs font-bold uppercase tracking-wider mb-3 ${issueIconColor}`}>Actionable Issues</h5>
                            <ul className="space-y-3">
                                {issues.map((issue, index) => (
                                    <li key={index} className="flex items-start gap-3 group/issue">
                                        {issue.status === 'actionable' ? (
                                            issueIcon
                                        ) : (
                                            <CheckCircleIcon className="h-5 w-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                                        )}
                                        <div className="flex-grow pt-0.5">
                                            <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-2">
                                                <span className={`text-sm ${issue.status === 'resolved' ? 'line-through text-slate-400' : 'text-slate-700'}`}>
                                                    {issue.text}
                                                </span>
                                                {issue.status === 'actionable' ? (
                                                    <button
                                                        onClick={() => handleOpenModal(index)}
                                                        className="flex-shrink-0 opacity-0 group-hover/issue:opacity-100 focus:opacity-100 text-xs font-semibold text-brand-accent hover:text-brand-dark-blue bg-brand-light-blue/10 hover:bg-brand-light-blue/20 px-2.5 py-1 rounded-lg transition-all"
                                                    >
                                                        Mark Resolved
                                                    </button>
                                                ) : (
                                                    <div className="flex items-center gap-2">
                                                        <span className="relative inline-block group/tooltip">
                                                            <InformationCircleIcon className="h-4 w-4 text-slate-300 cursor-help" />
                                                            <div className="absolute bottom-full right-0 mb-2 w-64 bg-slate-800 text-white text-xs rounded-lg py-2 px-3 opacity-0 group-hover/tooltip:opacity-100 transition-opacity pointer-events-none z-20 shadow-xl">
                                                                <span className="font-bold block mb-1">Reason for resolution:</span>
                                                                "{issue.reason}"
                                                            </div>
                                                        </span>
                                                        <button
                                                            onClick={() => handleReopen(index)}
                                                            className="text-xs font-semibold text-slate-400 hover:text-brand-dark-blue bg-slate-100 hover:bg-slate-200 px-2.5 py-1 rounded-lg transition-all"
                                                        >
                                                            Re-open
                                                        </button>
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    )}
                    {currentStatus !== 'Error' && issues.length === 0 && (
                        <div className="flex items-center p-3 rounded-xl bg-emerald-50/50 border border-emerald-100 text-emerald-700 text-sm">
                            <CheckCircleIcon className="h-5 w-5 mr-2" />
                            <span className="font-semibold">No actionable issues found.</span>
                        </div>
                    )}
                </div>
            </div>
        </>
    );
};

const LeadAgentSummary: React.FC<{ status: OverallStatus, summary: string, onFlag: () => void; }> = ({ status, summary, onFlag }) => {
    const isPassed = status === 'Passed';
    
    let themeStyles = 'from-sky-50 to-white border-sky-100 text-brand-dark-blue';
    let iconBg = 'bg-sky-100 text-brand-accent';
    let icon = <InformationCircleIcon className="h-8 w-8" />;
    let blobColor = 'bg-sky-400';

    if (status === 'Passed') {
        themeStyles = 'from-emerald-50 to-white border-emerald-200 text-emerald-900';
        iconBg = 'bg-emerald-100 text-emerald-600';
        icon = <CheckCircleIcon className="h-8 w-8" />;
        blobColor = 'bg-emerald-400';
    } else if (status === 'Failed') {
        themeStyles = 'from-rose-50 to-white border-rose-200 text-rose-900';
        iconBg = 'bg-rose-100 text-rose-600';
        icon = <ExclamationTriangleIcon className="h-8 w-8" />;
        blobColor = 'bg-rose-400';
    }

    if (status === 'Requires Manual Legal Review') return null;

    return (
        <div className={`relative overflow-hidden rounded-2xl border p-8 shadow-lg transition-all duration-500 bg-gradient-to-br ${themeStyles}`}>
             {/* Abstract decorative blob */}
             <div className={`absolute -top-12 -right-12 w-48 h-48 rounded-full blur-3xl opacity-20 ${blobColor}`}></div>
             
             <div className="relative z-10 flex items-start gap-6">
                <div className={`flex-shrink-0 p-3 rounded-2xl ${iconBg} shadow-sm`}>
                    {icon}
                </div>
                <div className="flex-grow">
                    <div className="flex justify-between items-start">
                        <h3 className="text-2xl font-extrabold tracking-tight mb-3">
                            Overall Status: <span className="opacity-90">{status}</span>
                        </h3>
                        <button
                            onClick={onFlag}
                            className="text-slate-400 hover:text-red-500 p-2 rounded-full hover:bg-white/50 transition-colors"
                            title="Flag as incorrect"
                        >
                            <FlagIcon className="h-5 w-5" />
                        </button>
                    </div>
                    <p className={`text-lg leading-relaxed ${isPassed ? 'text-emerald-800/80' : 'text-slate-700'}`}>
                        {summary}
                    </p>
                </div>
            </div>
        </div>
    );
};

const FinancialPromotionSummary: React.FC<{ reason: string; summary: string }> = ({ reason, summary }) => {
    const [exportStatus, setExportStatus] = useState('Export for Legal');
    
    const handleExport = () => {
        const textToCopy = `## Financial Promotion Review Required ##\n\nReason for Flag:\n${reason}\n\n## AI Agent Summary ##\n${summary}`.trim();
        navigator.clipboard.writeText(textToCopy).then(() => {
            setExportStatus('Copied!');
            setTimeout(() => setExportStatus('Export for Legal'), 2000);
        }).catch(err => {
            console.error('Failed to copy text: ', err);
            setExportStatus('Failed');
             setTimeout(() => setExportStatus('Export for Legal'), 2000);
        });
    };

    return (
        <div className="relative overflow-hidden rounded-2xl border border-purple-200 bg-gradient-to-br from-purple-50 to-white p-8 shadow-lg">
            <div className="absolute -top-20 -right-20 w-64 h-64 rounded-full blur-3xl opacity-20 bg-purple-500"></div>
            
            <div className="relative z-10 flex items-start gap-6">
                <div className="flex-shrink-0 p-3 rounded-2xl bg-purple-100 text-purple-600 shadow-sm">
                    <LegalIcon className="h-8 w-8" />
                </div>
                <div className="flex-grow">
                    <h3 className="text-2xl font-extrabold text-purple-900 tracking-tight mb-2">
                        Financial Promotion Detected
                    </h3>
                    <p className="text-lg text-purple-800/80 mb-6 leading-relaxed">
                        This proof has been identified as a financial promotion and requires a separate, manual review from the Barclays legal team.
                    </p>
                    
                    <div className="bg-white/60 backdrop-blur-sm border border-purple-100 rounded-xl p-4 mb-6 shadow-sm">
                        <p className="text-xs font-bold uppercase tracking-wider text-purple-500 mb-1">Reason Identified</p>
                        <p className="text-purple-900 font-medium italic">"{reason}"</p>
                    </div>

                    <button
                        onClick={handleExport}
                        className="flex items-center gap-2 bg-purple-600 text-white font-bold py-3 px-6 rounded-xl shadow-lg shadow-purple-600/20 hover:bg-purple-700 hover:shadow-purple-600/30 transition-all duration-300"
                    >
                        <ExportIcon className="h-5 w-5" />
                        {exportStatus}
                    </button>
                </div>
            </div>
        </div>
    );
};


export const FeedbackReport: React.FC<{ 
    feedback: AgentReview;
    onFlagSubmit: (agentName: string, comments: string) => void;
    onResolveSubmit: (agentName: string, issueText: string, reason: string) => void;
}> = ({ feedback, onFlagSubmit, onResolveSubmit }) => {
    const [flagModalState, setFlagModalState] = useState<{ isOpen: boolean; agentName: string }>({
        isOpen: false,
        agentName: '',
    });

    const handleOpenFlagModal = (agentName: string) => {
        setFlagModalState({ isOpen: true, agentName });
    };

    const handleCloseFlagModal = () => {
        setFlagModalState({ isOpen: false, agentName: '' });
    };

    const handleSubmitFlag = (comments: string) => {
        onFlagSubmit(flagModalState.agentName, comments);
        alert(`Thank you for your feedback on the ${flagModalState.agentName}'s review. This has been logged for auditing.`);
        handleCloseFlagModal();
    };

    const agentReviews = [
        { title: 'Legal Agent', review: feedback.legalAgentReview },
        { title: 'Brand Agent', review: feedback.brandAgentReview },
        { title: 'Tone Agent', review: feedback.toneAgentReview },
        { title: 'Channel Agent', review: feedback.channelAgentReview },
    ];

    const isFinancialPromotion = feedback.overallStatus === 'Requires Manual Legal Review';

    return (
        <div className="space-y-8">
            <FlagIssueModal
                isOpen={flagModalState.isOpen}
                onClose={handleCloseFlagModal}
                onSubmit={handleSubmitFlag}
                agentName={flagModalState.agentName}
            />

            {isFinancialPromotion ? (
                <FinancialPromotionSummary 
                    reason={feedback.financialPromotionReason || "No specific reason provided."}
                    summary={feedback.leadAgentSummary}
                />
            ) : (
                <LeadAgentSummary 
                    status={feedback.overallStatus} 
                    summary={feedback.leadAgentSummary} 
                    onFlag={() => handleOpenFlagModal('Lead Agent')}
                />
            )}


            <div className="grid grid-cols-1 gap-6">
                {agentReviews.map(({ title, review }) => (
                    <SubReviewCard 
                        key={title}
                        title={`${title}`} 
                        review={review}
                        onFlag={() => handleOpenFlagModal(title)}
                        onResolve={(issueText, reason) => onResolveSubmit(title, issueText, reason)}
                    />
                ))}
            </div>
        </div>
    );
};