<script setup lang="ts">
import { onMounted, ref } from "vue";

import { api } from "../api/client";
import { useUiStore } from "../stores/ui";

type Profile = {
  configured: boolean;
  birth_date: string | null;
  birth_time: string | null;
  gender: "male" | "female" | null;
  privacy_notice: string;
};

const ui = useUiStore();
const loading = ref(true);
const saving = ref(false);
const errorMessage = ref("");
const privacyNotice = ref("原始出生资料加密保存，仅当前账号可见。");
const birthDate = ref("");
const birthTime = ref("");
const gender = ref<"male" | "female">("male");
const confirmDelete = ref(false);

function applyProfile(profile: Profile): void {
  birthDate.value = profile.birth_date ?? "";
  birthTime.value = profile.birth_time?.slice(0, 5) ?? "";
  gender.value = profile.gender ?? "male";
  privacyNotice.value = profile.privacy_notice;
}

async function load(): Promise<void> {
  loading.value = true;
  errorMessage.value = "";
  try {
    applyProfile(await api.get<Profile>("/account/profile"));
  } catch (error) {
    errorMessage.value = error instanceof Error ? error.message : "个人资料读取失败。";
  } finally {
    loading.value = false;
  }
}

async function save(): Promise<void> {
  saving.value = true;
  errorMessage.value = "";
  try {
    applyProfile(
      await api.put<Profile>("/account/profile", {
        birth_date: birthDate.value,
        birth_time: birthTime.value,
        gender: gender.value,
      }),
    );
    ui.showToast("个人资料已保存");
  } catch (error) {
    errorMessage.value = error instanceof Error ? error.message : "保存失败，请稍后重试。";
  } finally {
    saving.value = false;
  }
}

async function remove(): Promise<void> {
  if (!confirmDelete.value) {
    confirmDelete.value = true;
    return;
  }
  errorMessage.value = "";
  try {
    await api.delete("/account/profile");
    birthDate.value = "";
    birthTime.value = "";
    gender.value = "male";
    confirmDelete.value = false;
    ui.showToast("个人出生资料已删除");
  } catch (error) {
    errorMessage.value = error instanceof Error ? error.message : "删除失败，请稍后重试。";
  }
}

onMounted(load);
</script>

<template>
  <p class="notice">{{ privacyNotice }}</p>
  <p v-if="loading" class="muted panel-loading">正在读取个人资料</p>
  <form v-else class="form-grid panel-form" @submit.prevent="save">
    <div class="field">
      <label for="birth-date">出生日期</label>
      <input id="birth-date" v-model="birthDate" class="input" type="date" required />
    </div>
    <div class="field">
      <label for="birth-time">出生时间</label>
      <input id="birth-time" v-model="birthTime" class="input" type="time" required />
    </div>
    <div class="field">
      <label for="gender">性别</label>
      <select id="gender" v-model="gender" class="select">
        <option value="male">男</option>
        <option value="female">女</option>
      </select>
    </div>
    <p v-if="errorMessage" class="field-error" role="alert">{{ errorMessage }}</p>
    <div class="form-actions">
      <button class="btn" type="button" :disabled="!birthDate" @click="remove">{{ confirmDelete ? "确认删除" : "删除资料" }}</button>
      <button class="btn btn-primary" type="submit" :disabled="saving">{{ saving ? "保存中" : "保存" }}</button>
    </div>
  </form>
</template>
