<template>
  <section class="bg-transparent py-12 px-4">
    <!-- Title -->
    <div class="text-center mb-16" data-aos="fade-up">
                <div class="flex items-center justify-center gap-3 mb-4">
                    <div class="w-450 h-px bg-amber-400"></div>
                    <Icon name="mdi:leaf" class="text-amber-500 text-2xl" />
                    <div class="w-450 h-px bg-amber-400"></div>
                </div>
               <h2 class="text-4xl md:text-5xl font-bold text-amber-600 mb-4">Say Something</h2>
            </div>

    <!-- Layout -->
    <div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-8">
      <!-- Left Form -->
      <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
        <h3 class="text-2xl font-bold text-yellow-500 mb-4">Say Something!</h3>

        <form @submit.prevent="handleSubmit" class="space-y-4">
          <!-- Name -->
          <input
            v-model="form.name"
            type="text"
            placeholder="Name"
            required
            class="w-full p-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-yellow-400 transition-all"
          />

          <!-- Message -->
          <textarea
            v-model="form.message"
            placeholder="Message"
            rows="3"
            required
            class="w-full p-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-yellow-400 transition-all resize-none"
          ></textarea>

          <!-- Attendance -->
          <div>
            <label class="block text-gray-600 mb-2">Attendance</label>
            <div class="flex gap-3 justify-between bg-gray-50 rounded-full p-2">
              <button
                type="button"
                :class="attendanceClass('Yes')"
                @click="form.attendance = 'Yes'"
              >
                Yes
              </button>
              <button
                type="button"
                :class="attendanceClass('Maybe')"
                @click="form.attendance = 'Maybe'"
              >
                Maybe
              </button>
              <button
                type="button"
                :class="attendanceClass('No')"
                @click="form.attendance = 'No'"
              >
                No
              </button>
            </div>
          </div>

          <!-- Submit -->
          <button
            type="submit"
            :disabled="!form.name || !form.message || !form.attendance"
            class="w-full bg-yellow-400 hover:bg-yellow-500 text-white py-3 rounded-full font-semibold shadow transition disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Send Now!
          </button>
        </form>
      </div>

      <!-- Right Comments -->
      <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
        <div class="flex items-center gap-2 mb-4 text-gray-600 font-medium">
          <span class="text-xl">Chat</span>
          <span>{{ comments.length }}</span>
        </div>

        <div class="space-y-4">
          <div v-for="(c, i) in comments" :key="i">
            <div class="flex items-center justify-between mb-1">
              <span class="font-semibold text-gray-800">{{ c.name }}</span>
              <span
                class="px-3 py-1 text-xs font-medium rounded-full"
                :class="{
                  'bg-green-100 text-green-600': c.attendance === 'Yes',
                  'bg-yellow-100 text-yellow-600': c.attendance === 'Maybe',
                  'bg-gray-200 text-gray-600': c.attendance === 'No'
                }"
              >
                {{ c.attendance }}
              </span>
            </div>
            <p class="text-gray-600 text-sm">{{ c.message }}</p>
            <hr class="mt-3 border-gray-200" />
          </div>

          <!-- Empty State -->
          <div v-if="comments.length === 0" class="text-center py-8 text-gray-400">
            <span class="text-5xl">Empty</span>
            <p class="text-sm mt-2">Belum ada ucapan. Jadilah yang pertama!</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { reactive, ref } from "vue";

const form = reactive({
  name: "",
  message: "",
  attendance: "",
});

const comments = ref([
  { name: "Tia SMAN6BDG", message: "Congrats!", attendance: "Yes" },
  { name: "Muthia Rahma", message: "Happy wedd my sisstaa!", attendance: "Maybe" },
]);

const handleSubmit = () => {
  if (form.name && form.message && form.attendance) {
    comments.value.push({ ...form });
    form.name = "";
    form.message = "";
    form.attendance = "";
  }
};

const attendanceClass = (val) => {
  return [
    "flex-1 text-center py-2 rounded-full font-medium transition",
    form.attendance === val
      ? "bg-yellow-400 text-white shadow"
      : "bg-white text-gray-500 border border-gray-200 hover:bg-gray-100",
  ];
};
</script>

<style scoped>
.space-y-4 > div:last-child hr {
  display: none;
}
</style>