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';

/**
 * Formats feedback text from Gemini API into properly structured React elements.
 * Handles HTML tags, bullet characters, and newline-separated text.
 */
const formatFeedbackText = (text: string): React.ReactNode => {
    if (!text) return null;

    // First, handle HTML tags by converting them to a normalized format
    let normalizedText = text
        // Replace </li> and </ul> with newlines
        .replace(/<\/li>/gi, '\n')
        .replace(/<\/ul>/gi, '\n')
        // Remove opening tags
        .replace(/<ul[^>]*>/gi, '')
        .replace(/<li[^>]*>/gi, '• ')
        // Remove any other HTML tags
        .replace(/<[^>]+>/g, '')
        // Normalize whitespace around bullets
        .replace(/\s*•\s*/g, '\n• ')
        // Clean up multiple newlines
        .replace(/\n{2,}/g, '\n')
        .trim();

    // Split into lines
    const lines = normalizedText.split('\n').filter(line => line.trim());

    // Separate intro text from bullet points
    const bulletLines: string[] = [];
    const introLines: string[] = [];

    lines.forEach(line => {
        const trimmed = line.trim();
        if (trimmed.startsWith('•')) {
            // Remove the bullet character, we'll add it via CSS
            bulletLines.push(trimmed.replace(/^•\s*/, '').trim());
        } else if (trimmed) {
            // If we haven't started collecting bullets yet, it's intro text
            if (bulletLines.length === 0) {
                introLines.push(trimmed);
            } else {
                // Text after bullets - treat as continuation of last bullet
                const lastBullet = bulletLines.pop();
                if (lastBullet) {
                    bulletLines.push(`${lastBullet} ${trimmed}`);
                } else {
                    bulletLines.push(trimmed);
                }
            }
        }
    });

    return (
        <>
            {introLines.length > 0 && (
                <p className="mb-3">{introLines.join(' ')}</p>
            )}
            {bulletLines.length > 0 && (
                <ul className="list-disc list-inside space-y-1">
                    {bulletLines.map((item, index) => (
                        <li key={index}>{item}</li>
                    ))}
                </ul>
            )}
        </>
    );
};

const RagStatusBadge: React.FC<{ status: RagStatus; isLarge?: boolean }> = ({ status, isLarge = false }) => {
    let colorClasses = '';
    let iconColor = '';

    switch (status) {
        case 'Red':
            colorClasses = 'bg-error-light border-error text-error';
            iconColor = 'text-error';
            break;
        case 'Amber':
            colorClasses = 'bg-warning-light border-warning text-black-title';
            iconColor = 'text-warning';
            break;
        case 'Green':
            colorClasses = 'bg-success-light border-success text-success';
            iconColor = 'text-success';
            break;
        case 'Error':
            colorClasses = 'bg-grey-100 border-grey-300 text-grey-900';
            iconColor = 'text-grey-700';
            break;
    }

    const sizeClasses = isLarge ? 'px-4 py-1.5 text-sm rounded-[10px] border shadow-sm' : 'px-2.5 py-1 text-xs rounded-[10px] 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-[10px] shadow-2xl p-8 w-full max-w-lg transform transition-all border border-grey-300"
                onClick={(e) => e.stopPropagation()}
            >
                <h3 className="text-2xl font-bold text-primary-blue mb-2">Resolve Issue</h3>
                <p className="text-black-title mb-6">Please provide a reason for manually resolving this issue.</p>

                <div className="my-6 p-4 bg-grey-100 border border-grey-300 rounded-[10px] text-black-title italic text-sm">
                    "{issueText}"
                </div>

                <form onSubmit={handleSubmit}>
                    <label htmlFor="resolution-reason" className="block text-sm font-bold text-black-title mb-2">Reason for resolution</label>
                    <textarea
                        id="resolution-reason"
                        value={reason}
                        onChange={(e) => setReason(e.target.value)}
                        className="w-full p-4 border-2 border-grey-700 rounded-[10px] focus:ring-2 focus:ring-active-blue/50 focus:border-active-blue transition-all bg-grey-100 focus:bg-white resize-none text-black-title"
                        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-6 py-2.5 rounded-full border-2 border-active-blue text-active-blue font-semibold hover:bg-active-blue hover:text-white transition-colors"
                        >
                            Cancel
                        </button>
                        <button
                            type="submit"
                            className="px-6 py-2.5 rounded-full bg-active-blue text-white font-bold shadow-lg shadow-active-blue/30 hover:bg-active-blue/90 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-primary-blue">Flag Feedback</h3>
                        <p className="text-slate-500 text-sm mt-1">Reporting incorrect feedback from <span className="font-semibold text-active-blue">{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>
    );
};

// Helper function to detect revision mode (when revision data is present)
const hasRevisionData = (review: SubReview): boolean => {
    return (
        (review.resolvedIssues && review.resolvedIssues.length > 0) ||
        (review.outstandingIssues && review.outstandingIssues.length > 0) ||
        (review.newIssues && review.newIssues.length > 0)
    );
};

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;
        category?: 'outstanding' | 'new';  // For revision mode
    }

    const [issues, setIssues] = useState<IssueState[]>([]);
    const [currentStatus, setCurrentStatus] = useState<RagStatus>(review.ragStatus);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [activeIssueIndex, setActiveIssueIndex] = useState<number | null>(null);

    // Section collapse states for revision mode
    const [resolvedCollapsed, setResolvedCollapsed] = useState(true);
    const [outstandingCollapsed, setOutstandingCollapsed] = useState(false);
    const [newCollapsed, setNewCollapsed] = useState(false);

    useEffect(() => {
        if (hasRevisionData(review)) {
            // Revision mode: populate from outstandingIssues and newIssues
            const outstandingIssues: IssueState[] = (review.outstandingIssues || []).map(text => ({
                text,
                status: 'actionable',
                reason: undefined,
                category: 'outstanding' as const
            }));
            const newIssues: IssueState[] = (review.newIssues || []).map(text => ({
                text,
                status: 'actionable',
                reason: undefined,
                category: 'new' as const
            }));
            setIssues([...outstandingIssues, ...newIssues]);
        } else {
            // Original mode: use review.issues
            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>

                    <div className="text-slate-600 text-sm leading-relaxed mb-6">
                        {formatFeedbackText(review.feedback)}
                    </div>
                    
                    {/* Revision mode: Show categorized sections */}
                    {currentStatus !== 'Error' && hasRevisionData(review) && (
                        <div className="space-y-4">
                            {/* Resolved Issues Section */}
                            {review.resolvedIssues && review.resolvedIssues.length > 0 && (
                                <div className="bg-emerald-50/50 rounded-xl border border-emerald-100 overflow-hidden">
                                    <button
                                        onClick={() => setResolvedCollapsed(!resolvedCollapsed)}
                                        className="w-full flex items-center justify-between p-4 hover:bg-emerald-50/80 transition-colors"
                                    >
                                        <div className="flex items-center gap-2">
                                            <CheckCircleIcon className="h-5 w-5 text-emerald-500" />
                                            <h5 className="text-xs font-bold uppercase tracking-wider text-emerald-600">
                                                Resolved Issues
                                            </h5>
                                            <span className="bg-emerald-100 text-emerald-700 text-xs font-semibold px-2 py-0.5 rounded-full">
                                                {review.resolvedIssues.length}
                                            </span>
                                        </div>
                                        <svg
                                            className={`h-4 w-4 text-emerald-500 transition-transform ${resolvedCollapsed ? '' : 'rotate-180'}`}
                                            fill="none"
                                            viewBox="0 0 24 24"
                                            stroke="currentColor"
                                        >
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                                        </svg>
                                    </button>
                                    {!resolvedCollapsed && (
                                        <ul className="px-4 pb-4 space-y-2">
                                            {review.resolvedIssues.map((issueText, index) => (
                                                <li key={`resolved-${index}`} className="flex items-start gap-3">
                                                    <CheckCircleIcon className="h-5 w-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                                                    <span className="text-sm text-emerald-700 line-through opacity-75">
                                                        {issueText}
                                                    </span>
                                                </li>
                                            ))}
                                        </ul>
                                    )}
                                </div>
                            )}

                            {/* Outstanding Issues Section */}
                            {issues.filter(i => i.category === 'outstanding').length > 0 && (
                                <div className="bg-amber-50/50 rounded-xl border border-amber-100 overflow-hidden">
                                    <button
                                        onClick={() => setOutstandingCollapsed(!outstandingCollapsed)}
                                        className="w-full flex items-center justify-between p-4 hover:bg-amber-50/80 transition-colors"
                                    >
                                        <div className="flex items-center gap-2">
                                            <ExclamationTriangleIcon className="h-5 w-5 text-amber-500" />
                                            <h5 className="text-xs font-bold uppercase tracking-wider text-amber-600">
                                                Outstanding Issues
                                            </h5>
                                            <span className="bg-amber-100 text-amber-700 text-xs font-semibold px-2 py-0.5 rounded-full">
                                                {issues.filter(i => i.category === 'outstanding' && i.status === 'actionable').length}
                                            </span>
                                        </div>
                                        <svg
                                            className={`h-4 w-4 text-amber-500 transition-transform ${outstandingCollapsed ? '' : 'rotate-180'}`}
                                            fill="none"
                                            viewBox="0 0 24 24"
                                            stroke="currentColor"
                                        >
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                                        </svg>
                                    </button>
                                    {!outstandingCollapsed && (
                                        <ul className="px-4 pb-4 space-y-3">
                                            {issues.filter(i => i.category === 'outstanding').map((issue, idx) => {
                                                const actualIndex = issues.findIndex((i, index) => i === issue && index >= 0);
                                                return (
                                                    <li key={`outstanding-${idx}`} className="flex items-start gap-3 group/issue">
                                                        {issue.status === 'actionable' ? (
                                                            <ExclamationTriangleIcon className="h-5 w-5 text-amber-500 mt-0.5 flex-shrink-0" />
                                                        ) : (
                                                            <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-amber-800'}`}>
                                                                    {issue.text}
                                                                </span>
                                                                {issue.status === 'actionable' ? (
                                                                    <button
                                                                        onClick={() => handleOpenModal(actualIndex)}
                                                                        className="flex-shrink-0 opacity-0 group-hover/issue:opacity-100 focus:opacity-100 text-xs font-semibold text-active-blue hover:text-primary-blue bg-cyan-brand/10 hover:bg-cyan-brand/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(actualIndex)}
                                                                            className="text-xs font-semibold text-slate-400 hover:text-primary-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>
                            )}

                            {/* New Issues Section */}
                            {issues.filter(i => i.category === 'new').length > 0 && (
                                <div className="bg-red-50/50 rounded-xl border border-red-100 overflow-hidden">
                                    <button
                                        onClick={() => setNewCollapsed(!newCollapsed)}
                                        className="w-full flex items-center justify-between p-4 hover:bg-red-50/80 transition-colors"
                                    >
                                        <div className="flex items-center gap-2">
                                            <ExclamationTriangleIcon className="h-5 w-5 text-red-500" />
                                            <h5 className="text-xs font-bold uppercase tracking-wider text-red-600">
                                                New Issues
                                            </h5>
                                            <span className="bg-red-100 text-red-700 text-xs font-semibold px-2 py-0.5 rounded-full">
                                                {issues.filter(i => i.category === 'new' && i.status === 'actionable').length}
                                            </span>
                                        </div>
                                        <svg
                                            className={`h-4 w-4 text-red-500 transition-transform ${newCollapsed ? '' : 'rotate-180'}`}
                                            fill="none"
                                            viewBox="0 0 24 24"
                                            stroke="currentColor"
                                        >
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                                        </svg>
                                    </button>
                                    {!newCollapsed && (
                                        <ul className="px-4 pb-4 space-y-3">
                                            {issues.filter(i => i.category === 'new').map((issue, idx) => {
                                                const actualIndex = issues.findIndex((i, index) => i === issue && index >= 0);
                                                return (
                                                    <li key={`new-${idx}`} className="flex items-start gap-3 group/issue">
                                                        {issue.status === 'actionable' ? (
                                                            <ExclamationTriangleIcon className="h-5 w-5 text-red-500 mt-0.5 flex-shrink-0" />
                                                        ) : (
                                                            <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-red-800'}`}>
                                                                    {issue.text}
                                                                </span>
                                                                {issue.status === 'actionable' ? (
                                                                    <button
                                                                        onClick={() => handleOpenModal(actualIndex)}
                                                                        className="flex-shrink-0 opacity-0 group-hover/issue:opacity-100 focus:opacity-100 text-xs font-semibold text-active-blue hover:text-primary-blue bg-cyan-brand/10 hover:bg-cyan-brand/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(actualIndex)}
                                                                            className="text-xs font-semibold text-slate-400 hover:text-primary-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>
                            )}

                            {/* No issues state for revision mode */}
                            {issues.length === 0 && (!review.resolvedIssues || review.resolvedIssues.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>
                    )}

                    {/* Original mode: Show single list (backward compatible) */}
                    {currentStatus !== 'Error' && !hasRevisionData(review) && 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-active-blue hover:text-primary-blue bg-cyan-brand/10 hover:bg-cyan-brand/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-primary-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' && !hasRevisionData(review) && 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-primary-blue';
    let iconBg = 'bg-sky-100 text-active-blue';
    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>
                    <div className={`text-lg leading-relaxed ${isPassed ? 'text-emerald-800/80' : 'text-slate-700'}`}>
                        {formatFeedbackText(summary)}
                    </div>
                </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: 'Channel Best Practices Agent', review: feedback.channelBestPracticesAgentReview },
        { title: 'Channel Tech Specs Agent', review: feedback.channelTechSpecsAgentReview },
    ];

    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>
    );
};