---
import { app } from "../firebase/server";
import { getAuth } from "firebase-admin/auth";
import { getFirestore, Timestamp } from "firebase-admin/firestore";
import Layout from "../layouts/Layout.astro";
import { ADMIN_EMAILS } from "astro:env/client";

const auth = getAuth(app);

 const { email } = Astro.locals;


/* Check current session */
// if (!Astro.cookies.has("__session")) {
//   return Astro.redirect("/signin");
// }
// const sessionCookie = Astro.cookies.get("__session")?.value;

// const decodedCookie = await auth.verifySessionCookie(sessionCookie!);
// const user = await auth.getUser(decodedCookie.uid);
// console.log("user?", user)
// if (!email) {
//   return Astro.redirect("/signin");
// }

interface Expense {
  id: string;
  name: string;
  email: string;
  purpose: string;
  amount: number;
  date: Timestamp;
}

const db = getFirestore(app);
const expensesRef = db.collection("expenses");
const expensesSnapshot = await expensesRef.get();
let expenses = expensesSnapshot.docs.map((doc) => ({
  id: doc.id,
  email,
  ...doc.data(),
})) 

const adminEmails = ADMIN_EMAILS.split(",");

if (!adminEmails.includes(email)) {
 expenses = expenses.filter(e => e.email === email) as Expense[];
}

const usdFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
//   minimumFractionDigits: 0,
//   maximumFractionDigits: 2,
});


let sortedExpenses = expenses.sort((a, b) => Date.parse(b.date.toDate().toDateString()) - Date.parse(a.date.toDate().toDateString()));

function formatDate(date : any) {
    var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) 
        month = '0' + month;
    if (day.length < 2) 
        day = '0' + day;

    return [month, day, year].join('-');
}

---

<Layout title="dashboard">

    {email && 
<div class="flex items-center justify-center relative overflow-x-auto p-20">
    <table class="table-sort table-arrows w-[60%] border border-default shadow-xs text-sm text-left rtl:text-right text-body">
        <thead class="text-sm text-body bg-neutral-secondary-medium border-b border-default-medium">
            <tr>
                <th id="nameSort" scope="col" class="px-6 py-3 font-medium">
                    Name
                </th>
                 <th scope="col" class="px-6 py-3 font-medium">
                    Email
                </th>
                 <th id="purposeSort" scope="col" class="px-6 py-3 font-medium">
                    Purpose
                </th>
                                 <th id="dateSort" scope="col" class="dates-mdy-sort px-6 py-3 font-medium">
                    Date
                </th>
                <th scope="col" class="px-6 py-3 font-medium">  
                        Amount
                </th>
                <th scope="col" class="disable-sort px-6 py-3 font-medium">
                    <span class="sr-only">See Receipt</span>
                </th>
            </tr>
        </thead>
        <tbody id="list">
                {
      sortedExpenses.map((exp) => (
                    <tr class="bg-neutral-primary-soft border-b  border-default">
                <th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
                    <a href={`/expense/${exp.id}`}>{exp.name}</a>
                </th>
                <td class="px-6 py-4">
                    {exp.email}
                </td>
                 <td class="px-6 py-4">
                    {exp.purpose}
                </td>
                <td class="px-6 py-4">
                    {formatDate(exp.date?.toDate().toDateString())}
                </td>
                <td class="px-6 py-4">
                   {usdFormatter.format(exp.amount)}
                </td>
                <td class="px-6 py-4 text-right">
                    <a href="#" class="font-medium text-fg-brand hover:underline"> 
                        <a href={`/expense/${exp.id}`}>See Receipt</a> 
                        {/* <a href={`/edit/${exp.id}`}>Edit</a> */}
                        </a>
                </td>
            </tr>
      ))
    }

  
        </tbody>
    </table>

    
</div>

}

</Layout>
<script src="https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.js"></script>
<!-- <script>
  class SortableList extends HTMLElement {
    connectedCallback() {
      const list = this.querySelector('#list') as HTMLUListElement;
      const amountSort = document.querySelector("#amountSort")
      const titleBtn = this.querySelector('#sort-title');
      const dateBtn = this.querySelector('#sort-date');

      // Helper to get all list items as an array
      const getItems = () => Array.from(list.querySelectorAll('tr')) as HTMLElement[];

            amountSort?.addEventListener('click', () => {
        const itemsArray = getItems();
        itemsArray.sort((a, b) => {
           a.amount - b.amount
          const titleA = a.dataset.title || '';
          const titleB = b.dataset.title || '';
          return titleA.localeCompare(titleB);
        });
        
        // Re-append items to update order
        itemsArray.forEach(item => list.appendChild(item));
      });


      // 1. Sort by Title Click
      titleBtn?.addEventListener('click', () => {
        const itemsArray = getItems();
        itemsArray.sort((a, b) => {
          const titleA = a.dataset.title || '';
          const titleB = b.dataset.title || '';
          return titleA.localeCompare(titleB);
        });
        
        // Re-append items to update order
        itemsArray.forEach(item => list.appendChild(item));
      });

      // 2. Sort by Date Click
      dateBtn?.addEventListener('click', () => {
        const itemsArray = getItems();
        itemsArray.sort((a, b) => {
          const dateA = new Date(a.dataset.date || '').getTime();
          const dateB = new Date(b.dataset.date || '').getTime();
          return dateA - dateB;
        });

        // Re-append items to update order
        itemsArray.forEach(item => list.appendChild(item));
      });
    }
  }

  customElements.define('sortable-list', SortableList);
</script>

<script define:vars={{ sortedExpenses }}>
  const amountSort = document.querySelectorAll("#amountSort")
  console.log("amountSort-", amountSort)

//   function sortByName() {
//     sortedExpenses = expenses.sort((a, b) => a.name.localeCompare(b.name));
// }

let sortByAmount = (expArray) => {
    return expArray.sort((a, b) => a.amount - b.amount);
}

// function sortByPurpose() {
//     sortedExpenses = expenses.sort((a, b) => a.purpose.localeCompare(b.purpose));
// }

  amountSort.forEach((button) => {
    button.addEventListener('click', () => {
        sortedExpenses = sortByAmount(sortedExpenses);
    });
  });
</script> -->