<script>
  import ImageInput from "$lib/components/ImageInput.svelte";
  import InputField from "$lib/components/InputField.svelte";
  import SmallLoader from "$lib/components/SmallLoader.svelte";
  import Modal from "$lib/components/Modal.svelte";
  import Avatar from "$lib/img/TeamAvatar.jpeg";
  import { onMount } from "svelte";
  import { applyAction, enhance } from "$app/forms";
  import { page } from "$app/stores";
  import { receive, send } from "$lib/utils/helpers";
  import { t } from "svelte-i18n";
  import { fly } from "svelte/transition";

  /** @type {import('./$types').ActionData} */
  export let form;

  /** @type {App.Locals['subscriptions']}*/
  $: subscriptions = $page.data.subscriptions;

  /** @type {App.Locals['user']}*/
  $: user = $page.data.user;

  /** @type {App.Locals['licence_categories']} */
  $: licence_categories = $page.data.licence_categories;

  /** @typedef {{name: string, src: string}} Avatar */
  const avatarFiles = import.meta.glob("$lib/img/Avatar-*.jpeg", {
    eager: true,
  });
  /** @type{Avatar[]} */
  let avatars = [];

  const TABS = ["profile", "licence", "membership", "bankaccount"];
  let activeTab = TABS[0];

  $: subscriptionModelOptions = subscriptions.map((sub) => ({
    value: sub?.name ?? "",
    label: sub?.name ?? "",
  }));

  const userStatusOptions = [
    { value: 1, label: $t("userStatus.1"), color: "#b1b1b1" }, // Grey for "Nicht verifiziert"
    { value: 2, label: $t("userStatus.2"), color: "#90EE90" }, // Light green for "Verifiziert"
    { value: 3, label: $t("userStatus.3"), color: "#00bc00" }, // Green for "Aktiv"
    { value: 4, label: $t("userStatus.4"), color: "#FFC0CB" }, // Pink for "Passiv"
    { value: 5, label: $t("userStatus.5"), color: "#FF4646" }, // Red for "Deaktiviert"
  ];

  const userRoleOptions = [
    { value: 0, label: $t("userRole.0"), color: "#b1b1b1" }, // Grey for "Mitglied"
    { value: 1, label: $t("userRole.1"), color: "#00bc00" }, // Green for "Betrachter"
    { value: 4, label: $t("userRole.4"), color: "#FFC0CB" }, // Pink for "Bearbeiter"
    { value: 8, label: $t("userRole.8"), color: "#FF4646" }, // Red for "Admin"
  ];
  const membershipStatusOptions = [
    { value: 3, label: $t("userStatus.3"), color: "#00bc00" }, // Green for "Aktiv"
    { value: 4, label: $t("userStatus.4"), color: "#FFC0CB" }, // Pink for "Passiv"
    { value: 5, label: $t("userStatus.5"), color: "#FF4646" }, // Red for "Deaktiviert"
  ];
  const licenceStatusOptions = [
    { value: 1, label: $t("userStatus.1"), color: "#b1b1b1" }, // Grey for "Nicht verifiziert"
    { value: 3, label: $t("userStatus.3"), color: "#00bc00" }, // Green for "Aktiv"
    { value: 4, label: $t("userStatus.4"), color: "#FFC0CB" }, // Pink for "Passiv"
    { value: 5, label: $t("userStatus.5"), color: "#FF4646" }, // Red for "Deaktiviert"
  ];

  let showModal = false,
    isUploading = false,
    isUpdating = false,
    showAvatars = false,
    password = "",
    password2 = "";

  const open = () => (showModal = true);
  const close = () => (showModal = false);
  const toggleAvatars = () => (showAvatars = !showAvatars);

  $: selectedSubscriptionModel =
    subscriptions.find(
      (sub) => sub?.id === user.membership?.subscription_model.id
    ) || null;

  onMount(() => {
    console.dir(user);
    console.dir(licence_categories);
    avatars = Object.entries(avatarFiles).map(([path, module]) => {
      if (typeof path !== "string") {
        throw new Error("Unexpected non-string path");
      }
      if (
        typeof module !== "object" ||
        module === null ||
        !("default" in module)
      ) {
        throw new Error("Unexpected module format");
      }
      const src = module.default;
      if (typeof src !== "string") {
        throw new Error("Unexpected default export type");
      }
      return {
        name: path.split("/").pop()?.split(".")[0] ?? "Unknown",
        src: src,
      };
    });
  });

  /**
   * Sets the active tab
   * @param {string} tab - The tab to set as active
   */
  function setActiveTab(tab) {
    activeTab = tab;
  }

  /** @type {import('./$types').SubmitFunction} */
  const handleUpdate = async ({ form, formData, action, cancel }) => {
    isUpdating = true;
    return async ({ result }) => {
      isUpdating = false;
      if (result.type === "success" || result.type === "redirect") {
        close();
      }
      await applyAction(result);
    };
  };

  /** @type {import('./$types').SubmitFunction} */
  const handleUpload = async () => {
    isUploading = true;
    return async ({ result }) => {
      isUploading = false;
      /** @type {any} */
      const res = result;
      if (result.type === "success" || result.type === "redirect") {
        user.profile_picture = res.data.profile_picture;
      }
      await applyAction(result);
    };
  };
</script>

<div class="hero-container">
  <div class="hero-logo">
    <img
      src={user.profile_picture ? user.profile_picture : Avatar}
      alt={`${user.first_name} ${user.last_name}`}
      width="200"
    />
  </div>
  <div class="user-info">
    {#if user.status}
      <h3 class="hero-subtitle subtitle info-row">
        <span class="label">Status:</span>
        <span class="value block-value">
          <span
            >{$t(`userStatus.${user.status}`, {
              default: "unknown status",
            })}</span
          >
          <span
            >{$t(`userRole.${user.role_id}`, { default: "unknown role" })}</span
          >
        </span>
      </h3>
    {/if}
    <h3 class="hero-subtitle subtitle info-row">
      <span class="label">Name:</span>
      <span class="value">{`${user.first_name} ${user.last_name}`}</span>
    </h3>
    {#if user.email}
      <h3 class="hero-subtitle subtitle info-row">
        <span class="label">Email:</span>
        <span class="value">{user.email}</span>
      </h3>
    {/if}
    {#if user.address}
      <h3 class="hero-subtitle subtitle info-row">
        <span class="label">Adresse:</span>
        <span class="value block-value">
          <span>{user.address}</span>
          <span>{`${user.zip_code} ${user.city}`}</span>
        </span>
      </h3>
    {/if}
    {#if user.phone}
      <h3 class="hero-subtitle subtitle info-row">
        <span class="label">Telefon:</span>
        <span class="value">{user.phone}</span>
      </h3>
    {/if}
    {#if user.date_of_birth}
      <h3 class="hero-subtitle subtitle info-row">
        <span class="label">Geburtstag:</span>
        <span class="value">{user.date_of_birth}</span>
      </h3>
    {/if}
    {#if user.notes}
      <h3 class="hero-subtitle subtitle info-row">
        <span class="label">{$t("notes")}:</span>
        <span class="value">{user.notes}</span>
      </h3>
    {/if}
  </div>

  <div class="hero-buttons-container">
    <button class="button-dark" on:click={open}>Ändern</button>
  </div>
</div>

{#if showModal}
  <Modal on:close={close}>
    <div class="avatar-container">
      <form
        class="avatar-form"
        action="?/uploadImage"
        method="post"
        enctype="multipart/form-data"
        use:enhance={handleUpload}
      >
        <div class="current-avatar">
          <ImageInput
            avatar={user.profile_picture}
            fieldName="profile_picture"
            title="Nutzerbild auswählen"
          />
        </div>
        <div class="avatar-buttons">
          {#if !user.profile_picture}
            {#if isUploading}
              <SmallLoader width={30} message={"Uploading..."} />
            {:else}
              <button class="button-dark" type="submit">Bild hochladen</button>
            {/if}
          {:else}
            <input
              type="hidden"
              hidden
              name="profile_picture_url"
              bind:value={user.profile_picture}
              required
            />
            {#if isUploading}
              <SmallLoader width={30} message={"Lösche..."} />
            {:else}
              <button
                class="button-dark"
                formaction="?/deleteImage"
                type="submit"
              >
                Bild löschen
              </button>
            {/if}
          {/if}
        </div>
      </form>
      <div class="avatar-buttons">
        <button class="button-dark" on:click={toggleAvatars}>
          {showAvatars ? "Abbrechen" : "Profilbild auswählen"}
        </button>
      </div>
      {#if showAvatars}
        <div class="avatar-selection">
          {#each avatars as avatar}
            <button
              class="avatar-option"
              on:click={() => {
                user.profile_picture = avatar.src;
                showAvatars = false;
              }}
            >
              <img src={avatar.src} alt={avatar.name} width="80" />
            </button>
          {/each}
        </div>
      {/if}
    </div>
    <form
      class="content"
      action="?/updateUser"
      method="POST"
      use:enhance={handleUpdate}
    >
      <input name="id" type="number" hidden bind:value={user.id} />
      <h1 class="step-title" style="text-align: center;">{$t("user_edit")}</h1>
      {#if form?.success}
        <h4
          class="step-subtitle warning"
          in:receive={{ key: Math.floor(Math.random() * 100) }}
          out:send={{ key: Math.floor(Math.random() * 100) }}
        >
          Um einen fehlerhaften upload Ihres Bildes zu vermeiden, clicke bitte
          auf den "Update" Button unten.
        </h4>
      {/if}
      {#if form?.errors}
        {#each form?.errors as error (error.id)}
          <h4
            class="step-subtitle warning"
            in:receive={{ key: error.id }}
            out:send={{ key: error.id }}
          >
            {error.error}
          </h4>
        {/each}
      {/if}

      <input
        type="hidden"
        hidden
        name="profile_picture"
        bind:value={user.profile_picture}
      />

      <div class="button-container">
        {#each TABS as tab}
          <button
            type="button"
            class="button-dark"
            class:active={activeTab === tab}
            on:click={() => setActiveTab(tab)}
          >
            {$t(tab)}
          </button>
        {/each}
      </div>
      <div
        class="tab-content"
        style="display: {activeTab === 'profile' ? 'block' : 'none'}"
      >
        <InputField
          name="status"
          type="select"
          label={$t("status")}
          bind:value={user.status}
          options={userStatusOptions}
        />
        {#if user.role_id === 8}
          <InputField
            name="role_id"
            type="select"
            label={$t("user_role")}
            bind:value={user.role_id}
            options={userRoleOptions}
          />
        {/if}
        <InputField
          name="password"
          type="password"
          label={$t("password")}
          placeholder={$t("placeholder.password")}
          bind:value={password}
          otherPasswordValue={password2}
        />
        <InputField
          name="password2"
          type="password"
          label={$t("password_repeat")}
          placeholder={$t("placeholder.password")}
          bind:value={password2}
          otherPasswordValue={password}
        />
        <InputField
          name="first_name"
          label={$t("first_name")}
          bind:value={user.first_name}
          placeholder={$t("placeholder.first_name")}
          required={true}
        />
        <InputField
          name="last_name"
          label={$t("last_name")}
          bind:value={user.last_name}
          placeholder={$t("placeholder.last_name")}
          required={true}
        />
        <InputField
          name="company"
          label={$t("company")}
          bind:value={user.company}
          placeholder={$t("placeholder.company")}
        />
        <InputField
          name="email"
          type="email"
          label={$t("email")}
          bind:value={user.email}
          placeholder={$t("placeholder.email")}
          required={true}
        />
        <InputField
          name="phone"
          type="tel"
          label={$t("phone")}
          bind:value={user.phone}
          placeholder={$t("placeholder.phone")}
        />
        <InputField
          name="birth_date"
          type="date"
          label={$t("birth_date")}
          bind:value={user.date_of_birth}
          placeholder={$t("placeholder.birth_date")}
        />
        <InputField
          name="address"
          label={$t("address")}
          bind:value={user.address}
          placeholder={$t("placeholder.address")}
        />
        <InputField
          name="zip_code"
          label={$t("zip_code")}
          bind:value={user.zip_code}
          placeholder={$t("placeholder.zip_code")}
        />
        <InputField
          name="city"
          label={$t("city")}
          bind:value={user.city}
          placeholder={$t("placeholder.city")}
        />
        <InputField
          name="notes"
          type="textarea"
          label={$t("notes")}
          bind:value={user.notes}
          placeholder={$t("placeholder.notes", {
            values: { name: user.first_name || "" },
          })}
          rows={10}
        />
      </div>
      <div
        class="tab-content"
        style="display: {activeTab === 'licence' ? 'block' : 'none'}"
      >
        <InputField
          name="licence_status"
          type="select"
          label={$t("status")}
          bind:value={user.drivers_licence.status}
          options={licenceStatusOptions}
        />
        <InputField
          name="licence_number"
          type="text"
          label={$t("licencce_number")}
          bind:value={user.drivers_licence.licence_number}
          placeholder={$t("placeholder.licence_number")}
          toUpperCase={true}
        />
        <InputField
          name="isued_date"
          type="date"
          label={$t("issued_date")}
          bind:value={user.drivers_licence.issued_date}
          placeholder={$t("placeholder.issued_date")}
        />
        <InputField
          name="expiration_date"
          type="date"
          label={$t("expiration_date")}
          bind:value={user.drivers_licence.expiration_date}
          placeholder={$t("placeholder.expiration_date")}
        />
        <InputField
          name="country"
          label={$t("country")}
          bind:value={user.drivers_licence.issuing_country}
          placeholder={$t("placeholder.issuing_country")}
        />
        <div class="licence-categories">
          <h3>{$t("licence_categories")}</h3>
          <div class="checkbox-grid">
            {#each licence_categories as category}
              <div class="checkbox-item">
                <div class="checkbox-label-container">
                  <InputField
                    type="checkbox"
                    name="licence_categories[]"
                    value={category.category}
                    label={category.category}
                    checked={user.drivers_licence.licence_categories != null &&
                      user.drivers_licence.licence_categories.some(
                        (cat) => cat.category === category.category
                      )}
                  />
                </div>
                <span class="checkbox-description">
                  {$t(`licenceCategory.${category.category}`)}
                </span>
              </div>
            {/each}
          </div>
        </div>
      </div>
      <div
        class="tab-content"
        style="display: {activeTab === 'membership' ? 'block' : 'none'}"
      >
        <InputField
          name="membership_status"
          type="select"
          label={$t("status")}
          bind:value={user.membership.status}
          options={membershipStatusOptions}
        />
        <InputField
          name="subscription_model_name"
          type="select"
          label={$t("subscription_model")}
          bind:value={user.membership.subscription_model.name}
          options={subscriptionModelOptions}
        />
        <div class="subscription-info">
          <div class="subscription-column">
            <p>
              <strong>{$t("monthly_fee")}:</strong>
              {selectedSubscriptionModel?.monthly_fee || "-"}
            </p>
            <p>
              <strong>{$t("hourly_rate")}:</strong>
              {selectedSubscriptionModel?.hourly_rate || "-"}
            </p>
            {#if selectedSubscriptionModel?.included_hours_per_year}
              <p>
                <strong>{$t("included_hours_per_year")}:</strong>
                {selectedSubscriptionModel?.included_hours_per_year}
              </p>
            {/if}
            {#if selectedSubscriptionModel?.included_hours_per_month}
              <p>
                <strong>{$t("included_hours_per_month")}:</strong>
                {selectedSubscriptionModel?.included_hours_per_month}
              </p>
            {/if}
          </div>
          <div class="subscription-column">
            <p>
              <strong>{$t("details")}:</strong>
              {selectedSubscriptionModel?.details || "-"}
            </p>
            {#if selectedSubscriptionModel?.conditions}
              <p>
                <strong>{$t("conditions")}:</strong>
                {selectedSubscriptionModel?.conditions}
              </p>
            {/if}
          </div>
        </div>
        <InputField
          name="membership_start_date"
          type="date"
          label={$t("start")}
          bind:value={user.membership.start_date}
          placeholder={$t("placeholder.start_date")}
        />
        <InputField
          name="membership_end_date"
          type="date"
          label={$t("end")}
          bind:value={user.membership.end_date}
          placeholder={$t("placeholder.end_date")}
        />
        <InputField
          name="parent_member_id"
          type="number"
          label={$t("parent_member_id")}
          bind:value={user.membership.parent_member_id}
          placeholder={$t("placeholder.parent_member_id")}
        />
      </div>
      <div
        class="tab-content"
        style="display: {activeTab === 'bankaccount' ? 'block' : 'none'}"
      >
        <InputField
          name="account_holder_name"
          label={$t("bank_account_holder")}
          bind:value={user.bank_account.account_holder_name}
          placeholder={$t("placeholder.bank_account_holder")}
        />
        <InputField
          name="bank"
          label={$t("bank_name")}
          bind:value={user.bank_account.bank}
          placeholder={$t("placeholder.bank_name")}
        />
        <InputField
          name="iban"
          label={$t("iban")}
          bind:value={user.bank_account.iban}
          placeholder={$t("placeholder.iban")}
          toUpperCase={true}
        />
        <InputField
          name="bic"
          label={$t("bic")}
          bind:value={user.bank_account.bic}
          placeholder={$t("placeholder.bic")}
          toUpperCase={true}
        />
        <InputField
          name="mandate_reference"
          label={$t("mandate_reference")}
          bind:value={user.bank_account.mandate_reference}
          placeholder={$t("placeholder.mandate_reference")}
        />
      </div>
      <div class="button-container">
        {#if isUpdating}
          <SmallLoader width={30} message={"Aktualisiere..."} />
        {:else}
          <button type="button" class="button-dark" on:click={close}
            >Abbrechen</button
          >
          <button type="submit" class="button-dark">Bestätigen</button>
        {/if}
      </div>
    </form>
  </Modal>
{/if}

<style>
  .licence-categories {
    margin-bottom: 20px;
  }

  .checkbox-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .checkbox-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .checkbox-label-container {
    flex: 0 0 auto;
    margin-right: 10px;
  }

  .checkbox-description {
    flex: 1;
    font-size: 14px;
    color: #9b9b9b;
    text-align: right;
    margin-left: 10px;
  }

  @media (min-width: 768px) {
    .checkbox-grid {
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
  }

  @media (max-width: 480px) {
    .checkbox-item {
      flex-direction: column;
      align-items: flex-start;
    }

    .checkbox-description {
      margin-left: 24px;
      margin-top: 5px;
      text-align: left;
    }
  }
  .subscription-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.9rem;
  }

  .subscription-column {
    flex: 1;
    min-width: 200px;
  }

  .subscription-column p {
    margin: 0.5rem 0;
  }

  .subscription-column strong {
    display: inline-block;
    min-width: 100px;
  }
  .tab-content {
    padding: 1rem;
    border-radius: 0 0 3px 3px;
  }
  .hero-container .hero-subtitle:not(:last-of-type) {
    margin: 0 0 0 0;
  }

  .hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .user-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    align-items: start;
    text-align: left;
    margin-top: 1rem;
  }

  .info-row {
    display: contents;
  }

  .label {
    font-size: 1.3rem;
    font-weight: bold;
    text-align: left;
    padding-right: 1rem;
  }

  .value {
    margin: 0;
    font-size: 1.2rem;
    text-align: left;
  }

  .block-value {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-buttons-container {
    margin-top: 1rem;
  }

  .user-info {
    font-size: 1rem;
  }

  .label,
  .value {
    font-size: 1.1rem;
  }

  .avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .avatar-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .current-avatar {
    margin-bottom: 1rem;
  }

  .avatar-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 200px;
  }

  .avatar-buttons button {
    margin-top: 1.5rem;
    width: 100%;
  }

  .avatar-selection {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 1rem;
  }

  .avatar-option {
    width: 80px;
    height: 80px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: transform 0.2s;
  }

  .avatar-option:hover,
  .avatar-option:focus {
    transform: scale(1.8);
  }

  .avatar-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
  .button-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1rem;
    width: 100%;
  }

  .button-container button {
    flex: 1 1 0;
    min-width: 120px;
    max-width: calc(50%-5px);
  }
  @media (max-width: 480px) {
    .button-container button {
      flex-basis: 100%;
      max-width: none;
    }
  }
</style>
