<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Eversync</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
    {% load static %}
    <link rel="icon" href="{% static 'favicon.ico' %}" />
    <link rel="stylesheet" href="{% static 'index-style.css' %}" />
    <link rel="stylesheet" href="{% static 'login-style.css' %}" />

    {% block scripts %}
        {% include "sentry_replay.html" %}
    {% endblock %}

    <style>
        .container {
            display: flex;
            gap: 30px;
            align-items: flex-start;
        }
    
        .welcome-box {
            flex: 0 0 250px;
            padding: 20px;
            border-radius: 8px;
            max-width: 250px;
        }
    
        .content-box {
            margin: 40px auto 0 auto;
            max-width: 600px;
            padding: 20px;
        }
    
        @media (max-width: 700px) {
            .container {
                flex-direction: column;
                align-items: center;
            }
            .welcome-box {
                flex: none;
                width: auto;
                max-width: 90vw;
                margin: 0 0 20px 0;
                padding: 15px;
            }
            .content-box {
                margin: 40px auto 0 auto;
                width: 100%;
            }
        }
        input.form-control,
        textarea.form-control {
            margin-bottom: 10px;
            width: calc(100% - 20px);
            padding: 10px;
            font-size: 15px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background-color: #f9f9f9;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        input.form-control:focus,
        textarea.form-control:focus {
            border-color: #6c63ff;
            box-shadow: 0 0 6px rgba(108, 99, 255, 0.5);
            outline: none;
            background-color: #fff;
        }

        label.form-label {
            font-weight: 600;
            display: block;
            margin-bottom: 6px;
        }

        .dark #chat-log {
        background-color: #1f1f1f;
        border-color: #444;
        color: #e4e6eb;
        }

        .dark #chat-log strong {
        color: #ffffff;
        }

        .dark #chat-log .btn-danger {
        background-color: #a72828;
        }

        input.form-control {
        background-color: white;
        color: black;
        border: 1px solid #666;
        padding: 10px;
        border-radius: 6px;
        font-size: 14px;
        box-sizing: border-box;
        }

        .dark input.form-control {
        background-color: #2a2b2d;
        color: #e4e6eb;
        border: 1px solid #555;
        }

        textarea.form-control {
        background-color: white;
        color: black;
        border: 1px solid #666;
        padding: 10px;
        border-radius: 6px;
        font-size: 14px;
        resize: vertical;
        box-sizing: border-box;
        }

        .dark textarea.form-control {
        background-color: #2a2b2d;
        color: #e4e6eb;
        border: 1px solid #555;
        }

        textarea.form-control:focus {
        outline: none;
        border-color: #4599ff;
        box-shadow: 0 0 0 2px rgba(70, 130, 180, 0.3);
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-content">
            <a href="/"><img src="{% static 'eversync2.png' %}" alt="Eversync Logo" style="height: 80px; margin-right: 10px;" /></a>
            <a href="/" class="logo">eversync</a>
            <div class="nav-links" style="position: relative;">
                <div class="dropdown">
                    <button class="dropdown-toggle" style="background: none; border: none; color: white; font-size: 16px; cursor: pointer;">
                        Welcome, {{ user.username }} <i class="fas fa-caret-down"></i>
                    </button>
                    <div class="dropdown-menu" style="display: none; position: absolute; right: 0; background-color: #333; border: 1px solid #444; border-radius: 4px; padding: 10px; width: 184px;">
                        <form action="{% url 'manage' %}" method="post" style="margin: 0;">
                            {% csrf_token %}
                            <button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Manage Account</button>
                        </form>
                        <form action="{% url 'logoutz' %}" method="post" style="margin: 0;">
                            {% csrf_token %}
                            <button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Log Out</button>
                        </form>
                        <button id="themeToggle" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Toggle Dark Mode</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="content-box">
        <h2 class="mb-4">Send a Message</h2>

        <form id="message-form" method="post">
            {% csrf_token %}
            <div class="mb-3">
                <label for="receiver" class="form-label">Recipient:</label>
                <input type="text" id="receiver" name="receiver" class="form-control" required>
            </div>
            <div class="mb-3">
                <label for="content" class="form-label">Message:</label>
                <textarea id="content" name="content" class="form-control" rows="3" required></textarea>
            </div>
            <button type="submit" class="login-button">Send</button>
        </form>

        <hr class="my-5">
        <h2>Chats</h2>
        <ul>
            {% for user in users %}
                <li>
                    <a href="{% url 'chat_with_user' user.username %}"
                       style="{% if user.unseen_count > 0 %}font-weight: bold;{% endif %}">
                        {{ user.username }}{% if user.unseen_count > 0 %} ({{ user.unseen_count }}){% endif %}
                    </a>
                </li>
            {% endfor %}
        </ul>
        <!--
        <hr class="my-5">

        <h3>Inbox</h3>
        <button class="btn btn-secondary mb-3" onclick="loadMessages()">Refresh</button>
        <ul id="messages" class="list-group"></ul>

        <hr class="my-5">
        <h3>Outbox</h3>
        <button class="btn btn-secondary mb-3" onclick="loadOutbox()">Refresh</button>
        <ul id="outbox-messages" class="list-group"></ul>
        -->
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <script>
        function loadMessages() {
            fetch('/inbox/')
                .then(res => res.json())
                .then(data => {
                    let ul = $('#messages');
                    ul.empty();
                    data.messages.forEach(msg => {
                        ul.append(`<li class="list-group-item">
                            <strong>${msg.sender}</strong>: ${msg.content}<br>
                            <small>${msg.timestamp}</small>
                        </form>
                        </li>`);
                    });
                });
        }
        function loadOutbox() {
            fetch('/outbox/')
                .then(res => res.json())
                .then(data => {
                    let ul = $('#outbox-messages');
                    ul.empty();
                    data.messages.forEach(msg => {
                        ul.append(`<li class="list-group-item">
                            <strong>To: ${msg.receiver}</strong>: ${msg.content}<br>
                            <small>${msg.timestamp}</small>
                            <form action="/delete/${msg.id}/" method="post" style="display:inline;">
                                <input type="hidden" name="csrfmiddlewaretoken" value="${$('input[name="csrfmiddlewaretoken"]').val()}">
                                <button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px; background-color: #dc3545; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer;">Delete</button>
                            </form>
                        </li>`);
                    });
                });
        }

        document.addEventListener('DOMContentLoaded', function () {
            loadMessages();   
            loadOutbox();

            const toggle = document.querySelector('.dropdown-toggle');
            const menu = document.querySelector('.dropdown-menu');
            toggle.addEventListener('click', function () {
                menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
            });

            $('#message-form').on('submit', function (e) {
                e.preventDefault();
                let receiver = $('#receiver').val();
                let content = $('#content').val();
                let csrfToken = $('input[name="csrfmiddlewaretoken"]').val();

                $.post('/send/', {
                    receiver: receiver,
                    content: content,
                    csrfmiddlewaretoken: csrfToken
                }, function (response) {
                    $('#content').val('');
                    loadMessages();
                    loadOutbox();  // Refresh outbox as well after sending
                }).fail(function (xhr) {
                    alert('Error: ' + (xhr.responseJSON?.message || 'Something went wrong.'));
                });
            });
        });

        const toggle = document.getElementById("themeToggle");
        const root = document.documentElement;

        if (localStorage.getItem("theme") === "dark") {
        root.classList.add("dark");
        }

        toggle.addEventListener("click", () => {
        root.classList.toggle("dark");
        if (root.classList.contains("dark")) {
            localStorage.setItem("theme", "dark");
        } else {
            localStorage.setItem("theme", "light");
        }
        });
    </script>
</body>
</html>