<script setup>
import { ref, reactive, computed } from "vue";
import { useRoute } from "vue-router";
import { tenantPath } from "../../utils/tenant";

const route = useRoute();
const tenantRoute = (path) => tenantPath(path, route);
const step = ref(1);
const submitting = ref(false);
const fileInput = ref(null);

const form = reactive({
  avatar: "",
  name: "",
  bio: "",
  agreed: false,
});

const isValid = computed(() => {
  return form.avatar && form.name && form.bio && form.agreed;
});

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

const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      form.avatar = e.target.result;
    };
    reader.readAsDataURL(file);
  }
};

const submitForm = () => {
  if (!isValid.value) return;

  submitting.value = true;
  // Simulate API
  setTimeout(() => {
    submitting.value = false;
    step.value = 3;
  }, 1500);
};
</script>

<template>
  <!-- Main Container -->
  <div
    class="mx-auto max-w-4xl my-8 bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden min-h-[600px]"
  >
    <!-- Step 1: Landing -->
    <div v-if="step === 1">
      <div class="relative h-[400px] w-full overflow-hidden">
        <img
          src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80"
          class="w-full h-full object-cover"
        />
        <div
          class="absolute inset-0 bg-black/40 flex items-center justify-center p-12"
        >
          <div class="text-center text-white">
            <h1 class="text-4xl md:text-5xl font-bold mb-4 drop-shadow-lg">
              开启您的内容创作之旅
            </h1>
            <p
              class="text-xl md:text-2xl opacity-90 max-w-2xl mx-auto drop-shadow-md"
            >
              加入我们，获得专属频道主页，通过优质戏曲内容获取收益，与百万戏迷互动。
            </p>
          </div>
        </div>
      </div>

      <div class="p-12">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
          <div class="p-6 bg-slate-50 rounded-xl text-center">
            <div
              class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-2xl mx-auto mb-4"
            >
              <i class="pi pi-wallet"></i>
            </div>
            <h3 class="font-bold text-slate-900 mb-2">内容变现</h3>
            <p class="text-sm text-slate-500">
              灵活设置付费阅读与会员专栏，收益直接结算。
            </p>
          </div>
          <div class="p-6 bg-slate-50 rounded-xl text-center">
            <div
              class="w-12 h-12 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center text-2xl mx-auto mb-4"
            >
              <i class="pi pi-home"></i>
            </div>
            <h3 class="font-bold text-slate-900 mb-2">专属频道</h3>
            <p class="text-sm text-slate-500">
              拥有独立的品牌展示空间，积累私域粉丝。
            </p>
          </div>
          <div class="p-6 bg-slate-50 rounded-xl text-center">
            <div
              class="w-12 h-12 bg-orange-100 text-orange-600 rounded-full flex items-center justify-center text-2xl mx-auto mb-4"
            >
              <i class="pi pi-chart-bar"></i>
            </div>
            <h3 class="font-bold text-slate-900 mb-2">数据管理</h3>
            <p class="text-sm text-slate-500">
              全方位的作品数据分析，助您优化创作方向。
            </p>
          </div>
        </div>

        <div class="text-center">
          <button
            @click="step = 2"
            class="px-12 py-4 bg-primary-600 text-white rounded-full font-bold text-xl hover:bg-primary-700 transition-colors shadow-lg shadow-primary-200 cursor-pointer active:scale-95"
          >
            立即申请入驻
          </button>
        </div>
      </div>
    </div>

    <!-- Step 2: Application Form -->
    <div v-else-if="step === 2" class="p-8 md:p-12">
      <h2 class="text-2xl font-bold text-slate-900 mb-8">填写申请资料</h2>

      <div class="space-y-8 max-w-2xl mx-auto">
        <!-- Avatar -->
        <div class="flex items-center gap-6">
          <div
            class="w-24 h-24 rounded-full bg-slate-100 flex items-center justify-center border-2 border-dashed border-slate-300 hover:border-primary-400 cursor-pointer transition-colors"
            @click="triggerUpload"
          >
            <img
              v-if="form.avatar"
              :src="form.avatar"
              class="w-full h-full rounded-full object-cover"
            />
            <i v-else class="pi pi-camera text-3xl text-slate-400"></i>
          </div>
          <div>
            <div class="font-bold text-slate-900 mb-1">
              频道头像 <span class="text-red-500">*</span>
            </div>
            <p class="text-sm text-slate-500">建议使用清晰的个人照或 Logo</p>
          </div>
          <input
            type="file"
            ref="fileInput"
            class="hidden"
            @change="handleFileChange"
          />
        </div>

        <!-- Name -->
        <div>
          <label class="block font-bold text-slate-900 mb-2"
            >频道名称 <span class="text-red-500">*</span></label
          >
          <input
            v-model="form.name"
            type="text"
            class="w-full h-12 px-4 rounded-lg border border-slate-200 focus:border-primary-500 focus:ring-4 focus:ring-primary-100 outline-none transition-all text-lg"
            placeholder="给您的频道起个名字"
          />
        </div>

        <!-- Bio -->
        <div>
          <label class="block font-bold text-slate-900 mb-2"
            >频道介绍 <span class="text-red-500">*</span></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-4 focus:ring-primary-100 outline-none transition-all text-base resize-none"
            placeholder="一句话介绍您的频道特色..."
          ></textarea>
        </div>

        <!-- Agreement -->
        <div class="flex items-center pt-4">
          <input
            type="checkbox"
            id="agree"
            v-model="form.agreed"
            class="w-5 h-5 rounded border-slate-300 text-primary-600 focus:ring-primary-500 cursor-pointer"
          />
          <label for="agree" class="ml-3 text-slate-600 cursor-pointer">
            我已阅读并同意
            <a href="#" class="text-primary-600 hover:underline"
              >《创作者入驻协议》</a
            >
          </label>
        </div>

        <!-- Actions -->
        <div class="pt-6">
          <button
            @click="submitForm"
            class="w-full py-4 bg-primary-600 text-white rounded-xl font-bold text-xl hover:bg-primary-700 transition-all shadow-lg disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer active:scale-95"
            :disabled="!isValid"
          >
            {{ submitting ? "正在提交..." : "提交审核" }}
          </button>
        </div>
      </div>
    </div>

    <!-- Step 3: Result -->
    <div v-else-if="step === 3" class="p-20 text-center">
      <div
        class="w-20 h-20 bg-green-100 text-green-600 rounded-full flex items-center justify-center text-4xl mx-auto mb-6 animate-in zoom-in duration-300"
      >
        <i class="pi pi-check"></i>
      </div>
      <h2 class="text-3xl font-bold text-slate-900 mb-4">申请已提交</h2>
      <p class="text-lg text-slate-600 mb-12 max-w-lg mx-auto">
        您的入驻申请已成功提交，平台将在 1-3
        个工作日内完成审核。审核结果将通过短信和系统通知发送给您。
      </p>

      <div class="flex justify-center gap-4">
        <router-link
          :to="tenantRoute('/')"
          class="px-8 py-3 bg-white border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 font-medium"
          >返回首页</router-link
        >
        <router-link
          :to="tenantRoute('/me')"
          class="px-8 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 font-medium"
          >查看个人中心</router-link
        >
      </div>
    </div>
  </div>
</template>
