<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Anchor, Users, Fish, Trash2, HelpCircle, ChevronRight, Waves } from 'lucide-vue-next'

const router = useRouter()

const stats = ref({
  totalDonors: 12543,
  totalAmount: 627150000,
  releasedFish: 4200000,
  collectedWaste: 185000,
  purifiedArea: 95000
})

onMounted(async () => {
  try {
    // Dynamic import to handle non-Wails preview mode gracefully
    // @ts-ignore
    const CampaignService = await import('../../bindings/changeme/campaignservice')
    const res = await CampaignService.GetStats()
    if (res) {
      stats.value = res
    }
  } catch (e) {
    console.warn('Wails bindings not available, using mock statistics.', e)
  }
})

const formatNumber = (num: number) => {
  return new Intl.NumberFormat('ko-KR').format(num)
}

const formatKoreanAmount = (num: number) => {
  if (num >= 100000000) {
    const eok = Math.floor(num / 100000000)
    const man = Math.floor((num % 100000000) / 10000)
    return `${eok}억 ${man > 0 ? man + '만' : ''}원`
  }
  return formatNumber(num) + '원'
}
</script>

<template>
  <div class="home-container">
    <!-- Hero Section -->
    <section class="hero-section">
      <div class="ocean-bg">
        <div class="wave wave1"></div>
        <div class="wave wave2"></div>
        <div class="wave wave3"></div>
        <div class="light-ray"></div>
        <div class="bubbles">
          <div v-for="n in 15" :key="n" class="bubble" :style="`--i:${n}; --s:${Math.random() * 1.5 + 0.5}`"></div>
        </div>
      </div>

      <div class="hero-content">
        <span class="hero-badge"><Waves class="badge-icon" /> 수협중앙회 공익 캠페인</span>
        <h1 class="hero-title">
          생명의 바다,<br />
          <span class="highlight">희망을 품다</span>
        </h1>
        <p class="hero-desc">
          바다는 어업인의 일터이자 인류 생명의 젖줄입니다.<br />
          수협중앙회 '희망의 바다 만들기 운동'과 함께 깨끗하고 풍요로운 바다 생태계를 미래 세대에게 물려주세요.
        </p>
        <div class="hero-actions">
          <button class="btn btn-primary" @click="router.push('/donation')">
            <span>캠페인 동참하기</span>
            <HeartHandshake class="btn-icon" />
          </button>
          <button class="btn btn-secondary" @click="router.push('/about')">
            <span>자세히 알아보기</span>
            <ChevronRight class="btn-icon" />
          </button>
        </div>
      </div>
    </section>

    <!-- Stats Dashboard Section -->
    <section class="stats-section">
      <div class="section-header">
        <h2 class="section-title">희망의 바다 누적 성과</h2>
        <p class="section-subtitle">2007년부터 수협중앙회와 전국의 어업인이 땀 흘려 가꿔온 생명의 기록입니다.</p>
      </div>

      <div class="stats-grid">
        <!-- Card 1: Donors -->
        <div class="stat-card">
          <div class="stat-icon-wrapper donor-icon">
            <Users class="stat-icon" />
          </div>
          <div class="stat-info">
            <span class="stat-label">누적 참여 후원자</span>
            <span class="stat-number">{{ formatNumber(stats.totalDonors) }} <span class="stat-unit">명</span></span>
          </div>
          <div class="stat-progress">
            <div class="progress-bar" style="width: 82%"></div>
          </div>
          <p class="stat-desc">많은 시민과 어업인이 한마음으로 동참하고 있습니다.</p>
        </div>

        <!-- Card 2: Released Fish -->
        <div class="stat-card">
          <div class="stat-icon-wrapper fish-icon">
            <Fish class="stat-icon" />
          </div>
          <div class="stat-info">
            <span class="stat-label">방류된 수산종자</span>
            <span class="stat-number">{{ formatNumber(stats.releasedFish) }} <span class="stat-unit">마리</span></span>
          </div>
          <div class="stat-progress">
            <div class="progress-bar" style="width: 75%"></div>
          </div>
          <p class="stat-desc">조피볼락, 감성돔 등 우수 수산종자를 바다로 돌려보냈습니다.</p>
        </div>

        <!-- Card 3: Waste -->
        <div class="stat-card">
          <div class="stat-icon-wrapper waste-icon">
            <Trash2 class="stat-icon" />
          </div>
          <div class="stat-info">
            <span class="stat-label">수거된 해양 쓰레기</span>
            <span class="stat-number">{{ formatNumber(stats.collectedWaste) }} <span class="stat-unit">kg</span></span>
          </div>
          <div class="stat-progress">
            <div class="progress-bar" style="width: 90%"></div>
          </div>
          <p class="stat-desc">조업 중 인양 폐기물과 침적 폐어구를 집중 정화했습니다.</p>
        </div>

        <!-- Card 4: Purified Area -->
        <div class="stat-card">
          <div class="stat-icon-wrapper area-icon">
            <Anchor class="stat-icon" />
          </div>
          <div class="stat-info">
            <span class="stat-label">정화된 해역 면적</span>
            <span class="stat-number">{{ formatNumber(stats.purifiedArea) }} <span class="stat-unit">m²</span></span>
          </div>
          <div class="stat-progress">
            <div class="progress-bar" style="width: 68%"></div>
          </div>
          <p class="stat-desc">갯녹음 해역 복원 및 바닥갈이 사업을 진행했습니다.</p>
        </div>
      </div>

      <!-- General Info Alert -->
      <div class="total-donation-badge">
        <span class="badge-label">희망의 바다 조성 기금 누적액</span>
        <span class="badge-amount">{{ formatKoreanAmount(stats.totalAmount) }}</span>
      </div>
    </section>

    <!-- Call to action Section -->
    <section class="cta-section">
      <div class="cta-card">
        <h3 class="cta-title">어업인과 국민이 함께 해양 생태계를 살립니다</h3>
        <p class="cta-desc">
          풍요로운 어장 복원과 맑은 바다 환경 조성은 우리 모두의 의무입니다. <br />
          당신의 작은 실천이 푸른 바다의 희망찬 미래를 만들어 냅니다.
        </p>
        <button class="btn btn-primary" @click="router.push('/donation')">지금 바로 후원하기</button>
      </div>
    </section>
  </div>
</template>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Hero Section */
.hero-section {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 550px;
  padding: 40px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.ocean-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #021a3a 0%, #030814 100%);
  z-index: 1;
  overflow: hidden;
}

/* Waves animation */
.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V0C26.9,8.75,55.05,18.06,83.4,26.8,145.42,46,212.41,60.11,321.39,56.44Z' fill='%2300d2ff' fill-opacity='0.08'/%3E%3C/svg%3E") repeat-x;
  transform: translate3d(0, 0, 0);
}

.wave1 {
  animation: wave 20s linear infinite;
  z-index: 2;
}

.wave2 {
  animation: wave 12s linear infinite reverse;
  opacity: 0.5;
  z-index: 3;
  bottom: 10px;
}

.wave3 {
  animation: wave 8s linear infinite;
  opacity: 0.2;
  z-index: 4;
  bottom: 20px;
}

@keyframes wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Underwater Light Ray */
.light-ray {
  position: absolute;
  top: 0;
  left: 30%;
  width: 40%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.15) 0%, transparent 70%);
  transform: skewX(-25deg);
  filter: blur(40px);
  pointer-events: none;
  animation: shimmer 6s ease-in-out infinite alternate;
}

@keyframes shimmer {
  0% { opacity: 0.5; transform: skewX(-20deg) translateX(-10px); }
  100% { opacity: 1; transform: skewX(-30deg) translateX(10px); }
}

/* Bubbles */
.bubble {
  position: absolute;
  bottom: -20px;
  background: rgba(0, 210, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  width: calc(var(--s) * 15px);
  height: calc(var(--s) * 15px);
  left: calc(var(--i) * 6.5%);
  animation: bubble-up calc(10s / var(--s)) linear infinite;
  animation-delay: calc(var(--i) * 0.4s);
}

@keyframes bubble-up {
  0% {
    transform: translateY(0) scale(1) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-600px) scale(1.2) translateX(30px);
    opacity: 0;
  }
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 600px;
  text-align: left;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(0, 210, 255, 0.12);
  border: 1px solid rgba(0, 210, 255, 0.3);
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 24px;
}

.badge-icon {
  width: 14px;
  height: 14px;
}

.hero-title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.2;
  font-weight: 800;
  color: white;
  margin: 0 0 20px 0;
}

.hero-title .highlight {
  background: linear-gradient(to right, #00d2ff, #0066ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-desc {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #94a3b8;
  margin-bottom: 35px;
}

.hero-actions {
  display: flex;
  gap: 15px;
}

.btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  box-shadow: 0 5px 15px rgba(0, 210, 255, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 210, 255, 0.5);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.btn-icon {
  width: 18px;
  height: 18px;
}

/* Stats Section */
.stats-section {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.section-header {
  text-align: center;
}

.section-title {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 10px 0;
  background: linear-gradient(to right, #ffffff, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-subtitle {
  color: #64748b;
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.stat-card {
  background: rgba(6, 17, 38, 0.4);
  border: 1px solid rgba(0, 210, 255, 0.08);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.stat-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 210, 255, 0.25);
  box-shadow: 0 10px 30px rgba(0, 210, 255, 0.1);
}

.stat-icon-wrapper {
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.stat-icon {
  width: 24px;
  height: 24px;
  color: white;
}

.donor-icon {
  background: rgba(0, 210, 255, 0.15);
}
.fish-icon {
  background: rgba(0, 102, 255, 0.15);
}
.waste-icon {
  background: rgba(255, 107, 107, 0.15);
}
.area-icon {
  background: rgba(168, 85, 247, 0.15);
}

.stat-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 15px;
  width: 100%;
}

.stat-label {
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 600;
}

.stat-number {
  font-size: 1.8rem;
  font-weight: 800;
  color: white;
  letter-spacing: -0.5px;
}

.stat-unit {
  font-size: 1rem;
  color: #94a3b8;
  font-weight: 500;
}

.stat-progress {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  margin-bottom: 15px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  border-radius: 3px;
}

.stat-desc {
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.4;
}

.total-donation-badge {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 30px;
  background: linear-gradient(135deg, rgba(6, 17, 38, 0.8), rgba(3, 8, 20, 0.8));
  border: 1px solid rgba(0, 210, 255, 0.2);
  border-radius: 99px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.badge-label {
  font-size: 0.95rem;
  color: #94a3b8;
  font-weight: 600;
}

.badge-amount {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-color);
  text-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
}

/* CTA Section */
.cta-section {
  width: 100%;
}

.cta-card {
  background: radial-gradient(circle at top right, rgba(0, 210, 255, 0.15) 0%, rgba(3, 8, 20, 0.8) 70%);
  border: 1px solid rgba(0, 210, 255, 0.15);
  border-radius: 24px;
  padding: 50px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.cta-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: white;
  margin: 0;
}

.cta-desc {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #94a3b8;
  max-width: 700px;
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-section {
    padding: 30px 20px;
    min-height: auto;
  }
  .hero-actions {
    flex-direction: column;
    gap: 10px;
  }
  .btn {
    width: 100%;
    justify-content: center;
  }
  .total-donation-badge {
    flex-direction: column;
    gap: 5px;
    border-radius: 20px;
    width: 100%;
    text-align: center;
  }
  .cta-card {
    padding: 35px 20px;
  }
}
</style>
