import { useState, useRef, useEffect } from 'react'
import { photosApi, PhotoImportRequest } from '../api/photos'
import { jobsApi, JobResponse, JobStatus } from '../api/jobs'

interface JobProgress {
  id: string
  status: string
  progress: number
  message: string
  processed?: number
  total?: number
}

export default function Scan() {
  const [folderPath, setFolderPath] = useState('')
  const [recursive, setRecursive] = useState(true)
  const [isImporting, setIsImporting] = useState(false)
  const [currentJob, setCurrentJob] = useState<JobResponse | null>(null)
  const [jobProgress, setJobProgress] = useState<JobProgress | null>(null)
  const [importResult, setImportResult] = useState<{
    added?: number
    existing?: number
    total?: number
  } | null>(null)
  const [error, setError] = useState<string | null>(null)
  const eventSourceRef = useRef<EventSource | null>(null)

  // Cleanup event source on unmount
  useEffect(() => {
    return () => {
      if (eventSourceRef.current) {
        eventSourceRef.current.close()
      }
    }
  }, [])

  const handleFolderBrowse = async () => {
    // Try backend API first (uses tkinter for native folder picker with full path)
    try {
      const result = await photosApi.browseFolder()
      if (result.success && result.path) {
        setFolderPath(result.path)
        return
      }
    } catch (err: any) {
      // Backend API failed, fall back to browser picker
      console.warn('Backend folder picker unavailable, using browser fallback:', err)
      
      // Check if it's a display/availability issue
      const errorMsg = err?.response?.data?.detail || err?.message || ''
      if (errorMsg.includes('display') || errorMsg.includes('DISPLAY')) {
        // Show user-friendly message about display issue
        alert('Native folder picker unavailable (no display). Using browser fallback.\n\nNote: Browser picker may only show folder name. You may need to manually complete the full path.')
      }
    }
    
    // Fallback: Use browser-based folder picker
    // Use File System Access API if available (modern browsers)
    if (typeof window !== 'undefined' && 'showDirectoryPicker' in window) {
      try {
        const directoryHandle = await (window as any).showDirectoryPicker()
        // Get the folder name from the handle
        const folderName = directoryHandle.name
        // Note: Browsers don't expose full absolute paths for security reasons
        setFolderPath(folderName)
      } catch (err: any) {
        // User cancelled the picker
        if (err.name !== 'AbortError') {
          console.error('Error selecting folder:', err)
        }
      }
    } else {
      // Fallback: use a hidden directory input
      // Note: This will show a browser confirmation dialog that cannot be removed
      const input = document.createElement('input')
      input.type = 'file'
      input.setAttribute('webkitdirectory', '')
      input.setAttribute('directory', '')
      input.setAttribute('multiple', '')
      input.style.display = 'none'
      
      input.onchange = (e: any) => {
        const files = e.target.files
        if (files && files.length > 0) {
          const firstFile = files[0]
          const relativePath = firstFile.webkitRelativePath
          const pathParts = relativePath.split('/')
          const rootFolder = pathParts[0]
          // Note: Browsers don't expose full absolute paths for security reasons
          setFolderPath(rootFolder)
        }
        if (document.body.contains(input)) {
          document.body.removeChild(input)
        }
      }
      
      input.oncancel = () => {
        if (document.body.contains(input)) {
          document.body.removeChild(input)
        }
      }
      
      document.body.appendChild(input)
      input.click()
    }
  }

  const handleScanFolder = async () => {
    if (!folderPath.trim()) {
      setError('Please enter a folder path')
      return
    }

    setIsImporting(true)
    setError(null)
    setImportResult(null)
    setCurrentJob(null)
    setJobProgress(null)

    try {
      const request: PhotoImportRequest = {
        folder_path: folderPath.trim(),
        recursive,
      }

      const response = await photosApi.importPhotos(request)
      setCurrentJob({
        id: response.job_id,
        status: JobStatus.PENDING,
        progress: 0,
        message: response.message,
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString(),
      })

      // Start SSE stream for job progress
      startJobProgressStream(response.job_id)
    } catch (err: any) {
      setError(err.response?.data?.detail || err.message || 'Import failed')
      setIsImporting(false)
    }
  }

  const startJobProgressStream = (jobId: string) => {
    // Close existing stream if any
    if (eventSourceRef.current) {
      eventSourceRef.current.close()
    }

    const eventSource = photosApi.streamJobProgress(jobId)
    eventSourceRef.current = eventSource

    eventSource.onmessage = (event) => {
      try {
        const data: JobProgress = JSON.parse(event.data)
        setJobProgress(data)

        // Update job status
        const statusMap: Record<string, JobStatus> = {
          pending: JobStatus.PENDING,
          started: JobStatus.STARTED,
          progress: JobStatus.PROGRESS,
          success: JobStatus.SUCCESS,
          failure: JobStatus.FAILURE,
        }

        setCurrentJob({
          id: data.id,
          status: statusMap[data.status] || JobStatus.PENDING,
          progress: data.progress,
          message: data.message,
          created_at: new Date().toISOString(),
          updated_at: new Date().toISOString(),
        })

        // Check if job is complete
        if (data.status === 'success' || data.status === 'failure') {
          setIsImporting(false)
          eventSource.close()
          eventSourceRef.current = null

          // Fetch final job result to get added/existing counts
          if (data.status === 'success') {
            fetchJobResult(jobId)
          }
        }
      } catch (err) {
        console.error('Error parsing SSE event:', err)
      }
    }

    eventSource.onerror = (err) => {
      console.error('SSE error:', err)
      eventSource.close()
      eventSourceRef.current = null
    }
  }

  const fetchJobResult = async (jobId: string) => {
    try {
      const job = await jobsApi.getJob(jobId)
      // Job result may contain added/existing counts in metadata
      // For now, we'll just update the job status
      setCurrentJob(job)
    } catch (err) {
      console.error('Error fetching job result:', err)
    }
  }

  const getStatusColor = (status: JobStatus) => {
    switch (status) {
      case JobStatus.SUCCESS:
        return 'text-green-600'
      case JobStatus.FAILURE:
        return 'text-red-600'
      case JobStatus.STARTED:
      case JobStatus.PROGRESS:
        return 'text-blue-600'
      default:
        return 'text-gray-600'
    }
  }

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold text-gray-900 mb-6">Scan Photos</h1>

      <div className="space-y-6">
        {/* Folder Scan Section */}
        <div className="bg-white rounded-lg shadow p-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">
            Scan Folder
          </h2>

          <div className="space-y-4">
            <div>
              <label
                htmlFor="folder-path"
                className="block text-sm font-medium text-gray-700 mb-2"
              >
                Folder Path
              </label>
              <div className="flex gap-2">
                <input
                  id="folder-path"
                  type="text"
                  value={folderPath}
                  onChange={(e) => setFolderPath(e.target.value)}
                  placeholder="/path/to/photos"
                  className="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                  disabled={isImporting}
                />
                <button
                  type="button"
                  onClick={handleFolderBrowse}
                  disabled={isImporting}
                  className="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Browse
                </button>
              </div>
              <p className="mt-1 text-sm text-gray-500">
                Enter the full path to the folder containing photos. 
                <span className="text-xs text-gray-400 block mt-1">
                  Click Browse to open a native folder picker. The full path will be automatically filled.
                  If the native picker is unavailable, a browser fallback will be used (may require manual path completion).
                </span>
              </p>
            </div>

            <div className="flex items-center">
              <input
                id="recursive"
                type="checkbox"
                checked={recursive}
                onChange={(e) => setRecursive(e.target.checked)}
                disabled={isImporting}
                className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
              />
              <label
                htmlFor="recursive"
                className="ml-2 block text-sm text-gray-700"
              >
                Scan subdirectories recursively
              </label>
            </div>

            <button
              type="button"
              onClick={handleScanFolder}
              disabled={isImporting || !folderPath.trim()}
              className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isImporting ? 'Scanning...' : 'Start Scanning'}
            </button>
          </div>
        </div>

        {/* Progress Section */}
        {(currentJob || jobProgress) && (
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">
              Import Progress
            </h2>

            {currentJob && (
              <div className="space-y-4">
                <div>
                  <div className="flex justify-between items-center mb-2">
                    <span
                      className={`text-sm font-medium ${getStatusColor(currentJob.status)}`}
                    >
                      {currentJob.status === JobStatus.SUCCESS && '✓ '}
                      {currentJob.status === JobStatus.FAILURE && '✗ '}
                      {currentJob.status.charAt(0).toUpperCase() +
                        currentJob.status.slice(1)}
                    </span>
                    <span className="text-sm text-gray-600">
                      {currentJob.progress}%
                    </span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2">
                    <div
                      className="bg-blue-600 h-2 rounded-full transition-all duration-300"
                      style={{ width: `${currentJob.progress}%` }}
                    />
                  </div>
                </div>

                {jobProgress && (
                  <div className="text-sm text-gray-600">
                    {jobProgress.processed !== undefined &&
                      jobProgress.total !== undefined && (
                        <p>
                          Processed: {jobProgress.processed} /{' '}
                          {jobProgress.total}
                        </p>
                      )}
                    {jobProgress.message && (
                      <p className="mt-1">{jobProgress.message}</p>
                    )}
                  </div>
                )}
              </div>
            )}
          </div>
        )}

        {/* Results Section */}
        {importResult && (
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">
              Import Results
            </h2>

            <div className="space-y-2 text-sm">
              {importResult.added !== undefined && (
                <p className="text-green-600">
                  ✓ {importResult.added} new photos added
                </p>
              )}
              {importResult.existing !== undefined && (
                <p className="text-gray-600">
                  {importResult.existing} photos already in database
                </p>
              )}
              {importResult.total !== undefined && (
                <p className="text-gray-700 font-medium">
                  Total: {importResult.total} photos
                </p>
              )}
            </div>
          </div>
        )}

        {/* Error Section */}
        {error && (
          <div className="bg-red-50 border border-red-200 rounded-lg p-4">
            <p className="text-sm text-red-800">{error}</p>
          </div>
        )}
      </div>
    </div>
  )
}
