{% extends "base.html" %}

{% block title %}Dashboard - JobKit{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="text-3xl font-bold text-primary">{{ job_count }}</div>
            <div class="text-gray-600">Saved Jobs</div>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
            <div class="text-3xl font-bold text-green-600">{{ app_count }}</div>
            <div class="text-gray-600">Applications Generated</div>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
            <div class="text-3xl font-bold text-purple-600">
                {% if profile.background %}✓{% else %}—{% endif %}
            </div>
            <div class="text-gray-600">Profile Status</div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-xl font-bold mb-4">Quick Actions</h2>
        <div class="flex flex-wrap gap-4">
            <a href="/search" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700">
                Search Jobs
            </a>
            <a href="/profile" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                {% if profile.background %}Edit Profile{% else %}Set Up Profile{% endif %}
            </a>
            <a href="/jobs" class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200">
                View Saved Jobs
            </a>
            <a href="/settings" class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200">
                Settings
            </a>
        </div>
    </div>

    <!-- Recent Jobs -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold">Recent Jobs</h2>
            <a href="/jobs" class="text-primary hover:underline text-sm">View all →</a>
        </div>

        {% if jobs %}
        <div class="space-y-4">
            {% for job in jobs[:5] %}
            <div class="border rounded-lg p-4 hover:border-primary transition-colors">
                <div class="flex justify-between items-start">
                    <div>
                        <h3 class="font-semibold text-lg">{{ job.title }}</h3>
                        <p class="text-gray-600">{{ job.company }}</p>
                        <p class="text-gray-500 text-sm">{{ job.location }}</p>
                    </div>
                    <div class="flex gap-2">
                        <a href="/jobs/{{ job.id }}" class="text-primary hover:underline text-sm">View</a>
                        <button onclick="generateApplication('{{ job.id }}')"
                                class="bg-green-600 text-white px-3 py-1 rounded text-sm hover:bg-green-700">
                            Generate
                        </button>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-8">
            <p class="text-gray-500 mb-4">No jobs saved yet.</p>
            <a href="/search" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 inline-block">
                Search for Jobs
            </a>
        </div>
        {% endif %}
    </div>

    <!-- Recent Applications -->
    {% if applications %}
    <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-xl font-bold mb-4">Recent Applications</h2>
        <div class="space-y-2">
            {% for app in applications[:5] %}
            <a href="/applications/{{ app.name }}" class="block border rounded-lg p-3 hover:border-primary">
                <span class="font-medium">{{ app.name }}</span>
                <span class="text-gray-500 text-sm ml-2">
                    {% if app.has_resume %}✓ Resume{% endif %}
                    {% if app.has_cover_letter %}✓ Cover Letter{% endif %}
                </span>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>

<!-- Generation Modal -->
<div id="modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
        <div id="modal-content">
            <div class="flex items-center justify-center">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                <span class="ml-3">Generating application...</span>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
async function generateApplication(jobId) {
    const modal = document.getElementById('modal');
    const modalContent = document.getElementById('modal-content');

    modal.classList.remove('hidden');
    modal.classList.add('flex');

    try {
        const response = await fetch(`/generate/${jobId}`, { method: 'POST' });
        const data = await response.json();

        if (data.error) {
            modalContent.innerHTML = `
                <div class="text-red-600">
                    <p class="font-bold">Error</p>
                    <p>${data.error}</p>
                    <button onclick="closeModal()" class="mt-4 bg-gray-200 px-4 py-2 rounded">Close</button>
                </div>
            `;
        } else {
            modalContent.innerHTML = `
                <div class="text-green-600">
                    <p class="font-bold text-lg">✓ Application Generated!</p>
                    <p class="mt-2">Created resume and cover letter for:</p>
                    <p class="font-medium">${data.folder}</p>
                    <div class="mt-4 flex gap-2">
                        <a href="/applications/${encodeURIComponent(data.folder)}"
                           class="bg-primary text-white px-4 py-2 rounded">View Application</a>
                        <button onclick="closeModal()" class="bg-gray-200 px-4 py-2 rounded">Close</button>
                    </div>
                </div>
            `;
        }
    } catch (error) {
        modalContent.innerHTML = `
            <div class="text-red-600">
                <p class="font-bold">Error</p>
                <p>${error.message}</p>
                <button onclick="closeModal()" class="mt-4 bg-gray-200 px-4 py-2 rounded">Close</button>
            </div>
        `;
    }
}

function closeModal() {
    const modal = document.getElementById('modal');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
    location.reload();
}
</script>
{% endblock %}