'use client';

import { useState } from 'react';
import { Trash2, ZoomIn } from 'lucide-react';
import { GalleryLightbox, type LightboxImage } from './gallery-lightbox';

export type GridImage = {
  id: string;
  url: string;
  caption?: string | null;
};

type Props = {
  images: GridImage[];
  editable?: boolean;
  onDelete?: (id: string) => void;
  columns?: 3 | 4 | 5;
};

const colClass = {
  3: 'grid-cols-2 sm:grid-cols-3',
  4: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4',
  5: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5',
} as const;

export function GalleryImageGrid({ images, editable = false, onDelete, columns = 4 }: Props) {
  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);

  const lbImages: LightboxImage[] = images.map((i) => ({ url: i.url, caption: i.caption }));

  if (images.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-zinc-200 py-16 text-center dark:border-zinc-700">
        <div className="mb-2 text-4xl">📷</div>
        <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">Henüz fotoğraf yok</p>
        {editable && (
          <p className="mt-1 text-xs text-zinc-400 dark:text-zinc-500">
            Yukarıdaki alana sürükleyin veya tıklayın
          </p>
        )}
      </div>
    );
  }

  return (
    <>
      <div className={`grid gap-2 ${colClass[columns]}`}>
        {images.map((img, idx) => (
          <div key={img.id} className="group relative aspect-square overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800">
            <img
              src={img.url}
              alt={img.caption ?? `Fotoğraf ${idx + 1}`}
              className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
              loading="lazy"
              onError={(e) => {
                e.currentTarget.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m3 15 5-5 4 4 3-3 4 4'/%3E%3C/svg%3E";
              }}
            />

            {/* Hover overlay */}
            <div className="absolute inset-0 flex items-end justify-between bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-200 group-hover:opacity-100">
              {/* Caption */}
              {img.caption && (
                <p className="line-clamp-2 p-2 text-[11px] font-medium text-white/90">{img.caption}</p>
              )}

              {/* Aksiyonlar */}
              <div className="ml-auto flex items-center gap-1 p-2">
                <button
                  type="button"
                  onClick={() => setLightboxIndex(idx)}
                  className="flex h-7 w-7 items-center justify-center rounded-lg bg-white/15 text-white backdrop-blur-sm transition-colors hover:bg-white/25"
                  aria-label="Büyüt"
                >
                  <ZoomIn size={13} strokeWidth={2} />
                </button>
                {editable && onDelete && (
                  <button
                    type="button"
                    onClick={() => onDelete(img.id)}
                    className="flex h-7 w-7 items-center justify-center rounded-lg bg-red-500/80 text-white backdrop-blur-sm transition-colors hover:bg-red-500"
                    aria-label="Sil"
                  >
                    <Trash2 size={13} strokeWidth={2} />
                  </button>
                )}
              </div>
            </div>

            {/* Tıklanabilir alan (lightbox için) */}
            <button
              type="button"
              className="absolute inset-0"
              onClick={() => setLightboxIndex(idx)}
              aria-label={`Fotoğrafı büyüt: ${img.caption ?? idx + 1}`}
            />
          </div>
        ))}
      </div>

      {lightboxIndex !== null && (
        <GalleryLightbox
          images={lbImages}
          index={lightboxIndex}
          onClose={() => setLightboxIndex(null)}
          onNav={setLightboxIndex}
        />
      )}
    </>
  );
}