import { appApi } from 'src/boot/axios';
import { ref, computed } from 'vue';
import type { Member, Members } from 'src/vueLib/models/member';
import { useNotify } from 'src/vueLib/general/useNotify';
import { i18n } from 'boot/lang';
import { useResponsibleTable } from '../responsible/ResponsibleTable';
import { appName } from 'src/vueLib/models/settings';
import { useGroupTable } from '../group/GroupTable';
import IconComponent from '../components/IconComponent.vue';
import SearchableSelectComponent from '../components/SearchableSelect.vue';
import ClickableComponent from '../components/ClickableComponent.vue';
import MenuComponent from '../components/MenuComponent.vue';

export function useMemberTable() {
  const allMembers = ref<Members>([]);
  const filteredMembers = ref<Members>([]);
  const filterList = ref<
    {
      field: keyof Member;
      keys: string[];
    }[]
  >();
  const { responsibles, responsibleMember, updateResponsibles } = useResponsibleTable();
  const { groups, updateGroups } = useGroupTable();

  const pagination = ref({
    sortBy: 'firstName',
    descending: false,
    page: 1,
    rowsPerPage: 20,
  });

  //add enabling of each columns
  const enabledColumns = ref<Record<string, boolean>>({
    cake: true,
    firstName: true,
    lastName: true,
    birthday: true,
    age: true,
    address: true,
    comment: true,
    town: true,
    zip: true,
    phone: true,
    email: true,
    group: true,
    responsible: true,
    firstVisit: true,
    lastVisit: true,
    option: true,
    test: true,
  });

  const columns = computed(() =>
    [
      {
        name: 'cake',
        align: 'center' as const,
        label: '',
        field: 'cake',
        icon: 'cake',
        component: IconComponent,
      },
      {
        name: 'firstName',
        align: 'left' as const,
        label: i18n.global.t('prename'),
        field: 'firstName',
        sortable: true,
        component: ClickableComponent,
      },
      {
        name: 'lastName',
        align: 'left' as const,
        label: i18n.global.t('lastName'),
        field: 'lastName',
        sortable: true,
        component: ClickableComponent,
      },
      {
        name: 'birthday',
        align: 'left' as const,
        label: i18n.global.t('birthday'),
        field: 'birthday',
        sortable: true,
        component: ClickableComponent,
      },
      {
        name: 'age',
        align: 'left' as const,
        label: i18n.global.t('age'),
        field: 'age',
        sortable: true,
        component: ClickableComponent,
      },
      {
        name: 'comment',
        align: 'left' as const,
        label: i18n.global.t('comment'),
        field: 'comment',
        sortable: true,
        component: ClickableComponent,
      },
      {
        name: 'address',
        align: 'left' as const,
        label: i18n.global.t('address'),
        field: 'address',
        sortable: true,
        component: ClickableComponent,
      },
      {
        name: 'town',
        align: 'left' as const,
        label: i18n.global.t('town'),
        field: 'town',
        sortable: true,
        component: ClickableComponent,
      },
      {
        name: 'zip',
        align: 'left' as const,
        label: i18n.global.t('zipCode'),
        field: 'zip',
        sortable: true,
        component: ClickableComponent,
      },
      {
        name: 'phone',
        align: 'left' as const,
        label: i18n.global.t('phone'),
        field: 'phone',
        sortable: true,
        component: ClickableComponent,
      },
      {
        name: 'email',
        align: 'left' as const,
        label: i18n.global.t('email'),
        field: 'email',
        sortable: true,
        component: ClickableComponent,
      },
      {
        name: 'group',
        align: 'left' as const,
        label: i18n.global.t('group'),
        field: 'group',
        sortable: true,
        component: SearchableSelectComponent,
      },
      {
        name: 'responsible',
        align: 'left' as const,
        label: i18n.global.t('responsible'),
        field: 'responsible',
        sortable: true,
        component: SearchableSelectComponent,
      },
      {
        name: 'firstVisit',
        align: 'left' as const,
        label: i18n.global.t('firstVisit'),
        field: 'firstVisit',
        sortable: true,
        component: ClickableComponent,
      },
      {
        name: 'lastVisit',
        align: 'left' as const,
        label: i18n.global.t('lastVisit'),
        field: 'lastVisit',
        sortable: true,
        component: ClickableComponent,
      },
      {
        name: 'option',
        align: 'center' as const,
        label: '',
        field: 'option',
        icon: 'option',
        component: MenuComponent,
      },
    ].filter((c) => enabledColumns.value[c.name]),
  );

  const { NotifyResponse } = useNotify();

  const loading = ref(false);

  function calculateAge(birthDateString: string) {
    if (birthDateString === undefined) return 0;
    const [day, month, year] = birthDateString.split('.').map(Number); // for format "1.2.2000"
    if (year === undefined || month === undefined || day === undefined) return 0;
    const birthDate = new Date(year, month - 1, day); // month is 0-based

    const today = new Date();

    let age = today.getFullYear() - birthDate.getFullYear();

    // Check if birthday has occurred yet this year
    const hasBirthdayPassed =
      today.getMonth() > birthDate.getMonth() ||
      (today.getMonth() === birthDate.getMonth() && today.getDate() >= birthDate.getDate());

    if (!hasBirthdayPassed) {
      age--;
    }

    return age;
  }

  //isThreeDaysBeforeAnnualDate check if upcoming date is less than 3 days from now
  function isXDaysBeforeAnnualDate(dateString: string, before: number) {
    if (dateString === undefined) return;
    const [day, month] = dateString.split('.').map(Number);

    const today = new Date();
    today.setHours(0, 0, 0);

    const annualDate = new Date(today.getFullYear(), month ? month - 1 : 0, day);
    annualDate.setHours(0, 0, 1);

    const xDaysBefore = new Date(annualDate);
    xDaysBefore.setDate(annualDate.getDate() - before);

    return today >= xDaysBefore && today <= annualDate;
  }

  function getRowClass(row: Member) {
    if (!row.birthday) return '';
    if (isXDaysBeforeAnnualDate(row.birthday, 1)) {
      return 'bg-red-2 text-red-10';
    } else if (isXDaysBeforeAnnualDate(row.birthday, 4)) {
      return 'bg-green-2 text-green-10';
    } else if (isXDaysBeforeAnnualDate(row.birthday, 8)) {
      return 'bg-amber-2 text-amber-10';
    }
    return '';
  }

  //updates member list from database
  async function updateMembers(filter?: Members, filterbyName?: boolean) {
    loading.value = true;

    await updateResponsibles().catch((err) => NotifyResponse(err, 'error'));
    await updateGroups().catch((err) => NotifyResponse(err, 'error'));
    await appApi
      .get('members')
      .then((resp) => {
        if (resp.data === null) {
          allMembers.value = [];
          return;
        }
        allMembers.value = resp.data as Members;
        if (allMembers.value === null) {
          allMembers.value = [];
          return;
        }
        allMembers.value.forEach((member) => {
          // remove responsible of member if it does not exist in responsible list any longer
          if (!responsibles.value.some((r) => r.id === member.responsible?.id)) {
            delete member.responsible;
          }

          //calculte years if a birth date is entered
          if (member.birthday) {
            member.age = String(calculateAge(member.birthday));
          }
        });
      })

      .catch((err) => {
        NotifyResponse(err, 'error');
      })
      .finally(() => {
        loading.value = false;
        //filter same members out so list is shorter
        filteredMembers.value = allMembers.value;
        if (filter) {
          filteredMembers.value = filteredMembers.value.filter(
            (m1) =>
              !filter.some((m2) => {
                if (filterbyName) {
                  return m1.firstName === m2.firstName && m1.lastName === m2.lastName;
                }
                return m1.id === m2.id;
              }),
          );
        }

        //second filter
        const list = filterList.value ?? [];
        if (filterList.value && filterList.value.length > 0) {
          filteredMembers.value = filteredMembers.value.filter((member) =>
            list.every((filterItem) => {
              const keys = filterItem.keys ?? [];
              if (keys.includes('null')) return true;
              if (keys.length === 0) return true;

              const value = member[filterItem.field];

              if (value === undefined || value === null) {
                return keys.includes('None');
              }
              if (typeof value === 'number') {
                return keys.includes(value.toString());
              }
              if (typeof value === 'object') {
                if ('name' in value) {
                  return keys.includes(value.name);
                }
              }
              if (typeof value === 'string') {
                return keys.includes(value);
              }
              return false;
            }),
          );
          return;
        }
      });
  }

  function setNewFilter(field: string, ...keys: string[]) {
    filterList.value = [
      {
        field: field as keyof Member,
        keys: keys.flat().map((k) => String(k)),
      },
    ];
  }

  function disableColumns(...columns: string[]) {
    columns.forEach((col) => {
      if (col in enabledColumns.value) {
        enabledColumns.value[col] = false;
      }
    });
  }

  function exportCsv() {
    const comma = ';';
    // Extract only columns that have a field (not icons/options)
    const exportableColumns = columns.value.filter(
      (col) => typeof col.field === 'string' && col.field !== 'cake' && col.field !== 'option',
    ) as { field: keyof Member; label: string }[];

    // Build CSV header row
    const header = exportableColumns.map((col) => col.field).join(comma);

    // Build CSV rows
    const data = allMembers.value.map((member) =>
      exportableColumns
        .map((col) => {
          const value = member[col.field];
          // handle nested objects (e.g. responsible)
          if (typeof value === 'object' && value !== null) {
            if (
              'firstName' in value &&
              'lastName' in value &&
              typeof value.firstName === 'string' &&
              typeof value.lastName === 'string'
            )
              return `"${value.firstName} ${value.lastName}"`;
            return `"${JSON.stringify(value)}"`;
          }
          return `"${value ?? ''}"`;
        })
        .join(comma),
    );

    // Combine into CSV string
    const csv = [header, ...data].join('\n');

    // Create blob and trigger download
    const BOM = '\uFEFF';
    const blob = new Blob([BOM + csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', i18n.global.t(appName.value) + '.csv');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  return {
    allMembers,
    filteredMembers,
    responsibles,
    responsibleMember,
    groups,
    pagination,
    columns,
    loading,
    getRowClass,
    updateMembers,
    setNewFilter,
    isXDaysBeforeAnnualDate,
    disableColumns,
    exportCsv,
  };
}

export async function getAllMembers(): Promise<Members> {
  const { NotifyResponse } = useNotify();

  const allMembers = ref<Members>([]);

  await appApi
    .get('members')
    .then((resp) => {
      if (resp.data === null) {
        return [];
      }
      allMembers.value = resp.data as Members;
      if (allMembers.value === null) {
        return [];
      }
    })

    .catch((err) => {
      NotifyResponse(err, 'error');
    });

  return allMembers.value;
}