'use client'

import React from 'react'
import ObjectCard, { ObjectData } from './ObjectCard'

interface ObjectGalleryProps {
  objects: ObjectData[]
  title?: string
  onObjectSelect?: (objectId: string) => void
  selectedObjectId?: string | null
  className?: string
}
 
const BackIcon = ({ className }: { className?: string }) => (
  <svg className={className} fill="currentColor" viewBox="0 0 24 24">
    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
  </svg>
)

const ObjectGallery: React.FC<ObjectGalleryProps> = ({
  objects,
  title = 'Объекты',
  onObjectSelect,
  selectedObjectId,
  className = ''
}) => {

  const handleObjectSelect = (objectId: string) => {
    if (onObjectSelect) {
      onObjectSelect(objectId)
    }
  }

  const handleBackClick = () => { 
    console.log('Back clicked')
  }

  return (
    <div className={`flex flex-col items-start relative bg-[#0e111a] min-h-screen ${className}`}>
      <main className="relative self-stretch w-full">
        <div className="flex flex-col w-full items-start gap-6 p-4 sm:p-8 lg:p-16"> 
          <header className="flex flex-col items-start gap-9 relative self-stretch w-full flex-[0_0_auto]">
            <nav className="items-center gap-4 self-stretch w-full flex-[0_0_auto] flex relative">
              <button
                className="flex w-10 bg-[#161824] h-10 items-center justify-center gap-2 px-2 py-2 relative rounded-md transition-colors duration-200 hover:bg-[#1a1d2e] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
                aria-label="Назад"
                onClick={handleBackClick}
              >
                <BackIcon className="relative w-5 h-5 text-white" />
              </button>

              <div className="inline-flex flex-wrap items-center gap-2.5 relative flex-[0_0_auto]">
                <div className="inline-flex items-center justify-center gap-2.5 relative flex-[0_0_auto]">
                  <span className="relative w-fit mt-[-1.00px] font-normal text-white text-sm tracking-[0] leading-5 whitespace-nowrap">
                    {title}
                  </span>
                </div>
              </div>
            </nav>

            <div className="flex items-start gap-4 relative self-stretch w-full flex-[0_0_auto]">
              <h1 className="relative w-fit mt-[-1.00px] font-semibold text-white text-2xl tracking-[0] leading-8 whitespace-nowrap">
                {title}
              </h1>
            </div>


          </header>

          {/* Галерея объектов */}
          {objects.length > 0 ? (
            <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[18px] w-full">
              {objects.map((object) => (
                <ObjectCard
                  key={object.object_id}
                  object={object}
                  onSelect={handleObjectSelect}
                  isSelected={selectedObjectId === object.object_id}
                />
              ))}
            </section>
          ) : (
            <div className="flex items-center justify-center h-64 w-full">
              <div className="text-center">
                <div className="text-[#71717a] mb-2">
                  <svg className="w-12 h-12 mx-auto" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
                  </svg>
                </div>
                <h3 className="text-lg font-medium text-white mb-2">Объекты не найдены</h3>
                <p className="text-[#71717a]">Нет доступных объектов</p>
              </div>
            </div>
          )}
        </div>
      </main>
    </div>
  )
}

export default ObjectGallery
export type { ObjectGalleryProps }