"use client";
import { getCookie, setCookie } from "cookies-next/client";
import { add } from "date-fns";
import { useEffect, useState } from "react";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "~/components/ui/dialog";
import { Button } from "~/components/ui/button";
import { useRouter } from "next/router";
import { ArrowRight, CircleHelp } from "lucide-react";
import { DialogTrigger } from "@radix-ui/react-dialog";
import { useTranslation } from "~/providers/I18nProvider";

const COOKIE_KEY = "tipologia_tutorial_shown";

export const CTA_TipologiaModal = () => {
  const { t } = useTranslation();
  const path = useRouter().asPath;
  const hasCookie = getCookie(COOKIE_KEY) === "true";

  const update = async (v: "Transitorio" | "Stabile" | null) => {
    setCookie(COOKIE_KEY, "true", {
      expires: add(new Date(), { days: 30 }), // Set cookie to expire in 30 days
    });
    if (v !== null) {
      window.location.assign("/annunci?tipo=" + v);
    }
    setOpen(false);
  };

  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (path == "/annunci" && !hasCookie) {
      const timer = setTimeout(() => {
        setOpen(true);
      }, 1000); // 1 second delay
      return () => clearTimeout(timer);
    }
  }, [path, hasCookie]);

  return (
    <Dialog
      open={open}
      onOpenChange={async (v) => {
        setOpen(v);
        if (!v) {
          await update(null);
        }
      }}
    >
      <DialogTrigger asChild>
        <Button variant="info" className="flex items-center gap-2">
          <CircleHelp />{" "}
          <span className="hidden sm:block">
            {t.tipologia_tutorial.btn_title}
          </span>
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle className="text-2xl">
            {t.tipologia_tutorial.title}
          </DialogTitle>
          <DialogDescription className="sr-only">
            tipologia hint
          </DialogDescription>
        </DialogHeader>
        <div className="flex flex-col gap-8">
          <div className="border-transitorio space-y-2 rounded-md border p-2">
            <h3 className="text-transitorio text-lg font-semibold">
              {t.tipologia_tutorial.transitorio}
            </h3>
            <p>{t.tipologia_tutorial.transitorio_desc}</p>
            <Button
              aria-label={t.tipologia_tutorial.transitorio_cta}
              onClick={async () => await update("Transitorio")}
              className="bg-transitorio flex w-full items-center gap-2"
            >
              {t.tipologia_tutorial.transitorio_cta}

              <ArrowRight className="size-4" />
            </Button>
          </div>
          <div className="border-stabile space-y-2 rounded-md border p-2">
            <h3 className="text-stabile text-lg font-semibold">
              {t.tipologia_tutorial.stabile}
            </h3>
            <p>{t.tipologia_tutorial.stabile_desc}</p>
            <Button
              aria-label={t.tipologia_tutorial.stabile_cta}
              onClick={async () => await update("Stabile")}
              className="bg-stabile flex w-full items-center gap-2"
            >
              {t.tipologia_tutorial.stabile_cta}

              <ArrowRight className="size-4" />
            </Button>
          </div>

          <Button
            aria-label={t.tipologia_tutorial.alone}
            variant="outline"
            onClick={async () => await update(null)}
            className="flex w-full items-center gap-2"
          >
            {t.tipologia_tutorial.alone}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
};
