// src/modal/TrainersAvailability/TrainerAnalysisModal.tsx
import { useState } from 'react';
import {
    XCircle,
    Users,
    Calendar,
    Clock,
    Award,
    TrendingUp,
    TrendingDown,
    Activity,
    BarChart3,
    PieChart,
    UserCheck,
    UserX,
    AlertCircle,
    CheckCircle,
    Star,
    MapPin,
    Briefcase,
    ChevronDown,
    ChevronUp,
    ChevronLeft,
    ChevronRight,
} from 'lucide-react';
import ButtonUI from '../../components/UI/ButtonUI';

interface TrainerAnalysisModalProps {
    isOpen: boolean;
    onClose: () => void;
}

interface TrainerWorkload {
    id: string;
    name: string;
    initials: string;
    avatarColor: string;
    totalBatches: number;
    activeBatches: number;
    trainingDays: number;
    points: number;
    status: 'Over Cap' | 'Available' | 'Inactive';
    matchStatus: 'Unassigned' | 'Available' | 'Moderate' | 'Heavy load';
    batchLoad: string;
    batchLoadPercent: number;
}

const TrainerAnalysisModal = ({ isOpen, onClose }: TrainerAnalysisModalProps) => {
    const [activeTab, setActiveTab] = useState<'workload' | 'roster'>('workload');
    const [currentMonth, setCurrentMonth] = useState('August 2026');
    const [currentMonthIndex, setCurrentMonthIndex] = useState(7);

    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    // Mock data for workload analysis
    const workloadData: TrainerWorkload[] = [
        {
            id: '1',
            name: 'Karthik Raja',
            initials: 'KR',
            avatarColor: '#4338CA',
            totalBatches: 12,
            activeBatches: 4,
            trainingDays: 32,
            points: 640,
            status: 'Over Cap',
            matchStatus: 'Moderate',
            batchLoad: '4 / 4 batches',
            batchLoadPercent: 100,
        },
        {
            id: '2',
            name: 'Priya Dharshini',
            initials: 'PD',
            avatarColor: '#0D9488',
            totalBatches: 8,
            activeBatches: 3,
            trainingDays: 13,
            points: 260,
            status: 'Available',
            matchStatus: 'Available',
            batchLoad: '1 / 1 batches',
            batchLoadPercent: 50,
        },
        {
            id: '3',
            name: 'Mohamed Aslam',
            initials: 'MA',
            avatarColor: '#D97706',
            totalBatches: 6,
            activeBatches: 2,
            trainingDays: 11,
            points: 220,
            status: 'Inactive',
            matchStatus: 'Unassigned',
            batchLoad: '0 / 1 batches',
            batchLoadPercent: 0,
        },
        {
            id: '4',
            name: 'Deepa Lakshmi',
            initials: 'DL',
            avatarColor: '#DB2777',
            totalBatches: 10,
            activeBatches: 5,
            trainingDays: 9,
            points: 180,
            status: 'Inactive',
            matchStatus: 'Heavy load',
            batchLoad: '4 / 4 batches',
            batchLoadPercent: 100,
        },
        {
            id: '5',
            name: 'Senthil Nathan',
            initials: 'SN',
            avatarColor: '#7C3AED',
            totalBatches: 4,
            activeBatches: 0,
            trainingDays: 0,
            points: 0,
            status: 'Inactive',
            matchStatus: 'Unassigned',
            batchLoad: '0 / 1 batches',
            batchLoadPercent: 0,
        },
        {
            id: '6',
            name: 'Revathi K',
            initials: 'RK',
            avatarColor: '#0F766E',
            totalBatches: 5,
            activeBatches: 0,
            trainingDays: 0,
            points: 0,
            status: 'Inactive',
            matchStatus: 'Unassigned',
            batchLoad: '0 / 1 batches',
            batchLoadPercent: 0,
        },
        {
            id: '7',
            name: 'Rahul Sharma',
            initials: 'RS',
            avatarColor: '#B45309',
            totalBatches: 3,
            activeBatches: 1,
            trainingDays: 5,
            points: 100,
            status: 'Available',
            matchStatus: 'Moderate',
            batchLoad: '2 / 2 batches',
            batchLoadPercent: 75,
        },
    ];

    // Mock roster data (simple list)
    const rosterData: TrainerWorkload[] = [
        {
            id: '1',
            name: 'Anbu Abdul Kareem',
            initials: 'AA',
            avatarColor: '#4338CA',
            totalBatches: 1,
            activeBatches: 0,
            trainingDays: 0,
            points: 0,
            status: 'Inactive',
            matchStatus: 'Unassigned',
            batchLoad: '0 / 1 batches',
            batchLoadPercent: 0,
        },
        {
            id: '2',
            name: 'B. Mareeswari',
            initials: 'BM',
            avatarColor: '#0D9488',
            totalBatches: 2,
            activeBatches: 2,
            trainingDays: 0,
            points: 0,
            status: 'Available',
            matchStatus: 'Moderate',
            batchLoad: '2 / 2 batches',
            batchLoadPercent: 100,
        },
        {
            id: '3',
            name: 'Deepalakshmi M',
            initials: 'DM',
            avatarColor: '#D97706',
            totalBatches: 4,
            activeBatches: 4,
            trainingDays: 0,
            points: 0,
            status: 'Over Cap',
            matchStatus: 'Heavy load',
            batchLoad: '4 / 4 batches',
            batchLoadPercent: 100,
        },
        {
            id: '4',
            name: 'M. Pravin Kumar',
            initials: 'PK',
            avatarColor: '#DB2777',
            totalBatches: 2,
            activeBatches: 2,
            trainingDays: 0,
            points: 0,
            status: 'Available',
            matchStatus: 'Moderate',
            batchLoad: '2 / 2 batches',
            batchLoadPercent: 100,
        },
        {
            id: '5',
            name: 'Mahalakshmi K',
            initials: 'MK',
            avatarColor: '#7C3AED',
            totalBatches: 1,
            activeBatches: 0,
            trainingDays: 0,
            points: 0,
            status: 'Inactive',
            matchStatus: 'Unassigned',
            batchLoad: '0 / 1 batches',
            batchLoadPercent: 0,
        },
        {
            id: '6',
            name: 'Naga Nandhini G',
            initials: 'NG',
            avatarColor: '#0F766E',
            totalBatches: 1,
            activeBatches: 0,
            trainingDays: 0,
            points: 0,
            status: 'Inactive',
            matchStatus: 'Unassigned',
            batchLoad: '0 / 1 batches',
            batchLoadPercent: 0,
        },
        {
            id: '7',
            name: 'Nagalakshmi K',
            initials: 'NK',
            avatarColor: '#B45309',
            totalBatches: 1,
            activeBatches: 0,
            trainingDays: 0,
            points: 0,
            status: 'Inactive',
            matchStatus: 'Unassigned',
            batchLoad: '0 / 1 batches',
            batchLoadPercent: 0,
        },
        {
            id: '8',
            name: 'Priyadharshini G',
            initials: 'PG',
            avatarColor: '#BE185D',
            totalBatches: 1,
            activeBatches: 1,
            trainingDays: 0,
            points: 0,
            status: 'Available',
            matchStatus: 'Available',
            batchLoad: '1 / 1 batches',
            batchLoadPercent: 50,
        },
        {
            id: '9',
            name: 'Raghuram P',
            initials: 'RP',
            avatarColor: '#4338CA',
            totalBatches: 1,
            activeBatches: 0,
            trainingDays: 0,
            points: 0,
            status: 'Inactive',
            matchStatus: 'Unassigned',
            batchLoad: '0 / 1 batches',
            batchLoadPercent: 0,
        },
        {
            id: '10',
            name: 'Sarumathi Sree S',
            initials: 'SS',
            avatarColor: '#0D9488',
            totalBatches: 1,
            activeBatches: 0,
            trainingDays: 0,
            points: 0,
            status: 'Inactive',
            matchStatus: 'Unassigned',
            batchLoad: '0 / 1 batches',
            batchLoadPercent: 0,
        },
        {
            id: '11',
            name: 'Sornalatha M',
            initials: 'SM',
            avatarColor: '#D97706',
            totalBatches: 1,
            activeBatches: 0,
            trainingDays: 0,
            points: 0,
            status: 'Inactive',
            matchStatus: 'Unassigned',
            batchLoad: '0 / 1 batches',
            batchLoadPercent: 0,
        },
        {
            id: '12',
            name: 'Yuvasri K',
            initials: 'YK',
            avatarColor: '#DB2777',
            totalBatches: 1,
            activeBatches: 0,
            trainingDays: 0,
            points: 0,
            status: 'Inactive',
            matchStatus: 'Unassigned',
            batchLoad: '0 / 1 batches',
            batchLoadPercent: 0,
        },
    ];

    // Stats calculation for workload
    const totalTrainers = workloadData.length;
    const totalActiveBatches = workloadData.reduce((acc, t) => acc + t.activeBatches, 0);
    const totalTrainingDays = workloadData.reduce((acc, t) => acc + t.trainingDays, 0);
    const totalPoints = workloadData.reduce((acc, t) => acc + t.points, 0);
    const overCapCount = workloadData.filter((t) => t.status === 'Over Cap').length;
    const availableCount = workloadData.filter((t) => t.status === 'Available').length;
    const inactiveCount = workloadData.filter((t) => t.status === 'Inactive').length;

    const getStatusBadge = (status: string) => {
        const colors = {
            'Over Cap': 'bg-red-50 text-red-700 border-red-200',
            Available: 'bg-green-50 text-green-700 border-green-200',
            Inactive: 'bg-gray-50 text-gray-700 border-gray-200',
        };
        return (
            <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium border ${colors[status as keyof typeof colors] || 'bg-gray-50 text-gray-700 border-gray-200'}`}>
                {status}
            </span>
        );
    };

    const getStatusIcon = (status: string) => {
        switch (status) {
            case 'Unassigned':
                return <UserX className="w-4 h-4 text-gray-400" />;
            case 'Available':
                return <UserCheck className="w-4 h-4 text-green-500" />;
            case 'Moderate':
                return <Activity className="w-4 h-4 text-yellow-500" />;
            case 'Heavy load':
                return <AlertCircle className="w-4 h-4 text-red-500" />;
            default:
                return null;
        }
    };

    const getStatusTextColor = (status: string) => {
        switch (status) {
            case 'Unassigned':
                return 'text-gray-500';
            case 'Available':
                return 'text-green-600';
            case 'Moderate':
                return 'text-yellow-600';
            case 'Heavy load':
                return 'text-red-600';
            default:
                return 'text-gray-500';
        }
    };

    const handlePrevMonth = () => {
        const newIndex = currentMonthIndex - 1;
        if (newIndex >= 0) {
            setCurrentMonthIndex(newIndex);
            setCurrentMonth(`${months[newIndex]} 2026`);
        }
    };

    const handleNextMonth = () => {
        const newIndex = currentMonthIndex + 1;
        if (newIndex < months.length) {
            setCurrentMonthIndex(newIndex);
            setCurrentMonth(`${months[newIndex]} 2026`);
        }
    };

    // Render progress bar for workload
    const renderWorkloadProgress = (row: TrainerWorkload) => {
        const total = row.totalBatches || 1;
        const active = row.activeBatches || 0;
        const percentage = Math.round((active / total) * 100);
        const color = percentage >= 80 ? 'bg-red-500' : percentage >= 50 ? 'bg-yellow-500' : 'bg-green-500';

        return (
            <div className="w-full">
                <div className="flex justify-between text-xs text-gray-500 mb-0.5">
                    <span>
                        {active} / {total} batches
                    </span>
                    <span>{percentage}%</span>
                </div>
                <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div className={`h-full rounded-full ${color}`} style={{ width: `${percentage}%` }} />
                </div>
            </div>
        );
    };

    // Render progress bar for roster (simplified)
    const renderRosterProgress = (row: TrainerWorkload) => {
        const total = row.totalBatches || 1;
        const active = row.activeBatches || 0;
        const percentage = Math.round((active / total) * 100);
        const color = percentage >= 80 ? 'bg-red-500' : percentage >= 50 ? 'bg-yellow-500' : 'bg-green-500';

        return (
            <div className="w-full">
                <div className="flex justify-between text-xs text-gray-500 mb-0.5">
                    <span>{row.batchLoad}</span>
                    <span>{percentage}%</span>
                </div>
                <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div className={`h-full rounded-full ${color}`} style={{ width: `${percentage}%` }} />
                </div>
            </div>
        );
    };

    if (!isOpen) return null;

    return (
        <>
            <div className="fixed inset-0 bg-black/50 z-50" onClick={onClose} />
            <div className="fixed inset-0 z-50 flex items-center justify-center pointer-events-none">
                <div className="pointer-events-auto bg-white rounded-xl shadow-2xl w-full max-w-5xl mx-4 max-h-[90vh] overflow-y-auto">
                    {/* Modal Header */}
                    <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 sticky top-0 bg-white z-10">
                        <div className="flex items-center gap-3">
                            <div className="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center">
                                <BarChart3 className="w-5 h-5 text-secondary" />
                            </div>
                            <div>
                                <h2 className="text-lg font-semibold text-primary">Trainers Analysis</h2>
                                <p className="text-xs text-gray-500">Workload analysis & training points</p>
                            </div>
                        </div>
                        <button onClick={onClose} className="p-1 hover:bg-gray-100 rounded-lg transition-colors">
                            <XCircle className="w-5 h-5 text-gray-500" />
                        </button>
                    </div>

                    {/* Month Navigation */}
                    <div className="px-6 py-3 border-b border-gray-200 bg-gray-50/50 flex items-center justify-between">
                        <button onClick={handlePrevMonth} className="p-1.5 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50" disabled={currentMonthIndex === 0}>
                            <ChevronLeft className="w-5 h-5 text-gray-600" />
                        </button>
                        <div className="flex items-center gap-2">
                            <Calendar className="w-4 h-4 text-primary" />
                            <span className="text-sm font-semibold text-gray-800">{currentMonth}</span>
                        </div>
                        <button onClick={handleNextMonth} className="p-1.5 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50" disabled={currentMonthIndex === months.length - 1}>
                            <ChevronRight className="w-5 h-5 text-gray-600" />
                        </button>
                    </div>

                    {/* Stats Cards */}
                    <div className="px-6 py-4 border-b border-gray-200 bg-gray-50/30">
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                            <div className="bg-white rounded-lg border border-gray-200 p-3">
                                <div className="flex items-center justify-between">
                                    <div>
                                        <p className="text-xs text-gray-500">Total Trainers</p>
                                        <p className="text-xl font-bold text-primary">{totalTrainers}</p>
                                    </div>
                                    <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                                        <Users className="w-4 h-4 text-primary" />
                                    </div>
                                </div>
                            </div>
                            <div className="bg-white rounded-lg border border-gray-200 p-3">
                                <div className="flex items-center justify-between">
                                    <div>
                                        <p className="text-xs text-gray-500">Active Batches</p>
                                        <p className="text-xl font-bold text-blue-600">{totalActiveBatches}</p>
                                    </div>
                                    <div className="w-8 h-8 rounded-full bg-blue-50 flex items-center justify-center">
                                        <Calendar className="w-4 h-4 text-blue-600" />
                                    </div>
                                </div>
                            </div>
                            <div className="bg-white rounded-lg border border-gray-200 p-3">
                                <div className="flex items-center justify-between">
                                    <div>
                                        <p className="text-xs text-gray-500">Training Days</p>
                                        <p className="text-xl font-bold text-green-600">{totalTrainingDays}</p>
                                    </div>
                                    <div className="w-8 h-8 rounded-full bg-green-50 flex items-center justify-center">
                                        <TrendingUp className="w-4 h-4 text-green-600" />
                                    </div>
                                </div>
                            </div>
                            <div className="bg-white rounded-lg border border-gray-200 p-3">
                                <div className="flex items-center justify-between">
                                    <div>
                                        <p className="text-xs text-gray-500">Total Points</p>
                                        <p className="text-xl font-bold text-secondary">{totalPoints}</p>
                                    </div>
                                    <div className="w-8 h-8 rounded-full bg-secondary/10 flex items-center justify-center">
                                        <Award className="w-4 h-4 text-secondary" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Tabs */}
                    <div className="px-6 pt-4 border-b border-gray-200">
                        <div className="flex gap-1 bg-gray-100 p-1 rounded-lg">
                            <button
                                onClick={() => setActiveTab('workload')}
                                className={`
                                    flex-1 flex items-center justify-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all
                                    ${activeTab === 'workload' ? 'bg-white text-secondary shadow-sm' : 'text-gray-600 hover:text-gray-800'}
                                `}
                            >
                                <BarChart3 className="w-4 h-4" />
                                Workload Analysis
                            </button>
                            <button
                                onClick={() => setActiveTab('roster')}
                                className={`
                                    flex-1 flex items-center justify-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all
                                    ${activeTab === 'roster' ? 'bg-white text-secondary shadow-sm' : 'text-gray-600 hover:text-gray-800'}
                                `}
                            >
                                <PieChart className="w-4 h-4" />
                                Roster
                            </button>
                        </div>
                    </div>

                    {/* Tab Content */}
                    <div className="px-6 py-4">
                        {activeTab === 'workload' ? (
                            <div>
                                {/* Workload Stats Summary */}
                                <div className="grid grid-cols-3 gap-3 mb-4">
                                    <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-center">
                                        <p className="text-xs text-red-600">Over Cap</p>
                                        <p className="text-lg font-bold text-red-700">{overCapCount}</p>
                                        <p className="text-xs text-red-500">{((overCapCount / totalTrainers) * 100).toFixed(0)}% of trainers</p>
                                    </div>
                                    <div className="bg-green-50 border border-green-200 rounded-lg p-3 text-center">
                                        <p className="text-xs text-green-600">Available</p>
                                        <p className="text-lg font-bold text-green-700">{availableCount}</p>
                                        <p className="text-xs text-green-500">{((availableCount / totalTrainers) * 100).toFixed(0)}% of trainers</p>
                                    </div>
                                    <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
                                        <p className="text-xs text-gray-600">Inactive</p>
                                        <p className="text-lg font-bold text-gray-700">{inactiveCount}</p>
                                        <p className="text-xs text-gray-500">{((inactiveCount / totalTrainers) * 100).toFixed(0)}% of trainers</p>
                                    </div>
                                </div>

                                {/* Workload Table */}
                                <div className="overflow-x-auto">
                                    <table className="w-full border-collapse">
                                        <thead>
                                            <tr className="bg-gray-50 border-b border-gray-200">
                                                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Rank</th>
                                                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Name</th>
                                                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Training Days</th>
                                                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Batch Load</th>
                                                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Points</th>
                                                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {workloadData.map((row, index) => (
                                                <tr key={row.id} className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                                    <td className="px-4 py-3 text-sm font-medium text-gray-600">{index + 1}</td>
                                                    <td className="px-4 py-3">
                                                        <div className="flex items-center gap-3">
                                                            <div
                                                                className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0"
                                                                style={{ backgroundColor: row.avatarColor }}
                                                            >
                                                                {row.initials}
                                                            </div>
                                                            <span className="text-sm font-medium text-gray-900">{row.name}</span>
                                                        </div>
                                                    </td>
                                                    <td className="px-4 py-3 text-sm text-gray-700">{row.trainingDays}</td>
                                                    <td className="px-4 py-3 min-w-[150px]">{renderWorkloadProgress(row)}</td>
                                                    <td className="px-4 py-3 text-sm font-bold text-primary">{row.points}</td>
                                                    <td className="px-4 py-3">{getStatusBadge(row.status)}</td>
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        ) : (
                            <div>
                                {/* Roster Header */}
                                <div className="flex items-center justify-between mb-4">
                                    <div className="text-sm text-gray-500">Roster</div>
                                    <div className="flex items-center gap-2 bg-gray-100 px-3 py-1.5 rounded-lg">
                                        <span className="text-xs text-gray-500">All domains</span>
                                        <ChevronDown className="w-4 h-4 text-gray-400" />
                                    </div>
                                </div>

                                {/* Roster - Simple List */}
                                <div className="overflow-x-auto border border-gray-200 rounded-xl">
                                    <table className="w-full border-collapse">
                                        <thead>
                                            <tr className="bg-gray-50 border-b border-gray-200">
                                                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Trainer</th>
                                                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Batch Load</th>
                                                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {rosterData.map((row) => (
                                                <tr key={row.id} className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                                    <td className="px-4 py-3">
                                                        <div className="flex items-center gap-3">
                                                            <div
                                                                className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0"
                                                                style={{ backgroundColor: row.avatarColor }}
                                                            >
                                                                {row.initials}
                                                            </div>
                                                            <span className="text-sm font-medium text-gray-900">{row.name}</span>
                                                            <span className="text-xs text-gray-400 ml-1">Trainer</span>
                                                        </div>
                                                    </td>
                                                    <td className="px-4 py-3 min-w-[200px]">{renderRosterProgress(row)}</td>
                                                    <td className="px-4 py-3">
                                                        <div className="flex items-center gap-2">
                                                            {getStatusIcon(row.matchStatus)}
                                                            <span className={`text-sm font-medium ${getStatusTextColor(row.matchStatus)}`}>{row.matchStatus}</span>
                                                        </div>
                                                    </td>
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                </div>

                                {/* Domain Filter - Bottom */}
                                <div className="mt-4 flex items-center justify-end gap-2">
                                    <span className="text-xs text-gray-400">Filter by domain:</span>
                                    <div className="flex gap-1">
                                        <button className="px-2.5 py-1 rounded-md text-xs font-medium bg-secondary text-white">All</button>
                                        <button className="px-2.5 py-1 rounded-md text-xs font-medium text-gray-600 hover:bg-gray-100">Tech</button>
                                        <button className="px-2.5 py-1 rounded-md text-xs font-medium text-gray-600 hover:bg-gray-100">Non-Tech</button>
                                    </div>
                                </div>
                            </div>
                        )}
                    </div>

                    {/* Modal Footer */}
                    <div className="flex items-center justify-end px-6 py-4 border-t border-gray-200 sticky bottom-0 bg-white">
                        <ButtonUI variant="outline" size="md" onClick={onClose}>
                            Close
                        </ButtonUI>
                    </div>
                </div>
            </div>
        </>
    );
};

export default TrainerAnalysisModal;