<%
  const userCanManage =
    typeof canManage !== "undefined" &&
    canManage === true;

  const employeeList =
    Array.isArray(employeeSalarySummaries)
      ? employeeSalarySummaries
      : [];

  const formatMoney = (value) => {
    return Number(value || 0).toLocaleString(
      "en-US",
      {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }
    );
  };

  const formatSalaryMonth = (value) => {
    if (
      !value ||
      value === "0000-00" ||
      value === "0000-00-00"
    ) {
      return "—";
    }

    return String(value).substring(0, 7);
  };

  const formatPaymentDate = (value) => {
    if (
      !value ||
      value === "0000-00-00" ||
      value === "0000-00"
    ) {
      return "—";
    }

    return String(value).substring(0, 10);
  };

  const getStatusClass = (status) => {
    return String(status || "Unpaid")
      .toLowerCase()
      .replace(/\s+/g, "-");
  };

  const totalEmployees =
    employeeList.length;

  const totalSalaryMonths =
    employeeList.reduce(
      (total, employee) =>
        total +
        Number(employee.total_months || 0),
      0
    );

  const totalEarned =
    employeeList.reduce(
      (total, employee) =>
        total +
        Number(employee.total_earned || 0),
      0
    );

  const totalPaid =
    employeeList.reduce(
      (total, employee) =>
        total +
        Number(employee.total_paid || 0),
      0
    );

  const totalRemaining =
    employeeList.reduce(
      (total, employee) =>
        total +
        Number(employee.total_remaining || 0),
      0
    );
%>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>
    Salaries | Company Management System
  </title>

  <link
    rel="stylesheet"
    href="/css/style.css"
  >

  <style>
    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #f1f5f9;
      color: #1f2937;
      font-family: Arial, sans-serif;
    }

    .salary-page {
      width: 100%;
      max-width: 1800px;
      margin: 0 auto;
      padding: 20px;
    }

    /* =========================================
       PAGE HEADER
    ========================================= */

    .salary-page-header {
      width: 100%;
      margin-bottom: 22px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .salary-page-header h1 {
      margin: 0;

      color: #1f2937;

      font-size: 40px;
      line-height: 1.2;
    }

    .salary-header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .dashboard-button,
    .add-salary-button {
      width: auto;
      height: 44px;
      min-height: 44px;
      margin: 0;
      padding: 0 20px;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      border: none;
      border-radius: 7px;

      color: #ffffff;

      font-size: 15px;
      font-weight: 700;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
    }

    .dashboard-button {
      background-color: #64748b;
    }

    .dashboard-button:hover {
      background-color: #475569;
    }

    .add-salary-button {
      background-color: #2563eb;
    }

    .add-salary-button:hover {
      background-color: #1d4ed8;
    }

    .viewer-badge {
      padding: 7px 12px;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      background-color: #e0f2fe;
      color: #0369a1;

      border: 1px solid #bae6fd;
      border-radius: 20px;

      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }

    /* =========================================
       SUMMARY CARDS
    ========================================= */

    .salary-summary {
      display: grid;

      grid-template-columns:
        repeat(
          5,
          minmax(0, 1fr)
        );

      gap: 16px;
      margin-bottom: 24px;
    }

    .summary-card {
      padding: 20px;

      background-color: #ffffff;

      border-left: 5px solid #2563eb;
      border-radius: 8px;

      box-shadow:
        0 3px 12px
        rgba(0, 0, 0, 0.07);
    }

    .summary-card.month-card {
      border-left-color: #7c3aed;
    }

    .summary-card.earned-card {
      border-left-color: #2563eb;
    }

    .summary-card.paid-card {
      border-left-color: #16a34a;
    }

    .summary-card.remaining-card {
      border-left-color: #f59e0b;
    }

    .summary-card span {
      display: block;
      margin-bottom: 8px;

      color: #64748b;

      font-size: 14px;
      font-weight: 700;
    }

    .summary-card strong {
      display: block;

      color: #1f2937;

      font-size: 22px;
      overflow-wrap: anywhere;
    }

    /* =========================================
       TABLE
    ========================================= */

    .salary-table-container {
      width: 100%;
      overflow-x: auto;

      background-color: #ffffff;

      border-radius: 9px;

      box-shadow:
        0 4px 15px
        rgba(0, 0, 0, 0.08);
    }

    .salary-table {
      width: 100%;
      min-width: 1550px;

      border-collapse: collapse;
    }

    .salary-table th {
      padding: 17px 14px;

      background-color: #1f2937;
      color: #ffffff;

      font-size: 14px;
      font-weight: 700;

      text-align: left;
      white-space: nowrap;
    }

    .salary-table td {
      padding: 17px 14px;

      color: #1f2937;

      border-bottom:
        1px solid #e5e7eb;

      vertical-align: middle;
    }

    .salary-table tbody tr:last-child td {
      border-bottom: none;
    }

    .salary-table tbody tr:hover {
      background-color: #f8fafc;
    }

    .employee-name {
      font-weight: 700;
      white-space: nowrap;
    }

    .position-value {
      color: #475569;
      white-space: nowrap;
    }

    .number-value {
      font-weight: 700;
      text-align: center;
      white-space: nowrap;
    }

    .money-value {
      font-weight: 700;
      white-space: nowrap;
    }

    .paid-value {
      color: #15803d;
    }

    .remaining-value {
      color: #b45309;
    }

    /* =========================================
       STATUS
    ========================================= */

    .salary-status {
      min-width: 115px;
      padding: 7px 12px;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      border-radius: 20px;

      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }

    .salary-status.unpaid {
      background-color: #e5e7eb;
      color: #475569;
    }

    .salary-status.partially-paid {
      background-color: #fef3c7;
      color: #b45309;
    }

    .salary-status.fully-paid {
      background-color: #dcfce7;
      color: #15803d;
    }

    /* =========================================
       ACTIONS
    ========================================= */

    .salary-actions {
      display: flex;
      align-items: center;
      gap: 8px;

      white-space: nowrap;
    }

    .history-button {
      min-height: 40px;
      padding: 0 16px;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      background-color: #2563eb;
      color: #ffffff;

      border: none;
      border-radius: 7px;

      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
    }

    .history-button:hover {
      background-color: #1d4ed8;
    }

    .no-salaries {
      padding: 50px 20px;

      color: #64748b;

      font-size: 17px;
      text-align: center;
    }

    /* =========================================
       RESPONSIVE
    ========================================= */

    @media (max-width: 1300px) {
      .salary-summary {
        grid-template-columns:
          repeat(
            3,
            minmax(0, 1fr)
          );
      }
    }

    @media (max-width: 850px) {
      .salary-page-header {
        align-items: stretch;
        flex-direction: column;
      }

      .salary-header-actions {
        width: 100%;
      }

      .dashboard-button,
      .add-salary-button,
      .salary-header-actions .viewer-badge {
        flex: 1;
      }

      .salary-summary {
        grid-template-columns:
          repeat(
            2,
            minmax(0, 1fr)
          );
      }
    }

    @media (max-width: 550px) {
      .salary-page {
        padding: 15px 12px 25px;
      }

      .salary-page-header h1 {
        font-size: 32px;
      }

      .salary-header-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .dashboard-button,
      .add-salary-button,
      .salary-header-actions .viewer-badge {
        width: 100%;
      }

      .salary-summary {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>

<body>

  <main class="salary-page">

    <!-- =====================================
         PAGE HEADER
    ====================================== -->

    <div class="salary-page-header">

      <h1>
        Salaries
      </h1>

      <div class="salary-header-actions">

        <a
          href="/"
          class="dashboard-button"
        >
          ← Dashboard
        </a>

        <% if (userCanManage) { %>

          <a
            href="/salaries/create"
            class="add-salary-button"
          >
            Add Salary Month
          </a>

        <% } else { %>

          <span class="viewer-badge">
            Read-only access
          </span>

        <% } %>

      </div>

    </div>


    <!-- =====================================
         COMPANY SALARY SUMMARY
    ====================================== -->

    <section class="salary-summary">

      <div class="summary-card">

        <span>
          Employees with Salary Records
        </span>

        <strong>
          <%= totalEmployees %>
        </strong>

      </div>

      <div class="summary-card month-card">

        <span>
          Total Salary Months
        </span>

        <strong>
          <%= totalSalaryMonths %>
        </strong>

      </div>

      <div class="summary-card earned-card">

        <span>
          Total Salary Earned
        </span>

        <strong>
          <%= currencySymbol %>
          <%= formatMoney(totalEarned) %>
        </strong>

      </div>

      <div class="summary-card paid-card">

        <span>
          Total Paid
        </span>

        <strong>
          <%= currencySymbol %>
          <%= formatMoney(totalPaid) %>
        </strong>

      </div>

      <div class="summary-card remaining-card">

        <span>
          Total Remaining
        </span>

        <strong>
          <%= currencySymbol %>
          <%= formatMoney(totalRemaining) %>
        </strong>

      </div>

    </section>


    <!-- =====================================
         EMPLOYEE SALARY SUMMARY TABLE
    ====================================== -->

    <div class="salary-table-container">

      <table class="salary-table">

        <thead>

          <tr>
            <th>Employee</th>
            <th>Position</th>
            <th>Monthly Salary</th>
            <th>Salary Months</th>
            <th>Paid Months</th>
            <th>Partial Months</th>
            <th>Unpaid Months</th>
            <th>Total Earned</th>
            <th>Total Paid</th>
            <th>Remaining</th>
            <th>Status</th>
            <th>Latest Month</th>
            <th>Last Payment</th>
            <th>Action</th>
          </tr>

        </thead>

        <tbody>

          <% if (employeeList.length === 0) { %>

            <tr>

              <td
                colspan="14"
                class="no-salaries"
              >
                No employee salary records found.
              </td>

            </tr>

          <% } else { %>

            <% employeeList.forEach((employee) => { %>

              <tr>

                <td class="employee-name">
                  <%=
                    employee.employee_name ||
                    "Unknown employee"
                  %>
                </td>

                <td class="position-value">
                  <%= employee.position || "Not set" %>
                </td>

                <td class="money-value">
                  <%= currencySymbol %>
                  <%= formatMoney(
                    employee.monthly_salary
                  ) %>
                </td>

                <td class="number-value">
                  <%= Number(
                    employee.total_months || 0
                  ) %>
                </td>

                <td class="number-value">
                  <%= Number(
                    employee.paid_months || 0
                  ) %>
                </td>

                <td class="number-value">
                  <%= Number(
                    employee.partially_paid_months || 0
                  ) %>
                </td>

                <td class="number-value">
                  <%= Number(
                    employee.unpaid_months || 0
                  ) %>
                </td>

                <td class="money-value">
                  <%= currencySymbol %>
                  <%= formatMoney(
                    employee.total_earned
                  ) %>
                </td>

                <td class="money-value paid-value">
                  <%= currencySymbol %>
                  <%= formatMoney(
                    employee.total_paid
                  ) %>
                </td>

                <td class="money-value remaining-value">
                  <%= currencySymbol %>
                  <%= formatMoney(
                    employee.total_remaining
                  ) %>
                </td>

                <td>

                  <span
                    class="
                      salary-status
                      <%= getStatusClass(
                        employee.overall_status
                      ) %>
                    "
                  >
                    <%=
                      employee.overall_status ||
                      "Unpaid"
                    %>
                  </span>

                </td>

                <td>
                  <%=
                    formatSalaryMonth(
                      employee.latest_salary_month
                    )
                  %>
                </td>

                <td>
                  <%=
                    formatPaymentDate(
                      employee.last_payment_date
                    )
                  %>
                </td>

                <td>

                  <div class="salary-actions">

                    <a
                      href="/salaries/employee/<%= employee.employee_id %>/history"
                      class="history-button"
                    >
                      View History
                    </a>

                  </div>

                </td>

              </tr>

            <% }); %>

          <% } %>

        </tbody>

      </table>

    </div>

  </main>

</body>

</html>