{% extends "base.html" %}

{% block title %}Words to Readlang - Home{% endblock %}

{% block content %}
<div class="hero">
    <h2>Convert Vocabulary to Readlang Format</h2>
    <p>Upload your vocabulary exports from Pod101, Language Reactor, and more!</p>
</div>

<div class="action-buttons">
    <a href="{{ url_for('upload.upload_form') }}" class="btn btn-primary btn-large">
        Upload Vocabulary File
    </a>
    <a href="{{ url_for('main.how_to_use') }}" class="btn btn-secondary btn-large">
        How to use
    </a>
</div>

{% if not user_session %}
<section class="login-section" style="margin: 2rem 0;">
    <div style="background: white; padding: 2rem; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 600px; margin: 0 auto;">
        <h3>Continue from Previous Session</h3>
        <p style="color: #6b7280; margin-bottom: 1rem;">If you have a session phrase from a previous visit, enter it below to access your uploads.</p>

        <form action="{{ url_for('main.login') }}" method="POST">
            <div class="form-group">
                <label for="magic_phrase">Session Phrase</label>
                <input type="text"
                       id="magic_phrase"
                       name="magic_phrase"
                       placeholder="adjective-noun-object-action"
                       pattern="[a-z]+-[a-z]+-[a-z]+-[a-z]+"
                       style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-family: 'Monaco', 'Courier New', monospace;"
                       required>
                <small style="display: block; margin-top: 0.25rem; color: #6b7280;">Format: four-words-separated-by-hyphens</small>
            </div>
            <button type="submit" class="btn btn-primary">Continue Session</button>
        </form>
    </div>
</section>
{% endif %}

{% if uploads %}
<section class="recent-uploads">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
        <h3 style="margin: 0;">Recent Uploads</h3>
        <a href="{{ url_for('upload.manage_uploads') }}" class="btn btn-secondary">View All Uploads</a>
    </div>
    <div class="uploads-list">
        {% for upload in uploads %}
        <div class="upload-card">
            <div class="upload-header">
                <h4 style="margin: 0 0 0.75rem 0; font-size: 1.125rem; font-weight: 600; color: #111827;">{{ upload.filename }}</h4>
            </div>
            <div class="upload-meta" style="display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin-bottom: 1rem; font-size: 0.875rem;">
                <span style="color: #6b7280; font-weight: 500;">Format:</span>
                <span style="color: #111827;">{{ upload.file_format }}</span>

                <span style="color: #6b7280; font-weight: 500;">Languages:</span>
                <span class="badge" style="background: white; color: #111827; border: 1px solid #d1d5db; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.875rem; display: inline-block; width: fit-content;">{{ upload|language_pair }}</span>

                <span style="color: #6b7280; font-weight: 500;">Entries:</span>
                <span style="color: #111827;">{{ upload.entry_count }}</span>

                <span style="color: #6b7280; font-weight: 500;">Uploaded:</span>
                <span style="color: #111827;">{{ upload.uploaded_at.strftime('%Y-%m-%d %H:%M') }}</span>
            </div>
            <div class="upload-actions">
                <a href="{{ url_for('preview.preview_upload', upload_id=upload.id) }}" class="btn btn-sm">
                    View & Edit
                </a>
                {% if upload.valid_entry_count > 0 %}
                <a href="{{ url_for('export.export_download', upload_id=upload.id) }}" class="btn btn-sm btn-primary">
                    Export
                </a>
                {% else %}
                <span title="No valid entries to export — fix validation errors first"
                      class="btn btn-sm btn-primary"
                      style="opacity: 0.45; cursor: not-allowed;">
                    Export
                </span>
                {% endif %}
                <button hx-delete="{{ url_for('upload.delete_upload', upload_id=upload.id) }}"
                        hx-confirm="Are you sure you want to delete '{{ upload.filename }}'? This will delete all {{ upload.entry_count }} entries."
                        hx-target="closest .upload-card"
                        hx-swap="outerHTML swap:1s"
                        class="btn btn-sm btn-danger">
                    Delete
                </button>
            </div>
        </div>
        {% endfor %}
    </div>
</section>
{% else %}
<div class="empty-state">
    <p>No uploads yet. Upload your first vocabulary file to get started!</p>
</div>
{% endif %}

<section class="info">
    <h3>Supported Formats</h3>
    <ul>
        <li><strong>Pod101</strong> - FinnishPod101, SpanishPod101, etc. (CSV format)</li>
        <li><strong>Language Reactor</strong> - Netflix/YouTube vocabulary exports (TSV format)</li>
    </ul>

    <h3>Features</h3>
    <ul>
        <li>Validate example sentences contain vocabulary words</li>
        <li>Fetch example sentences from Tatoeba or Leipzig Corpora Collection to complete any missing/invalid examples</li>
        <li>Edit entries before export</li>
        <li>Automatic file splitting for Readlang's 200-entry limit</li>
    </ul>
</section>
{% endblock %}