<%
  const transactionList =
    Array.isArray(transactions)
      ? transactions
      : [];

  const selectedFilters =
    filters || {};

  const money = (amount) => {
    if (
      typeof formatMoney === "function"
    ) {
      return formatMoney(amount);
    }

    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>
    <%= account.account_name %> Ledger
  </title>

  <link
    rel="stylesheet"
    href="/css/style.css"
  >

  <style>
    * {
      box-sizing: border-box;
    }

    .ledger-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 24px;
    }

    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
    }

    .page-header h1 {
      margin: 0;
    }

    .back-link {
      text-decoration: none;
      padding: 10px 16px;
      border-radius: 8px;
      background: #374151;
      color: white;
    }

    .summary-grid {
      display: grid;
      grid-template-columns:
        repeat(
          auto-fit,
          minmax(220px, 1fr)
        );
      gap: 16px;
      margin-bottom: 24px;
    }

    .summary-card {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 20px;
    }

    .summary-card h3 {
      margin: 0 0 10px;
      font-size: 15px;
      color: #4b5563;
    }

    .summary-card strong {
      font-size: 22px;
    }

    .filter-box {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 24px;
    }

    .filter-form {
      display: grid;
      grid-template-columns:
        repeat(
          auto-fit,
          minmax(200px, 1fr)
        );
      gap: 14px;
      align-items: end;
    }

    .filter-group {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .filter-group input {
      padding: 10px;
      border: 1px solid #d1d5db;
      border-radius: 7px;
    }

    .filter-actions {
      display: flex;
      gap: 10px;
    }

    .filter-actions button,
    .filter-actions a {
      padding: 10px 16px;
      border: 0;
      border-radius: 7px;
      cursor: pointer;
      text-decoration: none;
    }

    .filter-actions button {
      background: #2563eb;
      color: white;
    }

    .filter-actions a {
      background: #e5e7eb;
      color: #111827;
    }

    .table-section {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 20px;
    }

    .table-wrapper {
      overflow-x: auto;
    }

    table {
      width: 100%;
      min-width: 1050px;
      border-collapse: collapse;
    }

    th,
    td {
      padding: 12px;
      border-bottom:
        1px solid #e5e7eb;
      text-align: left;
    }

    th {
      background: #f3f4f6;
    }

    .amount {
      text-align: right;
      white-space: nowrap;
    }

    .empty-message {
      text-align: center;
      padding: 26px;
      color: #6b7280;
    }

    @media (
      max-width: 700px
    ) {
      .ledger-container {
        padding: 14px;
      }

      .page-header {
        flex-direction: column;
        align-items: flex-start;
      }
    }
  </style>
</head>

<body>

  <main class="ledger-container">

    <div class="page-header">
      <div>
        <h1>
          <%= account.account_name %>
        </h1>

        <p>
          Account code:
          <strong>
            <%= account.account_code %>
          </strong>

          · Type:
          <strong>
            <%= account.account_type %>
          </strong>
        </p>
      </div>

      <a
        href="/ledger"
        class="back-link"
      >
        Back to General Ledger
      </a>
    </div>

    <section class="summary-grid">

      <article class="summary-card">
        <h3>Opening Balance</h3>

        <strong>
          <%= money(openingBalance) %>
        </strong>
      </article>

      <article class="summary-card">
        <h3>Closing Balance</h3>

        <strong>
          <%= money(closingBalance) %>
        </strong>
      </article>

      <article class="summary-card">
        <h3>Normal Balance</h3>

        <strong>
          <%= account.normal_balance %>
        </strong>
      </article>

      <article class="summary-card">
        <h3>Transactions</h3>

        <strong>
          <%= transactionList.length %>
        </strong>
      </article>

    </section>

    <section class="filter-box">

      <form
        method="GET"
        action="/ledger/accounts/<%= account.id %>"
        class="filter-form"
      >

        <div class="filter-group">
          <label for="start_date">
            Start Date
          </label>

          <input
            type="date"
            id="start_date"
            name="start_date"
            value="<%= selectedFilters.start_date %>"
          >
        </div>

        <div class="filter-group">
          <label for="end_date">
            End Date
          </label>

          <input
            type="date"
            id="end_date"
            name="end_date"
            value="<%= selectedFilters.end_date %>"
          >
        </div>

        <div class="filter-actions">
          <button type="submit">
            Apply Filter
          </button>

          <a
            href="/ledger/accounts/<%= account.id %>"
          >
            Clear
          </a>
        </div>

      </form>

    </section>

    <section class="table-section">

      <h2>Account Transactions</h2>

      <div class="table-wrapper">

        <table>

          <thead>
            <tr>
              <th>Date</th>
              <th>Entry Number</th>
              <th>Reference</th>
              <th>Description</th>
              <th>Source</th>
              <th class="amount">Debit</th>
              <th class="amount">Credit</th>
              <th class="amount">
                Running Balance
              </th>
            </tr>
          </thead>

          <tbody>

            <% if (
              transactionList.length === 0
            ) { %>

              <tr>
                <td
                  colspan="8"
                  class="empty-message"
                >
                  No transactions found for
                  this account.
                </td>
              </tr>

            <% } %>

            <% transactionList.forEach(
              (transaction) => {
            %>

              <tr>
                <td>
                  <%= transaction.entry_date %>
                </td>

                <td>
                  <%= transaction.entry_number %>
                </td>

                <td>
                  <%=
                    transaction.reference_number ||
                    "-"
                  %>
                </td>

                <td>
                  <%=
                    transaction.line_description ||
                    transaction.description
                  %>
                </td>

                <td>
                  <%=
                    transaction.source_type ||
                    "Manual"
                  %>
                </td>

                <td class="amount">
                  <%=
                    Number(
                      transaction.debit_amount
                    ) > 0
                      ? money(
                          transaction.debit_amount
                        )
                      : "-"
                  %>
                </td>

                <td class="amount">
                  <%=
                    Number(
                      transaction.credit_amount
                    ) > 0
                      ? money(
                          transaction.credit_amount
                        )
                      : "-"
                  %>
                </td>

                <td class="amount">
                  <strong>
                    <%=
                      money(
                        transaction.running_balance
                      )
                    %>
                  </strong>
                </td>
              </tr>

            <% }); %>

          </tbody>

        </table>

      </div>

    </section>

  </main>

</body>
</html>