"use client";

import React from "react";
import { ArtItem } from "@/data/creative";

interface ArtModalProps {
  isOpen: boolean;
  onClose: () => void;
  artItem: ArtItem | null;
  currentImageIndex: number;
  onImageChange: (index: number) => void;
}

export default function ArtModal({
  isOpen,
  onClose,
  artItem,
  currentImageIndex,
  onImageChange,
}: ArtModalProps) {
  if (!isOpen || !artItem) return null;

  const handleBackdropClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  const handlePrevImage = () => {
    if (artItem.images && artItem.images.length > 1) {
      const newIndex =
        currentImageIndex > 0
          ? currentImageIndex - 1
          : artItem.images.length - 1;
      onImageChange(newIndex);
    }
  };

  const handleNextImage = () => {
    if (artItem.images && artItem.images.length > 1) {
      const newIndex =
        currentImageIndex < artItem.images.length - 1
          ? currentImageIndex + 1
          : 0;
      onImageChange(newIndex);
    }
  };

  const currentImage = artItem.images?.[currentImageIndex];

  return (
    <div
      className="fixed inset-0 bg-[#3D3D3D] bg-opacity-90 flex items-center justify-center z-50 p-4"
      onClick={handleBackdropClick}
    >
      <div className="max-w-4xl w-full max-h-[90vh] overflow-y-auto bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md shadow-brutal">
        <div className="p-6">
          <div className="flex justify-between items-start mb-6">
            <div>
              <h2 className="text-3xl font-bold text-[#3D3D3D] mb-2 uppercase">
                {artItem.title}
              </h2>
              <p className="text-[#5D5D5D] mb-4">{artItem.description}</p>
              <div className="flex gap-4 text-sm flex-wrap">
                <span className="bg-[#E0C9CC] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
                  {artItem.medium}
                </span>
                <span className="bg-[#E8DCC8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
                  {artItem.type === "collection" ? "Collection" : "Single"}
                </span>
                <span className="bg-[#E8DCC8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
                  {new Date(artItem.createdAt).toLocaleDateString("en-US", {
                    year: "numeric",
                    month: "long",
                    day: "numeric",
                  })}
                </span>
              </div>
            </div>
            <button
              onClick={onClose}
              className="text-3xl font-bold text-[#3D3D3D] w-10 h-10 flex items-center justify-center hover:text-[#E0C9CC] transition-colors"
            >
              ×
            </button>
          </div>

          {currentImage && (
            <div className="relative">
              <div className="w-full h-96 flex items-center justify-center mb-4 bg-[#E0C9CC] border-2 border-[#3D3D3D] rounded-sm">
                <img
                  src={currentImage.url}
                  alt={currentImage.title}
                  className="max-w-full max-h-full"
                />
              </div>

              {artItem.type === "collection" &&
                artItem.images &&
                artItem.images.length > 1 && (
                  <>
                    <button
                      onClick={handlePrevImage}
                      className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-[#FEFDFB] text-[#3D3D3D] border-2 border-[#3D3D3D] px-4 py-2 font-bold hover:bg-[#E0C9CC] transition-colors rounded-sm"
                    >
                      ←
                    </button>
                    <button
                      onClick={handleNextImage}
                      className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-[#FEFDFB] text-[#3D3D3D] border-2 border-[#3D3D3D] px-4 py-2 font-bold hover:bg-[#E0C9CC] transition-colors rounded-sm"
                    >
                      →
                    </button>
                  </>
                )}

              <div className="text-center">
                <h3 className="text-xl font-bold text-[#3D3D3D] mb-2">
                  {currentImage.title || `Image ${currentImageIndex + 1}`}
                </h3>
                {currentImage.description && (
                  <p className="text-[#5D5D5D]">{currentImage.description}</p>
                )}
              </div>
            </div>
          )}

          {artItem.type === "collection" &&
            artItem.images &&
            artItem.images.length > 1 && (
              <div className="mt-6">
                <h4 className="text-lg font-bold mb-3 text-center text-[#3D3D3D] uppercase">
                  Collection Preview
                </h4>
                <div className="flex gap-2 overflow-x-auto pb-2 justify-center">
                  {artItem.images.map((image, index) => (
                    <button
                      key={image.id}
                      onClick={() => onImageChange(index)}
                      className={`flex-shrink-0 w-20 h-20 border-2 ${
                        index === currentImageIndex
                          ? "border-[#E0C9CC] bg-[#E0C9CC]"
                          : "border-[#3D3D3D] bg-[#F0E8D8]"
                      } rounded-sm flex items-center justify-center hover:border-[#E0C9CC] transition-colors`}
                    >
                      <img
                        src={image.url}
                        alt={image.title}
                        className="max-w-full max-h-full"
                      />
                    </button>
                  ))}
                </div>
              </div>
            )}
        </div>
      </div>
    </div>
  );
}
