"use client";

import Link from "next/link";
import { artItems } from "@/data/artData";
import { useState } from "react";
import ArtModal from "@/components/ArtModal";

export default function DigitalArt() {
  const [selectedArt, setSelectedArt] = useState<(typeof artItems)[0] | null>(
    null,
  );
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleArtClick = (artItem: (typeof artItems)[0]) => {
    setSelectedArt(artItem);
    setCurrentImageIndex(0);
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
    setSelectedArt(null);
    setCurrentImageIndex(0);
  };

  const handleImageChange = (index: number) => {
    setCurrentImageIndex(index);
  };

  return (
    <div className="min-h-screen bg-[#FAF8F5] font-mono">
      <div className="max-w-4xl mx-auto px-6 py-12">
        <header className="text-center mb-16">
          <div className="mb-8">
            <div className="w-32 h-32 mx-auto bg-[#3D3D3D] rounded-full flex items-center justify-center border-[3px] border-[#E0C9CC]">
              <div className="text-4xl font-bold text-[#E0C9CC]">🎨</div>
            </div>
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-[#3D3D3D] mb-4 uppercase tracking-wide">
            Digital Art
          </h1>
          <p className="text-lg text-[#5D5D5D] max-w-2xl mx-auto leading-relaxed font-semibold">
            Exploring creativity through digital canvases and new media
          </p>
        </header>

        <nav className="mb-16">
          <div className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-6 shadow-brutal">
            <ul className="flex flex-wrap justify-center gap-4 md:gap-8">
              <li>
                <Link
                  href="/"
                  className="text-[#3D3D3D] font-bold hover:bg-[#CBD6C8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                >
                  Home
                </Link>
              </li>
              <li>
                <Link
                  href="/digital-art"
                  className="border-[#3D3D3D] bg-[#E0C9CC] px-4 py-2 border-2 text-[#3D3D3D] rounded-sm"
                >
                  Digital Art
                </Link>
              </li>
              <li>
                <Link
                  href="/stories"
                  className="text-[#3D3D3D] font-bold hover:bg-[#F0E8D8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                >
                  Stories
                </Link>
              </li>
              <li>
                <Link
                  href="/thoughts"
                  className="text-[#3D3D3D] font-bold hover:bg-[#B8C5CE] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                >
                  Thoughts
                </Link>
              </li>
            </ul>
          </div>
        </nav>

        <main className="space-y-8">
          {artItems.map((art) => (
            <article
              key={art.id}
              className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal cursor-pointer hover:shadow-brutal-hover transition-shadow"
              onClick={() => handleArtClick(art)}
            >
              <div className="flex flex-col md:flex-row gap-8">
                <div className="md:w-1/3">
                  <div className="bg-[#E0C9CC] border-2 border-[#3D3D3D] rounded-sm w-full h-48 flex items-center justify-center">
                    <img
                      src={
                        art.type === "collection"
                          ? art.images![0].url
                          : art.imageUrl
                      }
                      alt={art.title}
                      className="w-full h-full object-cover"
                    />
                  </div>
                </div>
                <div className="md:w-2/3">
                  <h2 className="text-2xl font-bold text-[#3D3D3D] mb-4 uppercase">
                    {art.title}
                  </h2>
                  <p className="text-[#5D5D5D] mb-4 leading-relaxed">
                    {art.description}
                  </p>
                  <div className="flex flex-wrap gap-4 text-sm">
                    <span className="bg-[#E0C9CC] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
                      {art.medium}
                    </span>
                    <span className="bg-[#E8DCC8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
                      {art.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(art.createdAt).toLocaleDateString("en-US", {
                        year: "numeric",
                        month: "long",
                        day: "numeric",
                      })}
                    </span>
                    {art.type === "collection" && art.images && (
                      <span className="bg-[#B8C5CE] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
                        {art.images.length} images
                      </span>
                    )}
                  </div>
                </div>
              </div>
            </article>
          ))}
        </main>

        <footer className="mt-20 text-center">
          <div className="bg-[#3D3D3D] text-white p-4 font-bold rounded-md">
            <p className="text-sm uppercase">Built with neo-brutalist muted colors</p>
          </div>
        </footer>
      </div>

      <ArtModal
        isOpen={isModalOpen}
        onClose={handleCloseModal}
        artItem={selectedArt}
        currentImageIndex={currentImageIndex}
        onImageChange={handleImageChange}
      />
    </div>
  );
}
