<script setup>
import { useRouter } from "vue-router";
import {
  Trophy,
  CircleDot,
  Droplets,
  Target,
  Disc3,
  Bike,
  Zap,
  Timer,
  Activity,
  Pencil,
  Trash2,
} from "lucide-vue-next";
import { useSportsStore } from "../stores/sports";
import {
  formatDate,
  getGradeBgClass,
  getLifestyleBg,
} from "../composables/useHelpers";
import { useSportsEditBus } from "../composables/useSportsEditBus";

const store = useSportsStore();
const router = useRouter();
const editBus = useSportsEditBus();

const iconMap = {
  Football: Trophy,
  Basketball: CircleDot,
  Natation: Droplets,
  Tennis: Target,
  Badminton: Target,
  Pétanque: Disc3,
  Cyclisme: Bike,
  Boxe: Zap,
  "Course de durée": Timer,
  "Course de vitesse": Zap,
  Marche: Activity,
};

function getIconComponent(type) {
  return iconMap[type] || Activity;
}

function editActivity(act) {
  editBus.set(act);
  router.push("/activity");
}
</script>

<template>
  <div class="space-y-4">
    <div
      v-if="store.activities.length === 0"
      class="text-center py-20 bg-white rounded-3xl"
    >
      <p class="text-gray-300 font-bold uppercase tracking-widest italic">
        Aucune activité enregistrée.
      </p>
    </div>

    <div
      v-for="(act, index) in store.activities"
      :key="act.id || index"
      class="bg-white p-6 rounded-3xl card-shadow flex justify-between items-center group border border-transparent hover:border-blue-200 transition-all"
    >
      <div class="flex items-center gap-4">
        <div
          class="w-14 h-14 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-600 shadow-inner"
        >
          <component :is="getIconComponent(act.type)" class="w-6 h-6" />
        </div>
        <div>
          <h5 class="font-black text-blue-900 uppercase text-xs">
            {{ act.type }} <span class="text-blue-300 mx-1">|</span>
            {{ store.getStudentName(act.studentId) }}
          </h5>
          <p class="text-xs text-gray-500 mt-0.5 italic">
            {{ formatDate(act.date) }} • <b>{{ act.displayDuration }}</b> •
            {{ act.intensity }}
          </p>
          <div v-if="act.grade" class="mt-1.5 flex gap-2">
            <span
              :class="[
                'px-2 py-0.5 rounded-full text-[7px] font-black uppercase text-white',
                getGradeBgClass(act.grade),
              ]"
            >
              {{ act.grade }}
            </span>
            <span
              :class="[
                'px-2 py-0.5 rounded-full text-[7px] font-black uppercase text-white',
                getLifestyleBg(act.lifestyle),
              ]"
            >
              {{ act.lifestyle }}
            </span>
          </div>
        </div>
      </div>

      <div class="flex gap-2">
        <button
          @click="editActivity(act)"
          class="text-blue-300 hover:text-amber-500 transition-colors p-2"
        >
          <Pencil class="w-5 h-5" />
        </button>
        <button
          @click="store.deleteActivity(index)"
          class="text-blue-300 hover:text-red-500 transition-colors p-2"
        >
          <Trash2 class="w-5 h-5" />
        </button>
      </div>
    </div>
  </div>
</template>
