<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TAGBOOK - Profil ve Destek</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = { darkMode: 'class' };
        if (localStorage.getItem('tagbook_theme') === 'dark') {
            document.documentElement.classList.add('dark');
        }
    </script>
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-[#F3F4F6] dark:bg-[#111827] text-[#1F2937] dark:text-[#F3F4F6] min-h-screen flex flex-col justify-between relative overflow-x-hidden transition-colors duration-300">

    <div id="menu-overlay" class="fixed inset-0 bg-black/40 backdrop-blur-sm z-40 hidden transition-opacity duration-300 opacity-0"></div>

    <aside id="sidebar-menu" class="fixed top-0 right-0 h-full w-72 bg-white dark:bg-[#1F2937] dark:border-l dark:border-gray-800 z-50 shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out flex flex-col justify-between p-6">
        <div>
            <div class="flex justify-between items-center pb-6 border-b border-gray-100 dark:border-gray-800">
                <button id="close-menu-btn" class="p-2 rounded-xl text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
                <div class="flex items-center gap-2">
                    <span class="font-black text-lg tracking-wider text-[#00B140]">TAGBOOK</span>
                    <span>🟢</span>
                </div>
            </div>

            <nav class="mt-8 space-y-2 text-right">
                <a href="panel.html" class="flex items-center justify-end gap-3 px-4 py-3 text-[#6B7280] dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 font-semibold rounded-2xl text-xs transition-all">
                    Ana Panel <span class="text-base">📊</span>
                </a>
                <a href="profil.html" class="flex items-center justify-end gap-3 px-4 py-3 bg-green-50 dark:bg-green-900/30 text-[#00B140] font-bold rounded-2xl border border-green-200/50 dark:border-green-800/50 text-xs transition-all">
                    Profil ve Destek <span class="text-base">🔒</span>
                </a>
                <a href="takvim.html" class="flex items-center justify-end gap-3 px-4 py-3 text-[#6B7280] dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 font-semibold rounded-2xl text-xs transition-all">
                    Çalışma Takvimi <span class="text-base">📅</span>
                </a>
                <a href="aylik-kazanc.html" class="flex items-center justify-end gap-3 px-4 py-3 text-[#6B7280] dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 font-semibold rounded-2xl text-xs transition-all">
                    Aylık Kazançlar <span class="text-base">💰</span>
                </a>
            </nav>
        </div>

        <button id="sidebar-logout-btn" class="w-full flex items-center justify-center gap-2 bg-rose-50 dark:bg-rose-950/30 hover:bg-rose-100 text-rose-600 font-bold py-3.5 rounded-2xl transition-all text-xs border border-rose-100 dark:border-rose-900/50">
            Oturumu Kapat
        </button>
    </aside>

    <header class="bg-white dark:bg-[#1F2937] border-b border-gray-200 dark:border-gray-800 px-4 py-3.5 shadow-sm flex justify-between items-center sticky top-0 z-30 transition-colors duration-300">
        <div class="flex items-center gap-2">
            <a href="panel.html" class="p-1.5 rounded-xl bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 transition-all">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
            </a>
            <h1 class="text-base font-black tracking-wider text-[#00B140]">PROFİL VE DESTEK</h1>
        </div>

        <div class="flex items-center gap-2">
            <button id="theme-toggle-btn" class="p-2 rounded-2xl bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 transition-all text-sm" title="Tema Değiştir">
                🌙
            </button>
            <button id="open-menu-btn" class="p-2 rounded-2xl hover:bg-gray-100 dark:hover:bg-gray-800 text-[#1F2937] dark:text-white transition-all">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 6h16M4 12h16M4 18h16"></path></svg>
            </button>
        </div>
    </header>

    <main class="flex-grow p-4 max-w-md w-full mx-auto space-y-4">
        
        <div class="bg-white dark:bg-[#1F2937] p-1.5 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 grid grid-cols-2 gap-1.5">
            <button id="tab-password-btn" onclick="switchTab('password')" class="py-2.5 rounded-xl font-bold text-xs transition-all bg-[#00B140] text-white shadow-sm">
                🔒 Şifre İşlemleri
            </button>
            <button id="tab-support-btn" onclick="switchTab('support')" class="py-2.5 rounded-xl font-bold text-xs transition-all text-[#6B7280] dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800">
                🎫 Destek / Ticket
            </button>
        </div>

        <div id="tab-password-content" class="space-y-4">
            <div class="bg-white dark:bg-[#1F2937] p-6 rounded-3xl shadow-xl border border-gray-100 dark:border-gray-800 space-y-4">
                <h3 class="text-sm font-bold text-[#1F2937] dark:text-white uppercase tracking-wider mb-2 flex items-center gap-1.5">
                    <span>🔒</span> Şifre Güncelleme
                </h3>
                <form id="password-form" class="space-y-3">
                    <div>
                        <label class="block text-xs font-bold uppercase text-[#6B7280] dark:text-gray-400 mb-1">Kullanıcı Adı</label>
                        <input type="text" id="username-input" disabled class="w-full bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-3 text-xs text-gray-500 dark:text-gray-400 font-bold cursor-not-allowed">
                    </div>
                    <div>
                        <label class="block text-xs font-bold uppercase text-[#6B7280] dark:text-gray-400 mb-1">Eski Şifre</label>
                        <input type="password" id="old-password" placeholder="Mevcut şifrenizi girin" required class="w-full bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-3 text-xs text-[#1F2937] dark:text-white focus:outline-none focus:border-[#00B140]">
                    </div>
                    <div>
                        <label class="block text-xs font-bold uppercase text-[#6B7280] dark:text-gray-400 mb-1">Yeni Şifre</label>
                        <input type="password" id="new-password" placeholder="Yeni şifrenizi girin" required class="w-full bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-3 text-xs text-[#1F2937] dark:text-white focus:outline-none focus:border-[#00B140]">
                    </div>
                    <button type="submit" class="w-full bg-[#00B140] hover:bg-[#009534] text-white font-bold py-3.5 rounded-2xl transition-all text-xs shadow-md">Şifreyi Güncelle</button>
                </form>
                <div id="profile-msg" class="text-xs mt-2 text-center font-medium"></div>
            </div>
        </div>

        <div id="tab-support-content" class="space-y-4 hidden">
            <div class="bg-white dark:bg-[#1F2937] p-6 rounded-3xl shadow-xl border border-gray-100 dark:border-gray-800 space-y-4">
                <h3 class="text-sm font-bold text-[#1F2937] dark:text-white uppercase tracking-wider mb-2 flex items-center gap-1.5">
                    <span>🎫</span> Yeni Destek Talebi Aç
                </h3>
                <form id="ticket-form" class="space-y-3">
                    <div>
                        <label class="block text-xs font-bold uppercase text-[#6B7280] dark:text-gray-400 mb-1">Konu / Sorun</label>
                        <input type="text" id="ticket-subject" placeholder="Örn: Şifremi unuttum" required class="w-full bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-3 text-xs text-[#1F2937] dark:text-white focus:outline-none focus:border-amber-500">
                    </div>
                    <div>
                        <label class="block text-xs font-bold uppercase text-[#6B7280] dark:text-gray-400 mb-1">Açıklama</label>
                        <textarea id="ticket-message" rows="2" placeholder="Detayları yazın..." required class="w-full bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-3 text-xs text-[#1F2937] dark:text-white focus:outline-none focus:border-amber-500"></textarea>
                    </div>
                    <button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3.5 rounded-2xl transition-all text-xs shadow-md">Talep Gönder</button>
                </form>
                <div id="ticket-msg" class="text-xs mt-2 text-center font-medium"></div>
            </div>

            <div class="space-y-3 pt-1">
                <div class="text-xs font-bold text-[#6B7280] dark:text-gray-400 uppercase tracking-wider">Destek Taleplerim ve Yanıtlar</div>
                <div id="my-tickets-container" class="space-y-3">
                    <div class="text-center text-xs text-[#6B7280] py-4">Talepleriniz yükleniyor...</div>
                </div>
            </div>
        </div>

    </main>

    <footer class="text-center text-xs text-[#6B7280] dark:text-gray-400 py-4 border-t border-gray-200 dark:border-gray-800 transition-colors duration-300">
        TAGBOOK &copy; 2026 - Tüm Hakları Saklıdır.
    </footer>

    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js";
        import { getFirestore, collection, addDoc, getDocs, query, where, updateDoc, doc } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-firestore.js";

        const firebaseConfig = {
            apiKey: "AIzaSyD4RDqRamoKpdr45ZsE4Phzt9bQaNooIPk",
            authDomain: "tagbook-app.firebaseapp.com",
            projectId: "tagbook-app",
            storageBucket: "tagbook-app.firebasestorage.app",
            messagingSenderId: "911943425160",
            appId: "1:911943425160:web:d230282445fbb19c99d33d",
            measurementId: "G-L95WBT9SVD"
        };

        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);

        const themeToggleBtn = document.getElementById('theme-toggle-btn');
        function updateThemeIcon() {
            if (document.documentElement.classList.contains('dark')) {
                themeToggleBtn.textContent = '☀️';
            } else {
                themeToggleBtn.textContent = '🌙';
            }
        }
        updateThemeIcon();

        themeToggleBtn.addEventListener('click', () => {
            document.documentElement.classList.toggle('dark');
            if (document.documentElement.classList.contains('dark')) {
                localStorage.setItem('tagbook_theme', 'dark');
            } else {
                localStorage.setItem('tagbook_theme', 'light');
            }
            updateThemeIcon();
        });

        const currentUser = sessionStorage.getItem("tagbook_user");
        if (!currentUser) { window.location.replace("index.html"); }

        document.getElementById('username-input').value = currentUser;

        const openMenuBtn = document.getElementById('open-menu-btn');
        const closeMenuBtn = document.getElementById('close-menu-btn');
        const sidebarMenu = document.getElementById('sidebar-menu');
        const menuOverlay = document.getElementById('menu-overlay');

        function openMenu() { sidebarMenu.classList.remove('translate-x-full'); menuOverlay.classList.remove('hidden'); setTimeout(() => menuOverlay.classList.remove('opacity-0'), 10); }
        function closeMenu() { sidebarMenu.classList.add('translate-x-full'); menuOverlay.classList.add('opacity-0'); setTimeout(() => menuOverlay.classList.add('hidden'), 300); }

        openMenuBtn.addEventListener('click', openMenu);
        closeMenuBtn.addEventListener('click', closeMenu);
        menuOverlay.addEventListener('click', closeMenu);

        window.switchTab = function(tabName) {
            const passwordContent = document.getElementById('tab-password-content');
            const supportContent = document.getElementById('tab-support-content');
            const passwordBtn = document.getElementById('tab-password-btn');
            const supportBtn = document.getElementById('tab-support-btn');

            if (tabName === 'password') {
                passwordContent.classList.remove('hidden');
                supportContent.classList.add('hidden');
                passwordBtn.className = "py-2.5 rounded-xl font-bold text-xs transition-all bg-[#00B140] text-white shadow-sm";
                supportBtn.className = "py-2.5 rounded-xl font-bold text-xs transition-all text-[#6B7280] dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800";
            } else {
                supportContent.classList.remove('hidden');
                passwordContent.classList.add('hidden');
                supportBtn.className = "py-2.5 rounded-xl font-bold text-xs transition-all bg-amber-500 text-white shadow-sm";
                passwordBtn.className = "py-2.5 rounded-xl font-bold text-xs transition-all text-[#6B7280] dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800";
                loadMyTickets();
            }
        };

        const passwordForm = document.getElementById('password-form');
        const profileMsg = document.getElementById('profile-msg');

        passwordForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            profileMsg.textContent = "Kontrol ediliyor...";
            profileMsg.className = "text-xs mt-2 text-center text-[#6B7280]";

            const oldPass = document.getElementById('old-password').value.trim();
            const newPass = document.getElementById('new-password').value.trim();

            try {
                const q = query(collection(db, "users"), where("username", "==", currentUser));
                const querySnapshot = await getDocs(q);

                if (!querySnapshot.empty) {
                    const userDoc = querySnapshot.docs[0];
                    const userData = userDoc.data();

                    if (userData.password !== oldPass) {
                        profileMsg.textContent = "Eski şifreniz hatalı!";
                        profileMsg.className = "text-xs mt-2 text-center text-rose-500 font-bold";
                        return;
                    }

                    await updateDoc(doc(db, "users", userDoc.id), {
                        password: newPass
                    });
                    profileMsg.textContent = "Şifreniz başarıyla güncellendi!";
                    profileMsg.className = "text-xs mt-2 text-center text-[#00B140] font-bold";
                    passwordForm.reset();
                    document.getElementById('username-input').value = currentUser;
                }
            } catch (error) {
                profileMsg.textContent = "Hata: " + error.message;
                profileMsg.className = "text-xs mt-2 text-center text-rose-500 font-bold";
            }
        });

        const ticketForm = document.getElementById('ticket-form');
        const ticketMsg = document.getElementById('ticket-msg');

        ticketForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            ticketMsg.textContent = "Gönderiliyor...";
            ticketMsg.className = "text-xs mt-2 text-center text-[#6B7280]";

            const subject = document.getElementById('ticket-subject').value.trim();
            const message = document.getElementById('ticket-message').value.trim();

            try {
                await addDoc(collection(db, "tickets"), {
                    username: currentUser,
                    subject: subject,
                    message: message,
                    status: "Açık",
                    adminReply: "",
                    createdAt: new Date().toISOString()
                });

                ticketMsg.textContent = "Destek talebiniz başarıyla oluşturuldu!";
                ticketMsg.className = "text-xs mt-2 text-center text-[#00B140] font-bold";
                ticketForm.reset();
                loadMyTickets();
            } catch (error) {
                ticketMsg.textContent = "Hata: " + error.message;
                ticketMsg.className = "text-xs mt-2 text-center text-rose-500 font-bold";
            }
        });

        async function loadMyTickets() {
            const container = document.getElementById('my-tickets-container');
            try {
                const q = query(collection(db, "tickets"), where("username", "==", currentUser));
                const querySnapshot = await getDocs(q);

                if (querySnapshot.empty) {
                    container.innerHTML = `<div class="bg-white dark:bg-[#1F2937] p-5 rounded-2xl shadow-md text-center text-xs text-[#6B7280]">Henüz destek talebiniz bulunmuyor.</div>`;
                    return;
                }

                let ticketsList = [];
                querySnapshot.forEach((docSnap) => {
                    ticketsList.push({ id: docSnap.id, ...docSnap.data() });
                });

                ticketsList.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));

                container.innerHTML = "";
                ticketsList.forEach((data) => {
                    const dateStr = new Date(data.createdAt).toLocaleDateString('tr-TR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
                    const isClosed = data.status === "Kapatıldı";

                    const card = document.createElement('div');
                    card.className = "bg-white dark:bg-[#1F2937] dark:border dark:border-gray-800 p-4 rounded-2xl shadow-md space-y-2 text-xs";
                    card.innerHTML = `
                        <div class="flex justify-between items-center font-bold text-[#1F2937] dark:text-white">
                            <span>${data.subject}</span>
                            <span class="text-[10px] ${isClosed ? 'bg-gray-100 dark:bg-gray-800 text-gray-500' : 'bg-amber-50 dark:bg-amber-950/40 text-amber-600'} px-2 py-0.5 rounded-full">${data.status}</span>
                        </div>
                        <div class="text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-gray-900 p-2.5 rounded-xl">${data.message}</div>
                        
                        ${data.adminReply ? `
                            <div class="bg-green-50 dark:bg-green-950/30 p-2.5 rounded-xl border border-green-100 dark:border-green-900/50 space-y-0.5 mt-1">
                                <div class="font-bold text-[#00B140] text-[10px] uppercase">👑 Yönetici Yanıtı:</div>
                                <div class="text-gray-700 dark:text-gray-200">${data.adminReply}</div>
                            </div>
                        ` : '<div class="text-[10px] text-gray-400 italic">Yönetici yanıtı bekleniyor...</div>'}

                        <div class="text-[10px] text-gray-400 text-right pt-1">${dateStr}</div>
                    `;
                    container.appendChild(card);
                });
            } catch (error) {
                container.innerHTML = `<div class="bg-white dark:bg-[#1F2937] p-5 rounded-2xl shadow-md text-center text-xs text-rose-500">Hata: ${error.message}</div>`;
            }
        }

        document.getElementById('sidebar-logout-btn').addEventListener('click', () => {
            sessionStorage.clear();
            window.location.replace("index.html");
        });
    </script>
</body>
</html>