<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import Dialog from "primevue/dialog";
import ConfirmDialog from "primevue/confirmdialog";
import Toast from "primevue/toast";
import { useToast } from "primevue/usetoast";
import { tenantPath } from "../../utils/tenant";

const toast = useToast();
const verifyDialog = ref(false);
const currentAction = ref("");
const route = useRoute();
const tenantRoute = (path) => tenantPath(path, route);

const openVerify = (action) => {
  currentAction.value = action;
  verifyDialog.value = true;
};

const handleVerifySuccess = () => {
  verifyDialog.value = false;
  toast.add({
    severity: "success",
    summary: "验证通过",
    detail: "即将跳转至操作页面...",
    life: 2000,
  });
  // In real app, redirect to specific edit page
};
</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>

    <!-- Security Level (Optional visual) -->
    <div
      class="mb-10 p-6 bg-slate-50 rounded-xl border border-slate-100 flex items-center justify-between"
    >
      <div>
        <div class="text-lg font-bold text-slate-900 mb-1">安全等级：中</div>
        <p class="text-sm text-slate-500">
          建议绑定邮箱并完成实名认证，提升账号安全性。
        </p>
      </div>
      <div class="w-32 h-2 bg-slate-200 rounded-full overflow-hidden">
        <div class="h-full bg-orange-500 w-1/2"></div>
      </div>
    </div>

    <!-- Security Items -->
    <div class="space-y-6">
      <!-- Phone -->
      <div
        class="flex items-center justify-between py-4 border-b border-slate-50"
      >
        <div class="flex items-center gap-4">
          <i class="pi pi-mobile text-xl text-slate-400"></i>
          <div>
            <div class="font-bold text-slate-900">手机绑定</div>
            <div class="text-sm text-slate-500">已绑定：138****8888</div>
          </div>
        </div>
        <button
          @click="openVerify('phone')"
          class="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg hover:bg-slate-50 text-sm font-medium transition-colors"
        >
          更换
        </button>
      </div>

      <!-- Real-name Auth -->
      <div
        class="flex items-center justify-between py-4 border-b border-slate-50"
      >
        <div class="flex items-center gap-4">
          <i class="pi pi-id-card text-xl text-slate-400"></i>
          <div>
            <div class="font-bold text-slate-900">实名认证</div>
            <div class="text-sm text-slate-500">
              未认证，发布内容前需完成认证
            </div>
          </div>
        </div>
        <button
          @click="$router.push(tenantRoute('/creator/apply'))"
          class="px-4 py-2 text-primary-600 font-medium hover:text-primary-700 text-sm transition-colors"
        >
          去认证
        </button>
      </div>
    </div>

    <!-- Verification Dialog -->
    <Dialog
      v-model:visible="verifyDialog"
      modal
      header="安全验证"
      :style="{ width: '25rem' }"
    >
      <div class="text-sm text-slate-600 mb-6">
        为了您的账号安全，请先进行身份验证。
      </div>

      <div class="space-y-4">
        <div>
          <label class="block text-xs font-bold text-slate-500 mb-1"
            >手机号</label
          >
          <div class="text-lg font-bold text-slate-900">138****8888</div>
        </div>

        <div>
          <label class="block text-xs font-bold text-slate-500 mb-2"
            >验证码</label
          >
          <div class="flex gap-2">
            <input
              type="text"
              class="flex-1 h-10 px-3 rounded border border-slate-200 focus:border-primary-500 focus:outline-none"
              placeholder="6位数字"
            />
            <button
              class="px-3 h-10 border border-slate-200 rounded text-sm text-slate-600 hover:bg-slate-50"
            >
              获取验证码
            </button>
          </div>
        </div>
      </div>

      <div class="flex justify-end gap-2 mt-8">
        <button
          @click="verifyDialog = false"
          class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm"
        >
          取消
        </button>
        <button
          @click="handleVerifySuccess"
          class="px-4 py-2 bg-primary-600 text-white rounded hover:bg-primary-700 text-sm"
        >
          下一步
        </button>
      </div>
    </Dialog>

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