"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";

const STORAGE_KEY = "privacyPolicyDismissed";

function PrivacyPolicyModal() {
  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">
          سیاست حفظ حریم‌خصوصی
        </h2>
        <p className="text-sm leading-7 text-neutral-700 dark:text-neutral-300">
          کاربر گرامی پلتفرم مدستاگرام به منظور خدمات رسانی هرچه بیشتر و کارایی
          بالاتر نیازمند دسترسی های فوق می باشد. دسترسی هایی نظیر لوکیشن و صدا و
          فایل و عکس و دوربین برای استفاده بهتر در قسمت پیامرسان پلتفرم می باشد
          و مجموعه مدستاگرام متعهد می گردد در حفظ و نگهداری اطلاعات کاربران
          کوشا باشد. و به هیچ عنوان از این اطلاعات سو استفاده نخواهد شد و در
          اختیار شخص ثالث قرار نخواهد گرفت.
        </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">دیگر به من نشان نده</span>
        </label>
        <RoundedButton
          type="button"
          onClick={handleConfirm}
          className="mt-6 w-full h-10 text-sm"
        >
          تایید
        </RoundedButton>
      </div>
    </Modal>
  );
}

export default PrivacyPolicyModal;
