import { type FC, useState, useEffect } from 'react'
import DefaulModal from '@/components/DefaulModal'
import type { Icon, IconGroup } from '../types/Types'
import { TickCircle } from 'iconsax-react'

type Props = {
  open: boolean
  onClose: () => void
  icons: IconGroup[]
  onSelect: (url: string) => void
  selectedUrl?: string
}

const IconSelectModal: FC<Props> = ({
  open,
  onClose,
  icons,
  onSelect,
  selectedUrl
}) => {
  const [selectedIconUrl, setSelectedIconUrl] = useState<string | undefined>(
    selectedUrl
  )

  useEffect(() => {
    setSelectedIconUrl(selectedUrl)
  }, [selectedUrl, open])

  const handleSelect = (url: string) => {
    setSelectedIconUrl(url)
    onSelect(url)
    onClose()
  }

  return (
    <DefaulModal
      open={open}
      close={onClose}
      isHeader
      title_header="انتخاب آیکون"
      width={700}
    >
      <div className="max-h-[65vh] overflow-y-auto py-2">
        {icons.length === 0 ? (
          <div className="text-center py-12 text-gray-500">
            <div className="text-base mb-2">آیکونی یافت نشد</div>
            <div className="text-sm text-gray-400">
              لطفاً بعداً تلاش کنید
            </div>
          </div>
        ) : (
          <div className="space-y-8">
            {icons.map((group) => (
              <div key={group.id} className="border-b border-gray-100 last:border-0 pb-6 last:pb-0">
                <div className="flex items-center gap-2 mb-4">
                  <h3 className="text-base font-semibold text-gray-800">
                    {group.name}
                  </h3>
                  <span className="text-xs text-gray-400 bg-gray-100 px-2 py-1 rounded-full">
                    {group.icons.length} آیکون
                  </span>
                </div>
                {group.icons.length === 0 ? (
                  <div className="text-sm text-gray-400 bg-gray-50 rounded-lg p-4 text-center">
                    این گروه آیکونی ندارد
                  </div>
                ) : (
                  <div className="grid px-2 grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-3">
                    {group.icons.map((icon: Icon) => (
                      <button
                        key={icon.id}
                        onClick={() => handleSelect(icon.url)}
                        className={`group relative aspect-square border-2 rounded-xl p-2.5 transition-all duration-200 hover:scale-105 hover:shadow-md flex items-center justify-center ${selectedIconUrl === icon.url
                          ? 'border-primary scale-105'
                          : 'border-gray-200 bg-white hover:border-gray-300'
                          }`}
                      >
                        <img
                          src={icon.url}
                          alt="icon"
                          className="w-full h-full object-contain transition-opacity duration-200 max-w-full max-h-full"
                          style={{
                            imageRendering: 'auto',
                            objectFit: 'contain'
                          }}
                          onError={(e) => {
                            e.currentTarget.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="%23ccc" 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"/%3E%3C/svg%3E'
                          }}
                        />
                        {selectedIconUrl === icon.url && (
                          <div className="absolute -top-1 -right-1 bg-primary rounded-full z-10">
                            <TickCircle
                              size={18}
                              color="#fff"
                              variant="Bold"
                            />
                          </div>
                        )}
                        <div className={`absolute inset-0 rounded-xl transition-opacity duration-200 ${selectedIconUrl === icon.url
                          ? 'opacity-0'
                          : 'opacity-0 group-hover:opacity-100 bg-primary/5'
                          }`} />
                      </button>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </DefaulModal>
  )
}

export default IconSelectModal
