<template>
  <q-card-section class="no-padding">
    <div class="text-subtitle1 text-center text-weight-bold text-grey-8 q-mb-md">
      {{ $t('provider.login.steps.step_6.title') }}
    </div>

    <q-card flat class="q-pa-lg q-mb-lg availability-card shadow-card bg-surface">
      <div class="row items-start q-mb-md">
        <q-icon name="mdi-lock-outline" size="20px" color="grey-6" class="q-mr-sm" />
        <div class="col">
          <div class="text-caption text-weight-bold text-grey-8 line-height-tight">
            {{ $t('provider.login.steps.step_6.lock_hint') }} <span class="text-weight-regular text-grey-6">{{ $t('provider.login.steps.step_6.lock_description') }}</span>
          </div>
        </div>
      </div>

      <div class="days-grid q-mb-lg">
        <div v-for="day in days" :key="day.value" class="day-column">
          <div
            class="day-header q-mb-sm text-center"
            :class="isDayAvailable(day.value) ? 'gradient-diarista-bg text-white' : 'bg-grey-3 text-grey-6'"
            @click="toggleDay(day.value)"
          >
            {{ day.label }}
          </div>

          <div
            class="period-button q-mb-sm flex flex-center relative-position"
            :class="isSelected(day.value, 'morning') ? 'active-morning' : 'inactive-period'"
            @click="togglePeriod(day.value, 'morning')"
          >
            <q-icon v-if="!isSelected(day.value, 'morning')" name="mdi-lock-outline" size="24px" color="grey-6" class="absolute-center lock-icon" />
            <span class="period-label">{{ $t('provider.login.steps.step_6.morning') }}</span>
          </div>

          <div
            class="period-button flex flex-center relative-position"
            :class="isSelected(day.value, 'afternoon') ? 'active-afternoon' : 'inactive-period'"
            @click="togglePeriod(day.value, 'afternoon')"
          >
            <q-icon v-if="!isSelected(day.value, 'afternoon')" name="mdi-lock-outline" size="24px" color="grey-6" class="absolute-center lock-icon" />
            <span class="period-label">{{ $t('provider.login.steps.step_6.afternoon') }}</span>
          </div>
        </div>
      </div>

      <div class="text-caption text-grey-6 text-center">
        {{ $t('provider.login.steps.step_6.instruction') }}
      </div>
    </q-card>

    <q-banner rounded class="bg-blue-1 text-primary q-mb-md">
      <template #avatar>
        <q-icon name="mdi-alert-outline" color="primary" />
      </template>
      <span class="text-weight-bold">{{ $t('provider.login.steps.step_6.dont_worry') }}</span> {{ $t('provider.login.steps.step_6.change_anytime') }}
    </q-banner>
  </q-card-section>
</template>

<script setup>
import { onMounted } from 'vue';

const form = defineModel({ type: Object, required: true });

const days = [
  { value: 0, label: 'DOM' },
  { value: 1, label: 'SEG' },
  { value: 2, label: 'TER' },
  { value: 3, label: 'QUA' },
  { value: 4, label: 'QUI' },
  { value: 5, label: 'SEX' },
  { value: 6, label: 'SÁB' },
];

const initializeWorkingDays = () => {
  if (!form.value.working_days || typeof form.value.working_days !== 'object') {
    form.value.working_days = {};
  }

  for (const day of days) {
    if (!form.value.working_days[day.value]) {
      form.value.working_days[day.value] = {
        morning: true,
        afternoon: true,
      };
    }
  }
};

const isSelected = (day, period) => {
  return !!form.value.working_days?.[day]?.[period];
};

const isDayAvailable = (day) => {
  const d = form.value.working_days?.[day];
  return d?.morning || d?.afternoon;
};

const toggleDay = (day) => {
  initializeWorkingDays();
  const currentState = isDayAvailable(day);
  form.value.working_days[day].morning = !currentState;
  form.value.working_days[day].afternoon = !currentState;
};

const togglePeriod = (day, period) => {
  initializeWorkingDays();
  form.value.working_days[day][period] = !form.value.working_days[day][period];
};

onMounted(() => {
  initializeWorkingDays();
});
</script>

<style lang="scss" scoped>
.availability-card {
  border-radius: 20px;
}

.days-grid {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.day-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.day-header {
  font-size: 10px;
  font-weight: bold;
  padding: 2px 0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.period-button {
  font-size: 10px;
  height: 36px;
  width: 36px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.period-label {
  z-index: 1;
}

.lock-icon {
  opacity: 0.6;
  z-index: 2;
}

.active-morning, .active-afternoon {
  background-color: #00ff7f;
  color: #004d40;
  font-weight: bold;
}

.inactive-period {
  background-color: #e4e4e4;
  color: #c0c0c0;
  border: none;
  text-decoration: none;
}

.line-height-tight {
  line-height: 1.2;
}
</style>
