<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';

defineOptions({
  name: 'AuthenticationFormView',
});

defineProps<{
  dataSide?: 'bottom' | 'left' | 'right' | 'top';
}>();

const route = useRoute();
const isLoginRoute = computed(() => route.path === '/auth/login');
</script>

<template>
  <div class="auth-form-wrap relative min-h-full">
    <div
      class="auth-window-shell"
      :class="[{ 'auth-window-shell-plain': isLoginRoute }]"
    >
      <template v-if="!isLoginRoute">
        <div class="auth-window-edge auth-window-edge-top"></div>
        <div class="auth-window-edge auth-window-edge-bottom"></div>
      </template>
      <slot></slot>

      <RouterView v-slot="{ Component, route: currentRoute }">
        <Transition appear mode="out-in" name="slide-right">
          <KeepAlive :include="['Login']">
            <component
              :is="Component"
              :key="currentRoute.fullPath"
              class="side-content w-full"
              :data-side="dataSide"
            />
          </KeepAlive>
        </Transition>
      </RouterView>
    </div>

    <div
      class="auth-copyright text-muted-foreground absolute left-1/2 flex -translate-x-1/2 text-center text-xs"
    >
      <slot name="copyright"> </slot>
    </div>
  </div>
</template>

<style scoped>
.auth-form-wrap {
  padding: 0 0 4.5rem;
}

.auth-window-shell {
  position: relative;
  padding: 1.25rem;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 96%) 0%,
    rgb(248 251 255 / 98%) 100%
  );
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 2rem;
  box-shadow:
    0 40px 80px -48px rgb(13 61 132 / 38%),
    0 18px 36px -26px rgb(13 61 132 / 18%);
  backdrop-filter: blur(22px);
}

.auth-window-shell-plain {
  padding: 0;
  overflow: visible;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.auth-window-edge {
  position: absolute;
  pointer-events: none;
  border-radius: 9999px;
}

.auth-window-edge-top {
  top: -6rem;
  left: -4rem;
  width: 14rem;
  height: 10rem;
  background: linear-gradient(
    90deg,
    rgb(11 111 211 / 18%),
    rgb(22 159 200 / 8%)
  );
}

.auth-window-edge-bottom {
  right: -4rem;
  bottom: -4rem;
  width: 11rem;
  height: 11rem;
  background: radial-gradient(
    circle,
    rgb(84 132 255 / 14%) 0%,
    rgb(84 132 255 / 0%) 72%
  );
}

.auth-copyright {
  bottom: 0.55rem;
  width: max-content;
}

.dark .auth-window-shell {
  background: linear-gradient(
    180deg,
    rgb(10 18 30 / 92%) 0%,
    rgb(9 17 29 / 96%) 100%
  );
  border-color: rgb(136 168 235 / 16%);
  box-shadow:
    0 42px 84px -50px rgb(0 0 0 / 64%),
    0 18px 36px -28px rgb(0 0 0 / 42%);
}

.dark .auth-window-shell-plain {
  background: transparent;
  border: none;
  box-shadow: none;
}

.dark .auth-window-edge-top {
  background: linear-gradient(
    90deg,
    rgb(69 120 255 / 22%),
    rgb(28 155 197 / 8%)
  );
}

.dark .auth-window-edge-bottom {
  background: radial-gradient(
    circle,
    rgb(92 136 255 / 16%) 0%,
    rgb(92 136 255 / 0%) 72%
  );
}

@media (max-width: 640px) {
  .auth-form-wrap {
    padding-bottom: 4rem;
  }

  .auth-window-shell {
    padding: 1rem;
    border-radius: 1.6rem;
  }
}
</style>
