import { useRef } from 'react'
import { ImagePlus, X } from 'lucide-react'
import { Button } from '@/components/ui/button'

const previewWidth = 300
const previewHeight = 260

export function ImageUploadField({
  value,
  onChange,
  previewUrl,
  pendingFileName,
  isSaving,
  onFileSelect,
  onClearSelection,
  label = 'Kapak görseli',
}: {
  value: string
  onChange: (value: string) => void
  previewUrl: string | null
  pendingFileName: string | null
  isSaving: boolean
  onFileSelect: (file: File) => void
  onClearSelection: () => void
  label?: string
}) {
  const inputRef = useRef<HTMLInputElement | null>(null)

  return (
    <div className='space-y-4 rounded-3xl border border-border/70 bg-card p-5 shadow-sm'>
      <div className='space-y-1'>
        <p className='text-sm font-semibold'>{label}</p>
        <p className='text-sm text-muted-foreground'>
          JPG, PNG, GIF, SVG veya WEBP
        </p>
      </div>

      <input
        ref={inputRef}
        type='file'
        accept='image/png,image/jpeg,image/jpg,image/gif,image/svg+xml,image/webp'
        className='hidden'
        onChange={(event) => {
          const file = event.target.files?.[0]

          if (file) {
            onFileSelect(file)
          }

          event.currentTarget.value = ''
        }}
      />

      <div className='space-y-3'>
        <div className='relative mx-auto w-fit'>
          <button
            type='button'
            onClick={() => inputRef.current?.click()}
            disabled={isSaving}
            className='group relative block overflow-hidden rounded-3xl border border-dashed border-border/70 bg-muted/20 transition hover:border-primary/40 disabled:pointer-events-none disabled:opacity-60'
          >
            {previewUrl ? (
              <>
                <img
                  src={previewUrl}
                  alt='Görsel önizleme'
                  className='bg-background object-contain transition group-hover:scale-[1.02]'
                  style={{ width: previewWidth, height: previewHeight }}
                />
                <div className='absolute inset-0 bg-black/0 transition group-hover:bg-black/10' />
              </>
            ) : (
              <div
                className='flex flex-col items-center justify-center gap-3 text-muted-foreground transition group-hover:text-foreground'
                style={{ width: previewWidth, height: previewHeight }}
              >
                <div className='rounded-full border border-border/70 bg-background p-3'>
                  <ImagePlus className='size-5' />
                </div>
                <div className='space-y-1 text-center'>
                  <p className='text-sm font-medium'>Görsel seç</p>
                  <p className='text-xs text-muted-foreground'>
                    {previewWidth} x {previewHeight} önizleme
                  </p>
                </div>
              </div>
            )}
          </button>

          <div className='absolute top-3 right-3 flex gap-2'>
            <Button
              type='button'
              size='icon'
              className='size-9 rounded-full bg-background/95 text-foreground shadow-sm backdrop-blur hover:bg-background'
              onClick={() => inputRef.current?.click()}
              disabled={isSaving}
            >
              <ImagePlus className='size-4' />
            </Button>
            <Button
              type='button'
              variant='outline'
              size='icon'
              className='size-9 rounded-full bg-background/95 shadow-sm backdrop-blur'
              onClick={() => {
                onChange('')
                onClearSelection()
              }}
              disabled={(!value && !pendingFileName) || isSaving}
            >
              <X className='size-4' />
            </Button>
          </div>
        </div>

        {pendingFileName ? (
          <div className='rounded-2xl border border-sky-200 bg-sky-50 px-3 py-2 text-center text-sm text-sky-900'>
            <span className='font-medium'>{pendingFileName}</span> seçildi.
          </div>
        ) : (
          <p className='text-center text-xs text-muted-foreground'>
            Önizleme üzerine tıklayarak görsel seçebilirsiniz.
          </p>
        )}
      </div>
    </div>
  )
}
