{% extends 'layouts/base-auth.html' %}
{% load static %}
{% load i18n %}
{% load l10n %}
{% load social_tags %}

{% block title %} {% trans "Feed Público" %} {% endblock title %}

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'css/social.css' %}">
<style>
/* Estilos específicos para a view pública */

/* Footer público */
.public-footer {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-top: 3px solid #007bff;
}

.public-footer .btn-primary {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
  box-shadow: 0 2px 10px rgba(0, 123, 255, 0.3);
  transition: all 0.3s ease;
}

.public-footer .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
}

.public-footer .btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.public-footer .bg-primary.bg-opacity-10 {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 123, 255, 0.2);
}

.public-footer .bg-primary.bg-opacity-10 h5 {
  color: white !important;
}

.public-footer a {
  transition: all 0.2s ease;
}

.public-footer a:hover {
  color: #007bff !important;
}

/* Remover interações que requerem login */
.public-view .post-actions .like-btn,
.public-view .post-actions .share-btn {
  opacity: 0.6;
  pointer-events: none;
}

.public-view .post-actions .like-btn::after,
.public-view .post-actions .share-btn::after {
  content: " (Login necessário)";
  font-size: 0.7rem;
  color: #6c757d;
}

/* Ocultar menus de ações para usuários não logados */
.public-view .dropdown-toggle {
  display: none;
}

/* Estilo para indicar que é uma visualização pública */
.public-indicator {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(0, 123, 255, 0.9);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 25px;
  font-size: 0.8rem;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
  .public-indicator {
    position: relative;
    top: 0;
    right: 0;
    margin-bottom: 1rem;
    text-align: center;
  }
}
</style>
{% endblock extrastyle %}

{% block extra_js %}
<script src="{% static 'js/social.js' %}"></script>
{% endblock extra_js %}

{% block content %}
<div class="public-view">
  <!-- Indicador de visualização pública -->
  <div class="public-indicator">
    <i class="bi bi-globe"></i> {% trans "Visualização Pública" %}
  </div>

  <div class="container-fluid py-4">

    <!-- Área central única (sem sidebars) -->
    <div class="row justify-content-center">
      <div class="col-12 col-lg-8">
        
        <!-- Call to action para usuários não logados -->
        <div class="card mb-4 border-primary">
          <div class="card-body text-center">
            <h5 class="card-title text-primary">
              <i class="bi bi-person-plus me-2"></i>{% trans "Junte-se à Nossa Comunidade!" %}
            </h5>
            <p class="card-text">
              {% trans "Faça login para criar posts, curtir, comentar e interagir com outros usuários." %}
            </p>
            <div class="d-flex gap-2 justify-content-center">
              <a href="{% url 'login' %}" class="btn btn-primary">
                <i class="bi bi-box-arrow-in-right me-1"></i>{% trans "Fazer Login" %}
              </a>
              <a href="{% url 'register' %}" class="btn btn-outline-primary">
                <i class="bi bi-person-plus me-1"></i>{% trans "Criar Conta" %}
              </a>
            </div>
          </div>
        </div>

        <!-- Feed de posts públicos -->
        {% if posts %}
          <div class="mb-3">
            <h4 class="text-muted">
              <i class="bi bi-clock-history me-2"></i>{% trans "Últimos Posts Públicos" %}
            </h4>
          </div>
          
          {% for post in posts %}
            <div class="card mb-4 post-card" data-post-id="{{ post.id }}">
              <div class="card-header bg-transparent">
                <div class="d-flex align-items-center">
                  <div class="social-avatar-container me-3" style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden;">
                    {% if post.author.avatar %}
                      <img src="{% url 'serve_files:serve_decrypted_file_with_timestamp' 'home' 'user' 'avatar' post.author.uuid timestamp %}" 
                           alt="Avatar" class="w-100 h-100" style="object-fit: cover;">
                    {% else %}
                      <img src="{% static 'assets/img/team/generic_user.png' %}" 
                           alt="Avatar" class="w-100 h-100" style="object-fit: cover;">
                    {% endif %}
                  </div>
                  <div class="flex-grow-1">
                    <div class="d-flex align-items-center">
                      <h6 class="mb-0">
                        <span class="text-decoration-none">
                          {{ post.author.get_full_name|default:post.author.username }}{% verified_badge post.author "14px" %}
                        </span>
                      </h6>
                      <span class="badge bg-success ms-2">
                        <i class="bi bi-globe"></i> {% trans "Público" %}
                      </span>
                      {% if post.is_pinned %}
                        <span class="badge bg-warning ms-2">
                          <i class="bi bi-pin-angle"></i> {% trans "Fixado" %}
                        </span>
                      {% endif %}
                      {% if post.is_edited %}
                        <span class="badge bg-info ms-2">
                          <i class="bi bi-pencil-square"></i> {% trans "Editado" %}
                        </span>
                      {% endif %}
                    </div>
                    <small class="text-muted">
                      {{ post.created_at|timesince }} {% trans "atrás" %}
                      {% if post.is_edited %}
                        <i class="bi bi-pencil-square text-muted"></i>
                      {% endif %}
                    </small>
                  </div>
                </div>
              </div>
              
              <div class="card-body">
                <!-- Conteúdo do post -->
                <div class="post-content mb-3">
                  {{ post.content|process_content|linebreaks }}
                </div>
                
                <!-- Mídia do post -->
                {% if post.has_media %}
                  {% if post.image %}
                    <div class="post-media mb-3">
                      <img src="{{ post.image.url }}" alt="Post image" class="img-fluid rounded">
                    </div>
                  {% endif %}
                  {% if post.video %}
                    <div class="post-media mb-3">
                      <video controls class="w-100 rounded">
                        <source src="{{ post.video.url }}" type="video/mp4">
                        {% trans "Seu navegador não suporta vídeos." %}
                      </video>
                    </div>
                  {% endif %}
                {% endif %}
                
                <!-- Link compartilhado -->
                {% if post.has_link %}
                  <div class="shared-link mb-3">
                    <div class="card">
                      <div class="card-body">
                        {% if post.link_image %}
                          <img src="{{ post.link_image }}" alt="Link preview" class="img-fluid rounded mb-2">
                        {% endif %}
                        <h6 class="card-title">{{ post.link_title|default:post.link }}</h6>
                        {% if post.link_description %}
                          <p class="card-text text-muted">{{ post.link_description }}</p>
                        {% endif %}
                        <a href="{{ post.link }}" target="_blank" class="btn btn-sm btn-outline-primary">
                          <i class="bi bi-box-arrow-up-right"></i> {% trans "Abrir link" %}
                        </a>
                      </div>
                    </div>
                  </div>
                {% endif %}
                
                <!-- Hashtags -->
                {% if post.hashtags.all %}
                  <div class="hashtags mb-3">
                    {% for post_hashtag in post.hashtags.all %}
                      <span class="badge bg-primary me-1">
                        #{{ post_hashtag.hashtag.name }}
                      </span>
                    {% endfor %}
                  </div>
                {% endif %}
                
                <!-- Estatísticas do post -->
                <div class="post-stats d-flex justify-content-between align-items-center text-muted small mb-3">
                  <div>
                    <i class="bi bi-eye"></i> {{ post.views_count }} {% trans "visualizações" %}
                  </div>
                  <div>
                    <i class="bi bi-heart"></i> {{ post.likes_count }} {% trans "curtidas" %}
                  </div>
                  <div>
                    <i class="bi bi-chat"></i> {{ post.comments_count }} {% trans "comentários" %}
                  </div>
                  <div>
                    <i class="bi bi-share"></i> {{ post.shares_count }} {% trans "compartilhamentos" %}
                  </div>
                </div>
                
                 <!-- Ações que redirecionam para login -->
                 <div class="post-actions d-flex justify-content-between align-items-center">
                   <div class="d-flex gap-2">
                     <!-- Botão de curtir que leva ao login -->
                     <a href="{% url 'login' %}" class="btn btn-outline-primary btn-sm">
                       <i class="bi bi-heart"></i>
                       <span>{{ post.likes_count }}</span>
                     </a>
                     
                     <!-- Botão de comentar que leva ao login -->
                     <a href="{% url 'login' %}" class="btn btn-outline-secondary btn-sm">
                       <i class="bi bi-chat"></i>
                       <span>{{ post.comments_count }}</span>
                     </a>
                     
                     <!-- Botão de compartilhar que leva ao login -->
                     <a href="{% url 'login' %}" class="btn btn-outline-success btn-sm">
                       <i class="bi bi-share"></i>
                     </a>
                   </div>
                   
                   <small class="text-muted">
                     <i class="bi bi-info-circle"></i> {% trans "Faça login para interagir" %}
                   </small>
                 </div>
              </div>
            </div>
          {% endfor %}
          
        {% else %}
          <div class="card">
            <div class="card-body text-center py-5">
              <i class="bi bi-inbox display-1 text-muted"></i>
              <h5 class="mt-3">{% trans "Nenhum post público encontrado" %}</h5>
              <p class="text-muted">{% trans "Seja o primeiro a compartilhar algo público com a comunidade!" %}</p>
              <a href="{% url 'account_signup' %}" class="btn btn-primary">
                <i class="bi bi-person-plus me-1"></i>{% trans "Criar Conta" %}
              </a>
            </div>
          </div>
        {% endif %}
        
        <!-- Hashtags populares -->
        {% if popular_hashtags %}
          <div class="card mt-4">
            <div class="card-header">
              <h6 class="mb-0">
                <i class="bi bi-hash text-primary"></i> {% trans "Hashtags Populares" %}
              </h6>
            </div>
            <div class="card-body">
              <div class="d-flex flex-wrap gap-2">
                {% for hashtag in popular_hashtags %}
                  <span class="badge bg-light text-dark border">
                    #{{ hashtag.name }} <span class="text-primary">({{ hashtag.posts_count }})</span>
                  </span>
                {% endfor %}
              </div>
            </div>
          </div>
        {% endif %}
        
      </div>
    </div>
  </div>
</div>

<!-- Footer público com call-to-action -->
<footer class="public-footer bg-dark text-white py-5 mt-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-8">
        <div class="row">
          <div class="col-md-6">
            <h5 class="mb-3">
              <i class="bi bi-people-fill me-2 text-primary"></i>{% trans "Junte-se à Comunidade" %}
            </h5>
            <p class="text-light mb-3">
              {% trans "Conecte-se, compartilhe e descubra conteúdo incrível. Faça parte da nossa rede social!" %}
            </p>
            <div class="d-flex gap-2 mb-3">
              <a href="{% url 'login' %}" class="btn btn-primary">
                <i class="bi bi-box-arrow-in-right me-1"></i>{% trans "Entrar" %}
              </a>
              <a href="{% url 'register' %}" class="btn btn-outline-light">
                <i class="bi bi-person-plus me-1"></i>{% trans "Cadastrar" %}
              </a>
            </div>
          </div>
          <div class="col-md-6">
            <h6 class="mb-3">{% trans "Recursos da Plataforma" %}</h6>
            <ul class="list-unstyled text-light">
              <li class="mb-2">
                <i class="bi bi-check-circle text-success me-2"></i>{% trans "Compartilhe posts com fotos e vídeos" %}
              </li>
              <li class="mb-2">
                <i class="bi bi-check-circle text-success me-2"></i>{% trans "Interaja com curtidas e comentários" %}
              </li>
              <li class="mb-2">
                <i class="bi bi-check-circle text-success me-2"></i>{% trans "Siga outros usuários interessantes" %}
              </li>
              <li class="mb-2">
                <i class="bi bi-check-circle text-success me-2"></i>{% trans "Use hashtags para descobrir conteúdo" %}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-lg-4 text-center">
        <div class="bg-primary bg-opacity-10 p-4 rounded">
          <i class="bi bi-rocket-takeoff display-4 text-primary mb-3"></i>
          <h5 class="text-primary mb-3">{% trans "Comece Agora!" %}</h5>
          <p class="small text-light mb-3">
            {% trans "Crie sua conta gratuita em segundos e comece a compartilhar." %}
          </p>
          <a href="{% url 'register' %}" class="btn btn-primary btn-lg">
            <i class="bi bi-person-plus me-2"></i>{% trans "Criar Conta Grátis" %}
          </a>
        </div>
      </div>
    </div>
    
    <!-- Linha divisória -->
    <hr class="my-4 border-secondary">
    
    <!-- Links adicionais -->
    <div class="row align-items-center">
      <div class="col-md-6">
        <p class="mb-0 text-muted small">
          <i class="bi bi-shield-check me-1"></i>
          {% trans "Plataforma segura e confiável para toda a comunidade" %}
        </p>
      </div>
      <div class="col-md-6 text-md-end">
        <div class="d-flex justify-content-md-end gap-3">
          <a href="{% url 'login' %}" class="text-light text-decoration-none small">
            <i class="bi bi-box-arrow-in-right me-1"></i>{% trans "Login" %}
          </a>
          <a href="{% url 'register' %}" class="text-light text-decoration-none small">
            <i class="bi bi-person-plus me-1"></i>{% trans "Cadastro" %}
          </a>
          <a href="{% url 'social:public_feed' %}" class="text-light text-decoration-none small">
            <i class="bi bi-globe me-1"></i>{% trans "Feed Público" %}
          </a>
        </div>
      </div>
    </div>
  </div>
</footer>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Adicionar tooltip explicativo aos botões de ação
  const actionButtons = document.querySelectorAll('.post-actions a.btn');
  actionButtons.forEach(btn => {
    btn.setAttribute('title', '{% trans "Clique para fazer login e interagir" %}');
  });
});
</script>
{% endblock content %}