<template>
  <div class="webmailing-form">
    <div class="form-section mb-4">
      <h5 class="mb-3">Destinataires</h5>
      <soft-input
        v-model="formData.recipients"
        type="email"
        placeholder="Entrez les adresses email (séparées par des virgules)"
        icon="fas fa-envelope"
        icon-dir="left"
      />
    </div>

    <div class="form-section mb-4">
      <h5 class="mb-3">Sujet</h5>
      <webmailing-subject-input
        v-model="formData.subject"
        @blur="validateSubject"
      />
    </div>

    <div class="form-section mb-4">
      <h5 class="mb-3">Contenu du message</h5>
      <webmailing-body-input
        v-model="formData.body"
        @blur="validateBody"
      />
    </div>

    <div class="form-section mb-4">
      <h5 class="mb-3">Pièces jointes</h5>
      <webmailing-attachment
        @files-selected="handleFilesSelected"
      />
      <div v-if="formData.attachments.length > 0" class="mt-3">
        <h6>Fichiers sélectionnés:</h6>
        <ul class="list-unstyled">
          <li v-for="file in formData.attachments" :key="file.name" class="mb-2">
            <span class="badge bg-info">{{ file.name }}</span>
            <small class="ms-2 text-muted">({{ formatFileSize(file.size) }})</small>
          </li>
        </ul>
      </div>
    </div>

    <div class="form-section">
      <h5 class="mb-3">Options</h5>
      <div class="form-check mb-2">
        <input
          id="send-copy"
          v-model="formData.sendCopy"
          type="checkbox"
          class="form-check-input"
        />
        <label class="form-check-label" for="send-copy">
          M'envoyer une copie
        </label>
      </div>
      <div class="form-check">
        <input
          id="send-scheduled"
          v-model="formData.scheduled"
          type="checkbox"
          class="form-check-input"
        />
        <label class="form-check-label" for="send-scheduled">
          Programmer l'envoi
        </label>
      </div>
      <div v-if="formData.scheduled" class="mt-3">
        <soft-input
          v-model="formData.scheduledDate"
          type="datetime-local"
          placeholder="Date et heure d'envoi"
          icon="fas fa-calendar"
          icon-dir="left"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineEmits, defineProps } from "vue";
import { ref } from "vue";
import SoftInput from "@/components/SoftInput.vue";
import WebmailingSubjectInput from "@/components/atoms/Webmailing/WebmailingSubjectInput.vue";
import WebmailingBodyInput from "@/components/atoms/Webmailing/WebmailingBodyInput.vue";
import WebmailingAttachment from "@/components/atoms/Webmailing/WebmailingAttachment.vue";

const props = defineProps({
  initialData: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["form-data-change"]);

const formData = ref({
  recipients: props.initialData.recipients || "",
  subject: props.initialData.subject || "",
  body: props.initialData.body || "",
  attachments: props.initialData.attachments || [],
  sendCopy: props.initialData.sendCopy || false,
  scheduled: props.initialData.scheduled || false,
  scheduledDate: props.initialData.scheduledDate || "",
});

const validateSubject = () => {
  // Add validation logic if needed
};

const validateBody = () => {
  // Add validation logic if needed
};

const handleFilesSelected = (files) => {
  formData.value.attachments = files;
  emitFormData();
};

const emitFormData = () => {
  emit("form-data-change", formData.value);
};

const formatFileSize = (bytes) => {
  if (bytes === 0) return "0 Bytes";
  const k = 1024;
  const sizes = ["Bytes", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
};
</script>

<style scoped>
.webmailing-form {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}

.form-section {
  background-color: white;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #17a2b8;
}
</style>
