{% extends "base.html" %}

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

{% block content %}
<div class="max-w-3xl mx-auto">
    <h1 class="text-2xl font-bold mb-6">Your Profile</h1>

    <!-- Flash Messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    <div class="mb-6">
        {% for category, message in messages %}
        <div class="p-3 rounded {% if category == 'error' %}bg-red-100 text-red-700{% else %}bg-green-100 text-green-700{% endif %}">
            {{ message }}
        </div>
        {% endfor %}
    </div>
    {% endif %}
    {% endwith %}

    <!-- Import Options -->
    <div class="bg-white rounded-lg shadow p-6 mb-6">
        <h2 class="text-lg font-semibold border-b pb-2 mb-4">Import Your Resume</h2>
        <p class="text-gray-600 text-sm mb-4">
            Upload your resume to automatically extract your background for tailored applications.
        </p>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- File Upload -->
            <div class="border rounded-lg p-4">
                <h3 class="font-medium mb-2">Upload Resume</h3>
                <form action="/profile/upload" method="POST" enctype="multipart/form-data" class="space-y-3">
                    <input type="file" name="resume_file"
                           accept=".pdf,.docx,.doc,.txt"
                           class="w-full border rounded px-3 py-2 text-sm">
                    <input type="hidden" name="replace_existing" value="1">
                    <button type="submit"
                            class="w-full bg-primary text-white px-4 py-2 rounded hover:bg-blue-700 text-sm">
                        Upload Resume
                    </button>
                </form>
                <p class="text-gray-400 text-xs mt-2">PDF, DOCX, TXT</p>
            </div>

            <!-- LinkedIn Import -->
            <div class="border rounded-lg p-4">
                <h3 class="font-medium mb-2">LinkedIn</h3>
                <form action="/profile/import-linkedin" method="POST" class="space-y-3">
                    <input type="url" name="linkedin_url"
                           class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-primary"
                           placeholder="linkedin.com/in/username">
                    <button type="submit"
                            class="w-full bg-blue-700 text-white px-4 py-2 rounded hover:bg-blue-800 text-sm">
                        Import LinkedIn
                    </button>
                </form>
                <p class="text-gray-400 text-xs mt-2">Opens browser if login needed</p>
            </div>

            <!-- GitHub Import -->
            <div class="border rounded-lg p-4">
                <h3 class="font-medium mb-2">GitHub</h3>
                <form action="/profile/import-github" method="POST" class="space-y-3">
                    <input type="text" name="github_url"
                           class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-primary"
                           placeholder="github.com/username">
                    <button type="submit"
                            class="w-full bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-900 text-sm">
                        Import GitHub
                    </button>
                </form>
                <p class="text-gray-400 text-xs mt-2">Public repos & languages</p>
            </div>
        </div>

        <!-- Background Status -->
        {% if profile.background %}
        <div class="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
            <div class="flex items-center justify-between">
                <div>
                    <span class="text-green-700 font-medium">Resume loaded</span>
                    <span class="text-green-600 text-sm ml-2">({{ profile.background|length }} characters)</span>
                </div>
                <button onclick="document.getElementById('background-preview').classList.toggle('hidden')"
                        class="text-green-700 text-sm hover:underline">
                    Preview
                </button>
            </div>
            <div id="background-preview" class="hidden mt-3 p-3 bg-white rounded border text-sm text-gray-700 max-h-48 overflow-auto whitespace-pre-wrap font-mono">{{ profile.background[:2000] }}{% if profile.background|length > 2000 %}...{% endif %}</div>
        </div>
        {% else %}
        <div class="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
            <span class="text-yellow-700">No resume uploaded yet. Upload your resume above to get started.</span>
        </div>
        {% endif %}
    </div>

    <!-- Contact Info Form -->
    <form method="POST" class="space-y-6">
        <div class="bg-white rounded-lg shadow p-6 space-y-4">
            <h2 class="text-lg font-semibold border-b pb-2">Contact Information</h2>
            <p class="text-gray-600 text-sm">
                Review and update your contact details. These are auto-filled from your resume.
            </p>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                <input type="text" name="name" value="{{ profile.name }}"
                       class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary focus:border-primary"
                       placeholder="John Doe">
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                    <input type="email" name="email" value="{{ profile.email }}"
                           class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary"
                           placeholder="john@example.com">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                    <input type="text" name="phone" value="{{ profile.phone }}"
                           class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary"
                           placeholder="(555) 123-4567">
                </div>
            </div>
        </div>

        <div class="flex justify-end gap-4">
            <a href="/" class="px-6 py-2 border rounded-lg hover:bg-gray-50">Cancel</a>
            <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-700">
                Save Contact Info
            </button>
        </div>
    </form>

    <!-- Clear Profile -->
    <form action="/profile/clear" method="POST" class="mt-6" onsubmit="return confirm('Clear all profile data including resume? This cannot be undone.');">
        <button type="submit" class="text-sm text-red-600 hover:underline">
            Clear all profile data
        </button>
    </form>
</div>
{% endblock %}