"use client";

import { useState } from "react";
import { ChevronLeft, ChevronRight, X } from "lucide-react";
import type { CmsPopupContent } from "@/types/cms-landing";

export default function PopupNewsBanner({
  popups,
}: {
  popups?: CmsPopupContent[] | null;
}) {
  const list = popups?.filter((p) => p.primary_title?.trim()) ?? [];
  const [open, setOpen] = useState(true);
  const [idx, setIdx] = useState(0);

  if (!open || list.length === 0) return null;

  const popup = list[idx % list.length];
  const img = popup.images?.[0]?.media_url?.trim();

  return (
    <div className="fixed bottom-6 left-4 right-4 z-[120] mx-auto max-w-lg md:left-auto md:right-6 md:mx-0">
      <div className="relative overflow-hidden rounded-2xl border border-amber-200 bg-white shadow-2xl">
        <button
          type="button"
          onClick={() => setOpen(false)}
          className="absolute right-3 top-3 z-10 rounded-full bg-black/5 p-1 text-gray-600 hover:bg-black/10"
          aria-label="Close"
        >
          <X size={18} />
        </button>
        {list.length > 1 ? (
          <>
            <button
              type="button"
              onClick={() => setIdx((i) => (i - 1 + list.length) % list.length)}
              className="absolute left-2 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/5 p-1.5 text-gray-700 hover:bg-black/10"
              aria-label="Previous"
            >
              <ChevronLeft size={18} />
            </button>
            <button
              type="button"
              onClick={() => setIdx((i) => (i + 1) % list.length)}
              className="absolute right-2 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/5 p-1.5 text-gray-700 hover:bg-black/10"
              aria-label="Next"
            >
              <ChevronRight size={18} />
            </button>
          </>
        ) : null}
        {img ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={img} alt="" className="h-32 w-full object-cover md:h-40" />
        ) : null}
        <div className="p-4 pr-10">
          <p className="text-xs font-semibold uppercase tracking-wider text-amber-800">
            {popup.secondary_title || "News"}
          </p>
          <h3 className="mt-1 text-lg font-bold text-gray-900">{popup.primary_title}</h3>
          {popup.description ? (
            <p className="mt-2 line-clamp-3 text-sm text-gray-600">{popup.description}</p>
          ) : null}
          <div className="mt-3 flex flex-wrap gap-2">
            {popup.primary_cta ? (
              <span className="inline-flex rounded-full bg-[#966314] px-4 py-2 text-xs font-semibold text-white">
                {popup.primary_cta}
              </span>
            ) : null}
            {popup.secondary_cta_text ? (
              <span className="inline-flex rounded-full border border-[#966314] px-4 py-2 text-xs font-semibold text-[#966314]">
                {popup.secondary_cta_text}
              </span>
            ) : null}
          </div>
          {list.length > 1 ? (
            <div className="mt-3 flex justify-center gap-1.5">
              {list.map((_, i) => (
                <button
                  key={i}
                  type="button"
                  onClick={() => setIdx(i)}
                  className={`h-1.5 w-1.5 rounded-full ${
                    i === idx % list.length ? "bg-[#966314]" : "bg-gray-300"
                  }`}
                  aria-label={`Go to item ${i + 1}`}
                />
              ))}
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
}