'use client'

import { useEffect, useState, useCallback, useRef } from 'react'
import type { DirectoryListing, FileEntry } from '@/types'
import VideoPlayerModal from './VideoPlayerModal'
import ImageLightbox from './ImageLightbox'
import TagSelector from '@/components/tags/TagSelector'
import FilterPanel from '@/components/FilterPanel'

interface Props {
  libraryId: string
  initialPath: string
}

type ModalState =
  | { type: 'video'; url: string; name: string }
  | { type: 'image'; url: string; name: string }
  | null

type TagPanelState = { entry: FileEntry; mediaKey: string } | null

export default function MixedView({ libraryId, initialPath }: Props) {
  const [currentPath, setCurrentPath] = useState(initialPath)
  const [listing, setListing] = useState<DirectoryListing | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [modal, setModal] = useState<ModalState>(null)
  const [tagPanel, setTagPanel] = useState<TagPanelState>(null)
  const [search, setSearch] = useState('')
  const [selectedTagIds, setSelectedTagIds] = useState<Set<string>>(new Set())
  const [assignments, setAssignments] = useState<Record<string, string[]>>({})
  const [filterRefreshKey, setFilterRefreshKey] = useState(0)

  const toggleTag = (tagId: string) =>
    setSelectedTagIds((prev) => {
      const next = new Set(prev)
      next.has(tagId) ? next.delete(tagId) : next.add(tagId)
      return next
    })

  const loadPath = useCallback(
    (path: string) => {
      setLoading(true)
      setError(null)
      fetch(
        `/api/browse?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(path)}`
      )
        .then((r) => r.json())
        .then((data: DirectoryListing) => {
          setListing(data)
          setCurrentPath(path)
          setLoading(false)
        })
        .catch(() => {
          setError('Failed to load directory')
          setLoading(false)
        })
    },
    [libraryId]
  )

  useEffect(() => {
    loadPath(initialPath)
  }, [loadPath, initialPath])

  const fetchAssignments = useCallback(() => {
    fetch(`/api/tags/library-assignments?libraryId=${encodeURIComponent(libraryId)}`)
      .then((r) => r.json())
      .then(setAssignments)
      .catch(() => {})
  }, [libraryId])

  useEffect(() => { fetchAssignments() }, [fetchAssignments])

  const handleEntry = (entry: FileEntry) => {
    if (entry.type === 'directory') {
      const newPath = currentPath ? `${currentPath}/${entry.name}` : entry.name
      loadPath(newPath)
      return
    }
    if (!entry.url) return
    if (entry.mediaType === 'video') {
      setModal({ type: 'video', url: entry.url, name: entry.name })
    } else if (entry.mediaType === 'image') {
      setModal({ type: 'image', url: entry.url, name: entry.name })
    } else {
      // Download other file types
      window.open(entry.url, '_blank')
    }
  }

  const handleTagEntry = (entry: FileEntry) => {
    const relativePath = currentPath ? `${currentPath}/${entry.name}` : entry.name
    const mediaKey = `${libraryId}:${encodeURIComponent(relativePath)}`
    setTagPanel({ entry, mediaKey })
  }

  const navigateUp = () => {
    const parts = currentPath.split('/').filter(Boolean)
    parts.pop()
    loadPath(parts.join('/'))
  }

  // Build breadcrumb segments
  const breadcrumbs = currentPath
    ? currentPath.split('/').filter(Boolean)
    : []

  const mediaKeyFor = (entry: FileEntry) => {
    const rel = currentPath ? `${currentPath}/${entry.name}` : entry.name
    return `${libraryId}:${encodeURIComponent(rel)}`
  }

  const filteredEntries = (listing?.entries ?? []).filter((entry) => {
    if (search && !entry.name.toLowerCase().includes(search.toLowerCase())) return false
    if (selectedTagIds.size > 0 && entry.type !== 'directory') {
      const entryTags = assignments[mediaKeyFor(entry)] ?? []
      if (![...selectedTagIds].every((id) => entryTags.includes(id))) return false
    }
    return true
  })

  return (
    <div className="flex gap-6 items-start">
      <div className="w-52 flex-shrink-0">
        <FilterPanel
          libraryId={libraryId}
          assignments={assignments}
          search={search}
          onSearchChange={setSearch}
          selectedTagIds={selectedTagIds}
          onTagToggle={toggleTag}
          refreshKey={filterRefreshKey}
        />
      </div>
      <div className="flex-1 min-w-0">
      {/* Breadcrumb */}
      <nav className="flex items-center gap-1 mb-6 flex-wrap text-sm">
        <button
          onClick={() => loadPath('')}
          className="transition-colors"
          style={{ color: breadcrumbs.length === 0 ? 'var(--text-primary)' : 'var(--text-secondary)' }}
        >
          Root
        </button>
        {breadcrumbs.map((segment, i) => {
          const isLast = i === breadcrumbs.length - 1
          const pathTo = breadcrumbs.slice(0, i + 1).join('/')
          return (
            <span key={i} className="flex items-center gap-1">
              <span style={{ color: 'var(--border)' }}>/</span>
              <button
                onClick={() => !isLast && loadPath(pathTo)}
                className="transition-colors"
                style={{
                  color: isLast ? 'var(--text-primary)' : 'var(--text-secondary)',
                  cursor: isLast ? 'default' : 'pointer',
                }}
              >
                {segment}
              </button>
            </span>
          )
        })}
      </nav>

      {loading && <LoadingSkeleton />}
      {error && (
        <div className="rounded-lg border p-8 text-center" style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}>
          {error}
        </div>
      )}

      {!loading && !error && listing && (
        <>
          {filteredEntries.length === 0 ? (
            <div className="rounded-lg border p-12 text-center" style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}>
              This folder is empty.
            </div>
          ) : (
            <div className="grid gap-2 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
              {/* Up button */}
              {breadcrumbs.length > 0 && (
                <button
                  onClick={navigateUp}
                  className="flex flex-col items-center justify-center gap-2 rounded-xl border p-4 text-xs transition-colors"
                  style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)', color: 'var(--text-secondary)', aspectRatio: '1 / 1' }}
                  onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
                  onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
                >
                  <span className="text-2xl">↑</span>
                  <span>Up</span>
                </button>
              )}
              {filteredEntries.map((entry) => (
                <EntryTile key={entry.name} entry={entry} onOpen={handleEntry} onTag={handleTagEntry} />
              ))}
            </div>
          )}
        </>
      )}

      {modal?.type === 'video' && (
        <VideoPlayerModal url={modal.url} name={modal.name} onClose={() => setModal(null)} />
      )}
      {modal?.type === 'image' && (
        <ImageLightbox url={modal.url} name={modal.name} onClose={() => setModal(null)} />
      )}

      {/* Tag panel */}
      {tagPanel && (
        <div
          className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4"
          style={{ backgroundColor: 'rgba(0,0,0,0.6)' }}
          onClick={(e) => { if (e.target === e.currentTarget) setTagPanel(null) }}
        >
          <div
            className="w-full max-w-md rounded-2xl shadow-2xl overflow-hidden"
            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
          >
            <div className="flex items-center justify-between px-5 py-4" style={{ borderBottom: '1px solid var(--border)' }}>
              <div className="min-w-0">
                <p className="text-xs font-semibold uppercase tracking-wider mb-0.5" style={{ color: 'var(--text-secondary)' }}>
                  Tags
                </p>
                <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>
                  {tagPanel.entry.name}
                </p>
              </div>
              <button
                onClick={() => setTagPanel(null)}
                className="ml-4 w-8 h-8 flex-shrink-0 rounded-full flex items-center justify-center text-sm transition-colors"
                style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
                onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
                onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
                aria-label="Close"
              >
                ✕
              </button>
            </div>
            <div className="px-5 py-4">
              <TagSelector
                mediaKey={tagPanel.mediaKey}
                onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
              />
            </div>
          </div>
        </div>
      )}
      </div>
    </div>
  )
}

function EntryTile({ entry, onOpen, onTag }: { entry: FileEntry; onOpen: (e: FileEntry) => void; onTag: (e: FileEntry) => void }) {
  type ImgState = 'loading' | 'loaded' | 'error'
  const [imgState, setImgState] = useState<ImgState>(
    entry.thumbnailUrl ? 'loading' : 'error'
  )
  // Reset image state when the entry changes (e.g. navigating to a new folder)
  const prevUrl = useRef(entry.thumbnailUrl)
  if (prevUrl.current !== entry.thumbnailUrl) {
    prevUrl.current = entry.thumbnailUrl
    if (entry.thumbnailUrl) setImgState('loading')
    else setImgState('error')
  }

  const isDir = entry.type === 'directory'
  const isVideo = entry.mediaType === 'video'
  const showThumbnail = !isDir && imgState !== 'error' && entry.thumbnailUrl

  // Icon shown when no thumbnail available or while loading
  const icon = isDir ? '📁' : isVideo ? '▶' : entry.mediaType === 'image' ? '🖼' : '📄'

  return (
    <div
      role="button"
      tabIndex={0}
      onClick={() => onOpen(entry)}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpen(entry) } }}
      className="group relative flex flex-col rounded-xl border overflow-hidden text-xs transition-all cursor-pointer"
      style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)', aspectRatio: '1 / 1' }}
      onMouseEnter={(e) => {
        ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)'
        ;(e.currentTarget as HTMLElement).style.transform = 'translateY(-1px)'
      }}
      onMouseLeave={(e) => {
        ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--border)'
        ;(e.currentTarget as HTMLElement).style.transform = 'translateY(0)'
      }}
    >
      {/* Thumbnail image — hidden until loaded */}
      {entry.thumbnailUrl && (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={entry.thumbnailUrl}
          alt=""
          aria-hidden
          className="absolute inset-0 w-full h-full object-cover transition-opacity duration-300"
          style={{ opacity: imgState === 'loaded' ? 1 : 0 }}
          onLoad={() => setImgState('loaded')}
          onError={() => setImgState('error')}
        />
      )}

      {/* Skeleton pulse shown while image is loading */}
      {imgState === 'loading' && (
        <div
          className="absolute inset-0 animate-pulse"
          style={{ backgroundColor: 'var(--border)' }}
        />
      )}

      {/* Icon fallback — shown for dirs, other files, and failed thumbnails */}
      {!showThumbnail && imgState !== 'loading' && (
        <div className="absolute inset-0 flex items-center justify-center text-3xl"
          style={isVideo && imgState === 'error' ? { color: 'var(--accent)' } : undefined}>
          {icon}
        </div>
      )}

      {/* Bottom label — always shown */}
      <div
        className="absolute bottom-0 left-0 right-0 px-2 py-1.5"
        style={{
          background: showThumbnail
            ? 'linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%)'
            : undefined,
        }}
      >
        <span
          className="block w-full truncate"
          style={{ color: showThumbnail ? '#fff' : 'var(--text-primary)' }}
          title={entry.name}
        >
          {entry.name}
        </span>
      </div>

      {/* Video play badge — top-right overlay */}
      {isVideo && imgState === 'loaded' && (
        <div
          className="absolute top-2 right-2 w-6 h-6 rounded-full flex items-center justify-center text-xs"
          style={{ backgroundColor: 'rgba(0,0,0,0.55)', color: '#fff' }}
        >
          ▶
        </div>
      )}

      {/* Tag button — top-left, shown on hover */}
      <button
        onClick={(e) => { e.stopPropagation(); onTag(entry) }}
        className="absolute top-2 left-2 w-6 h-6 rounded-full items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity hidden group-hover:flex"
        style={{ backgroundColor: 'rgba(0,0,0,0.55)', color: '#fff' }}
        aria-label={`Tag ${entry.name}`}
        title="Tags"
      >
        🏷
      </button>
    </div>
  )
}

function LoadingSkeleton() {
  return (
    <div className="grid gap-2 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
      {Array.from({ length: 12 }).map((_, i) => (
        <div
          key={i}
          className="rounded-xl animate-pulse"
          style={{ backgroundColor: 'var(--surface)', aspectRatio: '1 / 1' }}
        />
      ))}
    </div>
  )
}