<script setup>
import { ref, reactive, onMounted } from "vue";
import RadioButton from "primevue/radiobutton";
import DatePicker from "primevue/datepicker";
import Select from "primevue/select";
import Button from "primevue/button";
import Toast from "primevue/toast";
import { useToast } from "primevue/usetoast";
import { userApi } from "../../api/user";
import { commonApi } from "../../api/common";

const toast = useToast();
const fileInput = ref(null);
const saving = ref(false);

const form = reactive({
  avatar: "",
  nickname: "",
  bio: "",
  gender: "secret",
  birthday: null,
  province: "",
  city: "",
});

const fetchProfile = async () => {
  try {
    const res = await userApi.getMe();
    form.avatar = res.avatar;
    form.nickname = res.nickname;
    form.bio = res.bio;
    form.gender = res.gender || "secret";
    form.birthday = res.birthday ? new Date(res.birthday) : null;
    // Location mapping if any
    if (res.location) {
      form.province = res.location.province;
      form.city = res.location.city;
    }
  } catch (e) {
    toast.add({
      severity: "error",
      summary: "获取资料失败",
      detail: e.message,
      life: 3000,
    });
  }
};

onMounted(() => {
  fetchProfile();
});

const triggerUpload = () => {
  fileInput.value.click();
};

const handleFileChange = async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  try {
    toast.add({
      severity: "info",
      summary: "正在上传",
      detail: "请稍候...",
      life: 2000,
    });
    const res = await commonApi.upload(file, "avatar");
    form.avatar = res.url; // 假设返回 { url: '...' }
    toast.add({
      severity: "success",
      summary: "头像上传成功",
      detail: "点击保存按钮生效",
      life: 3000,
    });
  } catch (e) {
    toast.add({
      severity: "error",
      summary: "上传失败",
      detail: e.message,
      life: 3000,
    });
  }
};

const saveProfile = async () => {
  if (!form.nickname.trim()) {
    toast.add({
      severity: "error",
      summary: "错误",
      detail: "昵称不能为空",
      life: 3000,
    });
    return;
  }

  saving.value = true;
  try {
    const payload = {
      nickname: form.nickname,
      avatar: form.avatar,
      bio: form.bio,
      gender: form.gender,
      birthday: form.birthday ? form.birthday.toISOString().split("T")[0] : "",
      location: {
        province: form.province?.name || form.province || "",
        city: form.city?.name || form.city || "",
      },
    };
    await userApi.updateMe(payload);
    toast.add({
      severity: "success",
      summary: "保存成功",
      detail: "个人资料已更新",
      life: 3000,
    });
    // 更新本地缓存的用户信息
    const user = JSON.parse(localStorage.getItem("user") || "{}");
    localStorage.setItem("user", JSON.stringify({ ...user, ...payload }));
  } catch (e) {
    toast.add({
      severity: "error",
      summary: "保存失败",
      detail: e.message,
      life: 3000,
    });
  } finally {
    saving.value = false;
  }
};

// Mock Location Data
const provinces = [
  { name: "北京", code: "BJ" },
  { name: "上海", code: "SH" },
  { name: "广东", code: "GD" },
];
const cities = [
  { name: "朝阳区", code: "CY" },
  { name: "海淀区", code: "HD" },
];
</script>

<template>
  <div
    class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8"
  >
    <h1 class="text-2xl font-bold text-slate-900 mb-8">个人资料</h1>

    <div class="max-w-2xl">
      <!-- Avatar Section -->
      <div class="flex items-center gap-6 mb-10">
        <div class="relative group cursor-pointer" @click="triggerUpload">
          <div
            class="w-24 h-24 rounded-full overflow-hidden border-2 border-slate-200 group-hover:border-primary-200 transition-colors"
          >
            <img :src="form.avatar" class="w-full h-full object-cover" />
            <!-- Overlay -->
            <div
              class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <i class="pi pi-camera text-white text-2xl"></i>
            </div>
          </div>
          <!-- Mock File Input -->
          <input
            type="file"
            ref="fileInput"
            class="hidden"
            @change="handleFileChange"
          />
        </div>
        <div>
          <div class="font-bold text-slate-900 text-lg mb-1">修改头像</div>
          <p class="text-sm text-slate-500">支持 JPG, PNG 格式，文件小于 5MB</p>
        </div>
      </div>

      <!-- Form Section -->
      <div class="space-y-6">
        <!-- Nickname -->
        <div>
          <label class="block text-sm font-bold text-slate-700 mb-2"
            >昵称 <span class="text-red-500">*</span></label
          >
          <input
            v-model="form.nickname"
            type="text"
            class="w-full h-12 px-4 rounded-lg border border-slate-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-100 outline-none transition-all"
            placeholder="请输入昵称"
          />
          <p class="text-xs text-slate-400 mt-2">修改后需通过审核方可生效</p>
        </div>

        <!-- Bio -->
        <div>
          <label class="block text-sm font-bold text-slate-700 mb-2"
            >个人简介</label
          >
          <textarea
            v-model="form.bio"
            rows="3"
            class="w-full p-4 rounded-lg border border-slate-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-100 outline-none transition-all resize-none"
            placeholder="介绍一下你自己..."
            maxlength="100"
          ></textarea>
          <div class="text-right text-xs text-slate-400 mt-1">
            {{ form.bio.length }}/100
          </div>
        </div>

        <!-- Gender -->
        <div>
          <label class="block text-sm font-bold text-slate-700 mb-3"
            >性别</label
          >
          <div class="flex gap-6">
            <label class="flex items-center gap-2 cursor-pointer">
              <RadioButton v-model="form.gender" value="male" />
              <span class="text-slate-700">男</span>
            </label>
            <label class="flex items-center gap-2 cursor-pointer">
              <RadioButton v-model="form.gender" value="female" />
              <span class="text-slate-700">女</span>
            </label>
            <label class="flex items-center gap-2 cursor-pointer">
              <RadioButton v-model="form.gender" value="secret" />
              <span class="text-slate-700">保密</span>
            </label>
          </div>
        </div>

        <!-- Birthday -->
        <div>
          <label class="block text-sm font-bold text-slate-700 mb-2"
            >生日</label
          >
          <DatePicker
            v-model="form.birthday"
            showIcon
            fluid
            iconDisplay="input"
            dateFormat="yy-mm-dd"
            placeholder="选择日期"
          />
        </div>

        <!-- Location -->
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-bold text-slate-700 mb-2"
              >所在省份</label
            >
            <Select
              v-model="form.province"
              :options="provinces"
              optionLabel="name"
              placeholder="选择省份"
              class="w-full"
            />
          </div>
          <div>
            <label class="block text-sm font-bold text-slate-700 mb-2"
              >所在城市</label
            >
            <Select
              v-model="form.city"
              :options="cities"
              optionLabel="name"
              placeholder="选择城市"
              class="w-full"
            />
          </div>
        </div>
      </div>

      <!-- Action Footer -->
      <div class="mt-10 pt-6 border-t border-slate-100">
        <Button
          label="保存修改"
          icon="pi pi-check"
          :loading="saving"
          @click="saveProfile"
          class="w-full sm:w-auto px-8 h-12 text-lg font-bold"
        />
      </div>
    </div>

    <Toast />
  </div>
</template>

<style scoped>
@reference "../../assets/main.css";

:deep(.p-select) {
  @apply h-12 flex items-center border-slate-200 rounded-lg shadow-none;
}
:deep(.p-select:not(.p-disabled).p-focus) {
  @apply border-primary-500 ring-2 ring-primary-100 shadow-none;
}
:deep(.p-datepicker-input) {
  @apply h-12 border-slate-200 rounded-lg shadow-none w-full;
}
:deep(.p-datepicker-input:focus) {
  @apply border-primary-500 ring-2 ring-primary-100;
}
</style>
