<%
  const accountList =
    Array.isArray(accounts)
      ? accounts
      : [];

  const entryList =
    Array.isArray(entries)
      ? entries
      : [];

  const ledgerSummary =
    summary && typeof summary === "object"
      ? summary
      : {};

  const totalDebit =
    Number(
      ledgerSummary.total_debit || 0
    );

  const totalCredit =
    Number(
      ledgerSummary.total_credit || 0
    );

  const totalEntries =
    Number(
      ledgerSummary.total_entries || 0
    );

  const isBalanced =
    Math.abs(
      totalDebit - totalCredit
    ) < 0.01;

  const money = (amount) => {
    if (
      typeof formatMoney === "function"
    ) {
      return formatMoney(
        Number(amount || 0)
      );
    }

    return Number(
      amount || 0
    ).toLocaleString(
      "en-US",
      {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }
    );
  };
%>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>
    General Ledger
  </title>

  <link
    rel="stylesheet"
    href="/css/style.css"
  >

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: #f3f4f6;
      color: #111827;
    }

    .ledger-container {
      width: 100%;
      max-width: 1500px;
      margin: 0 auto;
      padding: 24px;
    }

    /* ==================================================
       PAGE HEADER
    ================================================== */

    .page-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 24px;
    }

    .page-title h1 {
  margin: 0 0 6px;
  font-size: 30px;
  color: #ffffff !important;
}

.page-title p {
  margin: 0;
  color: #cbd5e1 !important;
}

.page-header {
  padding: 22px 18px;
  background-color: #1e293b;
  border-radius: 10px;
}

.page-title {
  color: #ffffff;
}

    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .header-actions a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 10px 16px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      white-space: nowrap;
      transition:
        background 0.2s ease,
        transform 0.2s ease;
    }

    .header-actions a:hover {
      transform: translateY(-1px);
    }

    .add-entry-link {
      background: #15803d;
      color: white;
    }

    .add-entry-link:hover {
      background: #166534;
    }

    .back-link {
      background: #374151;
      color: white;
    }

    .back-link:hover {
      background: #1f2937;
    }

    /* ==================================================
       SUMMARY CARDS
    ================================================== */

    .summary-grid {
      display: grid;
      grid-template-columns:
        repeat(
          auto-fit,
          minmax(220px, 1fr)
        );
      gap: 16px;
      margin-bottom: 28px;
    }

    .summary-card {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 20px;
      box-shadow:
        0 3px 12px
        rgba(0, 0, 0, 0.06);
    }

    .summary-card h3 {
      margin: 0 0 10px;
      color: #4b5563;
      font-size: 15px;
      font-weight: 600;
    }

    .summary-card strong {
      display: block;
      font-size: 24px;
      color: #111827;
      overflow-wrap: anywhere;
    }

    .summary-card .balanced {
      color: #15803d;
    }

    .summary-card .unbalanced {
      color: #b91c1c;
    }

    /* ==================================================
       SECTIONS
    ================================================== */

    .section {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 28px;
      box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.04);
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
    }

    .section-header h2 {
      margin: 0;
      color: #111827;
    }

    .section-header p {
      margin: 4px 0 0;
      color: #6b7280;
      font-size: 14px;
    }

    /* ==================================================
       TABLE
    ================================================== */

    .table-wrapper {
      width: 100%;
      overflow-x: auto;
      border: 1px solid #e5e7eb;
      border-radius: 9px;
    }

    table {
      width: 100%;
      min-width: 950px;
      border-collapse: collapse;
      background: white;
    }

    th,
    td {
      border-bottom:
        1px solid #e5e7eb;
      padding: 12px;
      text-align: left;
      vertical-align: middle;
    }

    thead th {
      background: #f3f4f6;
      color: #374151;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }

    tbody tr:last-child td {
      border-bottom: 0;
    }

    tbody tr:hover {
      background: #f9fafb;
    }

    .amount {
      text-align: right;
      white-space: nowrap;
    }

    .account-code {
      font-weight: 700;
      color: #374151;
      white-space: nowrap;
    }

    .account-link {
      color: #2563eb;
      font-weight: 600;
      text-decoration: none;
    }

    .account-link:hover {
      text-decoration: underline;
    }

    .account-type,
    .normal-balance {
      white-space: nowrap;
    }

    .current-balance {
      font-weight: 700;
      color: #111827;
    }

    /* ==================================================
       JOURNAL STATUS
    ================================================== */

    .status-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 5px 9px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .status-posted {
      background: #dcfce7;
      color: #15803d;
    }

    .status-draft {
      background: #fef3c7;
      color: #a16207;
    }

    .status-voided {
      background: #fee2e2;
      color: #b91c1c;
    }

    .status-unknown {
      background: #e5e7eb;
      color: #4b5563;
    }

    .empty-message {
      padding: 30px;
      text-align: center;
      color: #6b7280;
    }

    /* ==================================================
       RESPONSIVE DESIGN
    ================================================== */

    @media (
      max-width: 800px
    ) {
      .ledger-container {
        padding: 14px;
      }

      .page-header {
        align-items: flex-start;
        flex-direction: column;
      }

      .header-actions {
        width: 100%;
      }

      .header-actions a {
        flex: 1;
      }

      .section {
        padding: 14px;
      }
    }

    @media (
      max-width: 500px
    ) {
      .page-title h1 {
        font-size: 25px;
      }

      .header-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .header-actions a {
        width: 100%;
      }

      .summary-card strong {
        font-size: 21px;
      }
    }
  </style>
</head>

<body>

  <main class="ledger-container">

    <!-- ==================================================
         PAGE HEADER
    ================================================== -->

    <header class="page-header">

      <div class="page-title">
        <h1>General Ledger</h1>

        <p>
          Company accounts and complete
          financial transaction history
        </p>
      </div>

      <div class="header-actions">

        <a
          href="/ledger/entries/create"
          class="add-entry-link"
        >
          + New Journal Entry
        </a>

        <a
          href="/"
          class="back-link"
        >
          Back to Dashboard
        </a>

      </div>

    </header>

    <!-- ==================================================
         LEDGER SUMMARY
    ================================================== -->

    <section class="summary-grid">

      <article class="summary-card">
        <h3>Journal Entries</h3>

        <strong>
          <%= totalEntries %>
        </strong>
      </article>

      <article class="summary-card">
        <h3>Total Debit</h3>

        <strong>
          <%= money(totalDebit) %>
        </strong>
      </article>

      <article class="summary-card">
        <h3>Total Credit</h3>

        <strong>
          <%= money(totalCredit) %>
        </strong>
      </article>

      <article class="summary-card">
        <h3>Ledger Status</h3>

        <% if (isBalanced) { %>

          <strong class="balanced">
            Balanced
          </strong>

        <% } else { %>

          <strong class="unbalanced">
            Not Balanced
          </strong>

        <% } %>
      </article>

    </section>

    <!-- ==================================================
         CHART OF ACCOUNTS
    ================================================== -->

    <section class="section">

      <div class="section-header">

        <div>
          <h2>Chart of Accounts</h2>

          <p>
            Click an account name to view
            its complete transaction history.
          </p>
        </div>

      </div>

      <div class="table-wrapper">

        <table>

          <thead>
            <tr>
              <th>Code</th>

              <th>Account</th>

              <th>Type</th>

              <th>Normal Balance</th>

              <th class="amount">
                Total Debit
              </th>

              <th class="amount">
                Total Credit
              </th>

              <th class="amount">
                Current Balance
              </th>
            </tr>
          </thead>

          <tbody>

            <% if (
              accountList.length === 0
            ) { %>

              <tr>
                <td
                  colspan="7"
                  class="empty-message"
                >
                  No ledger accounts were found.
                </td>
              </tr>

            <% } else { %>

              <% accountList.forEach(
                (account) => {
              %>

                <tr>

                  <td class="account-code">
                    <%= account.account_code %>
                  </td>

                  <td>
                    <a
                      href="/ledger/accounts/<%= account.id %>"
                      class="account-link"
                    >
                      <%= account.account_name %>
                    </a>
                  </td>

                  <td class="account-type">
                    <%= account.account_type %>
                  </td>

                  <td class="normal-balance">
                    <%= account.normal_balance %>
                  </td>

                  <td class="amount">
                    <%=
                      money(
                        account.total_debit
                      )
                    %>
                  </td>

                  <td class="amount">
                    <%=
                      money(
                        account.total_credit
                      )
                    %>
                  </td>

                  <td class="amount current-balance">
                    <%=
                      money(
                        account.current_balance
                      )
                    %>
                  </td>

                </tr>

              <% }); %>

            <% } %>

          </tbody>

        </table>

      </div>

    </section>

    <!-- ==================================================
         RECENT JOURNAL ENTRIES
    ================================================== -->

    <section class="section">

      <div class="section-header">

        <div>
          <h2>Recent Journal Entries</h2>

          <p>
            The most recent automatic and
            manual accounting transactions.
          </p>
        </div>

      </div>

      <div class="table-wrapper">

        <table>

          <thead>
            <tr>
              <th>Date</th>

              <th>Entry Number</th>

              <th>Reference</th>

              <th>Description</th>

              <th>Source</th>

              <th>Status</th>

              <th class="amount">
                Debit
              </th>

              <th class="amount">
                Credit
              </th>
            </tr>
          </thead>

          <tbody>

            <% if (
              entryList.length === 0
            ) { %>

              <tr>
                <td
                  colspan="8"
                  class="empty-message"
                >
                  No journal entries have been
                  posted yet. Click
                  <strong>New Journal Entry</strong>
                  to add the first transaction.
                </td>
              </tr>

            <% } else { %>

              <% entryList.forEach(
                (entry) => {
                  const entryStatus =
                    String(
                      entry.status ||
                      "Unknown"
                    ).toLowerCase();

                  const allowedStatuses = [
                    "posted",
                    "draft",
                    "voided"
                  ];

                  const statusClass =
                    allowedStatuses.includes(
                      entryStatus
                    )
                      ? `status-${entryStatus}`
                      : "status-unknown";
              %>

                <tr>

                  <td>
                    <%= entry.entry_date %>
                  </td>

                  <td>
                    <strong>
                      <%= entry.entry_number %>
                    </strong>
                  </td>

                  <td>
                    <%=
                      entry.reference_number ||
                      "-"
                    %>
                  </td>

                  <td>
                    <%= entry.description %>
                  </td>

                  <td>
                    <%=
                      entry.source_type ||
                      "Manual"
                    %>
                  </td>

                  <td>
                    <span
                      class="status-badge <%= statusClass %>"
                    >
                      <%=
                        entry.status ||
                        "Unknown"
                      %>
                    </span>
                  </td>

                  <td class="amount">
                    <%=
                      money(
                        entry.total_debit
                      )
                    %>
                  </td>

                  <td class="amount">
                    <%=
                      money(
                        entry.total_credit
                      )
                    %>
                  </td>

                </tr>

              <% }); %>

            <% } %>

          </tbody>

        </table>

      </div>

    </section>

  </main>

</body>

</html>