<template>
  <div class="q-mx-md q-mb-md">
    <div class="scroll-wrapper">
      <div class="scroll-track">
        <q-card
          v-for="item in data"
          :key="item.id"
          class="pending-card card-border shadow-card bg-surface"
          :flat="false"
          @click="seeDetails(item)"
        >
          <q-card-section class="q-pa-md">

            <div class="row no-wrap items-start q-mb-sm">
              <q-avatar size="40px" :style="avatarColors[item.id % avatarColors.length]" class="q-mr-sm flex-shrink-0">
                <img v-if="item.provider_photo" :src="item.provider_photo" style="object-fit:cover;border-radius:50%;" />
                <span v-else>{{ item.provider_name?.slice(0, 2).toUpperCase() ?? '??' }}</span>
              </q-avatar>

              <div class="col column no-wrap overflow-hidden">
                <span class="font12 fontmedium text-text">
                  <span v-if="item.status == 'pending'">
                    {{ $t('dashboard_client.pending_schedules.requesting_with') }}
                  </span>
                  <span v-else-if="item.status == 'accepted'">
                    {{ $t('dashboard_client.pending_schedules.pay_to_provider') }}
                  </span>
                  
                  <span class="font12 fontbold">{{ ' ' +  item.provider_name ?? '—' }}</span>
                </span>
                <div class="row items-center q-mt-xs">
                  <q-icon name="mdi-clock-outline" size="13px" color="grey-5" class="q-mr-xs" />
                  <span class="font9 fontmedium text-grey-5">{{ item.time_since_request }}</span>
                </div>
              </div>

              <div class="clock-badge-col q-ml-sm flex-shrink-0 column items-center">
                <div class="clock-badge">
                  <q-icon name="mdi-clock-outline" size="14px" color="white" />
                </div>
                <span class="font10 fontmedium text-primary q-mt-xs badge-status-text">
                  {{ $t(`dashboard_client.pending_schedules.status.${item.status ?? 'pending'}`) }}
                </span>
              </div>
            </div>

            <div class="progress-track q-mb-md">
              <div class="progress-fill" :style="{ width: progressPercent(item.status) + '%' }" />
            </div>

            <div class="row items-center no-wrap">
              <q-btn
                flat no-caps dense
                :label="$t('dashboard_client.pending_schedules.cancel_btn')"
                color="primary"
                size="xs"
                class="q-mr-sm flex-shrink-0"
                @click="$emit('cancel', item)"
              />
              <q-space />
              <span class="font9 fontregular text-grey-6 col ellipsis text-right">
                <q-icon name="mdi-map-marker-outline" size="13px" color="grey-6" class="q-mr-xs flex-shrink-0" />
                {{ [item.address?.address, item.address?.number, item.address?.district].filter(Boolean).join(', ') || '—' }}
              </span>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </div>
</template>

<script setup>
const avatarColors = [
  { background: '#ffd5df', color: '#932e57' },
  { background: '#d7e8ff', color: '#2158a8' },
  { background: '#dfd',    color: '#2a7a3b' },
  { background: '#ffe5cc', color: '#8a4500' },
];

const statusProgressMap = {
  pending:  20,
  accepted: 40,
  paid:     60,
  started:  80,
  finished: 100,
};

const progressPercent = (status) => statusProgressMap[status] ?? 20;

defineProps({ data: { type: Array, default: () => [] } });
const emit = defineEmits(['view-details', 'cancel']);

const seeDetails = (item) => {
  if (item.status === 'accepted') {
    emit('view-details', item);
  }
};
</script>

<style scoped lang="scss">
.scroll-wrapper { overflow: hidden; }
.scroll-track {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  &::-webkit-scrollbar { display: none; }
  &::after { content: ''; flex: 0 0 1px; }
}
.pending-card {
  min-width: 80%;
  scroll-snap-align: start;
}

.clock-badge-col {
  min-width: 52px;
  align-items: center;
}

.clock-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-status-text {
  white-space: nowrap;
}

.progress-track {
  width: 100%;
  height: 5px;
  background: #E2E8F0;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #8B5CF6, #EC4899);
  transition: width 0.4s ease;
}
</style>
