{% extends "base.html" %}

{% block title %}ATP Dashboard - Agent Comparison{% endblock %}

{% block content %}
<!-- Comparison content rendered by React -->
<div id="comparison-root"></div>
{% endblock %}

{% block scripts %}
<script type="text/babel">
    // Agent Selector Component
    function AgentSelector({ agents, selectedAgents, onSelectionChange, maxAgents = 3 }) {
        const [isOpen, setIsOpen] = React.useState(false);

        const toggleAgent = (agentName) => {
            if (selectedAgents.includes(agentName)) {
                onSelectionChange(selectedAgents.filter(a => a !== agentName));
            } else if (selectedAgents.length < maxAgents) {
                onSelectionChange([...selectedAgents, agentName]);
            }
        };

        return (
            <div className="relative">
                <button
                    type="button"
                    onClick={() => setIsOpen(!isOpen)}
                    className="w-full bg-white border border-gray-300 rounded-md px-4 py-2 text-left flex justify-between items-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                    <span className="truncate">
                        {selectedAgents.length === 0
                            ? 'Select agents to compare...'
                            : selectedAgents.join(', ')}
                    </span>
                    <svg className={`w-5 h-5 transition-transform ${isOpen ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
                {isOpen && (
                    <div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto">
                        {agents.length === 0 ? (
                            <div className="px-4 py-2 text-gray-500">No agents available</div>
                        ) : (
                            agents.map((agent) => {
                                const isSelected = selectedAgents.includes(agent.name);
                                const isDisabled = !isSelected && selectedAgents.length >= maxAgents;
                                return (
                                    <div
                                        key={agent.name}
                                        onClick={() => !isDisabled && toggleAgent(agent.name)}
                                        className={`px-4 py-2 cursor-pointer flex items-center ${
                                            isSelected ? 'bg-blue-50' : ''
                                        } ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100'}`}
                                    >
                                        <input
                                            type="checkbox"
                                            checked={isSelected}
                                            onChange={() => {}}
                                            disabled={isDisabled}
                                            className="mr-3"
                                        />
                                        <div>
                                            <div className="font-medium">{agent.name}</div>
                                            {agent.agent_type && (
                                                <div className="text-sm text-gray-500">{agent.agent_type}</div>
                                            )}
                                        </div>
                                    </div>
                                );
                            })
                        )}
                    </div>
                )}
                <div className="mt-1 text-xs text-gray-500">
                    {selectedAgents.length}/2-{maxAgents} agents selected
                </div>
            </div>
        );
    }

    // Metrics Panel Component
    function MetricsPanel({ agents, showPercentDiff = true, baselineIndex = 0 }) {
        if (!agents || agents.length === 0) {
            return (
                <div className="bg-gray-50 p-4 rounded text-center text-gray-500">
                    No agent data available for comparison
                </div>
            );
        }

        const baseline = agents[baselineIndex];

        const calculatePercentDiff = (value, baselineValue) => {
            if (baselineValue === null || baselineValue === undefined || baselineValue === 0) return null;
            if (value === null || value === undefined) return null;
            return ((value - baselineValue) / Math.abs(baselineValue)) * 100;
        };

        return (
            <div className="bg-white rounded-lg shadow">
                <div className="p-4 border-b bg-gray-50 rounded-t-lg">
                    <h3 className="text-lg font-bold text-gray-800">Metrics Comparison</h3>
                    <p className="text-sm text-gray-500 mt-1">
                        {agents.length} agent{agents.length > 1 ? 's' : ''} compared
                        {showPercentDiff && agents.length > 1 && (
                            <span> - % diff vs {baseline.agent_name}</span>
                        )}
                    </p>
                </div>

                <div className={`grid gap-4 p-4 ${
                    agents.length === 1 ? 'grid-cols-1' :
                    agents.length === 2 ? 'grid-cols-1 md:grid-cols-2' :
                    'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
                }`}>
                    {agents.map((agent, idx) => (
                        <div key={agent.agent_name} className="border rounded-lg overflow-hidden">
                            <div className={`p-3 ${
                                agent.success ? 'bg-green-50 border-b border-green-200' : 'bg-red-50 border-b border-red-200'
                            }`}>
                                <div className="flex items-center justify-between">
                                    <h4 className="font-semibold text-gray-800">{agent.agent_name}</h4>
                                    <span className={`px-2 py-0.5 text-xs rounded-full ${
                                        agent.success
                                            ? 'bg-green-100 text-green-800'
                                            : 'bg-red-100 text-red-800'
                                    }`}>
                                        {agent.success ? 'Passed' : 'Failed'}
                                    </span>
                                </div>
                                {idx === baselineIndex && agents.length > 1 && (
                                    <span className="text-xs text-gray-500">Baseline</span>
                                )}
                            </div>

                            <div className="grid grid-cols-2 gap-2 p-3">
                                <div className="p-2 rounded bg-gray-50 border border-gray-100">
                                    <div className="text-xs text-gray-500 mb-1">Score</div>
                                    <div className="text-sm font-semibold">
                                        {agent.score?.toFixed(1) || '-'}/100
                                    </div>
                                </div>
                                <div className="p-2 rounded bg-gray-50 border border-gray-100">
                                    <div className="text-xs text-gray-500 mb-1">Tokens</div>
                                    <div className="text-sm">
                                        {agent.total_tokens?.toLocaleString() || '-'}
                                    </div>
                                </div>
                                <div className="p-2 rounded bg-gray-50 border border-gray-100">
                                    <div className="text-xs text-gray-500 mb-1">Steps</div>
                                    <div className="text-sm">
                                        {agent.total_steps || '-'}
                                    </div>
                                </div>
                                <div className="p-2 rounded bg-gray-50 border border-gray-100">
                                    <div className="text-xs text-gray-500 mb-1">Duration</div>
                                    <div className="text-sm">
                                        {agent.duration_seconds?.toFixed(2) || '-'}s
                                    </div>
                                </div>
                                <div className="p-2 rounded bg-gray-50 border border-gray-100">
                                    <div className="text-xs text-gray-500 mb-1">Cost</div>
                                    <div className="text-sm">
                                        ${agent.cost_usd?.toFixed(4) || '-'}
                                    </div>
                                </div>
                                <div className="p-2 rounded bg-gray-50 border border-gray-100">
                                    <div className="text-xs text-gray-500 mb-1">Tool Calls</div>
                                    <div className="text-sm">
                                        {agent.tool_calls || '-'}
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                <div className="p-3 border-t bg-gray-50 rounded-b-lg flex flex-wrap gap-4 text-xs">
                    <div className="flex items-center gap-1">
                        <span className="w-3 h-3 rounded bg-green-50 border border-green-200"></span>
                        <span className="text-gray-600">Best value</span>
                    </div>
                    <div className="flex items-center gap-1">
                        <span className="w-3 h-3 rounded bg-red-50 border border-red-200"></span>
                        <span className="text-gray-600">Worst value</span>
                    </div>
                </div>
            </div>
        );
    }

    // Agent Comparison Page Component
    function ComparisonPage() {
        const [agents, setAgents] = React.useState([]);
        const [suiteNames, setSuiteNames] = React.useState([]);
        const [selectedSuite, setSelectedSuite] = React.useState('');
        const [selectedAgents, setSelectedAgents] = React.useState([]);
        const [comparison, setComparison] = React.useState(null);
        const [loading, setLoading] = React.useState(true);
        const [comparing, setComparing] = React.useState(false);
        const [error, setError] = React.useState(null);

        // Load agents and suite names
        React.useEffect(() => {
            const loadData = async () => {
                setLoading(true);
                try {
                    const [agentsData, suitesData] = await Promise.all([
                        api.get('/agents'),
                        api.get('/suites/names/list')
                    ]);
                    setAgents(agentsData.items || agentsData || []);
                    setSuiteNames(suitesData || []);
                    if (suitesData && suitesData.length > 0) {
                        setSelectedSuite(suitesData[0]);
                    }
                } catch (err) {
                    setError(err.message);
                } finally {
                    setLoading(false);
                }
            };
            loadData();
        }, []);

        const loadComparison = async () => {
            if (selectedAgents.length < 2 || !selectedSuite) return;
            setComparing(true);
            setError(null);
            try {
                const agentParams = selectedAgents.map(a => `agents=${encodeURIComponent(a)}`).join('&');
                const data = await api.get(`/compare/agents?suite_name=${encodeURIComponent(selectedSuite)}&${agentParams}`);
                setComparison(data);
            } catch (err) {
                setError(err.message);
            } finally {
                setComparing(false);
            }
        };

        if (loading) {
            return (
                <div className="space-y-4">
                    <SkeletonBox className="h-8 w-48 mb-4" />
                    <div className="bg-white p-4 rounded shadow">
                        <SkeletonBox className="h-10 w-full mb-4" />
                        <SkeletonBox className="h-10 w-full" />
                    </div>
                </div>
            );
        }

        return (
            <ErrorBoundary title="Comparison Error" message="Unable to display agent comparison.">
                <h2 className="text-lg font-bold mb-4">Agent Comparison</h2>

                {error && (
                    <ErrorDisplay
                        error={{ message: error }}
                        title="Comparison Failed"
                    />
                )}

                {/* Selection controls */}
                <div className="bg-white p-4 rounded shadow mb-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label className="block text-sm font-medium text-gray-700 mb-2">
                                Select Suite:
                            </label>
                            <select
                                value={selectedSuite}
                                onChange={(e) => setSelectedSuite(e.target.value)}
                                className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                            >
                                {suiteNames.map((name) => (
                                    <option key={name} value={name}>{name}</option>
                                ))}
                            </select>
                        </div>
                        <div>
                            <label className="block text-sm font-medium text-gray-700 mb-2">
                                Select Agents (2-3):
                            </label>
                            <AgentSelector
                                agents={agents}
                                selectedAgents={selectedAgents}
                                onSelectionChange={setSelectedAgents}
                                maxAgents={3}
                            />
                        </div>
                    </div>
                    <button
                        onClick={loadComparison}
                        disabled={selectedAgents.length < 2 || comparing}
                        className="w-full md:w-auto bg-blue-500 text-white px-6 py-2 rounded-md hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
                    >
                        {comparing ? 'Comparing...' : 'Compare Agents'}
                    </button>
                </div>

                {/* Comparison results */}
                {comparison && (
                    <div>
                        <div className="flex justify-between items-center mb-4">
                            <h3 className="font-bold">Comparison Results: {comparison.suite_name}</h3>
                            <button
                                onClick={() => setComparison(null)}
                                className="text-blue-500 hover:underline"
                            >
                                Reset
                            </button>
                        </div>

                        {comparison.agents && comparison.agents.length > 0 ? (
                            <>
                                {/* Summary table */}
                                <div className="bg-white rounded-lg shadow overflow-hidden mb-4">
                                    <table className="min-w-full">
                                        <thead className="bg-gray-50">
                                            <tr>
                                                <th className="px-4 py-2 text-left">Agent</th>
                                                <th className="px-4 py-2 text-left">Executions</th>
                                                <th className="px-4 py-2 text-left">Avg Success</th>
                                                <th className="px-4 py-2 text-left">Avg Score</th>
                                            </tr>
                                        </thead>
                                        <tbody className="divide-y divide-gray-200">
                                            {comparison.agents.map((agent) => (
                                                <tr key={agent.agent_name}>
                                                    <td className="px-4 py-2 font-medium">{agent.agent_name}</td>
                                                    <td className="px-4 py-2">{agent.total_executions}</td>
                                                    <td className="px-4 py-2">{(agent.avg_success_rate * 100).toFixed(1)}%</td>
                                                    <td className="px-4 py-2">{agent.avg_score?.toFixed(1) || '-'}</td>
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                </div>
                            </>
                        ) : (
                            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-yellow-700">
                                No comparison data available for the selected agents.
                            </div>
                        )}
                    </div>
                )}
            </ErrorBoundary>
        );
    }

    // Render the comparison page
    const comparisonRoot = document.getElementById('comparison-root');
    if (comparisonRoot) {
        const root = ReactDOM.createRoot(comparisonRoot);
        root.render(<ComparisonPage />);
    }
</script>
{% endblock %}