<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { storage } from "@/utils/storage";
import logo from "@/assets/wordmark.png";

import logo2 from "@/assets/workflow.png";
import { UserManagerService } from "@/components/service/management/UserManagerService";

const router = useRouter();
const ROLE_ITEMS = ["ROLE_USER", "ROLE_MODERATOR", "ROLE_ADMIN"];
const data = ref({
  form: false,
  username: "",
  email: "",
  role: ROLE_ITEMS[0],
  password: "",
  loading: false,
  snackbar: false,
  snackbarText: "",
  snackbarColor: "",
});

const resetForm = () => {
  data.value.userId = "";
  data.value.userPw = "";
  data.value.loading = false;
};

const resetLogin = () => {
  data.value.userId = "";
  data.value.userPw = "";
  data.value.loading = false;
};
const resetSignup = () => {
  data.value.username = "";
  data.value.email = "";
  data.value.role = "";
  data.value.password = "";
  data.value.loading = false;
};

const signUp = () => {
  const payload = {
    username: data.value.username,
    email: data.value.email,
    role: data.value.role ? [data.value.role] : [],
    password: data.value.password,
  };

  UserManagerService.signUp(payload)
    .then((res) => {
      if (res.data.success) {
        router.push("/login");
      } else {
        data.value.snackbarText =
          res.data.message || "회원가입에 실패했습니다.";
        data.value.snackbarColor = "red";
        data.value.snackbar = true;
      }
    })
    .catch((err) => {
      console.error(err);
      data.value.snackbarText =
        "비밀번호는 6자 이상, 40자 이하로 입력해야 합니다.";
      data.value.snackbarColor = "red";
      data.value.snackbar = true;
    });
};
</script>

<template>
  <v-container :fluid="true" class="pa-0">
    <v-sheet
      class="background-image w-100 h-screen d-flex align-center justify-center flex-column"
    >
      <v-card flat class="bg-transparent d-flex align-center flex-column">
        <v-card
          class="mx-auto pa-10 mb-4 login-box rounded-lg d-flex flex-column"
          style="min-width: 450px !important"
          density="comfortable"
        >
          <div class="mb-4 w-100 d-flex justify-center">
            <div
              class="bg-transparent rounded-circle pa-2"
              style="border: 1.8px solid #398bec"
            >
              <v-icon class="text-primary">mdi-shield-key-outline</v-icon>
            </div>
          </div>
          <div class="text-h5 pb-2 text-center font-weight-bold text-primary">
            Autoflow Web Console
          </div>

          <v-form v-model="data.form" @submit.prevent="signUp" class="mt-3">
            <v-text-field
              v-model="data.username"
              :readonly="data.loading"
              class="mb-2 text-white"
              variant="outlined"
              color="secondary"
              placeholder="아이디를 입력해주세요."
            ></v-text-field>
            <v-text-field
              v-model="data.email"
              :readonly="data.loading"
              class="mb-2 text-white"
              variant="outlined"
              color="secondary"
              placeholder="이메일을 입력해주세요."
            ></v-text-field>
            <v-select
              v-model="data.role"
              :items="ROLE_ITEMS"
              :rules="[(v) => !!v || '역할을 선택해주세요.']"
              variant="outlined"
              placeholder="Role"
              class="mb-2 text-white"
            />
            <v-text-field
              v-model="data.password"
              :readonly="data.loading"
              type="password"
              variant="outlined"
              color="secondary"
              class="mb-2 text-white"
              placeholder="비밀번호를 입력해주세요."
            ></v-text-field>

            <v-btn
              :disabled="!data.form"
              :loading="data.loading"
              block
              color="primary"
              size="large"
              type="submit"
              variant="flat"
            >
              SignUp
            </v-btn>
          </v-form>

          <div class="mt-4 text-center text-white">
            <span>계정이 있으십니까?</span>
            <router-link
              to="/login"
              class="ml-2 font-weight-medium"
              style="color: #90caf9; text-decoration: none"
            >
              Login
            </router-link>
          </div>
        </v-card>
      </v-card>

      <v-sheet
        class="position-absolute w-100 bg-transparent pa-4"
        style="bottom: 0; left: 0"
      >
        <v-sheet class="bg-shades-transparent d-flex align-end"
          >Copyright © 2025 Autoflow Web Console
        </v-sheet>
      </v-sheet>
      <v-sheet
        class="position-absolute w-100 bg-transparent pa-4"
        style="bottom: 0; right: 0"
      >
        <v-sheet class="bg-shades-transparent d-flex justify-end">
          <img :src="logo" style="width: 5%" />
        </v-sheet>
      </v-sheet>
    </v-sheet>
  </v-container>

  <v-snackbar
    v-model="data.snackbar"
    timeout="2000"
    location="button"
    :color="data.snackbarColor"
  >
    {{ data.snackbarText }}
    <template #actions>
      <v-btn variant="text" @click="data.snackbar = false"> 닫기 </v-btn>
    </template>
  </v-snackbar>
</template>

<style scoped>
.login-box {
  background-color: rgba(18, 18, 18, 0.4); /* 흰색 배경에 30% 불투명도 */
  backdrop-filter: blur(10px); /* 배경 블러 효과 */
}

.background-image {
  background-image:
    linear-gradient(
      90deg,
      rgba(19, 18, 18, 0.5),
      rgba(19, 18, 18, 0.3),
      rgba(19, 18, 18, 0.3),
      rgba(19, 18, 18, 0.5)
    ),
    url("@/assets/4117551.jpg"); /* 배경 이미지 경로 */
  background-size: cover; /* 이미지가 화면을 꽉 채우도록 설정 */
  background-position: center; /* 이미지 중앙 정렬 */
  background-repeat: no-repeat; /* 이미지 반복 방지 */
  min-height: 100vh; /* 화면 전체 높이 설정 */
}
</style>
