<template>
  <div class="q-mx-md q-mb-md">
    <div class="row items-center justify-between q-mb-sm">
      <div class="section-title gradient-diarista ">{{ $t('provider.dashboard.solicitations.title') }}</div>
      <q-btn flat no-caps color="grey-6" icon="mdi-chevron-right-outlined" size="sm" :label="$t('common.see_all')" />
    </div>

    <div class="scroll-wrapper">
      <div class="scroll-track row no-wrap q-gutter-x-md">
        <q-card
          v-for="item in data"
          :key="item.id"
          class="solicitation-card bg-surface q-ma-md shadow-card card-border"
          :flat="false"
        >
          <q-card-section class="q-pa-sm">
            <div class="row no-wrap items-center q-gutter-x-sm">
              <q-avatar size="48px">
                <img v-if="item.customer_photo" :src="item.customer_photo" style="object-fit:cover" />
                <span v-else class="text-weight-bold full-width full-height flex flex-center" :style="avatarColors[item.id % avatarColors.length]" style="font-size:14px;border-radius:50%">{{ item.client_name?.slice(0,2).toUpperCase() ?? '??' }}</span>
              </q-avatar>
              <div class="column flex-1">
                <div class="row items-center q-gutter-x-xs">
                  <span class="text-name ellipsis">{{ item.client_name }}</span>
                  <div class="row items-center">
                    <q-icon name="mdi-star" color="warning" size="14px" />
                    <span class="text-rating text-text">{{ item.average_rating }}</span>
                  </div>
                </div>
                <div class="row items-center no-wrap">
                  <span class="text-schedule-date-bold">{{ formatWeekday(item.date) }}</span>
                  <span class="text-schedule-date-regular">{{ ', ' + formatDayMonth(item.date) }}</span>
                </div>
                <div class="text-schedule-date-regular">
                  {{ $t('common.from') }}
                  <span class="text-schedule-date-bold">
                    {{ item.start_time?.slice(0, 5) }}

                    {{ $t('common.to') }}

                    {{ item.end_time?.slice(0, 5) }}
                  </span>
                </div>
              </div>
              <div class="column items-end text-text">
                <div class="text-price">{{ formatCurrency(item.total_amount) }}</div>
                <div class="text-type">{{ t(labelsPeriodTypes.find(label => label.value == item.period_type)?.label) }}</div>
                <div class="text-region text-weight-bold">{{ item.address?.district || 'N/A' }}</div>
                <div class="text-distance">
                  <span class="q-pr-xs">{{ item.distance_km ?? 0 }}</span>
                  {{ $t('common.km') }}
                </div>
              </div>
            </div>

            <div class="row q-mt-sm q-gutter-x-sm items-center">
              <div>
                <q-btn
                  flat
                  no-caps
                  color="primary"
                  size="sm"
                  class="col-auto q-px-none btn-details"
                  :label="$t('common.details')"
                  @click="emit('view-details', item)"
                />
                <div class="text-schedule-date-bold text-text text-weight-bold">
                  {{ item.time_since_request }}
                </div>
              </div>
              <q-space />
              <q-btn
                unelevated
                rounded
                no-caps
                class="col-auto bg-grey-3 text-grey-8 btn-action"
                size="sm"
                :label="$t('common.refuse')"
                @click="emit('reject', item)"
              />
              <q-btn
                unelevated
                rounded
                no-caps
                color="secondary"
                class="col-auto btn-action"
                size="sm"
                :label="$t('common.accept')"
                @click="emit('accept', item)"
              />
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { formatCurrency } from 'src/helpers/utils';
import { useI18n } from 'vue-i18n';
import { labelsPeriodTypes } from 'src/helpers/arraysOptions/labelsPeriodTypes.js';

defineProps({
  data: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['accept', 'reject', 'view-details']);

const t = useI18n().t;

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

const parseLocalDate = (iso) => {
  if (!iso) return null;
  const m = String(iso).match(/^(\d{4})-(\d{2})-(\d{2})/);
  return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null;
};

const formatWeekday = (iso) => {
  const d = parseLocalDate(iso);
  if (!d) return '';
  const w = d.toLocaleDateString('pt-BR', { weekday: 'long' });
  return w.charAt(0).toUpperCase() + w.slice(1);
};

const formatDayMonth = (iso) => {
  const d = parseLocalDate(iso);
  if (!d) return '';
  return d.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' });
};
</script>

<style scoped lang="scss">
.scroll-wrapper {
  overflow-x: auto;
  padding-bottom: 8px;
  &::-webkit-scrollbar {
    display: none;
  }
}
.solicitation-card {
  min-width: 85vw;
}
.text-name {
  font-weight: 700;
  color: #3a3a4a;
}
.text-rating {
  font-size: 12px;
  font-weight: 600;
}
.text-schedule-date-bold {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #3a3a4a;
}
.text-schedule-date-regular {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #666;
}
.text-date, .text-time, .text-type, .text-region, .text-distance {
  font-size: 11px;
  color: #666;
}
.text-price {
  font-weight: 700;
  color: #3a3a4a;
  font-size: 14px;
}
.btn-details {
  font-weight: 700;
  font-size: 13px;
}
.btn-action {
  font-weight: 700;
  min-width: 90px;
}
.flex-1 {
  flex: 1;
  min-width: 0;
}
</style>
