'use strict';

let profile = {};
let pendingPhoto = null;

/* ===== TOAST ===== */
function showToast(msg, isErr) {
    const el = document.getElementById('toast');
    el.textContent = msg;
    el.className = 'toast show' + (isErr ? ' error' : '');
    clearTimeout(el._t);
    el._t = setTimeout(() => el.className = 'toast', 3000);
}

/* ===== AVATAR ===== */
function setAvatar(src, firstName) {
    const img = document.getElementById('avatar-img');
    const ltr = document.getElementById('avatar-letter');
    if (src) {
        img.src = '../' + src;
        img.style.display = 'block';
        ltr.style.display = 'none';
    } else {
        img.style.display = 'none';
        ltr.style.display = '';
        if (firstName) ltr.textContent = firstName.charAt(0).toUpperCase();
    }
}

/* ===== LOAD PROFILE (לצורך שדות העריכה ונתונים נוספים) ===== */
async function loadProfile() {
    try {
        const data = await fetch('../api/get_profile.php').then(r => r.json());
        if (!data || data.error) return;
        profile = data;

        /* עדכון view עם נתונים מה-DB */
        if (data.last_name) {
            document.getElementById('v-lastname').textContent = data.last_name;
        }
        if (data.email) {
            document.getElementById('v-email').textContent = data.email;
        }
        if (data.formatted_address) {
            document.getElementById('v-address').textContent = data.formatted_address;
        }
        if (data.phone) {
            document.getElementById('v-phone').textContent = data.phone;
            document.getElementById('v-phone-row').style.display = 'flex';
        }
        if (data.profile_picture) setAvatar(data.profile_picture, data.first_name);

    } catch (e) { /* נתוני ה-session כבר מוצגים */ }
}

/* ===== TOGGLE ITEMS SECTIONS ===== */
function showItemsSection(show) {
    ['items-section', 'consumed-section'].forEach(id => {
        const sec = document.getElementById(id);
        if (sec) sec.style.display = show ? 'block' : 'none';
    });
}

/* ===== OPEN EDIT ===== */
function openEdit() {
    const p = profile;
    document.getElementById('e-fn').value   = p.first_name   || document.getElementById('v-firstname').textContent.trim();
    document.getElementById('e-ln').value   = p.last_name    || '';
    document.getElementById('e-em').value   = p.email        || document.getElementById('v-email').textContent.trim();
    document.getElementById('e-ph').value   = p.phone        || '';
    document.getElementById('e-city').value = p.city         || '';
    document.getElementById('e-str').value  = p.street       || '';
    document.getElementById('e-hn').value   = p.house_number || '';
    document.getElementById('e-apt').value  = p.apartment    || '';

    pendingPhoto = null;
    clearErrors();
    document.getElementById('view-mode').style.display = 'none';
    document.getElementById('edit-mode').style.display = 'block';
    document.getElementById('profile-card').classList.add('editing');
    showItemsSection(false);
}

/* ===== CLOSE EDIT ===== */
function closeEdit() {
    document.getElementById('edit-mode').style.display = 'none';
    document.getElementById('view-mode').style.display = 'block';
    document.getElementById('profile-card').classList.remove('editing');
    showItemsSection(true);
    clearErrors();
    setAvatar(profile.profile_picture || '', profile.first_name || document.getElementById('v-firstname').textContent);
    pendingPhoto = null;
}

/* ===== VALIDATION ===== */
function clearErrors() {
    ['err-fn','err-ln','err-em','err-ph'].forEach(id => {
        document.getElementById(id).textContent = '';
    });
    document.querySelectorAll('#edit-mode input').forEach(el => el.classList.remove('has-error'));
}

function fieldErr(inputId, errId, msg) {
    document.getElementById(inputId).classList.add('has-error');
    document.getElementById(errId).textContent = msg;
}

function validate() {
    clearErrors();
    let ok = true;
    const fn    = document.getElementById('e-fn').value.trim();
    const ln    = document.getElementById('e-ln').value.trim();
    const email = document.getElementById('e-em').value.trim();
    const phone = document.getElementById('e-ph').value.trim();

    if (!fn)   { fieldErr('e-fn','err-fn','שדה חובה'); ok = false; }
    if (!ln)   { fieldErr('e-ln','err-ln','שדה חובה'); ok = false; }
    if (!email){ fieldErr('e-em','err-em','שדה חובה'); ok = false; }
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){ fieldErr('e-em','err-em','אימייל לא תקין'); ok = false; }
    if (phone && !/^[\d\-+\s()]{7,15}$/.test(phone)){ fieldErr('e-ph','err-ph','טלפון לא תקין'); ok = false; }
    return ok;
}

/* ===== SAVE ===== */
async function saveProfile(e) {
    e.preventDefault();
    if (!validate()) return;

    const btn = document.getElementById('btn-save');
    btn.disabled = true;
    btn.textContent = 'שומר...';

    const fd = new FormData();
    fd.append('first_name',   document.getElementById('e-fn').value.trim());
    fd.append('last_name',    document.getElementById('e-ln').value.trim());
    fd.append('email',        document.getElementById('e-em').value.trim());
    fd.append('phone',        document.getElementById('e-ph').value.trim());
    fd.append('city',         document.getElementById('e-city').value.trim());
    fd.append('street',       document.getElementById('e-str').value.trim());
    fd.append('house_number', document.getElementById('e-hn').value.trim());
    fd.append('apartment',    document.getElementById('e-apt').value.trim());
    if (pendingPhoto) fd.append('profile_picture', pendingPhoto);

    try {
        const data = await fetch('../api/update_profile.php', { method:'POST', body:fd }).then(r => r.json());

        if (data.success) {
            profile.first_name   = fd.get('first_name');
            profile.last_name    = fd.get('last_name');
            profile.email        = fd.get('email');
            profile.phone        = fd.get('phone');
            profile.city         = fd.get('city');
            profile.street       = fd.get('street');
            profile.house_number = fd.get('house_number');
            profile.apartment    = fd.get('apartment');
            profile.formatted_address = [fd.get('street'), fd.get('house_number'), fd.get('city')].filter(Boolean).join(' ');
            if (data.profile_picture) profile.profile_picture = data.profile_picture;

            document.getElementById('v-firstname').textContent = profile.first_name;
            document.getElementById('v-lastname').textContent  = profile.last_name;
            document.getElementById('v-email').textContent     = profile.email;
            document.getElementById('v-address').textContent   = profile.formatted_address;
            if (profile.phone) {
                document.getElementById('v-phone').textContent    = profile.phone;
                document.getElementById('v-phone-row').style.display = 'flex';
            }
            closeEdit();
            showToast('הפרופיל עודכן בהצלחה ✓');
        } else {
            showToast(data.message || 'שגיאה בשמירה', true);
        }
    } catch { showToast('שגיאת תקשורת', true); }
    finally  { btn.disabled = false; btn.textContent = 'שמור שינויים'; }
}

/* ===== PHOTO PREVIEW ===== */
document.getElementById('pic-input').addEventListener('change', function () {
    const file = this.files[0];
    if (!file) return;
    if (!file.type.startsWith('image/')) { showToast('יש לבחור קובץ תמונה', true); return; }
    if (file.size > 3 * 1024 * 1024)    { showToast('קובץ גדול מדי (מקס 3MB)', true); return; }
    pendingPhoto = file;
    const reader = new FileReader();
    reader.onload = ev => {
        const img = document.getElementById('avatar-img');
        img.src = ev.target.result;
        img.style.display = 'block';
        document.getElementById('avatar-letter').style.display = 'none';
    };
    reader.readAsDataURL(file);
});

/* ===== ITEMS ===== */
async function fetchItems() {
    const grid = document.getElementById('items-grid');
    try {
        const items = await fetch('../api/get_my_items.php').then(r => r.json());
        if (!Array.isArray(items) || !items.length) {
            grid.innerHTML = `<div class="empty-state"><div class="empty-icon">🍱</div><p>עדיין לא שיתפת אוכל</p></div>`;
            return;
        }
        grid.innerHTML = '';
        items.forEach(item => {
            const avail = item.status === 'available';
            const c = document.createElement('div');
            c.className = 'item-card';
            c.id = 'item-' + item.item_id;
            c.innerHTML = `
                <img src="../${item.image_url}" alt="${item.title}">
                <div class="item-card-body">
                    <h3>${item.title}</h3>
                    <span class="status-badge ${avail ? 'status-available':'status-collected'}">${avail?'זמין':'נמסר'}</span>
                    <div class="item-actions">
                        <button class="btn-collect" onclick="markCollected(${item.item_id},this)" ${!avail?'disabled':''}>סמן כנמסר</button>
                        <button class="btn-danger"  onclick="removeItem(${item.item_id})">מחיקה</button>
                    </div>
                </div>`;
            grid.appendChild(c);
        });
    } catch {
        grid.innerHTML = `<div class="empty-state"><div class="empty-icon">⚠️</div><p>שגיאה בטעינת הפריטים</p></div>`;
    }
}

async function markCollected(id, btn) {
    if (!confirm('לסמן את הפריט כנמסר?')) return;
    btn.disabled = true; btn.textContent = '...';
    try {
        const fd = new FormData(); fd.append('item_id', id); fd.append('status', 'collected');
        const data = await fetch('../api/update_item_status.php', {method:'POST',body:fd}).then(r=>r.json());
        if (data.success) {
            const badge = document.getElementById('item-'+id).querySelector('.status-badge');
            badge.className = 'status-badge status-collected';
            badge.textContent = 'נמסר';
            btn.textContent = 'סמן כנמסר';
            showToast('סומן כנמסר');
        } else { btn.disabled=false; btn.textContent='סמן כנמסר'; showToast(data.message||'שגיאה',true); }
    } catch { btn.disabled=false; btn.textContent='סמן כנמסר'; showToast('שגיאת תקשורת',true); }
}

async function removeItem(id) {
    if (!confirm('למחוק את הפריט?')) return;
    try {
        const fd = new FormData(); fd.append('item_id', id);
        const data = await fetch('../api/delete_item.php', {method:'POST',body:fd}).then(r=>r.json());
        if (data.success) {
            const card = document.getElementById('item-'+id);
            card.style.cssText = 'opacity:0;transform:scale(0.9);transition:0.3s';
            setTimeout(() => {
                card.remove();
                if (!document.querySelector('.item-card'))
                    document.getElementById('items-grid').innerHTML = `<div class="empty-state"><div class="empty-icon">🍱</div><p>עדיין לא שיתפת אוכל</p></div>`;
            }, 300);
            showToast('הפריט נמחק');
        } else { showToast(data.message||'שגיאה',true); }
    } catch { showToast('שגיאת תקשורת',true); }
}

/* ===== CONSUMED ITEMS ===== */
async function fetchConsumedItems() {
    const grid = document.getElementById('consumed-grid');
    try {
        const items = await fetch('../api/get_consumed_items.php').then(r => r.json());
        if (!Array.isArray(items) || !items.length) {
            grid.innerHTML = `<div class="empty-state"><div class="empty-icon">🛒</div><p>עדיין לא קיבלת אוכל מהקהילה</p></div>`;
            return;
        }
        grid.innerHTML = '';
        items.forEach(item => {
            const done = item.request_status === 'completed';
            const c = document.createElement('div');
            c.className = 'item-card';
            c.innerHTML = `
                <img src="../${item.image_url}" alt="${item.title}">
                <div class="item-card-body">
                    <h3>${item.title}</h3>
                    <span class="status-badge ${done ? 'status-collected' : 'status-available'}">
                        ${done ? 'הושלם' : 'אושר'}
                    </span>
                </div>`;
            grid.appendChild(c);
        });
    } catch {
        grid.innerHTML = `<div class="empty-state"><div class="empty-icon">⚠️</div><p>שגיאה בטעינת הפריטים</p></div>`;
    }
}

/* ===== INIT ===== */
document.getElementById('btn-edit').addEventListener('click', openEdit);
document.getElementById('btn-cancel').addEventListener('click', closeEdit);
document.getElementById('edit-mode').addEventListener('submit', saveProfile);

loadProfile();
fetchItems();
fetchConsumedItems();
