'use client'

import { useEffect, useRef, useState, useCallback } from 'react'
import type { Game } from '@/types'
import TagSelector from '@/components/tags/TagSelector'

interface Props {
  game: Game
  libraryId: string
  onClose: () => void
  onTagsChanged?: () => void
  onCoverUploaded?: () => void
  onDeleted?: (gameId: string) => void
}

export default function GameDetailModal({ game, libraryId, onClose, onTagsChanged, onCoverUploaded, onDeleted }: Props) {
  const overlayRef = useRef<HTMLDivElement>(null)
  const menuRef = useRef<HTMLDivElement>(null)
  const [menuOpen, setMenuOpen] = useState(false)
  const [editingImages, setEditingImages] = useState(false)
  const [confirming, setConfirming] = useState(false)
  const [deleting, setDeleting] = useState(false)
  const [renaming, setRenaming] = useState(false)
  const [renameName, setRenameName] = useState('')
  const [renameError, setRenameError] = useState<string | null>(null)
  const [renameSaving, setRenameSaving] = useState(false)

  useEffect(() => {
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        if (menuOpen) { setMenuOpen(false); return }
        if (confirming) { setConfirming(false); return }
        if (renaming) { setRenaming(false); return }
        if (editingImages) { setEditingImages(false); return }
        onClose()
      }
    }
    document.addEventListener('keydown', handleKey)
    document.body.style.overflow = 'hidden'
    return () => {
      document.removeEventListener('keydown', handleKey)
      document.body.style.overflow = ''
    }
  }, [onClose, menuOpen, editingImages, confirming, renaming])

  // Close menu on outside click
  useEffect(() => {
    if (!menuOpen) return
    const handler = (e: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
        setMenuOpen(false)
      }
    }
    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [menuOpen])

  const handleOverlayClick = (e: React.MouseEvent) => {
    if (e.target === overlayRef.current) onClose()
  }

  const zipDownloadUrl = (zipPath: string) =>
    `/api/file?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(zipPath)}`
  const heroImage = game.wideCoverUrl ?? game.coverUrl

  return (
    <div
      ref={overlayRef}
      className="fixed inset-0 z-50 flex items-center justify-center p-4"
      style={{ backgroundColor: 'rgba(0,0,0,0.75)' }}
      onClick={handleOverlayClick}
    >
      <div
        className="relative w-full max-w-lg rounded-2xl overflow-hidden shadow-2xl"
        style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
      >
        {editingImages ? (
          <ImageEditor
            game={game}
            libraryId={libraryId}
            onBack={() => setEditingImages(false)}
            onUploaded={onCoverUploaded}
          />
        ) : (
          <>
            {/* Close button */}
            <button
              onClick={onClose}
              className="absolute top-3 right-3 z-10 w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
              style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: 'var(--text-primary)' }}
              onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.8)')}
              onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.5)')}
              aria-label="Close"
            >
              ✕
            </button>

            {/* Hero image */}
            <div className="w-full" style={{ backgroundColor: 'var(--border)' }}>
              {heroImage ? (
                // eslint-disable-next-line @next/next/no-img-element
                <img src={heroImage} alt={`${game.title} cover`} className="w-full object-cover max-h-64" />
              ) : (
                <div className="h-40 flex items-center justify-center text-5xl">🎮</div>
              )}
            </div>

            {/* Info */}
            <div className="p-5">
              {/* Title row with kebab menu */}
              <div className="flex items-center gap-2 mb-4">
                <h2 className="text-lg font-semibold flex-1 min-w-0" style={{ color: 'var(--text-primary)' }}>
                  {game.title}
                </h2>

                {/* Kebab menu */}
                <div className="relative flex-shrink-0" ref={menuRef}>
                  <button
                    onClick={() => setMenuOpen((o) => !o)}
                    className="w-7 h-7 rounded-lg flex items-center justify-center transition-colors"
                    style={{ color: 'var(--text-secondary)', backgroundColor: 'transparent' }}
                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
                    aria-label="More options"
                  >
                    ⋮
                  </button>
                  {menuOpen && (
                    <div
                      className="absolute right-0 top-full mt-1 rounded-lg shadow-lg overflow-hidden z-20 min-w-max"
                      style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
                    >
                      <button
                        onClick={() => { setMenuOpen(false); setEditingImages(true) }}
                        className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
                        style={{ color: 'var(--text-primary)' }}
                        onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
                        onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
                      >
                        Edit images
                      </button>
                      <button
                        onClick={() => {
                          setMenuOpen(false)
                          setRenameName(decodeURIComponent(game.id))
                          setRenameError(null)
                          setRenaming(true)
                        }}
                        className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
                        style={{ color: 'var(--text-primary)' }}
                        onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
                        onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
                      >
                        Rename folder
                      </button>
                      {onDeleted && (
                        <button
                          onClick={() => { setMenuOpen(false); setConfirming(true) }}
                          className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
                          style={{ color: '#fca5a5' }}
                          onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
                          onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
                        >
                          Delete game
                        </button>
                      )}
                    </div>
                  )}
                </div>
              </div>

              {/* Rename inline input */}
              {renaming && (
                <div className="flex flex-col gap-2 mb-4">
                  <div className="flex gap-2">
                    <input
                      type="text"
                      value={renameName}
                      onChange={(e) => setRenameName(e.target.value)}
                      onKeyDown={(e) => {
                        if (e.key === 'Enter') {
                          const trimmed = renameName.trim()
                          if (!trimmed) return
                          setRenameSaving(true)
                          setRenameError(null)
                          fetch('/api/rename', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({ libraryId, oldPath: decodeURIComponent(game.id), newName: trimmed, itemType: 'game' }),
                          })
                            .then(async (res) => {
                              if (res.status === 409) { setRenameError((await res.json()).error); return }
                              if (!res.ok) throw new Error()
                              setRenaming(false)
                              onCoverUploaded?.() // triggers refetch
                            })
                            .catch(() => setRenameError('Rename failed'))
                            .finally(() => setRenameSaving(false))
                        }
                        if (e.key === 'Escape') setRenaming(false)
                      }}
                      className="flex-1 px-3 py-1.5 rounded-lg text-sm min-w-0"
                      style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
                      autoFocus
                    />
                    <button
                      onClick={() => setRenaming(false)}
                      className="px-2 py-1.5 rounded-lg text-sm transition-colors"
                      style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
                    >
                      Cancel
                    </button>
                    <button
                      onClick={() => {
                        const trimmed = renameName.trim()
                        if (!trimmed) return
                        setRenameSaving(true)
                        setRenameError(null)
                        fetch('/api/rename', {
                          method: 'POST',
                          headers: { 'Content-Type': 'application/json' },
                          body: JSON.stringify({ libraryId, oldPath: decodeURIComponent(game.id), newName: trimmed, itemType: 'game' }),
                        })
                          .then(async (res) => {
                            if (res.status === 409) { setRenameError((await res.json()).error); return }
                            if (!res.ok) throw new Error()
                            setRenaming(false)
                            onCoverUploaded?.()
                          })
                          .catch(() => setRenameError('Rename failed'))
                          .finally(() => setRenameSaving(false))
                      }}
                      disabled={renameSaving}
                      className="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
                      style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
                    >
                      {renameSaving ? '…' : 'Rename'}
                    </button>
                  </div>
                  {renameError && <p className="text-xs" style={{ color: '#fca5a5' }}>{renameError}</p>}
                </div>
              )}

              {/* Delete confirmation banner */}
              {confirming && (
                <div
                  className="flex items-center gap-3 mb-4 px-3 py-2.5 rounded-lg text-sm"
                  style={{ backgroundColor: '#7f1d1d33', border: '1px solid #7f1d1d' }}
                >
                  <p className="flex-1 text-xs" style={{ color: '#fca5a5' }}>
                    Permanently delete this game and all its files?
                  </p>
                  <button
                    onClick={() => setConfirming(false)}
                    className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors"
                    style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
                  >
                    Cancel
                  </button>
                  <button
                    onClick={() => {
                      setDeleting(true)
                      fetch(`/api/games?libraryId=${encodeURIComponent(libraryId)}&gameId=${encodeURIComponent(game.id)}`, { method: 'DELETE' })
                        .then(() => onDeleted!(game.id))
                        .catch(() => setDeleting(false))
                    }}
                    disabled={deleting}
                    className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors disabled:opacity-50"
                    style={{ backgroundColor: '#7f1d1d', color: '#fca5a5' }}
                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = '#991b1b')}
                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = '#7f1d1d')}
                  >
                    {deleting ? 'Deleting…' : 'Yes, delete'}
                  </button>
                </div>
              )}

              <DownloadButton zipFiles={game.zipFiles} downloadUrl={zipDownloadUrl} />

              {/* Tags */}
              <div className="mt-4 pt-4" style={{ borderTop: '1px solid var(--border)' }}>
                <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--text-secondary)' }}>
                  Tags
                </p>
                <TagSelector itemKey={game.item_key!} onTagsChanged={onTagsChanged} />
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  )
}

// ─── Download Button ──────────────────────────────────────────────────────────

function DownloadButton({
  zipFiles,
  downloadUrl,
}: {
  zipFiles: string[]
  downloadUrl: (zipPath: string) => string
}) {
  const [open, setOpen] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

  const close = useCallback(() => setOpen(false), [])

  useEffect(() => {
    if (!open) return
    const handler = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) close()
    }
    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [open, close])

  const primary = zipFiles[0]
  const primaryName = primary.split('/').pop() ?? primary

  if (zipFiles.length === 1) {
    return (
      <a
        href={downloadUrl(primary)}
        download
        className="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-lg font-medium text-sm transition-colors"
        style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
        onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--accent-hover)')}
        onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--accent)')}
      >
        <span>↓</span>
        Download .zip
      </a>
    )
  }

  return (
    <div className="relative" ref={ref}>
      <div className="flex rounded-lg overflow-hidden" style={{ backgroundColor: 'var(--accent)' }}>
        {/* Primary download */}
        <a
          href={downloadUrl(primary)}
          download
          className="flex items-center justify-center gap-2 flex-1 px-4 py-2.5 font-medium text-sm transition-colors"
          style={{ color: '#fff' }}
          onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(255,255,255,0.1)')}
          onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
        >
          <span>↓</span>
          {primaryName}
        </a>

        {/* Divider */}
        <div style={{ width: '1px', backgroundColor: 'rgba(255,255,255,0.25)' }} />

        {/* Dropdown toggle */}
        <button
          onClick={() => setOpen((o) => !o)}
          className="px-3 flex items-center justify-center text-sm transition-colors"
          style={{ color: '#fff' }}
          onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(255,255,255,0.1)')}
          onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
          aria-label="Show all downloads"
        >
          ▾
        </button>
      </div>

      {open && (
        <div
          className="absolute left-0 right-0 top-full mt-1 rounded-lg shadow-lg overflow-hidden z-20"
          style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
        >
          {zipFiles.map((zipPath) => {
            const name = zipPath.split('/').pop() ?? zipPath
            return (
              <a
                key={zipPath}
                href={downloadUrl(zipPath)}
                download
                onClick={close}
                className="flex items-center gap-2 px-4 py-2 text-sm transition-colors"
                style={{ color: 'var(--text-primary)' }}
                onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
                onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
              >
                <span style={{ color: 'var(--text-secondary)' }}>↓</span>
                {name}
              </a>
            )
          })}
        </div>
      )}
    </div>
  )
}

// ─── Image Editor ─────────────────────────────────────────────────────────────

interface ImageEditorProps {
  game: Game
  libraryId: string
  onBack: () => void
  onUploaded?: () => void
}

function ImageEditor({ game, libraryId, onBack, onUploaded }: ImageEditorProps) {
  return (
    <div className="p-5">
      {/* Header */}
      <div className="flex items-center gap-3 mb-6">
        <button
          onClick={onBack}
          className="w-7 h-7 rounded-lg flex items-center justify-center transition-colors flex-shrink-0"
          style={{ color: 'var(--text-secondary)', backgroundColor: 'transparent' }}
          onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
          onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
          aria-label="Back"
        >
          ←
        </button>
        <h2 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>
          Edit Images
        </h2>
      </div>

      <div className="flex flex-col gap-6">
        <ImageSlot
          label="Cover"
          description="Portrait artwork (3:4)"
          currentUrl={game.coverUrl}
          fallback="🎮"
          aspectClass="aspect-[3/4]"
          libraryId={libraryId}
          itemId={game.id}
          coverType="cover"
          onUploaded={onUploaded}
        />
        <ImageSlot
          label="Wide Cover"
          description="Landscape hero image"
          currentUrl={game.wideCoverUrl}
          fallback="🎮"
          aspectClass="aspect-video"
          libraryId={libraryId}
          itemId={game.id}
          coverType="widecover"
          onUploaded={onUploaded}
        />
      </div>
    </div>
  )
}

// ─── Image Slot ───────────────────────────────────────────────────────────────

interface ImageSlotProps {
  label: string
  description: string
  currentUrl: string | null
  fallback: string
  aspectClass: string
  libraryId: string
  itemId: string
  coverType: 'cover' | 'widecover'
  onUploaded?: () => void
}

function ImageSlot({
  label, description, currentUrl, fallback, aspectClass,
  libraryId, itemId, coverType, onUploaded,
}: ImageSlotProps) {
  const inputRef = useRef<HTMLInputElement>(null)
  const [preview, setPreview] = useState<string | null>(null)
  const [uploading, setUploading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const displayUrl = preview ?? currentUrl

  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return

    // Show local preview immediately
    const objectUrl = URL.createObjectURL(file)
    setPreview(objectUrl)
    setError(null)
    setUploading(true)

    const form = new FormData()
    form.append('cover', file)

    try {
      const res = await fetch(
        `/api/game-cover?libraryId=${encodeURIComponent(libraryId)}&itemId=${encodeURIComponent(itemId)}&coverType=${coverType}`,
        { method: 'POST', body: form }
      )
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        setError(data.error ?? 'Upload failed.')
        setPreview(null)
      } else {
        onUploaded?.()
      }
    } catch {
      setError('Network error.')
      setPreview(null)
    } finally {
      setUploading(false)
      e.target.value = ''
    }
  }

  return (
    <div>
      <div className="flex items-baseline justify-between mb-2">
        <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{label}</p>
        <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>{description}</p>
      </div>

      <div className="flex items-start gap-4">
        {/* Preview */}
        <div
          className={`${aspectClass} rounded-lg overflow-hidden flex-shrink-0 relative`}
          style={{
            width: coverType === 'cover' ? '80px' : '160px',
            backgroundColor: 'var(--border)',
            border: '1px solid var(--border)',
          }}
        >
          {displayUrl ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={displayUrl} alt={label} className="w-full h-full object-cover" />
          ) : (
            <div className="w-full h-full flex items-center justify-center text-2xl">{fallback}</div>
          )}
          {uploading && (
            <div className="absolute inset-0 flex items-center justify-center" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
              <span className="text-xs text-white">Saving…</span>
            </div>
          )}
        </div>

        {/* Controls */}
        <div className="flex flex-col gap-2 flex-1 min-w-0">
          <button
            onClick={() => inputRef.current?.click()}
            disabled={uploading}
            className="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 text-left"
            style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)' }}
            onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--accent)')}
            onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
          >
            {currentUrl || preview ? 'Replace image' : 'Upload image'}
          </button>
          {error && (
            <p className="text-xs" style={{ color: '#fca5a5' }}>{error}</p>
          )}
        </div>
      </div>

      <input
        ref={inputRef}
        type="file"
        accept="image/jpeg,image/png,image/webp,image/gif"
        className="hidden"
        onChange={handleChange}
      />
    </div>
  )
}