import { getGaleriaPanel } from '@/db/tenant-queries';
import { eliminarFotoGaleria } from './actions';
import { GALERIA_MAX_FOTOS } from '@/lib/galeria';
import GaleriaUploader from '@/components/panel/GaleriaUploader';

export const dynamic = 'force-dynamic';

export default async function GaleriaPage() {
  const fotos = await getGaleriaPanel();

  return (
    <div className="space-y-8 max-w-3xl">
      <div>
        <h1 className="font-display text-3xl tracking-tight text-black">Galería de trabajos</h1>
        <p className="text-sm text-gray-500 mt-1">
          Sube fotos de reformas que ya has hecho. Aparecen en tu funnel para dar confianza al
          cliente antes de pedir presupuesto.
        </p>
      </div>

      <GaleriaUploader total={fotos.length} max={GALERIA_MAX_FOTOS} />

      {fotos.length === 0 ? (
        <p className="text-sm text-gray-400">
          Aún no has subido ninguna foto. La galería no se mostrará en tu funnel hasta que añadas la
          primera.
        </p>
      ) : (
        <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
          {fotos.map((foto) => (
            <figure
              key={foto.id}
              className="group relative overflow-hidden rounded-xl border border-gray-200 bg-white"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={foto.url}
                alt={foto.titulo ?? 'Reforma'}
                className="aspect-[4/3] w-full object-cover"
              />
              {foto.titulo && (
                <figcaption className="px-3 py-2 text-xs font-medium text-gray-700 truncate">
                  {foto.titulo}
                </figcaption>
              )}
              <form action={eliminarFotoGaleria.bind(null, foto.id)} className="absolute top-2 right-2">
                <button
                  type="submit"
                  aria-label="Eliminar foto"
                  className="flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-gray-600 shadow-sm transition hover:bg-red-500 hover:text-white"
                >
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    aria-hidden="true"
                  >
                    <path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6" />
                  </svg>
                </button>
              </form>
            </figure>
          ))}
        </div>
      )}
    </div>
  );
}