//API
const API_BASE_URL = "http://localhost:3001/api";

//Login
async function loginUser(username, password) {
  try {
    const response = await fetch(`${API_BASE_URL}/auth/login`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ username, password }),
    });
    const data = await response.json();
    if (response.ok) {
      return { success: true, ...data };
    } else {
      return {
        success: false,
        error:
          data.error ||
          (data.errors && data.errors[0]?.msg) ||
          "Ошибка авторизации",
      };
    }
  } catch (err) {
    return { success: false, error: "Нет соединения с сервером" };
  }
}

document.getElementById("loginForm").addEventListener("submit", async (e) => {
  e.preventDefault();

  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;

  // Call backend login
  const result = await loginUser(username, password);

  if (result.success) {
    // Save user/token in JS (or localStorage)
    currentUser = result.user;
    localStorage.setItem("token", result.token);

    document.getElementById("loginScreen").classList.add("hidden");

    if (result.user.role === "admin") {
      showAdminInterface();
    } else {
      showUserInterface();
    }

    showNotification("Успешная авторизация!");
  } else {
    const errorDiv = document.getElementById("loginError");
    errorDiv.textContent = result.error;
    errorDiv.classList.remove("hidden");
  }
});

document.addEventListener("DOMContentLoaded", async () => {
  const token = localStorage.getItem("token");
  if (token) {
    // Try to get user info from backend
    try {
      const response = await fetch(`${API_BASE_URL}/auth/me`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      if (response.ok) {
        const data = await response.json();
        currentUser = data.user;
        document.getElementById("loginScreen").classList.add("hidden");
        if (currentUser.role === "admin") {
          showAdminInterface();
        } else {
          showUserInterface();
        }
      } else {
        // Token invalid/expired
        localStorage.removeItem("token");
        document.getElementById("loginScreen").classList.remove("hidden");
      }
    } catch (err) {
      showNotification("Нет соединения с сервером", "error");
    }
  } else {
    // No token, show login screen
    document.getElementById("loginScreen").classList.remove("hidden");
  }
});

function logout() {
  currentUser = null;
  localStorage.removeItem("token");

  // Show login screen, hide other interfaces
  document.getElementById("loginScreen").classList.remove("hidden");
  document.getElementById("userInterface").classList.add("hidden");
  document.getElementById("adminInterface").classList.add("hidden");
  document.getElementById("loginForm").reset();
  document.getElementById("loginError").classList.add("hidden");

  showNotification("Вы вышли из системы", "info");
}

document.getElementById("logoutBtn").addEventListener("click", logout);
document.getElementById("adminLogoutBtn").addEventListener("click", logout);

//Users
//GET all users (admin only)

async function getAllUsers() {
  const token = localStorage.getItem("token");
  try {
    const response = await fetch(`${API_BASE_URL}/users`, {
      method: "GET",
      headers: {
        Authorization: `Bearer ${token}`,
        "Content-Type": "application/json",
      },
    });
    const data = await response.json();
    if (response.ok) {
      return { success: true, users: data.users };
    } else {
      return {
        success: false,
        error: data.error || data.message || "Ошибка получения пользователей",
      };
    }
  } catch (err) {
    return { success: false, error: "Нет соединения с сервером" };
  }
}

let usersList = [];

async function loadUsers() {
  const tbody = document.getElementById("usersTableBody");
  tbody.innerHTML = "";

  const result = await getAllUsers();

  console.log("getAllUsers result:", result);

  if (!result.success) {
    showNotification(result.error, "error");
    return;
  }

  const users = result.users;
  usersList = users;

  users.forEach((user) => {
    const userStores =
      user.stores
        .map((storeId) => {
          const store = database.stores.find((s) => s.id === storeId);
          return store ? store.name : "Нет доступа";
        })
        .join(", ") || "Нет доступа";

    const row = document.createElement("tr");
    row.className = "hover:bg-gray-50";
    row.innerHTML = `
      <td class="px-6 py-4 text-sm text-gray-900">${user.id}</td>
      <td class="px-6 py-4 text-sm text-gray-900">${user.username}</td>
      <td class="px-6 py-4 text-sm">
        <span class="px-2 py-1 text-xs rounded-full ${
          user.role === "admin"
            ? "bg-purple-100 text-purple-800"
            : "bg-blue-100 text-blue-800"
        }">
          ${user.role === "admin" ? "Администратор" : "Сотрудник"}
        </span>
      </td>
      <td class="px-6 py-4 text-sm text-gray-900">${userStores}</td>
      <td class="px-6 py-4 text-sm">
        <button class="text-blue-600 hover:text-blue-900 mr-2" onclick="editUser(${
          user.id
        })">
          <i class="fas fa-edit"></i> Редактировать
        </button>
        <button class="text-red-600 hover:text-red-900" onclick="deleteUser(${
          user.id
        })">
          <i class="fas fa-trash"></i> Удалить
        </button>
      </td>
    `;
    tbody.appendChild(row);
  });

  if (users.length === 0) {
    showNotification("Нет пользователей для отображения", "info");
  }
}

//add user
async function createUser(userData) {
  const token = localStorage.getItem("token");
  try {
    const response = await fetch(`${API_BASE_URL}/users`, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${token}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(userData),
    });
    const data = await response.json();
    if (response.ok) {
      return { success: true, ...data };
    } else {
      return {
        success: false,
        error:
          data.error ||
          (data.errors && data.errors[0]?.msg) ||
          "Ошибка создания пользователя",
      };
    }
  } catch {
    return { success: false, error: "Нет соединения с сервером" };
  }
}

//edit user
async function updateUser(userId, userData) {
  const token = localStorage.getItem("token");
  try {
    const response = await fetch(`${API_BASE_URL}/users/${userId}`, {
      method: "PUT",
      headers: {
        Authorization: `Bearer ${token}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(userData),
    });
    const data = await response.json();
    if (response.ok) {
      return { success: true };
    } else {
      return {
        success: false,
        error:
          data.error ||
          (data.errors && data.errors[0]?.msg) ||
          "Ошибка обновления пользователя",
      };
    }
  } catch {
    return { success: false, error: "Нет соединения с сервером" };
  }
}

// 1. Create modal on-demand if missing
function ensureConfirmModal() {
  if (document.getElementById("confirmModal")) return;

  const modal = document.createElement("div");
  modal.id = "confirmModal";
  modal.className =
    "hidden fixed inset-0 z-50 bg-black bg-opacity-30 flex items-center justify-center";
  modal.innerHTML = `
    <div class="bg-white rounded-lg shadow-lg p-8 max-w-sm w-full relative">
      <div id="confirmModalText" class="text-lg text-gray-700 mb-6"></div>
      <div class="flex justify-end space-x-4">
        <button id="confirmModalOk" class="px-5 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">Удалить</button>
        <button id="confirmModalCancel" class="px-5 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400">Отмена</button>
      </div>
    </div>
  `;
  document.body.appendChild(modal);
}

// 2. Show confirm modal
function showConfirmModal(message, onConfirm) {
  ensureConfirmModal();

  const modal = document.getElementById("confirmModal");
  const text = document.getElementById("confirmModalText");
  const okBtn = document.getElementById("confirmModalOk");
  const cancelBtn = document.getElementById("confirmModalCancel");

  text.textContent = message;
  modal.classList.remove("hidden");

  function cleanup() {
    modal.classList.add("hidden");
    okBtn.removeEventListener("click", okHandler);
    cancelBtn.removeEventListener("click", cancelHandler);
  }

  function okHandler() {
    cleanup();
    onConfirm();
  }

  function cancelHandler() {
    cleanup();
  }

  okBtn.addEventListener("click", okHandler);
  cancelBtn.addEventListener("click", cancelHandler);
}

// 3. API call to delete user
async function apiDeleteUser(userId) {
  const token = localStorage.getItem("token");
  try {
    const response = await fetch(`${API_BASE_URL}/users/${userId}`, {
      method: "DELETE",
      headers: {
        Authorization: `Bearer ${token}`,
        "Content-Type": "application/json",
      },
    });
    const data = await response.json();
    if (response.ok) {
      showNotification("Пользователь удален!");
      loadUsers();
      updateDashboard();
    } else {
      showNotification(data.error || "Ошибка удаления пользователя", "error");
    }
  } catch {
    showNotification("Нет соединения с сервером", "error");
  }
}

// 4. UI trigger: delete user with modal
function deleteUser(userId) {
  showConfirmModal("Вы уверены, что хотите удалить этого пользователя?", () =>
    apiDeleteUser(userId)
  );
}

//Reports
//GET all reports
async function getReports() {
  const token = localStorage.getItem("token");
  try {
    const response = await fetch(`${API_BASE_URL}/reports`, {
      method: "GET",
      headers: {
        Authorization: `Bearer ${token}`,
        "Content-Type": "application/json",
      },
    });
    const data = await response.json();
    if (response.ok) {
      return { success: true, reports: data.reports };
    } else {
      return {
        success: false,
        error: data.error || data.message || "Ошибка получения отчетов",
      };
    }
  } catch (err) {
    return { success: false, error: "Нет соединения с сервером" };
  }
}

async function loadReports() {
  const tbody = document.getElementById("reportsTableBody");
  const filterStore = document.getElementById("filterStore");

  const result = await getReports();
  console.log("getReports() result:", result);

  window.reportsList = result.success ? result.reports : [];

  if (!result.success) {
    showNotification(result.error || "Ошибка загрузки отчетов", "error");
    return;
  }
  const reports = result.reports;

  // Build a map storeId => storeName from all reports
  const storeMap = {};
  reports.forEach((r) => {
    if (r.storeId && r.storeName) {
      storeMap[r.storeId] = r.storeName;
    }
  });

  // Get unique [storeId, storeName] pairs sorted alphabetically
  const storesWithReports = Object.entries(storeMap)
    .map(([id, name]) => ({ id, name }))
    .sort((a, b) => a.name.localeCompare(b.name));

  filterStore.innerHTML = `
  <option value="">Все магазины</option>
  ${storesWithReports
    .map((store) => `<option value="${store.id}">${store.name}</option>`)
    .join("")}
`;

  tbody.innerHTML = "";
  reports.forEach((report) => {
    const store = database.stores.find((s) => s.id === report.storeId);
    // Fallback for username if user might be missing from local array:
    const user = database.users.find((u) => u.id === report.userId);
    const profit =
      (Number(report.totalIncome) || 0) - (Number(report.totalExpenses) || 0);

    const row = document.createElement("tr");
    row.className = "hover:bg-gray-50";
    row.innerHTML = `
      <td class="px-6 py-4 text-sm text-gray-900">${
        report.reportDate || report.date || ""
      }</td>
      <td class="px-6 py-4 text-sm text-gray-900">${
        report.storeName || report.storeId
      }</td>
      <td class="px-6 py-4 text-sm text-gray-900">€${Number(
        report.totalIncome
      ).toFixed(2)}</td>
      <td class="px-6 py-4 text-sm text-gray-900">€${Number(
        report.totalExpenses
      ).toFixed(2)}</td>
      <td class="px-6 py-4 text-sm ${
        profit >= 0 ? "text-green-600" : "text-red-600"
      }">€${profit.toFixed(2)}</td>
      <td class="px-6 py-4 text-sm text-gray-900">${
        user ? user.username : report.userId
      }</td>
      <td class="px-6 py-4">
        <span class="px-2 py-1 text-xs rounded-full ${
          report.isVerified
            ? "bg-green-100 text-green-800"
            : "bg-yellow-100 text-yellow-800"
        }">
          ${report.isVerified ? "Проверен" : "Не проверен"}
        </span>
      </td>
      <td class="px-6 py-4 text-sm">
        <button class="text-blue-600 hover:text-blue-900 mr-2" onclick="viewReport(${
          report.id
        })">
          <i class="fas fa-eye"></i> Просмотр
        </button>
        <button class="text-red-600 hover:text-red-900" onclick="deleteReport(${
          report.id
        })">
          <i class="fas fa-trash"></i> Удалить
        </button>
      </td>
    `;
    tbody.appendChild(row);
  });

  setupReportsFilters();
}

// Use global array for backend reports
function viewReport(reportId) {
  if (!window.reportsList) {
    showNotification("Reports not loaded yet!", "error");
    return;
  }
  const report = window.reportsList.find((r) => r.id === reportId);
  if (report) {
    showReportModal(report, true);
  } else {
    showNotification("Report not found!", "error");
  }
}

//create report
// createReport(data)
//edit report
// updateReport(id, data)
//accept report (admin only)
// verifyReport(id)
//delete report
// deleteReport(id)