"use client";

import React, { useEffect, useState } from "react";
import Cookies from "js-cookie";
import Modal from "../elements/Modal";
import RoundedButton from "../elements/RoundedButton";
import { Checkbox } from "@/components/ui/checkbox";
import { useTranslation } from "react-i18next";

const STORAGE_KEY = "privacyPolicyDismissed";

function PrivacyPolicyModal() {
  const { t } = useTranslation("common");
  const [isOpen, setIsOpen] = useState(false);
  const [dontShowAgain, setDontShowAgain] = useState(false);

  useEffect(() => {
    const token = Cookies.get("token");
    if (!token) return;

    const dismissed =
      typeof window !== "undefined" &&
      localStorage.getItem(STORAGE_KEY) === "true";

    if (!dismissed) {
      setIsOpen(true);
    }
  }, []);

  const handleConfirm = () => {
    if (dontShowAgain) {
      localStorage.setItem(STORAGE_KEY, "true");
    }
    setIsOpen(false);
  };

  return (
    <Modal isOpen={isOpen} onClose={handleConfirm} height="420px">
      <div className="flex flex-col max-w-lg mx-auto text-right">
        <h2 className="text-xl font-bold text-center mb-4">{t("privacy.title")}</h2>
        <p className="text-sm leading-7 text-neutral-700 dark:text-neutral-300">
          {t("privacy.body")}
        </p>
        <label className="flex items-center gap-2 mt-6 cursor-pointer">
          <Checkbox
            id="privacy-dismiss"
            checked={dontShowAgain}
            onCheckedChange={(checked) => setDontShowAgain(checked === true)}
          />
          <span className="text-sm">{t("privacy.dontShowAgain")}</span>
        </label>
        <RoundedButton
          type="button"
          onClick={handleConfirm}
          className="mt-6 w-full h-10 text-sm"
        >
          {t("privacy.confirm")}
        </RoundedButton>
      </div>
    </Modal>
  );
}

export default PrivacyPolicyModal;
