r701/oxibadge/src/routes/+page.svelte

<script lang="ts">
  import { invoke } from '@tauri-apps/api/core';
  import { onMount } from 'svelte';
  import { _, locale } from 'svelte-i18n';
  import { monthName } from '$lib/month';
  import { setError, clearError } from '$lib/error';
  import Screen from '$lib/components/Screen.svelte';
  import Onboarding from '$lib/components/Onboarding.svelte';
  import ConfirmMonth from '$lib/components/ConfirmMonth.svelte';
  import LoadingScreen from '$lib/components/LoadingScreen.svelte';
  import TimesheetReview from '$lib/components/TimesheetReview.svelte';
  import SettingsButton from '$lib/components/SettingsButton.svelte';
  import Settings from '$lib/components/Settings.svelte';
  import NewEmployees from '$lib/components/NewEmployees.svelte';
  import { buildEmployees, type AttendanceRecord } from '$lib/components/review/fromRecords';
  import type { NewEmployee } from '$lib/components/new-employees/logic';
  import type { Shifts } from '$lib/shifts';
  import type { Settings as SettingsData } from '$lib/settings';
  import { PRIMARY_READER_INDEX, type EmployeeCache, type EmployeeNames } from '$lib/employees';

  type Step =
    | 'loading'
    | 'setup'
    | 'confirm-month'
    | 'loading-records'
    | 'loading-employees'
    | 'new-employees'
    | 'review'
    | 'settings';

  let step = $state<Step>('loading');
  let selectedYear = $state(0);
  let selectedMonth = $state(0);
  let records = $state<AttendanceRecord[]>([]);
  let fullEmployeeCache = $state<EmployeeCache>({});
  let employeeCache = $state<EmployeeNames>({});
  let employeeNames = $state<Record<string, string>>({});
  let newEmployees = $state<NewEmployee[]>([]);
  // Placeholder: overwritten by load_settings before the review screen is reachable.
  let shifts = $state<Shifts>({ in1: '', out1: '', in2: '', out2: '', round_step_min: 0 });

  const period = $derived(`${monthName($locale, selectedMonth)} ${selectedYear}`);
  const reviewEmployees = $derived(buildEmployees(selectedYear, selectedMonth, records, employeeNames));

  onMount(async () => {
    const settings = await invoke<SettingsData>('load_settings');
    shifts = settings.shifts;
    step = settings.readers[0] ? 'confirm-month' : 'setup';
  });

  function openSettings() {
    clearError();
    step = 'settings';
  }

  function closeSettings() {
    clearError();
    step = 'confirm-month';
  }

  async function loadMonth(selection: { year: number; month: number }) {
    selectedYear = selection.year;
    selectedMonth = selection.month;
    step = 'loading-records';
    clearError();
    try {
      records = await invoke('load_records', selection);
      step = 'loading-employees';

      fullEmployeeCache = await invoke<EmployeeCache>('load_employee_cache');
      employeeCache = fullEmployeeCache[PRIMARY_READER_INDEX] ?? {};
      const distinctIds = [...new Set(records.map((r: AttendanceRecord) => r.employee_id))];
      const knownIds = distinctIds.filter((id) => String(id) in employeeCache);
      const newIds = distinctIds.filter((id) => !(String(id) in employeeCache));

      if (newIds.length > 0) {
        const fetched = await invoke<Record<string, string>>('load_employees', {
          records,
          known: knownIds
        });
        newEmployees = newIds.map((id) => ({ id, name: fetched[String(id)] ?? '' }));
        step = 'new-employees';
      } else {
        employeeNames = employeeCache;
        step = 'review';
      }
    } catch (err) {
      setError(err);
      step = 'confirm-month';
    }
  }

  /** Merges `updates` into the employee cache (local state + on disk) and returns the merged names. */
  async function mergeEmployeeNames(updates: Record<string, string>): Promise<Record<string, string>> {
    const merged = { ...employeeCache, ...updates };
    employeeCache = merged;
    employeeNames = merged;
    const nextFullCache = { ...fullEmployeeCache, [PRIMARY_READER_INDEX]: merged };
    fullEmployeeCache = nextFullCache;
    await invoke('save_employee_cache', { cache: nextFullCache });
    return merged;
  }

  async function onNewEmployeesContinue(list: { id: number; name: string }[]) {
    const updates = Object.fromEntries(list.map((e) => [String(e.id), e.name]));
    step = 'review';
    await mergeEmployeeNames(updates);
  }

  async function onEmployeeRenamed(id: number, name: string) {
    await mergeEmployeeNames({ [String(id)]: name });
  }
</script>

{#if step === 'review'}
  <TimesheetReview
    year={selectedYear}
    month={selectedMonth}
    employees={reviewEmployees}
    shift={shifts}
    onback={() => (step = 'confirm-month')}
    onexport={(payload) => invoke('export_timesheet', { payload })}
    onrename={onEmployeeRenamed}
  />
{:else if step === 'new-employees'}
  <NewEmployees employees={newEmployees} oncontinue={onNewEmployeesContinue} />
{:else if step === 'settings'}
  <Settings
    onback={closeSettings}
    onsettingschange={(s: SettingsData) => {
      shifts = s.shifts;
    }}
  />
{:else}
  <Screen>
    {#if step === 'loading'}
      <p>{$_('loading')}</p>
    {:else if step === 'setup'}
      <Onboarding onconnected={() => (step = 'confirm-month')} />
    {:else if step === 'confirm-month'}
      <SettingsButton ariaLabel={$_('settings.title')} onclick={openSettings} />
      <ConfirmMonth onstart={loadMonth} />
    {:else if step === 'loading-records'}
      <LoadingScreen
        title={$_('loading_records.title')}
        description={$_('loading_records.description', { values: { period } })}
      />
    {:else if step === 'loading-employees'}
      <LoadingScreen title={$_('loading_employees.title')} description={$_('loading_employees.description')} />
    {/if}
  </Screen>
{/if}