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

    <div
      v-if="serverErrors.working_days"
      class="text-negative font12 q-mb-md text-center"
    >
      {{ serverErrors.working_days }}
    </div>

    <q-card
      ref="workingDaysRef"
      class="availability-card bg-surface q-mb-lg q-pa-lg shadow-card"
      flat
    >
      <div class="row items-start q-mb-md">
        <q-icon
          class="q-mr-sm"
          color="grey-6"
          name="mdi-lock-outline"
          size="20px"
        />

        <div class="col">
          <div class="text-grey-8 line-height-tight font12">
            <span class="fontbold">
              {{ $t("provider.login.steps.step_6.lock_hint") }}
            </span>

            <span>
              {{ $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 font9 fontbold 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')"
              class="absolute-center lock-icon"
              color="grey-6"
              name="mdi-lock-outline"
              size="24px"
            />

            <span class="period-label font9">{{
              $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')"
              class="absolute-center lock-icon"
              color="grey-6"
              name="mdi-lock-outline"
              size="24px"
            />

            <span class="period-label font9">
              {{ $t("provider.login.steps.step_6.afternoon") }}
            </span>
          </div>
        </div>
      </div>

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

    <q-banner class="bg-blue-1 q-mb-md text-primary" rounded>
      <template #avatar>
        <q-icon color="primary" name="mdi-alert-outline" />
      </template>

      <span class="fontbold font12">
        {{ $t("provider.login.steps.step_6.dont_worry") }}
      </span>

      <span class="font12 q-ml-xs">
        {{ $t("provider.login.steps.step_6.change_anytime") }}
      </span>
    </q-banner>
  </q-card-section>
</template>

<script setup>
import { inject, onMounted, ref } from "vue";

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

const serverErrors = inject("serverErrors", ref({}));

const workingDaysRef = ref(null);

const fieldRefs = {
  working_days: workingDaysRef,
};

defineExpose({
  getFieldRef: (field) => fieldRefs[field],
});

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 isDayAvailable = (day) => {
  const d = form.value.working_days?.[day];

  return d?.morning || d?.afternoon;
};

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

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;
  gap: 4px;
  justify-content: space-between;
}

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

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

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

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

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

.active-morning,
.active-afternoon {
  background-color: #00ff7f;
  color: #000000;
}

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

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