<script lang="ts">
  import { goto } from '$app/navigation';
  import { authManager } from '$lib/managers/auth-manager.svelte';
  import { Route } from '$lib/route';
  import { handleUpdateUserAdmin } from '$lib/services/user-admin.service';
  import { userInteraction } from '$lib/stores/user.svelte';
  import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
  import { Field, FormModal, Input, Link, NumberInput, Switch, Text } from '@immich/ui';
  import { mdiAccountEditOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';

  type Props = {
    data: PageData;
  };

  let { data }: Props = $props();

  const user = $derived(data.user);
  let { isAdmin, name, email } = $derived(user);
  let storageLabel = $derived(user.storageLabel || '');
  const previousQuota = $derived(user.quotaSizeInBytes);

  let quotaSize = $derived(
    typeof user.quotaSizeInBytes === 'number' ? convertFromBytes(user.quotaSizeInBytes, ByteUnit.GiB) : undefined,
  );

  const quotaSizeBytes = $derived(typeof quotaSize === 'number' ? convertToBytes(quotaSize, ByteUnit.GiB) : null);

  let quotaSizeWarning = $derived(
    previousQuota !== quotaSizeBytes &&
      !!quotaSizeBytes &&
      userInteraction.serverInfo &&
      quotaSizeBytes > userInteraction.serverInfo.diskSizeRaw,
  );

  const onClose = async () => {
    await goto(Route.viewUser(user));
  };

  const onSubmit = async (event: Event) => {
    event.preventDefault();

    const success = await handleUpdateUserAdmin(user, {
      email,
      name,
      storageLabel,
      quotaSizeInBytes: typeof quotaSize === 'number' ? convertToBytes(quotaSize, ByteUnit.GiB) : null,
      isAdmin,
    });

    if (success) {
      await onClose();
    }
  };
</script>

<FormModal title={$t('edit_user')} size="small" icon={mdiAccountEditOutline} {onClose} {onSubmit}>
  <Field label={$t('email')} required>
    <Input type="email" bind:value={email} />
  </Field>

  <Field label={$t('name')} required class="mt-4">
    <Input bind:value={name} />
  </Field>

  <Field label={$t('admin.quota_size_gib')} class="mt-4">
    <NumberInput bind:value={quotaSize} min="0" step="1" placeholder={$t('unlimited')} />
    {#if quotaSizeWarning}
      <Text size="small" color="danger">{$t('errors.quota_higher_than_disk_size')}</Text>
    {/if}
  </Field>

  <Field label={$t('storage_label')} class="mt-4">
    <Input bind:value={storageLabel} />
  </Field>

  <Text size="small" class="mt-2" color="muted">
    {$t('admin.note_apply_storage_label_previous_assets')}
    <Link href={Route.queues()}>
      {$t('admin.storage_template_migration_job')}
    </Link>
  </Text>

  {#if user.id !== authManager.user.id}
    <Field label={$t('admin.admin_user')}>
      <Switch bind:checked={isAdmin} class="mt-4" />
    </Field>
  {/if}
</FormModal>
