<template>
  <div class="card">
    <h1>{{ message }}</h1>
    <p>클릭 횟수: <strong>{{ count }}</strong></p>
    <div class="button-group">
      <button class="btn btn-primary" @click="increment">+ 증가</button>
      <button class="btn btn-secondary" @click="reset">초기화</button>
    </div>
    <div class="badge" v-if="loaded">✅ API 연결됨</div>
    <div class="badge badge-loading" v-else>⏳ API 로딩 중...</div>
  </div>
</template>

<script>
export default {
  name: "HomePage",

  data() {
    return {
      message: "Loading...",
      count: 0,
      loaded: false,
    };
  },

  methods: {
    async fetchHello() {
      try {
        const res = await fetch("/api/hello");
        const data = await res.json();
        this.message = data.message;
        this.count = data.initialCount;
        this.loaded = true;
      } catch (err) {
        this.message = "⚠️ API 연결 실패";
        console.error("API error:", err);
      }
    },

    increment() {
      this.count++;
    },

    reset() {
      this.count = 0;
    },
  },

  mounted() {
    this.fetchHello();
  },
};
</script>

<style scoped>
.card {
  text-align: center;
  background: white;
  padding: 2rem 3rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  min-width: 320px;
}

h1 {
  color: #333;
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
}

p {
  color: #666;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.button-group {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.btn {
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-primary:hover {
  background: #5a6fd6;
}

.btn-secondary {
  background: #e0e0e0;
  color: #333;
}

.btn-secondary:hover {
  background: #d0d0d0;
}

.badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: #42b883;
  color: white;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
}

.badge-loading {
  background: #f0ad4e;
}
</style>
