"use client";

import dayjs from "dayjs";
import React from "react";

import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { Skeleton } from "@/components/ui/skeleton/skeleton";
import ProfileMemberShipInformations from "@/components/widget/profile/profile-membership-form/profile-membership-form";
import ProfilePassportInformations from "@/components/widget/profile/profile-passport-form/profile-pasaport-form";
import { DateHelper } from "@/libs/helpers/date-time-helper";
import { PhoneNumberHelper } from "@/libs/helpers/phone-number-helper";
import { checkProfileInformation } from "@/libs/helpers/profile-helper";
import {
  useAddOrUpdateUserMutation,
  useProfileInformationQuery,
} from "@/services/eva-display/profile/profile-information.services";
import { useCountriesQuery } from "@/services/white-label/location/countries.services";
import { profilePasswordValidation } from "@/validations/form-rules/password-rules";
import { checkDateOfBirth } from "@/validations/form-rules/rules/date-of-birth-rule";
import { checkEmail } from "@/validations/form-rules/rules/mail-rules";
import { nameValidation } from "@/validations/form-rules/rules/name-rule";
import { checkPassportDate } from "@/validations/form-rules/rules/passport-date-rule";
import { checkPassportInput } from "@/validations/form-rules/rules/passport-no-rule";
import { checkPhoneNumber } from "@/validations/form-rules/rules/phone-number-rule";
import { requiredRule } from "@/validations/form-rules/rules/required-rule";
import { profileCheckTcNoInput } from "@/validations/form-rules/rules/tc-no-input-rule";

const ProfilPersonalInformation = () => {
  const countriesQuery = useCountriesQuery();
  const personalInformationQuery = useProfileInformationQuery();

  const addOrUpdateMutation = useAddOrUpdateUserMutation({
    onSuccess() {
      personalInformationQuery.refetch();
    },
  });

  if (
    !personalInformationQuery.isSuccess ||
    !personalInformationQuery.data ||
    !personalInformationQuery.data.success ||
    !countriesQuery.isSuccess ||
    !countriesQuery.data ||
    !countriesQuery.data.success
  ) {
    return (
      <div>
        <Skeleton className="h-[300px]" />
      </div>
    );
  }

  const userData = personalInformationQuery?.data.result;
  const countriesData = countriesQuery?.data.result;

  const isInvalidProfileInformations = !checkProfileInformation(
    personalInformationQuery.data,
  );

  return (
    <div className="rounded-lg border border-gray-200 bg-white p-6">
      <h1 className="mb-8 text-2xl font-semibold text-gray-800">
        Kişisel Bilgilerim
      </h1>
      {isInvalidProfileInformations && (
        <div className="mb-6 flex items-center gap-4 rounded border border-red-300 bg-red-50 p-4 text-sm font-medium text-red-500">
          <LIcon name="Info" />
          <p>
            Rezervasyon işlemi yapabilmek için tüm kişisel bilgilerinizi
            doldurunuz.
          </p>
        </div>
      )}
      <div className="flex flex-col gap-6">
        <ProfileMemberShipInformations
          defaultValues={{
            gender: userData.userDetail?.gender?.toString(),
            name: userData.userDetail?.firstName,
            surname: userData.userDetail?.lastName,
            dateOfBirth: userData.userDetail?.birthDate
              ? dayjs(userData.userDetail?.birthDate).format("DD.MM.YYYY")
              : "",
            phoneNumber: PhoneNumberHelper.getPhoneNumberFromString(
              userData.phoneNumber,
            ) as any,
            email: userData.email,
            milesCode: userData.userDetail?.milesCode ?? "",
          }}
          onSubmit={(values) => {
            addOrUpdateMutation.mutate({
              id: userData.id,
              passaportDetail: null,
              status: userData.status,
              userDetail: {
                ...userData.userDetail,
                gender: +values.gender,
                firstName: values.name,
                lastName: values.surname,
                birthDate: (values.dateOfBirth
                  ? DateHelper.fullYearStringToISOString(values.dateOfBirth)
                  : null) as any,
                milesCode: values.milesCode ? `TK${values.milesCode}` : "",
              },
              userId: userData.userId,
              phoneNumber: PhoneNumberHelper.phoneNumberToString(
                values.phoneNumber,
              ),
            });
            return values;
          }}
          isLoading={addOrUpdateMutation.isLoading}
          validations={{
            email: checkEmail,
            surname: {
              validate: nameValidation,
              required: requiredRule,
            },
            gender: {
              required: requiredRule,
            },
            dateOfBirth: checkDateOfBirth,
            phoneNumber: checkPhoneNumber,
            name: {
              validate: nameValidation,
              required: requiredRule,
            },
            password: profilePasswordValidation,
          }}
        />
        <ProfilePassportInformations
          defaultValues={{
            passportCountry: userData.passaportDetail?.passportNationality,
            passportNo: userData.passaportDetail?.passportNo,
            country: userData.passaportDetail?.nationality,
            tcNo: userData.passaportDetail?.citizenNo,
            pasaportDate: userData.passaportDetail?.passportExpireDate
              ? dayjs(userData.passaportDetail?.passportExpireDate).format(
                  "DD.MM.YYYY",
                )
              : "",
          }}
          countries={countriesData}
          isLoading={addOrUpdateMutation.isLoading}
          onSubmit={(values) => {
            addOrUpdateMutation.mutate({
              id: userData.id,
              userDetail: {
                ...userData.userDetail,
                milesCode: userData.userDetail?.milesCode ?? "",
              },
              status: userData.status,
              passaportDetail: {
                citizenNo: values.tcNo,
                passportNo: values?.passportNo ?? "",
                passportExpireDate: (values.pasaportDate
                  ? dayjs(
                      values.pasaportDate.split(".").reverse().join("-"),
                      "YYYY-MM-DD",
                    ).toISOString()
                  : null) as any,
                passportNationality: {
                  id: values.passportCountry?.id ?? null,
                  name: values.passportCountry?.name ?? "",
                },
                nationality: {
                  id: values.country.id,
                  name: values.country.name,
                },
              },
              userId: userData.userId,
              phoneNumber: userData.phoneNumber,
            });
            return values;
          }}
          validations={{
            country: {
              required: requiredRule,
            },
            tcNo: {
              validete: (value: string) => profileCheckTcNoInput(value),
              required: requiredRule,
            },
            passportNo: checkPassportInput,
            pasaportDate: checkPassportDate,
            passportCountry: {
              required: requiredRule,
            },
          }}
        />
      </div>
    </div>
  );
};

export default ProfilPersonalInformation;