"use client";

import Image from "next/image";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import React from "react";
import { useBoolean } from "usehooks-ts";

import successIcon from "@/assets/svg/icons/success.svg";
import { Button } from "@/components/ui/button/button";
import Card from "@/components/ui/card/card";
import { useConfirmEmail } from "@/services/white-label/auth/confirm-email.services";

const ConfirmEmail = () => {
  const params = useSearchParams();
  const { value, toggle } = useBoolean(false);
  const confirmEmailMutation = useConfirmEmail({
    onSuccess() {
      toggle();
    },
  });

  const token = params.get("token") || "";
  const email = params.get("email") || "";

  if (value) {
    return (
      <div className="flex min-h-[80vh] items-center justify-center">
        <Card className="flex w-[420px] max-w-[420px] flex-col gap-6 bg-white p-6 shadow-2xl">
          <div className="flex flex-col gap-2">
            <Image
              className="mb-5"
              src={successIcon}
              width={48}
              height={48}
              alt="success"
            />
            <span className="text-lg font-medium text-[#1D2939]">
              Hesabınız Etkinleştirildi
            </span>
            <span className="text-base text-gray-500">
              Hesabınızı artık kullanabilirsiniz
            </span>
          </div>

          <Link
            className="flex flex-row gap-1 text-base font-semibold text-gray-500"
            href="/auth"
          >
            <Button variant="primary" className="w-full">
              Giriş Yap
            </Button>
          </Link>
        </Card>
      </div>
    );
  }

  return (
    <div className="flex min-h-[80vh] items-center justify-center">
      <Card className="flex max-w-[392px] flex-col gap-6 bg-white p-6 shadow-2xl">
        <div className="flex flex-col gap-2">
          <span className="text-lg font-medium text-[#1D2939]">
            Son bir adım kaldı
          </span>
          <span className="text-base text-gray-500">
            Hesabınızı etkinleştirmek için tıklayınız
          </span>
        </div>

        <Button
          onClick={() =>
            confirmEmailMutation.mutate({
              token,
              email,
            })
          }
          variant="primary"
          className="w-full"
        >
          Hesabı Etkinleştir
        </Button>
      </Card>
    </div>
  );
};

export default ConfirmEmail;