"use client";

import Image from "next/image";
import Link from "next/link";
import { X } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { resolveAssetUrl } from "@/lib/media";
import type { NewsPopupData } from "@/lib/db-data";

type NewsPopupModalProps = {
  popup: NewsPopupData | null;
};

export function NewsPopupModal({ popup }: NewsPopupModalProps) {
  const [open, setOpen] = useState(false);
  const storageKey = useMemo(
    () => (popup ? `bashista-news-popup-dismissed:${popup.id}` : ""),
    [popup],
  );
  const imageSrc = resolveAssetUrl(popup?.imageUrl);

  useEffect(() => {
    if (!popup) return;
    if (!popup.showOnce) {
      setOpen(true);
      return;
    }
    const dismissed = window.localStorage.getItem(storageKey);
    if (!dismissed) {
      setOpen(true);
    }
  }, [popup, storageKey]);

  if (!popup || !open) return null;

  function closeModal() {
    if (popup?.showOnce) {
      window.localStorage.setItem(storageKey, "1");
    }
    setOpen(false);
  }

  return (
    <div className="fixed inset-0 z-[80] flex items-center justify-center bg-navy-deep/55 p-4">
      <div className="relative w-full max-w-3xl overflow-hidden rounded-2xl bg-white shadow-[0_24px_60px_rgba(8,43,83,0.35)]">
        <button
          type="button"
          onClick={closeModal}
          aria-label="Close popup"
          className="absolute right-3 top-3 z-10 inline-flex h-9 w-9 items-center justify-center rounded-full border border-border bg-white text-navy-deep"
        >
          <X className="h-4 w-4" />
        </button>
        {popup.ctaUrl && imageSrc ? (
          <Link href={popup.ctaUrl} onClick={closeModal} className="block">
            <Image
              src={imageSrc}
              alt={popup.title}
              width={1280}
              height={720}
              className="h-auto w-full object-cover"
              priority
            />
          </Link>
        ) : imageSrc ? (
          <Image
            src={imageSrc}
            alt={popup.title}
            width={1280}
            height={720}
            className="h-auto w-full object-cover"
            priority
          />
        ) : (
          <div className="flex min-h-[260px] items-center justify-center p-6 text-center text-sm font-semibold text-navy-muted">
            Upload popup image from admin to display image-based popup.
          </div>
        )}
      </div>
    </div>
  );
}