<template>
  <q-card
    class="summary-card shadow-card q-ma-md bg-surface card-border"
    :flat="false"
  >
    <q-card-section class="q-pa-md">
      <div class="row items-center no-wrap q-gutter-x-md">
        <div class="row items-center no-wrap q-gutter-x-sm col">
          <q-avatar size="54px" :style="!data?.profile_photo ? avatarStyle : undefined" class="">
            <img
              v-if="data?.profile_photo"
              :src="data.profile_photo"
              style="object-fit:cover;width:100%;height:100%;border-radius:50%"
            />

            <span v-else> {{ getFirstName(data?.name)?.slice(0, 2).toUpperCase() ?? '??' }} </span>
          </q-avatar>

          <div class="column q-gutter-y-xs min-width-0">
            <span class="summary-greeting font14 fontmedium">
              {{ $t('provider.dashboard.summary.welcome') }}
            </span>

            <span class="summary-name text-primary font16 fontbold">
              {{ getFirstName(data?.name) || $t('provider.dashboard.summary.welcome') }}
            </span>
          </div>
        </div>

        <div class="column items-end q-gutter-y-xs col-auto">
          <span class="summary-label text-grey-6 font12 fontbold">
            {{ $t('provider.dashboard.summary.my_schedules') }}
          </span>

          <span class="summary-count row">
            <q-icon
              class="q-my-auto"
              color="positive"
              name="mdi-clock-check-outline"
              size="xs"
            />

            <span class="q-my-auto q-ml-sm">
              {{ data?.pending_services ?? 0 }}
            </span>
          </span>
        </div>
      </div>

      <div
        class="row justify-between q-mt-xs"
        :class="expanded ? 'items-start' : 'items-center no-wrap'"
      >
        <div
          class="text-text col font12 fontmedium"
          :class="{ ellipsis: !expanded }"
        >
          {{ formatAddress(data.address) }}
        </div>

        <q-btn
          :aria-label="$t(expanded ? 'common.collapse' : 'common.expand')"
          :icon="expanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
          class="col-auto expand-button"
          color="secondary"
          dense
          flat
          round
          size="sm"
          @click="expanded = !expanded"
        />
      </div>
    </q-card-section>
  </q-card>
</template>

<script setup>
import { formatAddress, getFirstName } from 'src/helpers/utils';
import { ref } from 'vue';

defineProps({ data: { type: Object, default: () => null } });

const expanded = ref(false);

const avatarStyle = {
  background: 'linear-gradient(135deg, #ffd7e8 0%, #ff9acc 100%)', color: '#7a154f',
};

</script>

<style scoped lang="scss">
.summary-card { overflow: hidden; }

.min-width-0 { min-width: 0; }

.summary-greeting { color: #8c8c98; display: block; }

.summary-name { display: block; line-height: 1.1; }

.summary-label { white-space: nowrap; }

.summary-count {
  color: #3a3a4a;
}

.expand-button { margin: -6px -6px -6px 2px; }
</style>
