<template>
  <div class="eo">
    <div class="eo-card eo-card--hero">
      <div class="eo-card__body">
        <div class="eo-hero">
          <div>
            <p class="eo-eyebrow">Apercu collaborateur</p>
            <h2 class="eo-title">{{ employee.full_name }}</h2>
            <p class="eo-subtitle">
              {{ employee.job_title || "Poste non renseigne" }}
            </p>
          </div>

          <button
            class="eo-action"
            type="button"
            @click="$emit('view-info-tab')"
          >
            <i class="fas fa-pen"></i>
            Modifier la fiche
          </button>
        </div>

        <div class="eo-highlights">
          <div class="eo-highlight">
            <span class="eo-highlight__label">Email</span>
            <strong class="eo-highlight__value">{{
              employee.email || "Non renseigne"
            }}</strong>
          </div>
          <div class="eo-highlight">
            <span class="eo-highlight__label">Telephone</span>
            <strong class="eo-highlight__value">{{
              employee.phone || "Non renseigne"
            }}</strong>
          </div>
          <div class="eo-highlight">
            <span class="eo-highlight__label">Statut</span>
            <strong class="eo-highlight__value">{{
              employee.active ? "Actif" : "Inactif"
            }}</strong>
          </div>
        </div>
      </div>
    </div>

    <div class="eo-grid mt-3">
      <div class="eo-card">
        <div class="eo-card__header">
          <span class="eo-card__title">Coordonnees</span>
        </div>
        <div class="eo-card__body">
          <div class="eo-list">
            <div class="eo-list__item">
              <span class="eo-list__label">Prenom</span>
              <strong class="eo-list__value">{{
                employee.first_name || "Non renseigne"
              }}</strong>
            </div>
            <div class="eo-list__item">
              <span class="eo-list__label">Nom</span>
              <strong class="eo-list__value">{{
                employee.last_name || "Non renseigne"
              }}</strong>
            </div>
            <div class="eo-list__item">
              <span class="eo-list__label">Email</span>
              <strong class="eo-list__value">{{
                employee.email || "Non renseigne"
              }}</strong>
            </div>
            <div class="eo-list__item">
              <span class="eo-list__label">Telephone</span>
              <strong class="eo-list__value">{{
                employee.phone || "Non renseigne"
              }}</strong>
            </div>
          </div>
        </div>
      </div>

      <div class="eo-card">
        <div class="eo-card__header">
          <span class="eo-card__title">Informations d'emploi</span>
        </div>
        <div class="eo-card__body">
          <div class="eo-list">
            <div class="eo-list__item">
              <span class="eo-list__label">Date d'embauche</span>
              <strong class="eo-list__value">{{ formattedHireDate }}</strong>
            </div>
            <div class="eo-list__item">
              <span class="eo-list__label">Poste</span>
              <strong class="eo-list__value">{{
                employee.job_title || "Non renseigne"
              }}</strong>
            </div>
            <div class="eo-list__item">
              <span class="eo-list__label">Salaire</span>
              <strong class="eo-list__value">{{
                employee.salary ? `${employee.salary} EUR` : "Non renseigne"
              }}</strong>
            </div>
            <div class="eo-list__item">
              <span class="eo-list__label">Type</span>
              <strong class="eo-list__value">{{
                employee.thanatopractitioner ? "Thanatopracteur" : "Employe"
              }}</strong>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="employee.thanatopractitioner" class="eo-card mt-3">
      <div class="eo-card__header">
        <span class="eo-card__title">Certification praticien</span>
      </div>
      <div class="eo-card__body">
        <div class="eo-grid eo-grid--triple">
          <div class="eo-list__item">
            <span class="eo-list__label">Numero de licence</span>
            <strong class="eo-list__value">
              {{
                employee.thanatopractitioner.license_number || "Non renseigne"
              }}
            </strong>
          </div>
          <div class="eo-list__item">
            <span class="eo-list__label">Numero d'autorisation</span>
            <strong class="eo-list__value">
              {{
                employee.thanatopractitioner.authorization_number ||
                "Non renseigne"
              }}
            </strong>
          </div>
          <div class="eo-list__item">
            <span class="eo-list__label">Validite</span>
            <strong class="eo-list__value">
              {{
                formatDate(
                  employee.thanatopractitioner.authorization_valid_until
                )
              }}
            </strong>
          </div>
        </div>
      </div>
    </div>

    <div class="eo-card mt-3">
      <div class="eo-card__header">
        <span class="eo-card__title">Informations systeme</span>
      </div>
      <div class="eo-card__body">
        <div class="eo-grid">
          <div class="eo-list__item">
            <span class="eo-list__label">Date de creation</span>
            <strong class="eo-list__value">{{
              formatDate(employee.created_at)
            }}</strong>
          </div>
          <div class="eo-list__item">
            <span class="eo-list__label">Derniere modification</span>
            <strong class="eo-list__value">{{
              formatDate(employee.updated_at)
            }}</strong>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

defineProps({
  employee: {
    type: Object,
    required: true,
  },
  formattedHireDate: {
    type: String,
    required: true,
  },
  employeeId: {
    type: [Number, String],
    required: true,
  },
});

defineEmits(["view-info-tab"]);

const formatDate = (dateString) => {
  if (!dateString) return "Non renseignee";
  const date = new Date(dateString);
  return date.toLocaleDateString("fr-FR", {
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
};
</script>

<style scoped>
.eo {
  min-width: 0;
}

.eo-card {
  background: #fff;
  border: 1px solid rgba(131, 146, 171, 0.25);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.eo-card--hero {
  border-color: rgba(94, 114, 228, 0.2);
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
}

.eo-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
}

.eo-card__title,
.eo-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8392ab;
}

.eo-card__body {
  padding: 1.25rem;
}

.eo-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.eo-title {
  margin: 0.3rem 0 0;
  font-size: 1.5rem;
  color: #344767;
}

.eo-subtitle {
  margin: 0.35rem 0 0;
  color: #67748e;
}

.eo-action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(94, 114, 228, 0.35);
  border-radius: 0.75rem;
  background: #fff;
  color: #5e72e4;
  padding: 0.65rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.eo-highlights,
.eo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.eo-highlights {
  margin-top: 1.25rem;
}

.eo-grid--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.eo-highlight,
.eo-list__item {
  padding: 1rem;
  border-radius: 0.85rem;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}

.eo-highlight__label,
.eo-list__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8392ab;
}

.eo-highlight__value,
.eo-list__value {
  color: #344767;
  font-size: 0.95rem;
  line-height: 1.45;
}

.eo-list {
  display: grid;
  gap: 1rem;
}

@media (max-width: 768px) {
  .eo-highlights,
  .eo-grid,
  .eo-grid--triple {
    grid-template-columns: 1fr;
  }
}
</style>
