<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="avatarStyle" class="text-h6">
            <img v-if="data?.profile_photo" :src="data.profile_photo" style="object-fit:cover;border-radius:50%;" />
            <span v-else>{{ data?.name?.slice(0, 2).toUpperCase() ?? '??' }}</span>
          </q-avatar>
          <div class="column q-gutter-y-xs min-width-0">
            <span class="summary-greeting text-greeting font12 fontemedium">
              {{ $t('dashboard_client.summary.welcome') }}
            </span>

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

            <span class="summary-address font12 fontmedium text-text">
              {{ formatAddress(data.address) }}
            </span>
          </div>
        </div>
        <div class="column items-end q-gutter-y-xs col-auto">
          <span class="summary-label font12 fontbold text-grey-6">{{ $t('dashboard_client.summary.my_schedules') }}</span>
          <span class="summary-count row">
            <q-icon name="mdi-clock-check-outline" class="q-my-auto" size="xs" color="positive" />
            <span class="q-my-auto q-ml-sm">{{ data?.pending_services ?? 0 }}</span>
          </span>
        </div>
      </div>

      <div class="row items-center justify-between no-wrap summary-address-row">
        <!-- <div class="summary-address font10 fontmedium text-text col">
          {{ formatAddress(data.address) }}
        </div> -->
        <!-- <q-icon name="mdi-chevron-down" color="secondary" size="18px" class="col-auto" /> -->
      </div>
    </q-card-section>
  </q-card>
</template>

<script setup>
import { formatAddress, getFirstName } from 'src/helpers/utils';
defineProps({ data: { type: Object, default: () => null } });

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;
}
.summary-address {
  color: #7c7c7c;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

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