import { useState, useEffect, useCallback } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import {
  Search, ChevronLeft, ChevronRight, CheckCircle2, Clock,
  User, BookOpen, FileText, Calendar, Hash, Loader2, X, Save,
  RefreshCw, Image as ImageIcon,
} from 'lucide-react'
import axios from 'axios'

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

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',
}

const STATUS_ICONS = {
  unreviewed: Clock,
  reviewed: CheckCircle2,
}

function StatusBadge({ status }) {
  const Icon = STATUS_ICONS[status] || 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>
  )
}

function JobDetail({ jobId, onClose, onReviewed }) {
  const [job, setJob] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  // Editable fields
  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 inputClass =
    '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 isReviewed = job?.status === 'reviewed'

  return (
    <div className="glass rounded-2xl flex flex-col overflow-hidden" style={{ minHeight: '600px' }}>
      {/* Header */}
      <div className="flex items-center justify-between px-5 py-4 border-b border-white/10 flex-shrink-0">
        <div className="flex items-center gap-3">
          {job && <StatusBadge status={job.status} />}
          <h3 className="font-semibold text-gray-200">Job Detail</h3>
        </div>
        <button onClick={onClose} className="glass glass-hover p-1.5 rounded-lg">
          <X className="w-4 h-4" />
        </button>
      </div>

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

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

      {job && !loading && (
        <div className="grid grid-cols-2 divide-x divide-white/10 flex-1 min-h-0">

          {/* ── Left column: image + read-only info ── */}
          <div className="overflow-y-auto p-5 space-y-4">
            <div>
              <p className="text-xs text-gray-400 mb-2 flex items-center gap-1">
                <ImageIcon className="w-3.5 h-3.5" /> Source Image
              </p>
              <img
                src={`${API_BASE}/jobs/${job.id}/image`}
                alt="Job source"
                className="w-full rounded-xl border border-white/10 bg-black/30"
                onError={e => { e.target.style.display = 'none' }}
              />
            </div>

            {/* Read-only job info */}
            <div className="space-y-1.5 text-xs text-gray-500">
              <p className="font-mono break-all">{job.id}</p>
              <p>Submitted: {new Date(job.submitted_at).toLocaleString()}</p>
              {job.mode && <p>Mode: {job.mode}</p>}
              {isReviewed && job.reviewed_at && (
                <p>Last reviewed: {new Date(job.reviewed_at).toLocaleString()}</p>
              )}
            </div>

            {/* Original OCR text (collapsed, for reviewed jobs) */}
            {isReviewed && job.ocr_text && (
              <details className="glass rounded-xl overflow-hidden">
                <summary className="px-3 py-2 cursor-pointer text-xs text-gray-500 hover:bg-white/5 transition-colors">
                  Original OCR Text
                </summary>
                <div className="px-3 py-3 border-t border-white/10">
                  <pre className="text-xs text-gray-500 whitespace-pre-wrap font-mono">{job.ocr_text}</pre>
                </div>
              </details>
            )}
          </div>

          {/* ── Right column: all editable fields ── */}
          <div className="overflow-y-auto p-5 space-y-5">

            {/* Metadata */}
            <div className="space-y-3">
              <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Metadata</p>
              <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 name"
                  className={inputClass}
                />
              </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={inputClass}
                />
              </div>
              <div className="grid grid-cols-2 gap-2">
                <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={inputClass}
                  />
                </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={inputClass}
                  />
                </div>
              </div>
            </div>

            {/* OCR / reviewed text */}
            <div className="space-y-1">
              <label className="text-xs text-gray-400 block">
                {isReviewed ? 'Reviewed Text' : 'OCR Text'}
                <span className="text-purple-400 ml-1">(editable)</span>
              </label>
              <textarea
                value={editedText}
                onChange={e => setEditedText(e.target.value)}
                rows={12}
                className={`${inputClass} resize-y font-mono`}
                placeholder="Text content..."
              />
            </div>

            {/* Reviewer + save */}
            <div className="space-y-3 pt-3 border-t border-white/10">
              <div>
                <label className="text-xs text-gray-400 mb-1 block">Reviewer Name</label>
                <input
                  type="text"
                  value={reviewerName}
                  onChange={e => setReviewerName(e.target.value)}
                  placeholder="Your name"
                  className={inputClass}
                />
              </div>

              {saveResult && (
                <div className={`p-3 rounded-lg text-sm ${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}
                </div>
              )}

              <motion.button
                onClick={handleSave}
                disabled={submitting || !reviewerName.trim()}
                className={`w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl 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>

        </div>
      )}
    </div>
  )
}

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 handleSearch = (e) => {
    e.preventDefault()
    fetchJobs(0)
  }

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

  const totalPages = Math.ceil(total / LIMIT)

  const inputClass =
    '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'

  return (
    // 1/3 list — 2/3 detail on large screens
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">

      {/* ── Left: Search + List ── */}
      <div className="lg:col-span-1 space-y-4">
        <div className="glass p-4 rounded-2xl space-y-3">
          <form onSubmit={handleSearch} className="flex gap-2">
            <input
              type="text"
              value={search}
              onChange={e => setSearch(e.target.value)}
              placeholder="Search all fields..."
              className={`${inputClass} 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={inputClass}
            >
              <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={inputClass}
            />
            <input
              type="text"
              value={filterBook}
              onChange={e => setFilterBook(e.target.value)}
              placeholder="Book..."
              className={inputClass}
            />
          </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>
        )}

        <div className="space-y-2">
          <AnimatePresence>
            {jobs.map(job => (
              <motion.button
                key={job.id}
                onClick={() => setSelectedJobId(job.id === selectedJobId ? null : job.id)}
                className={`w-full text-left glass p-4 rounded-xl transition-all border ${
                  selectedJobId === job.id
                    ? 'border-purple-500/50 bg-purple-500/5'
                    : 'border-white/5 hover:border-white/20 hover:bg-white/5'
                }`}
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0 }}
                layout
              >
                <div className="flex items-start justify-between gap-3">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1 flex-wrap">
                      {job.book && (
                        <span className="text-sm font-medium text-gray-200 truncate">{job.book}</span>
                      )}
                      {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">{job.author}</p>
                    )}
                    <p className="text-xs text-gray-600 mt-1 font-mono">
                      {new Date(job.submitted_at).toLocaleString()}
                    </p>
                  </div>
                  <div className="flex-shrink-0">
                    <StatusBadge status={job.status} />
                  </div>
                </div>
              </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>
        )}
      </div>

      {/* ── Right: Detail panel ── */}
      <div className="lg:col-span-2">
        <AnimatePresence mode="wait">
          {selectedJobId ? (
            <motion.div
              key={selectedJobId}
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: 20 }}
            >
              <JobDetail
                jobId={selectedJobId}
                onClose={() => setSelectedJobId(null)}
                onReviewed={handleReviewed}
              />
            </motion.div>
          ) : (
            <motion.div
              key="empty"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="glass p-8 rounded-2xl flex flex-col items-center justify-center text-center"
              style={{ minHeight: '300px' }}
            >
              <Search className="w-10 h-10 mb-3 text-gray-600" />
              <p className="text-gray-400">Select a job to view and edit details</p>
            </motion.div>
          )}
        </AnimatePresence>
      </div>

    </div>
  )
}