<template>
  <div class="form-container">
    <h1 class="form-title">{{ isEdit ? "글 수정" : "새 글 작성" }}</h1>

    <form class="sample-form" @submit.prevent="save">
      <div class="form-group">
        <label>제목</label>
        <input v-model="form.title" type="text" required />
      </div>
      <div class="form-group">
        <label>작성자</label>
        <input v-model="form.author" type="text" required />
      </div>
      <div class="form-group">
        <label>내용</label>
        <textarea v-model="form.content" rows="5" required></textarea>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary" :disabled="saving">
          {{ saving ? "저장 중..." : "저장" }}
        </button>
        <router-link to="/samples" class="btn btn-secondary">취소</router-link>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: "SampleFormPage",
  data() {
    return {
      form: { title: "", author: "", content: "" },
      saving: false,
    };
  },
  computed: {
    isEdit() {
      return !!this.$route.params.id;
    },
  },
  methods: {
    async save() {
      this.saving = true;
      try {
        const url = this.isEdit
          ? `/api/samples/${this.$route.params.id}`
          : "/api/samples";
        const method = this.isEdit ? "PUT" : "POST";
        const res = await fetch(url, {
          method,
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(this.form),
        });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        this.$router.push("/samples");
      } catch (e) {
        alert("저장에 실패했습니다: " + e.message);
      } finally {
        this.saving = false;
      }
    },
  },
  async mounted() {
    if (!this.isEdit) return;
    try {
      const res = await fetch(`/api/samples/${this.$route.params.id}`);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const data = await res.json();
      this.form = { title: data.title, author: data.author, content: data.content };
    } catch (e) {
      alert("데이터를 불러오지 못했습니다.");
      this.$router.push("/samples");
    }
  },
};
</script>

<style scoped>
.form-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.form-title {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  color: #333;
}
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 0.4rem;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
}
.form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.btn {
  padding: 0.5rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn:hover {
  opacity: 0.8;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primary {
  background: #667eea;
  color: #fff;
}
.btn-secondary {
  background: #6c757d;
  color: #fff;
}
</style>
