<template>
  <div class="home-page">
    <div class="hero-section">
      <template v-if="configLoaded">
        <img v-if="siteLogo" :src="siteLogo" :alt="siteName || 'CloudSearch'" class="logo-img" @error="(e: any) => { (e.target as HTMLElement).style.display='none'; siteLogo='' }" />
        <div v-else class="logo-text">{{ siteName || 'CloudSearch' }}</div>
      </template>
      <div class="search-box">
        <el-input v-model="query" placeholder="搜索网盘资源..." size="large" clearable @keyup.enter="handleSearch">
          <template #prefix><el-icon><Search /></el-icon></template>
        </el-input>
        <el-button type="primary" size="large" @click="handleSearch" class="search-btn">搜索</el-button>
      </div>
      <div class="quote-line" v-if="currentQuote">「 {{ currentQuote }} 」 ---{{ quoteAuthor }}</div>
    </div>

    <div class="cloud-zone" v-if="words.length > 0">
      <p class="cloud-title">大家都在搜</p>
      <div class="word-cloud">
        <span v-for="w in words" :key="w.k" class="wc-word" :style="{fontSize:w.s+'px',color:w.c,fontWeight:w.w,transform:'rotate('+w.r+'deg)',opacity:w.o,animationDelay:w.d+'s'}" @click="searchTag(w.k)">{{ w.k }}</span>
      </div>
    </div>

    <div v-else-if="configLoaded" class="empty-area"><p>搜索脉搏采集中...</p></div>

    <div v-if="siteDisclaimer" class="site-footer">
      <div class="footer-inner">{{ siteDisclaimer }}</div>
      <el-button class="footer-btn" size="small" @click="openDisclaimer">免责声明</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { getCategorizedRankings, getSiteConfig } from '../api'

const router = useRouter()
const query = ref('')
const configLoaded = ref(false)
const siteLogo = ref('')
const siteName = ref('')
const siteDisclaimer = ref('')
const currentQuote = ref('')
const quoteAuthor = ref('')
const words = ref<any[]>([])

const QS = ['学而时习之，不亦说乎。', '温故而知新，可以为师矣。', '千里之行，始于足下。', '书山有路，勤为径。', '学以致用，知行合一。', '路漫漫其修远兮，吾将上下而求索。']
const CS = ['#e74c3c', '#e67e22', '#f39c12', '#27ae60', '#2980b9', '#8e44ad', '#2c3e50', '#16a085', '#d35400', '#c0392b', '#1abc9c', '#3498db', '#9b59b6', '#34495e', '#e91e63', '#009688', '#ff5722', '#795548', '#607d8b', '#673ab7']
const SS = [48,42,38,34,30,28,26,24,22,20,18,17,16,15,14,13,12]

function handleSearch() { const q = query.value.trim(); if(q) router.push('/search?q='+encodeURIComponent(q)) }
function searchTag(t:string) { router.push('/search?q='+encodeURIComponent(t)) }
function openDisclaimer() { window.open('/disclaimer/', '_blank') }

onMounted(async () => {
  currentQuote.value = QS[Math.floor(Math.random()*QS.length)]
  quoteAuthor.value = '古籍经典'
  try {
    const [catsData, siteCfg] = await Promise.all([getCategorizedRankings(), getSiteConfig()])
    if(siteCfg.site_logo) siteLogo.value=siteCfg.site_logo
    if(siteCfg.site_name) siteName.value=siteCfg.site_name
    if(siteCfg.site_disclaimer) siteDisclaimer.value=siteCfg.site_disclaimer
    configLoaded.value=true
    if(catsData?.categories){
      const hotCat=catsData.categories.find((c:any)=>c.category==='hot')
      if(hotCat?.hot?.length){
        const arr=hotCat.hot.slice(0,25).map((item:any,idx:number)=>({
          k:item.keyword, s:SS[Math.min(idx,SS.length-1)],
          c:CS[idx%CS.length], w:idx<5?800:idx<10?600:400,
          r:(Math.random()-.5)*6, o:1-idx*.02, d:idx*.08
        }))
        for(let i=arr.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[arr[i],arr[j]]=[arr[j],arr[i]]}
        words.value=arr
      }
    }
  }catch(e){console.error(e)}
})
</script>

<style scoped>
.home-page{min-height:100vh;background:#f5f7fa}
.hero-section{text-align:center;padding:56px 24px 36px;background:#f5f7fa}
.logo-text{font-size:48px;font-weight:700;color:#1d2129;margin-bottom:24px}
.logo-img{display:block;max-width:400px;max-height:100px;margin:0 auto 24px}
.search-box{display:inline-flex;align-items:center;width:100%;max-width:600px;border-radius:28px;background:#fff;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.search-box :deep(.el-input__wrapper){border:none;box-shadow:none;background:transparent;padding:4px 20px}
.search-box :deep(.el-input__inner){font-size:15px}
.search-btn{flex-shrink:0;border:none;border-radius:24px;padding:0 28px;height:40px;font-size:14px;font-weight:600;background:#409eff;color:#fff;margin:4px;cursor:pointer;transition:all .2s}
.search-btn:hover{background:#337ecc;transform:scale(1.02)}
.quote-line{margin-top:14px;font-size:13px;color:#86909c;font-style:italic}
.cloud-zone{max-width:1100px;margin:0 auto;padding:32px 24px 60px}
.cloud-title{text-align:center;font-size:14px;color:#86909c;letter-spacing:4px;margin-bottom:40px}
.word-cloud{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 24px;padding:20px;line-height:1.4}
.wc-word{display:inline-block;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);animation:pop-in .8s ease-out both;padding:2px 6px;border-radius:6px;user-select:none}
.wc-word:hover{transform:scale(1.3) rotate(0deg)!important;opacity:1!important}
@keyframes pop-in{from{opacity:0;transform:translateY(20px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}
.empty-area{text-align:center;padding:80px 20px;color:#c0c4cc}
.site-footer{text-align:center;padding:20px 16px 32px;background:#f5f7fa;border-top:1px solid #e5e6eb}
.footer-inner{max-width:800px;margin:0 auto 12px;font-size:12px;line-height:1.8;color:#86909c;white-space:pre-line}
.footer-btn{font-size:12px!important;color:#86909c!important}

/* Responsive */
@media(max-width:768px){
  .hero-section{padding:36px 16px 24px}
  .logo-text{font-size:28px}
  .search-box{border-radius:24px}
  .search-btn{padding:0 18px;height:36px;font-size:13px}
  .quote-line{font-size:12px}
  .cloud-zone{padding:24px 12px 40px}
  .cloud-title{margin-bottom:24px;font-size:13px;letter-spacing:2px}
  .word-cloud{gap:8px 16px;padding:12px}
  .wc-word{padding:1px 4px}
}
@media(max-width:480px){
  .hero-section{padding:28px 12px 20px}
  .logo-text{font-size:22px;margin-bottom:16px}
  .search-box{max-width:100%}
  .search-box :deep(.el-input__inner){font-size:13px}
}
</style>