'use client'

import { useState, useRef } from 'react'
import { X, Image as ImageIcon, Plus, Upload, Check } from 'lucide-react'
import useSettingStore from '@/stores/settingStore'
import Cropper from 'react-easy-crop'
import getCroppedImg from '@/utils/cropImage' 

const initialImages = {
  "bg-1": "bg-1.jpeg",
  "bg-2": "bg-2.png",
  "bg-3": "bg-3.png",
  "bg-6": "bg-6.png",
  "bg-7": "bg-7.jpeg",
  "bg-8": "bg-8.png",
  "bg-9": "bg-9.jpeg",
  "bg-10": "bg-10.jpg",
  "bg-11": "bg-11.jpeg",
  "bg-12": "bg-12.jpg",
  "bg-13": "bg-13.jpg",
  "bg-16": "bg-16.jpg",
}

export const BackgroundSelector = () => {
  const [isOpen, setIsOpen] = useState(false)
  const [newUrl, setNewUrl] = useState('')
  const [croppingImage, setCroppingImage] = useState<string | null>(null)
  const [crop, setCrop] = useState({ x: 0, y: 0 })
  const [zoom, setZoom] = useState(1)
  const [croppedAreaPixels, setCroppedAreaPixels] = useState<any>(null)
  const { background, setBackground, extraBackgrounds, setExtraBackgrounds } = useSettingStore()
  const fileInputRef = useRef<HTMLInputElement>(null)

  const handleSelect = (img: string) => {
    setIsOpen(false)
    setBackground(img)
  }

  const handleAddUrl = () => {
    if (!newUrl.trim()) return setCroppingImage(newUrl)
    setNewUrl('')
  }

  const handleRemoveExtra = (url: string) => {
    setExtraBackgrounds(extraBackgrounds.filter(bg => bg !== url))
  }

  const handleUploadFile = (file: File) => {
    const reader = new FileReader()
    reader.onload = () => setCroppingImage(reader.result as string)
    reader.readAsDataURL(file)
  }

  const handleCropComplete = async () => {
    if (!croppingImage || !croppedAreaPixels) return
    const croppedBase64 = await getCroppedImg(croppingImage, croppedAreaPixels)
    setExtraBackgrounds([croppedBase64, ...extraBackgrounds])
    setCroppingImage(null)
  }

  const allBackgrounds = [...extraBackgrounds, ...Object.values(initialImages)]

  return (
    <div className="flex flex-col items-center justify-center gap-4">
      <div className="tooltip tooltip-right" data-tip="Select Background">
        <button
          className="group btn btn-primary btn-circle flex items-center justify-center shadow-md transition-all duration-300 hover:scale-110 hover:shadow-lg hover:bg-primary/80"
          onClick={() => setIsOpen(true)}
        >
          <ImageIcon size={22} className="text-white transition-all duration-300 group-hover:rotate-6 group-hover:scale-110 group-hover:text-yellow-300" />
        </button>
      </div>

      {isOpen && (
        <div className="fixed inset-0 z-40 flex items-center justify-center bg-base-200/60 pt-10">
          <div className="bg-base-200 text-white rounded-xl shadow-xl p-6 w-[90%] max-w-2xl relative">
            <button className="btn btn-ghost btn-circle absolute top-3 right-3" onClick={() => setIsOpen(false)}>
              <X size={20} />
            </button>

            <h2 className="text-lg font-semibold mb-4">Choose Background</h2>

            {/* Add via URL */}
            <div className="flex gap-2 mb-4">
              <input
                type="text"
                placeholder="Paste image URL (https://...)"
                className="input input-bordered w-full text-info"
                value={newUrl}
                onChange={(e) => setNewUrl(e.target.value)}
              />
              <button className="btn btn-success flex items-center gap-1" onClick={handleAddUrl}>
                <Plus size={16} /> Add
              </button>
            </div>

            {/* Upload from computer */}
            <div className="flex mb-4">
              <button
                className="btn btn-warning flex items-center gap-1"
                onClick={() => fileInputRef.current?.click()}
              >
                <Upload size={16} /> Upload from computer
              </button>
              <input
                type="file"
                accept="image/*"
                className="hidden"
                ref={fileInputRef}
                onChange={(e) => {
                  const file = e.target.files?.[0]
                  if (file) handleUploadFile(file)
                  e.target.value = ''
                }}
              />
            </div>

            {/* Crop Modal */}
            {croppingImage && (
              <div className="fixed inset-0 z-60 flex flex-col items-center justify-center bg-black/70 p-4">
                <div className="relative w-full max-w-3xl h-[400px] bg-gray-800 rounded-lg">
                  <Cropper
                    image={croppingImage}
                    crop={crop}
                    zoom={zoom}
                    aspect={16 / 9}
                    onCropChange={setCrop}
                    onZoomChange={setZoom}
                    onCropComplete={(_, croppedAreaPixels) => setCroppedAreaPixels(croppedAreaPixels)}
                  />
                  <button
                    className="absolute bottom-4 left-1/2 -translate-x-1/2 btn btn-success"
                    onClick={handleCropComplete}
                  >
                       <Check size={20} /> Done
                  </button>
                  <button
                    className="absolute top-2 right-2 btn btn-ghost btn-circle"
                    onClick={() => setCroppingImage(null)}
                  >
                    <X size={20} />
                  </button>
                </div>
              </div>
            )}

            <div className="grid grid-cols-3 gap-4 max-h-[60vh] overflow-y-auto">
              {allBackgrounds.map((value, i) => {
                const isExtra = i < extraBackgrounds.length
                return (
                  <div
                    key={i}
                    className={`relative rounded-lg overflow-hidden cursor-pointer border-2 transition-all duration-200 ${
                      value === background ? 'border-blue-500' : 'border-transparent hover:border-gray-500'
                    }`}
                    onClick={() => handleSelect(value)}
                  >
                    <img src={value} alt={`bg-${i}`} loading="lazy" className="w-full h-28 object-cover" />
                    {isExtra && (
                      <button
                        className="absolute top-1 right-1 bg-black/50 hover:bg-black/70 text-white rounded-full p-1"
                        onClick={(e) => {
                          e.stopPropagation()
                          handleRemoveExtra(value)
                        }}
                      >
                        <X size={14} />
                      </button>
                    )}
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

