rw-deepseek-ocr/frontend/src/components/JobsPanel.jsx

import { useState, useEffect, useCallback } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import {
  Search, ChevronLeft, ChevronRight, CheckCircle2, Clock,
  FileText, Loader2, Save, RefreshCw,
} from 'lucide-react'
import axios from 'axios'

const API_BASE = import.meta.env.VITE_API_URL || '/api'

const INPUT_CLASS =
  'w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-200 ' +
  'placeholder-gray-600 focus:outline-none focus:border-purple-500/50 transition-colors'

const STATUS_COLORS = {
  unreviewed: 'text-amber-400 bg-amber-400/10 border-amber-400/30',
  reviewed:   'text-green-400 bg-green-400/10 border-green-400/30',
}

function StatusBadge({ status }) {
  const Icon = status === 'reviewed' ? CheckCircle2 : Clock
  return (
    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs border ${STATUS_COLORS[status] || 'text-gray-400'}`}>
      <Icon className="w-3 h-3" />
      {status}
    </span>
  )
}

// ─────────────────────────────────────────────────────────────
// Full-screen Job Detail
// ─────────────────────────────────────────────────────────────
function JobDetail({ jobId, onClose, onReviewed }) {
  const [job, setJob] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  const [editedText, setEditedText]   = useState('')
  const [editAuthor, setEditAuthor]   = useState('')
  const [editBook, setEditBook]       = useState('')
  const [editChapter, setEditChapter] = useState('')
  const [editPage, setEditPage]       = useState('')
  const [reviewerName, setReviewerName] = useState('')

  const [submitting, setSubmitting] = useState(false)
  const [saveResult, setSaveResult] = useState(null)

  useEffect(() => {
    let cancelled = false
    setLoading(true)
    setError(null)
    setSaveResult(null)

    axios.get(`${API_BASE}/jobs/${jobId}`)
      .then(res => {
        if (!cancelled) {
          const d = res.data
          setJob(d)
          setEditedText(d.reviewed_text ?? d.ocr_text ?? '')
          setEditAuthor(d.author || '')
          setEditBook(d.book || '')
          setEditChapter(d.chapter || '')
          setEditPage(d.page || '')
          setReviewerName(d.reviewer_name || '')
        }
      })
      .catch(err => {
        if (!cancelled) setError(err.response?.data?.detail || err.message)
      })
      .finally(() => { if (!cancelled) setLoading(false) })

    return () => { cancelled = true }
  }, [jobId])

  const handleSave = async () => {
    if (!reviewerName.trim()) {
      setSaveResult({ success: false, error: 'Reviewer name is required.' })
      return
    }
    setSubmitting(true)
    setSaveResult(null)
    try {
      const res = await axios.put(`${API_BASE}/jobs/${jobId}/review`, {
        reviewed_text: editedText,
        reviewer_name: reviewerName.trim(),
        author: editAuthor,
        book: editBook,
        chapter: editChapter,
        page: editPage,
      })
      setJob(res.data)
      setSaveResult({ success: true })
      onReviewed(res.data)
    } catch (err) {
      setSaveResult({ success: false, error: err.response?.data?.detail || err.message })
    } finally {
      setSubmitting(false)
    }
  }

  const isReviewed = job?.status === 'reviewed'

  return (
    <motion.div
      key={jobId}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      className="flex flex-col gap-4"
    >
      {/* Top bar */}
      <div className="flex items-center gap-4 flex-shrink-0">
        <motion.button
          onClick={onClose}
          className="flex items-center gap-2 glass glass-hover px-4 py-2 rounded-xl text-sm text-gray-300"
          whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}
        >
          <ChevronLeft className="w-4 h-4" />
          Back to results
        </motion.button>
        {job && (
          <>
            <StatusBadge status={job.status} />
            <span className="text-xs text-gray-500 font-mono hidden sm:block">{job.id}</span>
          </>
        )}
      </div>

      {loading && (
        <div className="flex-1 flex items-center justify-center">
          <Loader2 className="w-8 h-8 animate-spin text-purple-400" />
        </div>
      )}

      {error && (
        <div className="glass p-4 rounded-xl border-red-500/30 bg-red-500/10 flex-shrink-0">
          <p className="text-sm text-red-400">{error}</p>
        </div>
      )}

      {job && !loading && (
        <>
          {/* Image + Text */}
          <div className="grid gap-6" style={{ gridTemplateColumns: '3fr 2fr', height: '65vh' }}>
            <div className="glass rounded-2xl overflow-hidden flex items-center justify-center bg-black/20 h-full">
              <img
                src={`${API_BASE}/jobs/${job.id}/image`}
                alt="Job source"
                className="w-full h-full object-contain"
                onError={e => { e.target.style.display = 'none' }}
              />
            </div>
            <div className="glass rounded-2xl p-4 flex flex-col h-full">
              <p className="text-xs text-gray-400 mb-2 flex-shrink-0">
                {isReviewed ? 'Reviewed Text' : 'OCR Text'}
                <span className="text-purple-400 ml-1">(editable)</span>
              </p>
              <textarea
                value={editedText}
                onChange={e => setEditedText(e.target.value)}
                className="flex-1 w-full bg-transparent text-sm text-gray-200 font-mono resize-none focus:outline-none min-h-0"
                placeholder="Text content..."
              />
              {/* Original OCR text collapsed for reviewed jobs */}
              {isReviewed && job.ocr_text && (
                <details className="flex-shrink-0 mt-2 border-t border-white/10 pt-2">
                  <summary className="cursor-pointer text-xs text-gray-500 hover:text-gray-400 transition-colors">
                    Original OCR Text
                  </summary>
                  <pre className="text-xs text-gray-600 whitespace-pre-wrap font-mono mt-1 max-h-28 overflow-y-auto">
                    {job.ocr_text}
                  </pre>
                </details>
              )}
            </div>
          </div>

          {/* Metadata + reviewer row */}
          <div className="glass p-4 rounded-2xl flex-shrink-0">
            <div className="grid grid-cols-6 gap-4">
              <div>
                <label className="text-xs text-gray-400 mb-1 block">Author</label>
                <input type="text" value={editAuthor} onChange={e => setEditAuthor(e.target.value)} placeholder="Author" className={INPUT_CLASS} />
              </div>
              <div>
                <label className="text-xs text-gray-400 mb-1 block">Book</label>
                <input type="text" value={editBook} onChange={e => setEditBook(e.target.value)} placeholder="Book title" className={INPUT_CLASS} />
              </div>
              <div>
                <label className="text-xs text-gray-400 mb-1 block">Chapter</label>
                <input type="text" value={editChapter} onChange={e => setEditChapter(e.target.value)} placeholder="Chapter" className={INPUT_CLASS} />
              </div>
              <div>
                <label className="text-xs text-gray-400 mb-1 block">Page</label>
                <input type="text" value={editPage} onChange={e => setEditPage(e.target.value)} placeholder="Page" className={INPUT_CLASS} />
              </div>
              <div>
                <label className="text-xs text-gray-400 mb-1 block">Reviewer</label>
                <input type="text" value={reviewerName} onChange={e => setReviewerName(e.target.value)} placeholder="Your name" className={INPUT_CLASS} />
              </div>
              <div className="flex flex-col justify-end">
                <motion.button
                  onClick={handleSave}
                  disabled={submitting || !reviewerName.trim()}
                  className={`w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-sm transition-all ${
                    submitting || !reviewerName.trim()
                      ? 'opacity-50 cursor-not-allowed bg-white/5'
                      : isReviewed
                        ? 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500'
                        : 'bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-500 hover:to-emerald-500'
                  }`}
                  whileHover={!submitting && reviewerName.trim() ? { scale: 1.02 } : {}}
                  whileTap={!submitting && reviewerName.trim() ? { scale: 0.98 } : {}}
                >
                  {submitting ? (
                    <><Loader2 className="w-4 h-4 animate-spin" /> Saving...</>
                  ) : isReviewed ? (
                    <><Save className="w-4 h-4" /> Save Changes</>
                  ) : (
                    <><CheckCircle2 className="w-4 h-4" /> Mark Reviewed</>
                  )}
                </motion.button>
              </div>
            </div>

            {saveResult && (
              <motion.div
                initial={{ opacity: 0, y: -4 }} animate={{ opacity: 1, y: 0 }}
                className={`mt-3 p-2 rounded-lg text-xs ${saveResult.success ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'}`}
              >
                {saveResult.success
                  ? (isReviewed ? 'Changes saved!' : 'Job marked as reviewed!')
                  : saveResult.error}
              </motion.div>
            )}

            {/* Read-only info row */}
            <div className="flex gap-6 mt-3 pt-3 border-t border-white/10">
              {job.submitted_at && (
                <span className="text-xs text-gray-500">Submitted: {new Date(job.submitted_at).toLocaleString()}</span>
              )}
              {isReviewed && job.reviewed_at && (
                <span className="text-xs text-gray-500">Last reviewed: {new Date(job.reviewed_at).toLocaleString()}</span>
              )}
              {job.mode && <span className="text-xs text-gray-500">Mode: {job.mode}</span>}
            </div>
          </div>
        </>
      )}
    </motion.div>
  )
}

// ─────────────────────────────────────────────────────────────
// Search / List view
// ─────────────────────────────────────────────────────────────
export default function JobsPanel() {
  const [search, setSearch] = useState('')
  const [filterStatus, setFilterStatus] = useState('')
  const [filterAuthor, setFilterAuthor] = useState('')
  const [filterBook, setFilterBook] = useState('')
  const [jobs, setJobs] = useState([])
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(0)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)
  const [selectedJobId, setSelectedJobId] = useState(null)

  const LIMIT = 20

  const fetchJobs = useCallback(async (pageNum = 0) => {
    setLoading(true)
    setError(null)
    try {
      const params = new URLSearchParams()
      if (search.trim()) params.set('search', search.trim())
      if (filterStatus) params.set('status', filterStatus)
      if (filterAuthor.trim()) params.set('author', filterAuthor.trim())
      if (filterBook.trim()) params.set('book', filterBook.trim())
      params.set('limit', LIMIT)
      params.set('offset', pageNum * LIMIT)

      const res = await axios.get(`${API_BASE}/jobs?${params}`)
      setJobs(res.data.jobs)
      setTotal(res.data.total)
      setPage(pageNum)
    } catch (err) {
      setError(err.response?.data?.detail || err.message)
    } finally {
      setLoading(false)
    }
  }, [search, filterStatus, filterAuthor, filterBook])

  useEffect(() => { fetchJobs(0) }, []) // eslint-disable-line react-hooks/exhaustive-deps

  const handleReviewed = (updatedJob) => {
    setJobs(prev => prev.map(j => j.id === updatedJob.id ? { ...j, ...updatedJob } : j))
  }

  const totalPages = Math.ceil(total / LIMIT)

  // When a job is selected show full-screen detail
  if (selectedJobId) {
    return (
      <AnimatePresence mode="wait">
        <JobDetail
          key={selectedJobId}
          jobId={selectedJobId}
          onClose={() => setSelectedJobId(null)}
          onReviewed={handleReviewed}
        />
      </AnimatePresence>
    )
  }

  return (
    <motion.div
      key="job_list"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      className="space-y-4"
    >
      {/* Search form */}
      <div className="glass p-4 rounded-2xl space-y-3">
        <form onSubmit={e => { e.preventDefault(); fetchJobs(0) }} className="flex gap-2">
          <input
            type="text"
            value={search}
            onChange={e => setSearch(e.target.value)}
            placeholder="Search all fields..."
            className={`${INPUT_CLASS} flex-1`}
          />
          <motion.button
            type="submit"
            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-cyan-600 text-sm font-medium"
            whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}
          >
            <Search className="w-4 h-4" /> Search
          </motion.button>
        </form>

        <div className="grid grid-cols-3 gap-2">
          <select value={filterStatus} onChange={e => setFilterStatus(e.target.value)} className={INPUT_CLASS}>
            <option value="">All statuses</option>
            <option value="unreviewed">Unreviewed</option>
            <option value="reviewed">Reviewed</option>
          </select>
          <input type="text" value={filterAuthor} onChange={e => setFilterAuthor(e.target.value)} placeholder="Author..." className={INPUT_CLASS} />
          <input type="text" value={filterBook} onChange={e => setFilterBook(e.target.value)} placeholder="Book..." className={INPUT_CLASS} />
        </div>

        <div className="flex items-center justify-between">
          <span className="text-xs text-gray-500">{total} job{total !== 1 ? 's' : ''} found</span>
          <button onClick={() => fetchJobs(page)} className="flex items-center gap-1 text-xs text-gray-400 hover:text-gray-200 transition-colors">
            <RefreshCw className="w-3 h-3" /> Refresh
          </button>
        </div>
      </div>

      {loading && <div className="flex justify-center py-8"><Loader2 className="w-6 h-6 animate-spin text-purple-400" /></div>}

      {error && (
        <div className="glass p-4 rounded-xl border-red-500/30 bg-red-500/10">
          <p className="text-sm text-red-400">{error}</p>
        </div>
      )}

      {!loading && !error && jobs.length === 0 && (
        <div className="glass p-8 rounded-2xl text-center">
          <FileText className="w-10 h-10 mx-auto mb-3 text-gray-600" />
          <p className="text-gray-400">No jobs found</p>
          <p className="text-xs text-gray-500 mt-1">Commit your first OCR job from the New Job tab</p>
        </div>
      )}

      {/* Results grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
        <AnimatePresence>
          {jobs.map(job => (
            <motion.button
              key={job.id}
              onClick={() => setSelectedJobId(job.id)}
              className="text-left glass p-4 rounded-xl border border-white/5 hover:border-white/20 hover:bg-white/5 transition-all"
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0 }}
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              layout
            >
              <div className="flex items-start justify-between gap-2 mb-2">
                <StatusBadge status={job.status} />
              </div>
              {job.book && <p className="text-sm font-medium text-gray-200 truncate">{job.book}</p>}
              <div className="flex items-center gap-2 mt-0.5">
                {job.chapter && <span className="text-xs text-gray-500">Ch. {job.chapter}</span>}
                {job.page && <span className="text-xs text-gray-500">p. {job.page}</span>}
              </div>
              {job.author && <p className="text-xs text-gray-400 mt-1">{job.author}</p>}
              <p className="text-xs text-gray-600 mt-2 font-mono">{new Date(job.submitted_at).toLocaleDateString()}</p>
            </motion.button>
          ))}
        </AnimatePresence>
      </div>

      {totalPages > 1 && (
        <div className="flex items-center justify-center gap-3">
          <button onClick={() => fetchJobs(page - 1)} disabled={page === 0} className="glass glass-hover p-2 rounded-lg disabled:opacity-30">
            <ChevronLeft className="w-4 h-4" />
          </button>
          <span className="text-sm text-gray-400">Page {page + 1} of {totalPages}</span>
          <button onClick={() => fetchJobs(page + 1)} disabled={page >= totalPages - 1} className="glass glass-hover p-2 rounded-lg disabled:opacity-30">
            <ChevronRight className="w-4 h-4" />
          </button>
        </div>
      )}
    </motion.div>
  )
}