<script setup lang="ts">
import SortDropdown from "../SortDropdown.vue";
import type { ProfileSortKey, ProfileSummary } from "../../types/browser";

defineProps<{
  profiles: ProfileSummary[];
  sortKey: ProfileSortKey;
  openProfileError: string;
  browserId: string;
  isOpeningProfile: (browserId: string, profileId: string) => boolean;
}>();

const emit = defineEmits<{
  "update:sortKey": [value: ProfileSortKey];
  openProfile: [browserId: string, profileId: string];
}>();
</script>

<template>
  <section class="content-section">
    <div v-if="openProfileError" class="inline-error">
      {{ openProfileError }}
    </div>

    <div class="sort-bar">
      <SortDropdown
        :model-value="sortKey"
        label="Sort by"
        :options="[
          { label: 'Name', value: 'name' },
          { label: 'Email', value: 'email' },
          { label: 'Profile ID', value: 'id' },
        ]"
        @update:model-value="emit('update:sortKey', $event as ProfileSortKey)"
      />
    </div>

    <div v-if="profiles.length" class="stack-list">
      <article v-for="profile in profiles" :key="profile.id" class="profile-card">
        <div class="profile-avatar">
          <img
            v-if="profile.avatarDataUrl"
            :src="profile.avatarDataUrl"
            :alt="`${profile.name} avatar`"
          />
          <span v-else>{{ profile.avatarLabel }}</span>
        </div>
        <div class="profile-body">
          <div class="profile-topline">
            <h4>{{ profile.name }}</h4>
            <div class="profile-actions">
              <button
                class="card-action-button"
                :disabled="isOpeningProfile(browserId, profile.id)"
                type="button"
                @click="emit('openProfile', browserId, profile.id)"
              >
                {{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }}
              </button>
              <span class="badge neutral">{{ profile.id }}</span>
            </div>
          </div>
          <p class="profile-email">{{ profile.email || "No email found" }}</p>
        </div>
      </article>
    </div>
    <div v-else class="empty-card">
      <p>No profile directories were found for this browser.</p>
    </div>
  </section>
</template>
