import { useEffect, useState, useCallback, useRef, useMemo } from 'react'
import { pendingPhotosApi, PendingPhotoResponse, ReviewDecision, CleanupResponse } from '../api/pendingPhotos'
import { apiClient } from '../api/client'
import { useAuth } from '../context/AuthContext'
// Removed unused videosApi import

type SortKey = 'photo' | 'uploaded_by' | 'file_info' | 'submitted_at' | 'status'

export default function PendingPhotos() {
  const { hasPermission, isAdmin } = useAuth()
  const canManageUploads = hasPermission('user_uploaded')
  const canRunCleanup = isAdmin
  const [pendingPhotos, setPendingPhotos] = useState<PendingPhotoResponse[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [decisions, setDecisions] = useState<Record<number, 'approve' | 'reject' | null>>({})
  const [rejectionReasons, setRejectionReasons] = useState<Record<number, string>>({})
  const [bulkRejectionReason, setBulkRejectionReason] = useState<string>('')
  const [submitting, setSubmitting] = useState(false)
  const [statusFilter, setStatusFilter] = useState<string>('pending')
  const [imageUrls, setImageUrls] = useState<Record<number, string>>({})
  const [notification, setNotification] = useState<{
    approved: number
    rejected: number
    warnings: string[]
    errors: string[]
  } | null>(null)
  const imageUrlsRef = useRef<Record<number, string>>({})
  const [sortBy, setSortBy] = useState<SortKey>('submitted_at')
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc')

  const loadPendingPhotos = useCallback(async () => {
    setLoading(true)
    setError(null)
    try {
      const response = await pendingPhotosApi.listPendingPhotos(
        statusFilter || undefined
      )
      setPendingPhotos(response.items)
      
      // Clear decisions when loading different status
      setDecisions({})
      setRejectionReasons({})
      
      // Load images as blobs with authentication
      const newImageUrls: Record<number, string> = {}
      for (const photo of response.items) {
        try {
          const blobUrl = await pendingPhotosApi.getPendingPhotoImageBlob(photo.id)
          newImageUrls[photo.id] = blobUrl
        } catch (err) {
          console.error(`Failed to load image for photo ${photo.id}:`, err)
        }
      }
      setImageUrls(newImageUrls)
      imageUrlsRef.current = newImageUrls
    } catch (err: any) {
      setError(err.response?.data?.detail || err.message || 'Failed to load pending photos')
      console.error('Error loading pending photos:', err)
    } finally {
      setLoading(false)
    }
  }, [statusFilter])
  
  // Cleanup blob URLs on unmount
  useEffect(() => {
    return () => {
      Object.values(imageUrlsRef.current).forEach((url) => {
        URL.revokeObjectURL(url)
      })
    }
  }, [])

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

  const sortedPendingPhotos = useMemo(() => {
    const items = [...pendingPhotos]
    const direction = sortDirection === 'asc' ? 1 : -1

    const compareStrings = (a: string | null | undefined, b: string | null | undefined) =>
      (a || '').localeCompare(b || '', undefined, { sensitivity: 'base' })

    items.sort((a, b) => {
      if (sortBy === 'photo') {
        return (a.id - b.id) * direction
      }

      if (sortBy === 'uploaded_by') {
        const aName = a.user_name || a.user_email || ''
        const bName = b.user_name || b.user_email || ''
        return compareStrings(aName, bName) * direction
      }

      if (sortBy === 'file_info') {
        return compareStrings(a.original_filename, b.original_filename) * direction
      }

      if (sortBy === 'submitted_at') {
        const aTime = a.submitted_at || ''
        const bTime = b.submitted_at || ''
        return (aTime < bTime ? -1 : aTime > bTime ? 1 : 0) * direction
      }

      if (sortBy === 'status') {
        return compareStrings(a.status, b.status) * direction
      }

      return 0
    })

    return items
  }, [pendingPhotos, sortBy, sortDirection])

  const toggleSort = (key: SortKey) => {
    setSortBy((currentKey) => {
      if (currentKey === key) {
        setSortDirection((currentDirection) => (currentDirection === 'asc' ? 'desc' : 'asc'))
        return currentKey
      }
      setSortDirection('asc')
      return key
    })
  }

  const renderSortLabel = (label: string, key: SortKey) => {
    const isActive = sortBy === key
    const directionSymbol = !isActive ? '↕' : sortDirection === 'asc' ? '▲' : '▼'
    return (
      <button
        type="button"
        onClick={() => toggleSort(key)}
        className="inline-flex items-center gap-1 text-xs font-medium text-gray-500 uppercase tracking-wider hover:text-gray-700"
      >
        <span>{label}</span>
        <span className="text-[10px]">{directionSymbol}</span>
      </button>
    )
  }

  const formatDate = (dateString: string | null | undefined): string => {
    if (!dateString) return '-'
    try {
      const date = new Date(dateString)
      return date.toLocaleString()
    } catch {
      return dateString
    }
  }

  const formatFileSize = (bytes: number): string => {
    if (bytes === 0) return '0 Bytes'
    const k = 1024
    const sizes = ['Bytes', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
  }

  const handleDecisionChange = (id: number, decision: 'approve' | 'reject') => {
    const currentDecision = decisions[id]
    const isUnselecting = currentDecision === decision
    
    setDecisions((prev) => {
      // If clicking the same option, unselect it
      if (prev[id] === decision) {
        const updated = { ...prev }
        delete updated[id]
        return updated
      }
      // Otherwise, set the new decision (this automatically unchecks the other checkbox)
      return {
        ...prev,
        [id]: decision,
      }
    })
    
    // Handle rejection reasons
    if (isUnselecting) {
      // Unselecting - clear rejection reason
      setRejectionReasons((prev) => {
        const updated = { ...prev }
        delete updated[id]
        return updated
      })
    } else if (decision === 'approve') {
      // Switching to approve - clear rejection reason
      setRejectionReasons((prev) => {
        const updated = { ...prev }
        delete updated[id]
        return updated
      })
    } else if (decision === 'reject' && bulkRejectionReason.trim()) {
      // Switching to reject - apply bulk rejection reason if set
      setRejectionReasons((prev) => ({
        ...prev,
        [id]: bulkRejectionReason,
      }))
    }
  }

  const handleRejectionReasonChange = (id: number, reason: string) => {
    setRejectionReasons((prev) => ({
      ...prev,
      [id]: reason,
    }))
  }

  const handleSelectAllApprove = () => {
    const pendingPhotoIds = pendingPhotos
      .filter((photo) => photo.status === 'pending')
      .map((photo) => photo.id)
    
    const newDecisions: Record<number, 'approve'> = {}
    pendingPhotoIds.forEach((id) => {
      newDecisions[id] = 'approve'
    })
    
    setDecisions((prev) => ({
      ...prev,
      ...newDecisions,
    }))
    
    // Clear all rejection reasons and bulk rejection reason since we're approving
    setRejectionReasons({})
    setBulkRejectionReason('')
  }

  const handleSelectAllReject = () => {
    const pendingPhotoIds = pendingPhotos
      .filter((photo) => photo.status === 'pending')
      .map((photo) => photo.id)
    
    const newDecisions: Record<number, 'reject'> = {}
    pendingPhotoIds.forEach((id) => {
      newDecisions[id] = 'reject'
    })
    
    setDecisions((prev) => ({
      ...prev,
      ...newDecisions,
    }))
    
    // Apply bulk rejection reason if set
    if (bulkRejectionReason.trim()) {
      const newRejectionReasons: Record<number, string> = {}
      pendingPhotoIds.forEach((id) => {
        newRejectionReasons[id] = bulkRejectionReason
      })
      setRejectionReasons((prev) => ({
        ...prev,
        ...newRejectionReasons,
      }))
    }
  }

  const handleBulkRejectionReasonChange = (reason: string) => {
    setBulkRejectionReason(reason)
    
    // Apply to all currently rejected photos
    const rejectedPhotoIds = Object.entries(decisions)
      .filter(([_id, decision]) => decision === 'reject')
      .map(([id]) => parseInt(id))
    
    if (rejectedPhotoIds.length > 0) {
      const newRejectionReasons: Record<number, string> = {}
      rejectedPhotoIds.forEach((id) => {
        newRejectionReasons[id] = reason
      })
      setRejectionReasons((prev) => ({
        ...prev,
        ...newRejectionReasons,
      }))
    }
  }

  const handleSubmit = async () => {
    // Get all decisions that have been made for pending items
    const decisionsList: ReviewDecision[] = Object.entries(decisions)
      .filter(([id, decision]) => {
        const photo = pendingPhotos.find((p) => p.id === parseInt(id))
        return decision !== null && photo && photo.status === 'pending'
      })
      .map(([id, decision]) => ({
        id: parseInt(id),
        decision: decision!,
        rejection_reason: decision === 'reject' ? (rejectionReasons[parseInt(id)] || null) : null,
      }))

    if (decisionsList.length === 0) {
      alert('Please select Approve or Reject for at least one pending photo.')
      return
    }

    // Show confirmation
    const approveCount = decisionsList.filter((d) => d.decision === 'approve').length
    const rejectCount = decisionsList.filter((d) => d.decision === 'reject').length
    const confirmMessage = `Submit ${decisionsList.length} decision(s)?\n\nThis will approve ${approveCount} photo(s) and reject ${rejectCount} photo(s).`

    if (!confirm(confirmMessage)) {
      return
    }

    setSubmitting(true)
    try {
      const response = await pendingPhotosApi.reviewPendingPhotos({
        decisions: decisionsList,
      })

      // Show custom notification instead of alert
      setNotification({
        approved: response.approved,
        rejected: response.rejected,
        warnings: response.warnings || [],
        errors: response.errors,
      })

      if (response.errors.length > 0) {
        console.error('Errors:', response.errors)
      }
      if (response.warnings && response.warnings.length > 0) {
        console.info('Warnings:', response.warnings)
      }

      // Reload the list to show updated status
      await loadPendingPhotos()
      // Clear decisions and reasons
      setDecisions({})
      setRejectionReasons({})
    } catch (err: any) {
      const errorMessage =
        err.response?.data?.detail || err.message || 'Failed to submit decisions'
      alert(`Error: ${errorMessage}`)
      console.error('Error submitting decisions:', err)
    } finally {
      setSubmitting(false)
    }
  }

  const handleCleanupFiles = async (statusFilter?: string) => {
    const confirmMessage = statusFilter
      ? `Delete files from shared space for ${statusFilter} photos? This cannot be undone.`
      : 'Delete files from shared space for all approved/rejected photos? This cannot be undone.'
    
    if (!confirm(confirmMessage)) {
      return
    }

    try {
      const response: CleanupResponse = await pendingPhotosApi.cleanupFiles(statusFilter)
      const message = [
        `✅ Deleted ${response.deleted_files} file(s) from shared space`,
        response.warnings && response.warnings.length > 0
          ? `ℹ️ ${response.warnings.length} file(s) were already deleted`
          : '',
        response.errors.length > 0 ? `⚠️ Errors: ${response.errors.length}` : '',
      ]
        .filter(Boolean)
        .join('\n')
      
      alert(message)
      if (response.warnings && response.warnings.length > 0) {
        console.info('Cleanup warnings:', response.warnings)
      }
      if (response.errors.length > 0) {
        console.error('Cleanup errors:', response.errors)
      }
      
      // Reload the list
      await loadPendingPhotos()
    } catch (err: any) {
      const errorMessage =
        err.response?.data?.detail || err.message || 'Failed to cleanup files'
      alert(`Error: ${errorMessage}`)
      console.error('Error cleaning up files:', err)
    }
  }

  const handleCleanupDatabase = async (statusFilter?: string) => {
    const confirmMessage = statusFilter
      ? `Delete all ${statusFilter} records from pending_photos table? This cannot be undone.`
      : 'Delete all approved and rejected records from pending_photos table? Pending records will be kept. This cannot be undone.'
    
    if (!confirm(confirmMessage)) {
      return
    }

    try {
      const response: CleanupResponse = await pendingPhotosApi.cleanupDatabase(statusFilter)
      const message = [
        `✅ Deleted ${response.deleted_records} record(s) from database`,
        response.warnings && response.warnings.length > 0
          ? `ℹ️ ${response.warnings.join(', ')}`
          : '',
        response.errors.length > 0 
          ? `⚠️ Errors: ${response.errors.join('; ')}`
          : '',
      ]
        .filter(Boolean)
        .join('\n')
      
      alert(message)
      if (response.warnings && response.warnings.length > 0) {
        console.info('Cleanup warnings:', response.warnings)
      }
      if (response.errors.length > 0) {
        console.error('Cleanup errors:', response.errors)
      }
      
      // Reload the list
      await loadPendingPhotos()
    } catch (err: any) {
      const errorMessage =
        err.response?.data?.detail || err.message || 'Failed to cleanup database'
      alert(`Error: ${errorMessage}`)
      console.error('Error cleaning up database:', err)
    }
  }

  return (
    <div>
      {/* Notification */}
      {notification && (
        <div className="mb-4 bg-white border border-gray-200 rounded-lg shadow-lg p-4">
          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <span className="text-green-600 text-lg">✅</span>
              <span className="font-medium">Approved: {notification.approved}</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-red-600 text-lg">✓</span>
              <span className="font-medium">Rejected: {notification.rejected}</span>
            </div>
            {notification.warnings.length > 0 && (
              <div className="text-xs text-gray-600 ml-7">
                {notification.warnings.join(', ')}
              </div>
            )}
            {notification.errors.length > 0 && (
              <div className="flex items-center gap-2">
                <span className="text-yellow-600 text-lg">⚠️</span>
                <span className="font-medium">Errors: {notification.errors.length}</span>
              </div>
            )}
          </div>
          <button
            onClick={() => setNotification(null)}
            className="mt-3 px-3 py-1.5 text-sm text-gray-600 bg-gray-50 rounded hover:bg-gray-100 hover:text-gray-700 transition-colors"
          >
            Dismiss
          </button>
        </div>
      )}

      <div className="bg-white rounded-lg shadow p-6">

        {loading && (
          <div className="text-center py-8">
            <p className="text-gray-600">Loading pending photos...</p>
          </div>
        )}

        {error && (
          <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded text-red-700">
            <p className="font-semibold">Error loading data</p>
            <p className="text-sm mt-1">{error}</p>
            <button
              onClick={loadPendingPhotos}
              className="mt-3 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
            >
              Retry
            </button>
          </div>
        )}

        {!loading && !error && (
          <>
            <div className="mb-4 space-y-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <div className="text-sm text-gray-600">
                    Total photos: <span className="font-semibold">{pendingPhotos.length}</span>
                  </div>
                  <select
                    value={statusFilter}
                    onChange={(e) => setStatusFilter(e.target.value)}
                    className="px-3 py-1 border border-gray-300 rounded-md text-sm"
                  >
                    <option value="">All Status</option>
                    <option value="pending">Pending</option>
                    <option value="approved">Approved</option>
                    <option value="rejected">Rejected</option>
                  </select>
                </div>
                <div className="flex items-center gap-2">
                  {canManageUploads && (
                    <>
                      <button
                        onClick={() => {
                          if (!canRunCleanup) {
                            return
                          }
                          handleCleanupFiles()
                        }}
                        disabled={!canRunCleanup}
                        className="px-3 py-1.5 text-sm bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 font-medium"
                        title={
                          canRunCleanup
                            ? 'Delete files from shared space for approved/rejected photos'
                            : 'Cleanup files is restricted to admins'
                        }
                      >
                        🗑️ Cleanup Files
                      </button>
                      <button
                        onClick={() => {
                          if (!canRunCleanup) {
                            return
                          }
                          handleCleanupDatabase()
                        }}
                        disabled={!canRunCleanup}
                        className="px-3 py-1.5 text-sm bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 font-medium"
                        title={
                          canRunCleanup
                            ? 'Delete approved and rejected records from pending_photos table (pending records will be kept)'
                            : 'Clear database is restricted to admins'
                        }
                      >
                        🗑️ Clear Database
                      </button>
                    </>
                  )}
                  {pendingPhotos.filter((p) => p.status === 'pending').length > 0 && (
                    <>
                      <button
                        onClick={handleSelectAllApprove}
                        className="px-4 py-1 text-sm bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 font-medium"
                      >
                        Select All to Approve
                      </button>
                      <button
                        onClick={handleSelectAllReject}
                        className="px-4 py-1 text-sm bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 font-medium"
                      >
                        Select All to Reject
                      </button>
                    </>
                  )}
                  <button
                    onClick={handleSubmit}
                    disabled={
                      submitting ||
                      Object.values(decisions).filter((d) => d !== null).length === 0
                    }
                    className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed font-medium"
                  >
                    {submitting ? 'Submitting...' : 'Submit Decisions'}
                  </button>
                </div>
              </div>
              {Object.values(decisions).some((d) => d === 'reject') && (
                <div className="flex items-center gap-2">
                  <label className="text-sm text-gray-700 font-medium whitespace-nowrap">
                    Bulk Rejection Reason:
                  </label>
                  <textarea
                    value={bulkRejectionReason}
                    onChange={(e) => handleBulkRejectionReasonChange(e.target.value)}
                    placeholder="Enter rejection reason to apply to all rejected photos..."
                    className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md resize-none focus:ring-blue-500 focus:border-blue-500"
                    rows={2}
                  />
                </div>
              )}
            </div>

            {pendingPhotos.length === 0 ? (
              <div className="text-center py-8 text-gray-500">
                <p>No pending photos found.</p>
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="px-6 py-3 text-left">
                        {renderSortLabel('Photo', 'photo')}
                      </th>
                      <th className="px-6 py-3 text-left">
                        {renderSortLabel('Uploaded By', 'uploaded_by')}
                      </th>
                      <th className="px-6 py-3 text-left">
                        {renderSortLabel('File Info', 'file_info')}
                      </th>
                      <th className="px-6 py-3 text-left">
                        {renderSortLabel('Submitted At', 'submitted_at')}
                      </th>
                      <th className="px-6 py-3 text-left">
                        {renderSortLabel('Status', 'status')}
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Decision
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Rejection Reason
                      </th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {sortedPendingPhotos.map((photo) => {
                      const isPending = photo.status === 'pending'
                      const isApproved = photo.status === 'approved'
                      const isRejected = photo.status === 'rejected'
                      const canMakeDecision = isPending
                      
                      return (
                        <tr
                          key={photo.id}
                          className={`hover:bg-gray-50 ${
                            isApproved || isRejected ? 'opacity-60 bg-gray-50' : ''
                          }`}
                        >
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="flex items-center">
                              <div
                                className="cursor-pointer hover:opacity-90 transition-opacity"
                                onClick={async () => {
                                  const isVideo = photo.mime_type?.startsWith('video/')
                                  if (isVideo) {
                                    // For videos, open the video file directly
                                    const videoUrl = `${apiClient.defaults.baseURL}/api/v1/pending-photos/${photo.id}/image`
                                    window.open(videoUrl, '_blank')
                                  } else {
                                    // For images, fetch as blob and open in new tab
                                    try {
                                      const blobUrl = imageUrls[photo.id] || await pendingPhotosApi.getPendingPhotoImageBlob(photo.id)
                                      // Create a new window with the blob URL
                                      const newWindow = window.open()
                                      if (newWindow) {
                                        newWindow.location.href = blobUrl
                                      }
                                    } catch (err) {
                                      console.error('Failed to open full-size image:', err)
                                      alert('Failed to load full-size image')
                                    }
                                  }
                                }}
                                title={photo.mime_type?.startsWith('video/') ? 'Click to open video' : 'Click to open full photo'}
                              >
                                {photo.mime_type?.startsWith('video/') ? (
                                  <div className="w-24 h-24 bg-gray-800 rounded border border-gray-300 flex items-center justify-center relative">
                                    <svg
                                      className="w-12 h-12 text-white"
                                      fill="currentColor"
                                      viewBox="0 0 20 20"
                                    >
                                      <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
                                    </svg>
                                    <div className="absolute bottom-1 right-1 bg-black bg-opacity-70 text-white text-[8px] px-1 rounded">
                                      VIDEO
                                    </div>
                                  </div>
                                ) : imageUrls[photo.id] ? (
                                  <img
                                    src={imageUrls[photo.id]}
                                    alt={photo.original_filename}
                                    className="w-24 h-24 object-cover rounded border border-gray-300"
                                    loading="lazy"
                                    onError={(e) => {
                                      const target = e.target as HTMLImageElement
                                      target.style.display = 'none'
                                      const parent = target.parentElement
                                      if (parent && !parent.querySelector('.error-fallback')) {
                                        const fallback = document.createElement('div')
                                        fallback.className =
                                          'text-gray-400 text-xs error-fallback'
                                        fallback.textContent = 'Image not found'
                                        parent.appendChild(fallback)
                                      }
                                    }}
                                  />
                                ) : (
                                  <div className="w-24 h-24 bg-gray-200 rounded border border-gray-300 flex items-center justify-center text-xs text-gray-400">
                                    Loading...
                                  </div>
                                )}
                              </div>
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm text-gray-900">
                              {photo.user_name || 'Unknown'}
                            </div>
                            <div className="text-sm text-gray-500">
                              {photo.user_email || '-'}
                            </div>
                          </td>
                          <td className="px-6 py-4">
                            <div className="text-sm text-gray-900">
                              {photo.original_filename}
                            </div>
                            <div className="text-sm text-gray-500">
                              {formatFileSize(photo.file_size)} • {photo.mime_type}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm text-gray-500">
                              {formatDate(photo.submitted_at)}
                            </div>
                            {photo.reviewed_at && (
                              <div className="text-xs text-gray-400 mt-1">
                                Reviewed: {formatDate(photo.reviewed_at)}
                              </div>
                            )}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <span
                              className={`px-2 py-1 text-xs font-semibold rounded-full ${
                                photo.status === 'pending'
                                  ? 'bg-yellow-100 text-yellow-800'
                                  : photo.status === 'approved'
                                  ? 'bg-green-100 text-green-800'
                                  : 'bg-red-100 text-red-800'
                              }`}
                            >
                              {photo.status}
                            </span>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            {canMakeDecision ? (
                              <div className="flex flex-col gap-2">
                                <div className="flex items-center gap-4">
                                  <label className="flex items-center gap-2 cursor-pointer">
                                    <input
                                      type="checkbox"
                                      checked={decisions[photo.id] === 'approve'}
                                      onChange={(e) => {
                                        if (e.target.checked) {
                                          handleDecisionChange(photo.id, 'approve')
                                        } else {
                                          // Unchecking - remove decision
                                          handleDecisionChange(photo.id, 'approve')
                                        }
                                      }}
                                      className="w-4 h-4 text-green-600 focus:ring-green-500 rounded"
                                    />
                                    <span className="text-sm text-gray-700">Approve</span>
                                  </label>
                                  <label className="flex items-center gap-2 cursor-pointer">
                                    <input
                                      type="checkbox"
                                      checked={decisions[photo.id] === 'reject'}
                                      onChange={(e) => {
                                        if (e.target.checked) {
                                          handleDecisionChange(photo.id, 'reject')
                                        } else {
                                          // Unchecking - remove decision
                                          handleDecisionChange(photo.id, 'reject')
                                        }
                                      }}
                                      className="w-4 h-4 text-red-600 focus:ring-red-500 rounded"
                                    />
                                    <span className="text-sm text-gray-700">Reject</span>
                                  </label>
                                </div>
                              </div>
                            ) : (
                              <span className="text-sm text-gray-500 italic">
                                {isApproved ? 'Approved' : isRejected ? 'Rejected' : '-'}
                              </span>
                            )}
                          </td>
                          <td className="px-6 py-4">
                            {canMakeDecision && decisions[photo.id] === 'reject' ? (
                              <textarea
                                value={rejectionReasons[photo.id] || ''}
                                onChange={(e) =>
                                  handleRejectionReasonChange(photo.id, e.target.value)
                                }
                                placeholder="Optional: Enter rejection reason..."
                                className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md resize-none focus:ring-blue-500 focus:border-blue-500"
                                rows={2}
                              />
                            ) : isRejected && photo.rejection_reason ? (
                              <div className="text-sm text-gray-700 whitespace-pre-wrap">
                                <div className="bg-red-50 p-2 rounded border border-red-200">
                                  {photo.rejection_reason}
                                </div>
                              </div>
                            ) : (
                              <span className="text-sm text-gray-400 italic">-</span>
                            )}
                          </td>
                        </tr>
                      )
                    })}
                  </tbody>
                </table>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  )
}

