<template>
  <v-container fluid>
    <v-row>
      <v-col cols="12">
        <!-- Breadcrumb -->
        <v-breadcrumbs :items="breadcrumbs" divider=">" class="pa-0 mb-4">
          <template v-slot:item="{ item }">
            <v-breadcrumbs-item :to="item.to" :disabled="item.disabled">
              {{ item.title }}
            </v-breadcrumbs-item>
          </template>
        </v-breadcrumbs>

        <!-- Page Title -->
        <h1 class="text-h5 mb-6">Buat Registrasi</h1>

        <!-- Registration Form -->
        <v-form ref="form" v-model="valid" lazy-validation>
          <!-- Registration Type Section -->
          <RegistrationType
            v-model:registrationData="formData.registrationType"
            @update="updateSection('registrationType')"
          />

          <!-- Patient Data Section -->
          <PatientData
            v-model:patientData="formData.patient"
            @update="updateSection('patient')"
            class="mt-6"
          />

          <!-- Appointment Schedule Section -->
          <AppointmentSchedule
            v-model:scheduleData="formData.schedule"
            @update="updateSection('schedule')"
            class="mt-6"
          />

          <!-- Risk Assessment Section -->
          <RiskAssessment
            v-model:riskData="formData.riskAssessment"
            @update="updateSection('riskAssessment')"
            class="mt-6"
          />

          <!-- Action Buttons -->
          <v-row class="mt-8">
            <v-col cols="12" class="d-flex justify-end gap-3">
              <v-btn variant="outlined" color="primary" @click="resetForm">
                Reset
              </v-btn>
              <v-btn color="primary" :loading="loading" @click="submitForm">
                Simpan Registrasi
              </v-btn>
            </v-col>
          </v-row>
        </v-form>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";

import RegistrationType from "~/components/apps/registration/form/RegistrationType.vue";
import PatientData from "~/components/apps/registration/form/PatientData.vue";
import AppointmentSchedule from "~/components/apps/registration/form/AppointmentSchedule.vue";
import RiskAssessment from "~/components/apps/registration/form/RiskAssessment.vue";

const router = useRouter();
const form = ref();
const valid = ref(true);
const loading = ref(false);

const breadcrumbs = [
  { title: "Rawat Jalan", to: "/appointment", disabled: false },
  { title: "Registrasi", to: "/appointment/registration", disabled: false },
  { title: "Buat Registrasi", to: "", disabled: true }
];

const formData = reactive({
  registrationType: {
    visitType: "",
    treatmentType: "Rawat Jalan",
    triage: ""
  },
  patient: {
    name: "",
    medicalRecordNumber: "",
    category: "",
    birthDate: "",
    gender: "",
    address: "",
    phoneCode: "+62",
    phoneNumber: "",
    email: "",
    identityType: "",
    identityNumber: ""
  },
  schedule: {
    paymentMethod: "Pribadi",
    referralNumber: "",
    polyclinicName: "",
    doctorName: "",
    consultationDate: "",
    consultationTime: "",
    slotAvailable: true
  },
  riskAssessment: {
    walkingAbility: null,
    supportWhileSitting: null,
    score: 0
  }
});

const updateSection = (section) => {
  console.log(`Section ${section} updated:`, formData[section]);
};

const submitForm = async () => {
  const { valid } = await form.value.validate();

  if (valid) {
    loading.value = true;
    try {
      // API call simulation
      await new Promise((resolve) => setTimeout(resolve, 2000));
      console.log("Form submitted:", formData);

      // Navigate to success page or show notification
      router.push("/appointment/registration");
    } catch (error) {
      console.error("Error submitting form:", error);
    } finally {
      loading.value = false;
    }
  }
};

const resetForm = () => {
  form.value.reset();
};
</script>
