'use client'

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

interface Props {
  libraryId: string
  initialPath: string
}

type ModalState =
  | { type: 'video'; url: string; name: string }
  | { type: 'image'; url: string; name: 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 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 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 navigateUp = () => {
    const parts = currentPath.split('/').filter(Boolean)
    parts.pop()
    loadPath(parts.join('/'))
  }

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

  return (
    <>
      {/* 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 && (
        <>
          {listing.entries.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>
              )}
              {listing.entries.map((entry) => (
                <EntryTile key={entry.name} entry={entry} onOpen={handleEntry} />
              ))}
            </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)} />
      )}
    </>
  )
}

function EntryTile({ entry, onOpen }: { entry: FileEntry; onOpen: (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 (
    <button
      onClick={() => onOpen(entry)}
      className="group relative flex flex-col rounded-xl border overflow-hidden text-xs transition-all focus:outline-none text-left"
      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>
      )}
    </button>
  )
}

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>
  )
}