<script setup lang="ts">
import { useForm } from "@inertiajs/vue3";
import { useBuilderPrefix } from "../../composables/useBuilderPrefix";
import { useTranslations } from "../../composables/useTranslations";
import Button from "../../components/ui/Button.vue";
import Card from "../../components/ui/Card.vue";
import CardContent from "../../components/ui/CardContent.vue";
import CardDescription from "../../components/ui/CardDescription.vue";
import CardFooter from "../../components/ui/CardFooter.vue";
import CardHeader from "../../components/ui/CardHeader.vue";
import CardTitle from "../../components/ui/CardTitle.vue";
import FormItem from "../../components/ui/FormItem.vue";
import FormLabel from "../../components/ui/FormLabel.vue";
import FormMessage from "../../components/ui/FormMessage.vue";
import Input from "../../components/ui/Input.vue";
import Separator from "../../components/ui/Separator.vue";

const props = defineProps<{
  user: { name: string; email: string };
}>();

const prefix = useBuilderPrefix();
const { t } = useTranslations();

const profileForm = useForm({
  name: props.user.name,
  email: props.user.email,
});

const passwordForm = useForm({
  current_password: "",
  password: "",
  password_confirmation: "",
});

function saveProfile() {
  profileForm.put(`/${prefix}/account`);
}

function updatePassword() {
  passwordForm.put(`/${prefix}/account/password`, {
    onSuccess: () => {
      passwordForm.reset();
    },
  });
}
</script>

<template>
  <div class="space-y-6">
    <!-- Profile -->
    <Card>
      <CardHeader>
        <CardTitle>{{ t("builder.account.profile") }}</CardTitle>
        <CardDescription>{{
          t("builder.account.profile_description")
        }}</CardDescription>
      </CardHeader>

      <CardContent>
        <form class="space-y-4" @submit.prevent="saveProfile">
          <FormItem>
            <FormLabel :error="!!profileForm.errors.name" for="name">
              {{ t("builder.account.name") }}
            </FormLabel>
            <Input
              id="name"
              v-model="profileForm.name"
              type="text"
              name="name"
              autocomplete="name"
            />
            <FormMessage :message="profileForm.errors.name" />
          </FormItem>

          <FormItem>
            <FormLabel :error="!!profileForm.errors.email" for="email">
              {{ t("builder.account.email") }}
            </FormLabel>
            <Input
              id="email"
              v-model="profileForm.email"
              type="email"
              name="email"
              autocomplete="email"
            />
            <FormMessage :message="profileForm.errors.email" />
          </FormItem>
        </form>
      </CardContent>

      <CardFooter>
        <Button :disabled="profileForm.processing" @click="saveProfile">
          {{ t("builder.account.save") }}
        </Button>
      </CardFooter>
    </Card>

    <Separator />

    <!-- Password -->
    <Card>
      <CardHeader>
        <CardTitle>{{ t("builder.account.password") }}</CardTitle>
        <CardDescription>{{
          t("builder.account.password_description")
        }}</CardDescription>
      </CardHeader>

      <CardContent>
        <form class="space-y-4" @submit.prevent="updatePassword">
          <FormItem>
            <FormLabel
              :error="!!passwordForm.errors.current_password"
              for="current_password"
            >
              {{ t("builder.account.current_password") }}
            </FormLabel>
            <Input
              id="current_password"
              v-model="passwordForm.current_password"
              type="password"
              name="current_password"
              autocomplete="current-password"
            />
            <FormMessage :message="passwordForm.errors.current_password" />
          </FormItem>

          <FormItem>
            <FormLabel
              :error="!!passwordForm.errors.password"
              for="new_password"
            >
              {{ t("builder.account.new_password") }}
            </FormLabel>
            <Input
              id="new_password"
              v-model="passwordForm.password"
              type="password"
              name="password"
              autocomplete="new-password"
            />
            <FormMessage :message="passwordForm.errors.password" />
          </FormItem>

          <FormItem>
            <FormLabel for="password_confirmation">{{
              t("builder.account.confirm_password")
            }}</FormLabel>
            <Input
              id="password_confirmation"
              v-model="passwordForm.password_confirmation"
              type="password"
              name="password_confirmation"
              autocomplete="new-password"
            />
          </FormItem>
        </form>
      </CardContent>

      <CardFooter>
        <Button :disabled="passwordForm.processing" @click="updatePassword">
          {{ t("builder.account.update_password") }}
        </Button>
      </CardFooter>
    </Card>
  </div>
</template>
