{% extends 'layouts/base.html' %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "Coleção de Peixes" %}{% endblock %}

{% block extrastyle %}
<style>
    .collection-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 20px;
    }

    .progress-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 20px;
        padding: 30px;
        color: white;
        margin-bottom: 30px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    }

    .progress-bar-container {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        height: 40px;
        overflow: hidden;
        margin-top: 15px;
    }

    .progress-bar-fill {
        background: linear-gradient(90deg, #4ade80, #22c55e);
        height: 100%;
        transition: width 0.5s;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    .fish-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }

    .fish-card {
        background: white;
        border-radius: 15px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
        position: relative;
    }

    .fish-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    }

    .fish-card.caught {
        border: 3px solid #22c55e;
    }

    .fish-card.not-caught {
        opacity: 0.5;
        filter: grayscale(100%);
    }

    .fish-image {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border-radius: 10px;
        margin: 0 auto 15px;
        display: block;
    }

    .fish-icon {
        font-size: 5rem;
        margin-bottom: 15px;
    }

    .fish-card.not-caught .fish-icon::after {
        content: '?';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3rem;
        color: #999;
    }

    .rarity-common { border-left: 5px solid #9ca3af; }
    .rarity-rare { border-left: 5px solid #3b82f6; }
    .rarity-epic { border-left: 5px solid #a855f7; }
    .rarity-legendary { border-left: 5px solid #fbbf24; }

    .catch-count {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #22c55e;
        color: white;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        box-shadow: 0 3px 10px rgba(34, 197, 94, 0.5);
    }

    .not-caught-badge {
        background: #ef4444;
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 0.875rem;
        margin-top: 10px;
        display: inline-block;
    }

    .rarity-badge {
        padding: 5px 15px;
        border-radius: 20px;
        font-weight: bold;
        font-size: 0.875rem;
        display: inline-block;
        margin-top: 10px;
    }

    .rarity-badge.common { background: #9ca3af; color: white; }
    .rarity-badge.rare { background: #3b82f6; color: white; }
    .rarity-badge.epic { background: #a855f7; color: white; }
    .rarity-badge.legendary { background: #fbbf24; color: black; }
</style>
{% endblock %}

{% block content %}
<div class="collection-container">
    <h1 class="text-center mb-4">🏆 {% trans "Coleção de Peixes" %}</h1>

    <!-- Progress Card -->
    <div class="progress-card">
        <h3>{% trans "Progresso da Coleção" %}</h3>
        <p>{% trans "Você capturou" %} <strong>{{ caught_count }}</strong> {% trans "de" %} <strong>{{ total_fish }}</strong> {% trans "peixes disponíveis" %}</p>
        
        <div class="progress-bar-container">
            <div class="progress-bar-fill" style="width: {{ collection_percentage }}%">
                {{ collection_percentage }}%
            </div>
        </div>
    </div>

    <!-- Fish Collection -->
    <div class="fish-grid">
        {% for item in fish_collection %}
        <div class="fish-card rarity-{{ item.fish.rarity }} {% if item.caught %}caught{% else %}not-caught{% endif %}">
            {% if item.caught and item.catch_count > 0 %}
                <div class="catch-count">{{ item.catch_count }}</div>
            {% endif %}
            
            <div class="fish-icon">
                {% if item.caught %}
                    {% if item.fish.image %}
                        <img src="{{ item.fish.image.url }}" alt="{{ item.fish.name }}" class="fish-image">
                    {% else %}
                        {{ item.fish.icon }}
                    {% endif %}
                {% else %}
                    ❓
                {% endif %}
            </div>
            
            <div>
                <strong>
                    {% if item.caught %}
                        {{ item.fish.name }}
                    {% else %}
                        ???
                    {% endif %}
                </strong>
            </div>
            
            <div class="rarity-badge {{ item.fish.rarity }}">
                {{ item.fish.get_rarity_display|upper }}
            </div>
            
            {% if not item.caught %}
                <div class="not-caught-badge">
                    {% trans "Não Capturado" %}
                </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <div class="text-center mt-5">
        <a href="{% url 'games:fishing_game_page' %}" class="btn btn-primary btn-lg rounded-pill">
            🎣 {% trans "Voltar para Pescar" %}
        </a>
    </div>
</div>
{% endblock %}