"use client";

import Image from "next/image";
import { useState } from "react";
import Button from "@/components/ui/button";
import CallResultSheet from "@/components/ui/call-result-sheet";
import DismissReasonSheet from "@/components/ui/dismiss-reason-sheet";
import NavigationButton from "@/components/ui/navigation-button";
import { useI18n } from "@/i18n/provider";

export default function CandidateContactPage() {
  const { dictionary: t } = useI18n();
  const [isCallResultSheetOpen, setIsCallResultSheetOpen] = useState(false);
  const [isDismissReasonSheetOpen, setIsDismissReasonSheetOpen] =
    useState(false);

  return (
    <>
      {isCallResultSheetOpen ? (
        <CallResultSheet
          onClose={() => setIsCallResultSheetOpen(false)}
          onOtherReasonsClick={() => setIsDismissReasonSheetOpen(true)}
        />
      ) : null}
      {isDismissReasonSheetOpen ? (
        <DismissReasonSheet
          onClose={() => setIsDismissReasonSheetOpen(false)}
        />
      ) : null}

      <main className="-mx-[17px] flex min-h-screen flex-col px-[17px] pt-10 pb-36">
        <header className="flex items-center justify-between">
          <NavigationButton icon="back" />
          <h1 className="font-faminela">{t.common.appName}</h1>
          <NavigationButton icon="support" iconLabel={t.common.support} />
        </header>

        <section className="flex flex-1 items-center justify-center">
          <div className="flex max-w-[300px] flex-col items-center">
            <Image
              src="/assets/images/Group 1597880467.svg"
              alt={t.candidateContact.imageAlt}
              width={131}
              height={125}
            />

            <h1 className="mt-10 text-center text-[18px] leading-[1.2] font-bold text-[#1A1A1A]">
              {t.candidateContact.title}
            </h1>
          </div>
        </section>

        <section 
          style={{ paddingBottom: `calc(2rem + var(--safe-bottom))` }}
          className="fixed right-0 bottom-0 left-0 z-20 mx-auto flex w-full sm:max-w-[375px] gap-3 rounded-t-[30px] bg-white px-[17px] pt-6 shadow-[0_-18px_50px_rgba(15,23,42,0.08)]"
        >
          <Button className="" onClick={() => setIsCallResultSheetOpen(true)}>
            {t.candidateContact.contacted}
          </Button>
          <Button className="" description={t.candidateContact.afterTwoDays}>
            {t.candidateContact.noContactYet}
          </Button>
        </section>
      </main>
    </>
  );
}