<template>
  <div class="page-shell careers-page-v2">
    <section class="subpage-hero careers-hero">
      <div class="container mx-auto px-4">
        <div class="subpage-hero__grid">
          <div data-aos="fade-up">
            <span class="subpage-kicker">JOIN XIAOKANG</span>
            <h1>和我们一起，把诊所经营变得更清楚。</h1>
            <p>萧康云医正在寻找理解医疗服务、也愿意打磨产品细节的伙伴。这里的工作不只是做页面或做运营，而是把真实诊所的复杂日常整理成可靠系统。</p>
          </div>
          <div class="careers-hero__panel" data-aos="fade-left">
            <strong>{{ filteredJobs.length }}</strong>
            <span>开放职位</span>
            <p>技术、产品、运营和诊所服务顾问持续招聘中。</p>
          </div>
        </div>
      </div>
    </section>

    <section class="editorial-section">
      <div class="container mx-auto px-4">
        <div class="careers-grid">
          <aside class="careers-filter" data-aos="fade-right">
            <span class="eyebrow">职位筛选</span>
            <div class="careers-search">
              <i class="fas fa-search"></i>
              <input v-model="keyword" placeholder="搜索职位、部门或城市" />
            </div>
            <div class="careers-tabs">
              <button
                v-for="item in departments"
                :key="item"
                :class="{ active: department === item }"
                type="button"
                @click="department = item"
              >
                {{ item }}
              </button>
            </div>
            <div class="careers-contact-card">
              <h3>投递方式</h3>
              <p>请将简历发送至招聘邮箱，邮件标题注明职位名称。</p>
              <a :href="'mailto:' + contactEmail">{{ contactEmail }}</a>
            </div>
          </aside>

          <div class="careers-list">
            <article v-for="job in filteredJobs" :key="job.id" class="career-job-card" data-aos="fade-up">
              <div>
                <span>{{ job.department }} / {{ job.city }}</span>
                <h2>{{ job.title }}</h2>
                <p>{{ job.description }}</p>
                <div class="career-job-card__tags">
                  <em>{{ job.job_type }}</em>
                  <em>{{ job.salary }}</em>
                  <em>{{ job.experience }}</em>
                  <em v-if="job.featured">重点招聘</em>
                </div>
              </div>
              <button class="secondary-button" type="button" @click="openJob(job)">查看详情</button>
            </article>
            <div v-if="!filteredJobs.length" class="careers-empty">暂无匹配职位，请换个关键词试试。</div>
          </div>
        </div>
      </div>
    </section>

    <section class="editorial-section editorial-muted">
      <div class="container mx-auto px-4">
        <div class="career-process">
          <div data-aos="fade-right">
            <span class="eyebrow">招聘流程</span>
            <h2>流程透明，反馈清楚。</h2>
          </div>
          <div class="career-process__steps">
            <div v-for="(step, index) in steps" :key="step.title" data-aos="fade-up" :data-aos-delay="index * 80">
              <span>0{{ index + 1 }}</span>
              <h3>{{ step.title }}</h3>
              <p>{{ step.desc }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="editorial-section">
      <div class="container mx-auto px-4">
        <div class="section-intro" data-aos="fade-up">
          <span class="eyebrow">公司位置</span>
          <h2>欢迎来聊聊真实诊所和真实产品。</h2>
        </div>
        <MapContainer
          :lng="116.3969921072894"
          :lat="39.91848141642785"
          title="萧康医药"
          address="杭州市萧山区鸿盛路与高新六路交叉口东200米"
          :amap-key="siteSettings.amap_key || ''"
          :security-js-code="siteSettings.amap_security_code || ''"
        />
      </div>
    </section>

    <transition name="modal-fade">
      <div v-if="currentJob" class="career-modal" @click="currentJob = null">
        <article @click.stop>
          <button class="career-modal__close" type="button" @click="currentJob = null" aria-label="关闭职位详情"><i class="fas fa-times"></i></button>
          <span>{{ currentJob.department }} / {{ currentJob.city }}</span>
          <h2>{{ currentJob.title }}</h2>
          <p>{{ currentJob.description }}</p>
          <h3>岗位要求</h3>
          <ul>
            <li v-for="item in currentJob.requirements" :key="item">{{ item }}</li>
          </ul>
          <div class="career-modal__meta">
            <div><strong>负责人</strong><p>{{ currentJob.manager }} · {{ currentJob.manager_title }}</p></div>
            <div><strong>联系方式</strong><p>{{ currentJob.email }} / {{ currentJob.phone }}</p></div>
          </div>
        </article>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import MapContainer from '@/components/ui/MapContainer.vue'
import { getRecruitJobs, getSiteSettings } from '@/api/request/site'

const keyword = ref('')
const department = ref('全部')
const jobs = ref([])
const siteSettings = ref({})
const currentJob = ref(null)

const fallbackJobs = [
  {
    id: 1,
    title: '高级前端开发工程师',
    department: '技术部',
    job_type: '全职',
    city: '杭州',
    salary: '25K-45K',
    experience: '5年以上',
    featured: true,
    description: '负责官网、后台和小程序前端体验，建立稳定的组件体系。',
    requirements: ['熟悉 Vue 3 与工程化', '有中后台或 SaaS 项目经验', '关注性能和可访问性'],
    manager: '张经理',
    manager_title: '技术负责人',
    email: 'tech@xiaokang.example',
    phone: '0571-00000000'
  }
]
const steps = [
  { title: '简历投递', desc: '通过邮箱或后台职位入口提交简历。' },
  { title: '初步沟通', desc: '确认经历、意向和岗位匹配度。' },
  { title: '专业面试', desc: '围绕真实业务问题展开交流。' },
  { title: '录用沟通', desc: '明确薪酬、职责和入职安排。' }
]

const contactEmail = computed(() => siteSettings.value.contact_email || 'hr@xiaokang.example')
const departments = computed(() => ['全部', ...new Set(jobs.value.map(job => job.department).filter(Boolean))])
const filteredJobs = computed(() => jobs.value.filter((job) => {
  const text = keyword.value.trim().toLowerCase()
  const matchText = !text || [job.title, job.department, job.city, job.description].some(value => String(value || '').toLowerCase().includes(text))
  const matchDepartment = department.value === '全部' || job.department === department.value
  return matchText && matchDepartment
}))

const openJob = (job) => { currentJob.value = job }

onMounted(async () => {
  const [jobsResult, settingsResult] = await Promise.allSettled([getRecruitJobs(), getSiteSettings()])
  if (settingsResult.status === 'fulfilled') siteSettings.value = settingsResult.value || {}
  jobs.value = jobsResult.status === 'fulfilled' ? jobsResult.value : fallbackJobs
  if (!jobs.value.length) jobs.value = fallbackJobs
})
</script>