<template>
  <div>
    <v-container>
      <v-btn @click="router.back()" variant="text">
        <v-icon icon="mdi-arrow-left"></v-icon>
        Back to Contacts
      </v-btn>

      <v-card flat>
        <v-card-text>
          <v-stepper
            v-model="currentStep"
            class="mb-6"
            variant="flat"
            alt-labels
          >
            <v-stepper-header>
              <template
                v-for="(level, index) in InterestSalesProcessLevelFlow"
                :key="index"
              >
                <v-stepper-item
                  :step="index"
                  :complete="currentStep + 1 > index"
                  :title="level"
                />
                <v-divider
                  v-if="index < InterestSalesProcessLevelFlow.length - 1"
                ></v-divider>
              </template>
            </v-stepper-header>
          </v-stepper>

          <v-form v-if="interest" @submit.prevent="saveInterest">
            <v-row>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest['Full Name']"
                  label="Full Name"
                  variant="outlined"
                ></v-text-field>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest['Yacht Name']"
                  label="Yacht Name"
                  variant="outlined"
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest.Length"
                  label="Length"
                  variant="outlined"
                ></v-text-field>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest.Address"
                  label="Address"
                  variant="outlined"
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest['Email Address']"
                  label="Email Address"
                  variant="outlined"
                ></v-text-field>
              </v-col>
              <v-col cols="12" md="6">
                <v-select
                  v-model="interest['Sales Process Level']"
                  label="Sales Process Level"
                  variant="outlined"
                  :items="InterestSalesProcessLevelFlow"
                ></v-select>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest['Phone Number']"
                  label="Phone Number"
                  variant="outlined"
                ></v-text-field>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest['Extra Comments']"
                  label="Extra Comments"
                  variant="outlined"
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest['Berth Size Desired']"
                  label="Berth Size Desired"
                  variant="outlined"
                ></v-text-field>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest['Berth Recommendations']"
                  label="Berth Recommendations"
                  variant="outlined"
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest['Date Added']"
                  label="Date Added"
                  variant="outlined"
                  readonly
                  disabled
                ></v-text-field>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest.Width"
                  label="Width"
                  variant="outlined"
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest.Depth"
                  label="Depth"
                  variant="outlined"
                ></v-text-field>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest['Created At']"
                  label="Created At"
                  variant="outlined"
                  readonly
                  disabled
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest.Source"
                  label="Source"
                  variant="outlined"
                ></v-text-field>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest['Place of Residence']"
                  label="Place of Residence"
                  variant="outlined"
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" md="6">
                <v-select
                  v-model="interest['Contact Method Preferred']"
                  label="Contact Method Preferred"
                  variant="outlined"
                  :items="ContactMethodPreferredFlow"
                ></v-select>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest['Request Form Sent']"
                  label="Request Form Sent"
                  variant="outlined"
                  readonly
                  disabled
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest['Berth Number']"
                  label="Berth Number"
                  variant="outlined"
                ></v-text-field>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest['EOI Time Sent']"
                  label="EOI Time Sent"
                  variant="outlined"
                  readonly
                  disabled
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" md="6">
                <v-select
                  v-model="interest['Lead Category']"
                  label="Lead Category"
                  variant="outlined"
                  :items="InterestLeadCategoryFlow"
                ></v-select>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="interest['Time LOI Sent']"
                  label="Time LOI Sent"
                  variant="outlined"
                  readonly
                  disabled
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" class="d-flex">
                <v-btn @click="requestMoreInfoToSales" class="mr-2"
                  >Request More Info - To Sales</v-btn
                >
                <v-btn @click="requestMoreInformation" class="mr-2"
                  >Request More Information</v-btn
                >
                <v-btn @click="eoiSendToSales">EOI Send to Sales</v-btn>
                <v-spacer />
                <v-btn type="submit" color="primary" class="mr-2">Save</v-btn>
              </v-col>
            </v-row>
          </v-form>
        </v-card-text>
      </v-card>
    </v-container>
  </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from "#app";
import { ref, computed, onMounted } from "vue";
import {
  InterestSalesProcessLevelFlow,
  InterestLeadCategoryFlow,
  ContactMethodPreferredFlow,
} from "@/utils/types";

const router = useRouter();
const route = useRoute();

const { data: interest } = useFetch<Interest>("/api/get-interest-by-id", {
  params: {
    id: route.params.id,
  },
});

const currentStep = computed(() => {
  return InterestSalesProcessLevelFlow.indexOf(
    interest.value?.["Sales Process Level"] || ""
  );
});

const fetchInterest = async () => {
  try {
  } catch (error) {
    console.error("Failed to fetch interest:", error);
  }
};

const saveInterest = async () => {
  if (interest.value) {
    try {
      alert("Interest saved successfully!");
    } catch (error) {
      console.error("Failed to save interest:", error);
    }
  }
};

const requestMoreInfoToSales = () => {
  alert("Request More Info - To Sales");
};

const requestMoreInformation = () => {
  alert("Request More Information");
};

const eoiSendToSales = () => {
  alert("EOI Send to Sales");
};
</script>
