import { LocationCard } from './ui/LocationCard';
import { MonthTitle } from './ui/MonthTitle';
import { AddMonthButton } from './ui/AddMonthButton';
import { AddLocationButton } from './ui/AddLocationButton';
import { PageFooter } from './ui/PageFooter';
import { fetchAllLocations } from './lib/actions/locationActions';
import { formatCurrency } from './lib/formatStrings';
import { fetchAvailableYears } from './lib/actions/monthActions';
import { YearMonth } from './lib/db-types';
import { formatYearMonth } from './lib/format';
import { FC } from 'react';
import Pagination from './ui/Pagination';

const getNextYearMonth = (yearMonth:YearMonth) => {
  const {year, month} = yearMonth;
  return({
    year: month===12 ? year+1 : year,
    month: month===12 ? 1 : month+1
  } as YearMonth);
}

export interface PageProps {
  searchParams?: {
    year?: string;
  };
}

const Page:FC<PageProps> = async ({ searchParams }) => {

  let availableYears: number[];

  try {
    availableYears = await fetchAvailableYears();
  } catch (error:any) {
    return (
      <main className="flex min-h-screen flex-col p-6 bg-base-300">
        <p className="text-center text-2xl text-red-500">{error.message}</p>
      </main>);
  }

  // if the database is in it's initial state, show the add location button for the current month
  if(availableYears.length === 0) {
    
    const currentYearMonth:YearMonth = {
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1
    };
    
    return (
      <main className="flex min-h-screen flex-col p-6 bg-base-300">
        <MonthTitle yearMonth={currentYearMonth} />
        <AddLocationButton yearMonth={currentYearMonth} />
        <PageFooter />
      </main>
    );
  }

  console.log("page.availableYears", availableYears)

  const [ latestYear ] = availableYears;
  const currentYear = Number(searchParams?.year) || availableYears[0];
  const locations = await fetchAllLocations(currentYear);

  let monthlyExpense = 0;

 return (
    <main className="flex min-h-screen flex-col p-6 bg-base-300">
        {
          // if this is the latest year, show the add month button
          currentYear === latestYear &&
            <AddMonthButton yearMonth={getNextYearMonth(locations[0].yearMonth)} />
        }
        {
          locations.map((location, ix, array) => {

            const { year, month } = location.yearMonth
            const { year: prevYear, month: prevMonth } = array[ix-1]?.yearMonth ?? { year: undefined, month: undefined };
            const { year: nextYear, month: nextMonth } = array[ix+1]?.yearMonth ?? { year: undefined, month: undefined };

            const isLatestYear = year === latestYear;
            const isFirstLocationInMonth = ix === 0 || year !== prevYear || month !== prevMonth;
            const isLastLocationInMonth = year !== nextYear || month !== nextMonth;
            const isLastLocationOfLatestMonth = isLastLocationInMonth && year === array[0].yearMonth.year && month === array[0].yearMonth.month

            if(isFirstLocationInMonth) {
              monthlyExpense = 0;
            }

            monthlyExpense += location.bills.reduce((acc, bill) => acc + (bill.payedAmount ?? 0), 0);
            
            return (
              <>
                {
                  // show month title above the first LocationCard in the month
                  isFirstLocationInMonth ?
                    <MonthTitle key={`${year}-${month}`} yearMonth={location.yearMonth} /> : null
                }
                <LocationCard key={`${location._id}`} location={location} />
                {
                  // show AddLocationButton as a last item in the first month
                  isLastLocationOfLatestMonth && isLatestYear ?
                    <AddLocationButton key={`add-loc-${formatYearMonth(location.yearMonth)}`} yearMonth={location.yearMonth} /> : null
                }
                {
                  isLastLocationInMonth && monthlyExpense>0 ?
                    <div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
                        <span className="card-body self-center">
                          <p>
                            Total monthly expenditure: <strong>{ formatCurrency(monthlyExpense) }</strong>
                          </p>
                        </span>
                    </div> : null
                }
              </>
            )
          })
        }
        <div className="mt-5 flex w-full justify-center">
          <Pagination availableYears={availableYears} />
        </div>
        <PageFooter />
    </main>
  );
}

export default Page;