<template>
  <div class="sample-list-container">
    <div class="list-header">
      <h1 class="page-title">📋 샘플 데이터 목록</h1>
      <router-link to="/samples/new" class="btn btn-primary">+ 새 글 작성</router-link>
    </div>

    <div v-if="loading" class="loading">로딩 중...</div>
    <div v-else-if="error" class="error">{{ error }}</div>

    <table v-else class="sample-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>제목</th>
          <th>작성자</th>
          <th>생성일시</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="sample in samples" :key="sample.id">
          <td>{{ sample.id }}</td>
          <td>{{ sample.title }}</td>
          <td>{{ sample.author }}</td>
          <td>{{ formatDate(sample.created_at) }}</td>
          <td>
            <router-link :to="`/samples/${sample.id}`" class="btn-link">보기</router-link>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "SampleListPage",
  data() {
    return {
      samples: [],
      loading: true,
      error: null,
    };
  },
  methods: {
    formatDate(dateStr) {
      const d = new Date(dateStr);
      const y = d.getFullYear();
      const m = String(d.getMonth() + 1).padStart(2, "0");
      const day = String(d.getDate()).padStart(2, "0");
      const h = String(d.getHours()).padStart(2, "0");
      const min = String(d.getMinutes()).padStart(2, "0");
      return `${y}-${m}-${day} ${h}:${min}`;
    },
  },
  async mounted() {
    try {
      const res = await fetch("/api/samples");
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      this.samples = await res.json();
    } catch (e) {
      this.error = "데이터를 불러오는 데 실패했습니다: " + e.message;
    } finally {
      this.loading = false;
    }
  },
};
</script>

<style scoped>
.sample-list-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.page-title {
  font-size: 1.5rem;
  color: #333;
}

.btn {
  padding: 0.5rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn:hover {
  opacity: 0.8;
}
.btn-primary {
  background: #667eea;
  color: #fff;
}

.btn-link {
  color: #667eea;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.btn-link:hover {
  text-decoration: underline;
}

.loading,
.error {
  text-align: center;
  padding: 2rem;
  font-size: 1rem;
}

.error {
  color: #e74c3c;
}

.sample-table {
  width: 100%;
  border-collapse: collapse;
}

.sample-table th,
.sample-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.sample-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #555;
}

.sample-table tbody tr:hover {
  background: #f0f4ff;
}
</style>
