{% extends "base.html" %}

{% block title %}Results - {{ search.name }} - CertPatrol Orchestrator{% endblock %}

{% block content %}
<style>
    .results-table {
        table-layout: fixed;
    }
    .results-table .domain-cell {
        word-break: break-word;
    }
</style>
<div class="px-4 sm:px-0">
    <!-- Breadcrumbs -->
    <nav class="flex flex-wrap mb-6" aria-label="Breadcrumb">
        <ol class="inline-flex flex-wrap items-center gap-1 md:gap-3">
            <li class="inline-flex items-center">
                <a href="/" class="inline-flex items-center text-sm font-medium text-gray-600 hover:text-blue-600">
                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
                    </svg>
                    Dashboard
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                    </svg>
                    <a href="/projects" class="ml-1 text-sm font-medium text-gray-600 hover:text-blue-600 md:ml-2">Projects</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                    </svg>
                    <a href="/projects/{{ search.project_id }}/searches" class="ml-1 text-sm font-medium text-gray-600 hover:text-blue-600 md:ml-2" id="project-breadcrumb">Project</a>
                </div>
            </li>
            <li aria-current="page">
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="ml-1 text-sm font-medium text-gray-700 md:ml-2">{{ search.name }}</span>
                </div>
            </li>
        </ol>
    </nav>

    <div class="mb-6">
        <h2 class="text-2xl font-bold text-gray-900">{{ search.name }}</h2>
        <p class="text-gray-600 mt-1">Pattern: <code class="bg-gray-100 px-2 py-1 rounded">{{ search.pattern }}</code></p>
    </div>

    <!-- Stats & Controls -->
    <div class="bg-white shadow-sm rounded-xl border border-gray-200 p-6 mb-6">
        <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div class="flex flex-wrap items-center gap-6 md:gap-8">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Total Results</p>
                    <p class="text-3xl font-bold text-gray-900" id="total-results">-</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 mb-1">Status</p>
                    <p class="text-lg font-semibold flex items-center" id="search-status-display">
                        <span id="search-status">-</span>
                    </p>
                </div>
            </div>
            <div class="flex flex-wrap items-center gap-2" id="search-controls">
                <!-- Controls will be loaded here -->
            </div>
        </div>
    </div>

    <!-- Results Table -->
    <div class="bg-white shadow rounded-lg overflow-hidden">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Discovered Domains</h3>
            <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between mb-4">
                <div class="flex flex-col sm:flex-row sm:items-end gap-3">
                    <label class="flex flex-col text-sm text-gray-600">
                        <span class="font-medium text-gray-700 mb-1">Minimum Score</span>
                        <input type="number" id="minScoreFilter" class="w-full sm:w-36 rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-blue-500" placeholder="e.g. 80" min="0">
                    </label>
                    <label class="flex flex-col text-sm text-gray-600">
                        <span class="font-medium text-gray-700 mb-1">Risk Level</span>
                        <select id="riskFilter" class="w-full sm:w-40 rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-blue-500">
                            <option value="">All</option>
                            <option value="critical">Critical</option>
                            <option value="high">High</option>
                            <option value="medium">Medium</option>
                            <option value="low">Low</option>
                            <option value="unknown">Unknown</option>
                        </select>
                    </label>
                </div>
                <button id="resetFilters" class="inline-flex items-center justify-center rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
                    Reset Filters
                </button>
            </div>
            <div class="overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200 results-table">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" style="width:50%">Domain</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" style="width:18%">Risk</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" style="width:12%">Score</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" style="width:20%">Discovered At</th>
                        </tr>
                    </thead>
                    <tbody id="results-table" class="bg-white divide-y divide-gray-200">
                        <tr>
                            <td colspan="4" class="px-6 py-4 text-sm text-gray-500">Loading...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            <div class="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <button id="prevBtn" onclick="prevPage()" class="w-full bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded text-sm font-medium disabled:opacity-50 sm:w-auto" disabled>
                    Previous
                </button>
                <span class="text-sm text-gray-600">
                    Page <span id="currentPage">1</span>
                </span>
                <button id="nextBtn" onclick="nextPage()" class="w-full bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded text-sm font-medium disabled:opacity-50 sm:w-auto">
                    Next
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const searchId = {{ search.id }};
    const projectId = {{ search.project_id }};
    let currentOffset = 0;
    const limit = 50;
    let totalResults = 0;

    const minScoreInput = document.getElementById('minScoreFilter');
    const riskSelect = document.getElementById('riskFilter');
    const resetFiltersBtn = document.getElementById('resetFilters');

    function getFilters() {
        const filters = {};
        const minValue = parseInt(minScoreInput.value, 10);
        if (!Number.isNaN(minValue)) {
            filters.min_score = minValue;
        }
        if (riskSelect.value) {
            filters.risk = riskSelect.value;
        }
        return filters;
    }

    function renderRiskBadge(risk) {
        if (!risk) {
            return '<span class="text-sm text-gray-400">-</span>';
        }
        const classes = {
            critical: 'bg-red-100 text-red-800',
            high: 'bg-orange-100 text-orange-800',
            medium: 'bg-yellow-100 text-yellow-800',
            low: 'bg-blue-100 text-blue-800',
            unknown: 'bg-gray-100 text-gray-700',
        };
        const badgeClass = classes[risk] || classes.unknown;
        return `<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold ${badgeClass}">${risk.toUpperCase()}</span>`;
    }

    function renderMeta(result) {
        if (!result.risk_level || result.risk_level === 'unknown') {
            return '';
        }
        const meta = [];
        if (result.matched_keyword) {
            meta.push(`Keyword: ${result.matched_keyword}`);
        }
        if (result.matched_tld) {
            meta.push(`TLD: ${result.matched_tld}`);
        }
        if (!meta.length) {
            return '';
        }
        return `<div class="mt-1 text-xs text-gray-500">${meta.join(' • ')}</div>`;
    }

    function bindFilterControls() {
        const triggerReload = () => {
            currentOffset = 0;
            loadResults();
        };
        minScoreInput.addEventListener('change', triggerReload);
        minScoreInput.addEventListener('keyup', (event) => {
            if (event.key === 'Enter') {
                triggerReload();
            }
        });
        riskSelect.addEventListener('change', triggerReload);
        resetFiltersBtn.addEventListener('click', () => {
            minScoreInput.value = '';
            riskSelect.value = '';
            triggerReload();
        });
    }

    async function loadProjectName() {
        try {
            const res = await fetch(`/api/projects/${projectId}`);
            if (!res.ok) {
                throw new Error('Failed to load project');
            }
            const project = await res.json();
            document.getElementById('project-breadcrumb').textContent = project.name;
        } catch (error) {
            console.error('Error loading project name:', error);
        }
    }

    async function loadResults() {
        try {
            const filters = getFilters();
            const params = new URLSearchParams({
                limit: limit.toString(),
                offset: currentOffset.toString(),
            });
            if (filters.min_score !== undefined) {
                params.append('min_score', filters.min_score);
            }
            if (filters.risk) {
                params.append('risk', filters.risk);
            }

            const res = await fetch(`/api/searches/${searchId}/results?${params.toString()}`);
            if (!res.ok) {
                throw new Error('Failed to load results');
            }
            const data = await res.json();

            if (data.filters) {
                if (typeof data.filters.min_score === 'number') {
                    minScoreInput.value = data.filters.min_score;
                } else if (data.filters.min_score === null) {
                    minScoreInput.value = '';
                }
                if (data.filters.risk) {
                    riskSelect.value = data.filters.risk;
                } else {
                    riskSelect.value = '';
                }
            }

            totalResults = data.total;
            document.getElementById('total-results').textContent = totalResults;

            const table = document.getElementById('results-table');
            if (!data.results.length) {
                const message = currentOffset === 0 ? 'No results yet' : 'No more results';
                table.innerHTML = `<tr><td colspan="4" class="px-6 py-4 text-sm text-gray-500">${message}</td></tr>`;
            } else {
                table.innerHTML = data.results.map((r) => {
                    const riskBadge = renderRiskBadge(r.risk_level);
                    const score = typeof r.score === 'number' ? r.score : '-';
                    const discoveredAt = r.discovered_at ? new Date(r.discovered_at).toLocaleString() : '-';
                    const meta = renderMeta(r);
                    return `
                        <tr>
                            <td class="domain-cell px-6 py-4 text-sm font-medium text-gray-900 whitespace-normal break-words align-top leading-5">
                                ${r.domain}${meta}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap align-top text-sm">${riskBadge}</td>
                            <td class="px-6 py-4 whitespace-nowrap align-top text-sm text-gray-700">${score}</td>
                            <td class="px-6 py-4 whitespace-nowrap align-top text-sm text-gray-500">${discoveredAt}</td>
                        </tr>
                    `;
                }).join('');
            }

            document.getElementById('prevBtn').disabled = currentOffset === 0;
            document.getElementById('nextBtn').disabled = currentOffset + limit >= totalResults;
            document.getElementById('currentPage').textContent = Math.floor(currentOffset / limit) + 1;

            await refreshStatus();
        } catch (error) {
            console.error('Error loading results:', error);
        }
    }

    async function refreshStatus() {
        try {
            const statusRes = await fetch(`/api/searches/${searchId}`);
            if (!statusRes.ok) {
                throw new Error('Failed to load status');
            }
            const search = await statusRes.json();
            const statusEl = document.getElementById('search-status');

            let statusHTML = '';
            if (search.status === 'running') {
                statusHTML = '<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800"><span class="w-2 h-2 mr-2 bg-green-400 rounded-full animate-pulse"></span>RUNNING</span>';
            } else if (search.status === 'stopped') {
                statusHTML = '<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800">STOPPED</span>';
            } else {
                statusHTML = '<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">CRASHED</span>';
            }
            statusEl.innerHTML = statusHTML;

            const controlsEl = document.getElementById('search-controls');
            let controlsHTML = '';
            if (search.status === 'stopped' || search.status === 'crashed') {
                controlsHTML = `
                    <button onclick="startSearch()" class="inline-flex w-full items-center justify-center rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 sm:w-auto">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        Start Search
                    </button>
                `;
            } else {
                controlsHTML = `
                    <button onclick="stopSearch()" class="inline-flex w-full items-center justify-center rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700 sm:w-auto">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"></path>
                       </svg>
                        Stop Search
                    </button>
                `;
            }
            controlsEl.innerHTML = controlsHTML;
        } catch (error) {
            console.error('Error refreshing status:', error);
        }
    }

    function nextPage() {
        if (currentOffset + limit < totalResults) {
            currentOffset += limit;
            loadResults();
        }
    }

    function prevPage() {
        if (currentOffset > 0) {
            currentOffset -= limit;
            loadResults();
        }
    }

    async function startSearch() {
        try {
            const res = await fetch(`/api/searches/${searchId}/start`, { method: 'POST' });
            if (res.ok) {
                setTimeout(loadResults, 500);
            } else {
                const error = await res.json();
                alert('Error: ' + error.error);
            }
        } catch (error) {
            alert('Error starting search: ' + error);
        }
    }

    async function stopSearch() {
        if (!confirm('Stop this search?')) return;
        try {
            const res = await fetch(`/api/searches/${searchId}/stop`, { method: 'POST' });
            if (res.ok) {
                setTimeout(loadResults, 500);
            } else {
                const error = await res.json();
                alert('Error: ' + error.error);
            }
        } catch (error) {
            alert('Error stopping search: ' + error);
        }
    }

    function autoRefresh() {
        loadResults();
    }

    bindFilterControls();
    loadProjectName();
    loadResults();
    setInterval(autoRefresh, 15000);
</script>
{% endblock %}