"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";
import { useState } from "react";
import Button from "@/components/ui/button";
import DismissReasonSheet from "@/components/ui/dismiss-reason-sheet";
import FemaleConsentSheet from "@/components/ui/female-consent-sheet";
import InformationSheet from "@/components/ui/information-sheet";
import NavigationButton from "@/components/ui/navigation-button";
import StickyHeader from "@/components/ui/sticky-header";
import { PageBackground } from "@/components/utils/page-background";
import type {
  MarriageCaseStatus,
  MarriageField,
  MarriageFieldValue,
  MarriageGender,
  MarriagePhoneFieldValue,
} from "@/hooks/marriage/types";
import { useRespondToMarriageCaseMutation } from "@/hooks/marriage/use-case-respond";
import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main";
import { localizePath } from "@/translations/config";
import { useI18n } from "@/translations/provider";

function formatFieldValue(value: MarriageFieldValue) {
  if (value === null || value === "") {
    return null;
  }

  if (isMarriagePhoneFieldValue(value)) {
    return `+${value.countryCode}${value.phoneNumber}`;
  }

  if (typeof value === "boolean") {
    return value ? "Yes" : "No";
  }

  return String(value);
}

function isMarriagePhoneFieldValue(
  value: unknown,
): value is MarriagePhoneFieldValue {
  if (!value || typeof value !== "object") {
    return false;
  }

  const phoneValue = value as Partial<MarriagePhoneFieldValue>;

  return (
    typeof phoneValue.countryCode === "string" &&
    typeof phoneValue.phoneNumber === "string"
  );
}

function titleFromKey(key: string) {
  return key
    .replace(/^q\d+[_-]?/i, "")
    .replace(/[_-]+/g, " ")
    .replace(/\s+/g, " ")
    .trim()
    .replace(/\b\w/g, (letter) => letter.toUpperCase());
}

function isImageField(field: MarriageField) {
  return /(avatar|image|photo|picture|portrait|upload)/i.test(
    `${field.key} ${field.label}`,
  );
}

function canAcceptProfile(
  gender: MarriageGender | null | undefined,
  status: MarriageCaseStatus | null | undefined,
) {
  if (!gender || !status) {
    return false;
  }

  if (gender === "female") {
    return status === "introduced" || status === "male_accepted";
  }

  return status === "introduced";
}

function MatchField({ field }: { field: MarriageField }) {
  const value = formatFieldValue(field.value);

  if (!value || isImageField(field)) {
    return null;
  }

  const label = field.label || titleFromKey(field.key);

  return (
    <div className="mb-3.5 space-y-2 border-b border-[#000000]/10 pb-2.5">
      <p className="text-xs font-semibold text-[#978787]">{label}</p>
      <p className="font-semibold text-[#111111]">{value}</p>
    </div>
  );
}

export default function NewMatchProfilePage() {
  const { dictionary: t, locale } = useI18n();
  const router = useRouter();
  const [isRequestSheetOpen, setIsRequestSheetOpen] = useState(false);
  const [isFemaleConsentChecked, setIsFemaleConsentChecked] = useState(false);
  const [isRejectSheetOpen, setIsRejectSheetOpen] = useState(false);
  const [isDismissReasonSheetOpen, setIsDismissReasonSheetOpen] =
    useState(false);
  const { data: profile } = useMarriageProfileQuery();
  const caseId = profile?.active_case?.case_id;
  const caseStatus = profile?.active_case?.status;
  const isFemaleProfile = profile?.gender === "female";
  const isMaleAccepted = caseStatus === "male_accepted";
  const respondMutation = useRespondToMarriageCaseMutation(caseId ?? "", {
    onSuccess: async (_, variables) => {
      if (variables.action === "accept") {
        router.push(localizePath("/request-sent", locale));
        return;
      }

      router.push(localizePath("/candidate-contact", locale));
    },
  });

  const isSubmitting = respondMutation.isPending;
  const isAcceptProfileEnabled =
    Boolean(caseId) &&
    !isSubmitting &&
    canAcceptProfile(profile?.gender, caseStatus);

  return (
    <>
      <PageBackground />
      {isRequestSheetOpen ? (
        isFemaleProfile ? (
          <FemaleConsentSheet
            title="Final Confirmation & Consent"
            description="By approving this profile, the male candidate will be notified to proceed with acquiring your contact information for further communication. Please ensure full family alignment before proceeding"
            buttons={({ close }) => (
              <div className="space-y-5">
                <button
                  type="button"
                  onClick={() => setIsFemaleConsentChecked((value) => !value)}
                  className="flex w-full items-start gap-4 rounded-[15px] border-2 border-white bg-white/50 px-5 py-5 text-left shadow-[0_8px_24px_rgba(0,0,0,0.05)]"
                >
                  <span
                    className={[
                      "mt-1 flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full border-1",
                      isFemaleConsentChecked
                        ? "border-[#F0445B] bg-[#F0445B]"
                        : "border-[#2B2B2B] bg-white",
                    ].join(" ")}
                    aria-hidden="true"
                  >
                    {isFemaleConsentChecked ? (
                      <span className="h-3 w-3 rounded-full bg-[#F0445B]" />
                    ) : null}
                  </span>
                  <span className="text-xs leading-[1.35] text-[#3F3F3F]">
                    I confirm that the female candidate and her family have
                    reviewed this profile and tentatively agree to further
                    communication
                  </span>
                </button>

                <div className="grid w-full grid-cols-2 gap-3">
                  <Button
                    variant="outlined"
                    className="py-[18px] text-[18px]"
                    onClick={close}
                  >
                    {t.common.cancel}
                  </Button>
                  <Button
                    className="py-[18px] text-[18px]"
                    disabled={
                      !caseId ||
                      isSubmitting ||
                      !isAcceptProfileEnabled ||
                      !isFemaleConsentChecked
                    }
                    onClick={async () => {
                      close();
                      if (!isAcceptProfileEnabled) {
                        return;
                      }

                      await respondMutation.mutateAsync({ action: "accept" });
                    }}
                  >
                    {t.common.confirm}
                  </Button>
                </div>
              </div>
            )}
            onClose={() => {
              setIsFemaleConsentChecked(false);
              setIsRequestSheetOpen(false);
            }}
          />
        ) : (
          <InformationSheet
            icon="check"
            title="Request to Proceed"
            description="With your approval, we will approach their family on your behalf to propose marriage. After their family agrees, you will be introduced to each other for further acquaintance."
            buttons={({ close }) => (
              <div className="grid w-full grid-cols-2 gap-3">
                <Button
                  variant="outlined"
                  className="py-[18px]"
                  onClick={close}
                >
                  {t.common.cancel}
                </Button>
                <Button
                  className="py-[18px]"
                  disabled={!isAcceptProfileEnabled}
                  onClick={async () => {
                    close();
                    if (!isAcceptProfileEnabled) {
                      return;
                    }

                    await respondMutation.mutateAsync({ action: "accept" });
                  }}
                >
                  {t.common.confirm}
                </Button>
              </div>
            )}
            onClose={() => setIsRequestSheetOpen(false)}
          />
        )
      ) : null}
      {isRejectSheetOpen ? (
        <InformationSheet
          icon="warning"
          title="Reject Profile"
          description="Are you sure you've fully reviewed the profile and want to reject this profile?"
          buttons={({ close }) => (
            <div className="grid w-full grid-cols-2 gap-3">
              <Button variant="outlined" className="py-[18px]" onClick={close}>
                {t.common.cancel}
              </Button>
              <Button
                className="py-[18px]"
                onClick={() => {
                  close();
                  setIsDismissReasonSheetOpen(true);
                }}
              >
                Reject
              </Button>
            </div>
          )}
          onClose={() => setIsRejectSheetOpen(false)}
        />
      ) : null}
      {isDismissReasonSheetOpen ? (
        <DismissReasonSheet
          onClose={() => setIsDismissReasonSheetOpen(false)}
          onSubmit={async (reason) => {
            if (!caseId) {
              return;
            }

            await respondMutation.mutateAsync({
              action: "reject",
              custom_note: reason,
            });
          }}
        />
      ) : null}

      <main className="-mx-[17px] flex min-h-screen flex-col bg-[linear-gradient(180deg,rgba(255,197,196,0.2)_0%,rgba(251,237,237,0.7)_100%)] pb-10">
        <StickyHeader>
          <div className="flex items-center gap-4">
            <NavigationButton
              variant="transparent"
              icon="close"
              iconLabel={t.match.goBack}
            />
            <h1 className="min-w-0 flex-1 text-center text-white">
              {t.match.title}
            </h1>
            <div className="size-[74px] shrink-0" />
          </div>
        </StickyHeader>

        <section className="px-[17px] pb-32 pt-5">
          <div>
            <Image
              src={"/assets/images/Group 1597880481.png"}
              alt=""
              width={90}
              height={90}
              className="rounded-full"
            />
            <div className="relative inline-block mt-2">
              <p
                className="text-[25px] leading-none text-white/80"
                style={{ letterSpacing: "-2.3px", fontWeight: "1000" }}
              >
                {formatFieldValue(
                  profile?.match_summary?.public_info.find(
                    (field) => field.key === "q1_full_name",
                  )?.value ?? null,
                ) || "Name not available"}
              </p>
              <p className="absolute inset-0 whitespace-nowrap text-[22px] font-bold leading-none text-[#F0445B]">
                {formatFieldValue(
                  profile?.match_summary?.public_info.find(
                    (field) => field.key === "q1_full_name",
                  )?.value ?? null,
                ) || "Name not available"}
              </p>
            </div>
          </div>

          <div className="mt-6">
            {profile?.match_summary?.public_info.map((field) => (
              <MatchField key={field.key} field={field} />
            ))}
          </div>
        </section>

        <div
          style={{ paddingBottom: `var(--safe-bottom)` }}
          className="fixed inset-x-0 bottom-0 z-30 px-[17px]"
        >
          <div className="mx-auto w-full sm:max-w-[375px] rounded-t-[24px] bg-white px-4 py-4 shadow-[0_12px_30px_rgba(0,0,0,0.14)]">
            <div className="flex gap-3">
              <button
                type="button"
                disabled={!caseId || isSubmitting || isMaleAccepted}
                onClick={() => setIsRejectSheetOpen(true)}
                className="inline-flex w-1/3 items-center justify-center rounded-[12px] border border-[#BFBFBF] bg-white px-4 py-[13px] text-[16px] font-semibold text-[#9A9A9A]"
              >
                Reject
              </button>
              <button
                type="button"
                disabled={!isAcceptProfileEnabled}
                onClick={() => {
                  if (!isAcceptProfileEnabled) {
                    return;
                  }

                  if (isFemaleProfile) {
                    setIsFemaleConsentChecked(false);
                  }

                  setIsRequestSheetOpen(true);
                }}
                className="inline-flex w-2/3 whitespace-nowrap items-center justify-center gap-1 rounded-[12px] bg-[#F0445B] px-4 py-[13px] text-[16px] font-semibold text-white shadow-[0_8px_16px_rgba(240,68,91,0.24)] disabled:cursor-not-allowed disabled:opacity-50"
              >
                <Image
                  src="/assets/images/Icfdason.svg"
                  alt=""
                  width={28}
                  height={28}
                />
                <span>{t.match.acceptProfile}</span>
              </button>
            </div>
          </div>
        </div>
      </main>
    </>
  );
}