OCR/frontend/src/pages/ResultsPage.tsx

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { useQuery } from '@tanstack/react-query'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import ResultsTable from '@/components/ResultsTable'
import MarkdownPreview from '@/components/MarkdownPreview'
import { useToast } from '@/components/ui/toast'
import { useUploadStore } from '@/store/uploadStore'
import { apiClient } from '@/services/api'
import { FileText, Download, Languages, AlertCircle, TrendingUp, Clock, Layers } from 'lucide-react'

export default function ResultsPage() {
  const { t } = useTranslation()
  const navigate = useNavigate()
  const { toast } = useToast()
  const { batchId } = useUploadStore()
  const [selectedFileId, setSelectedFileId] = useState<number | null>(null)

  // Get batch status to show results
  const { data: batchStatus } = useQuery({
    queryKey: ['batchStatus', batchId],
    queryFn: () => apiClient.getBatchStatus(batchId!),
    enabled: !!batchId,
  })

  // Get OCR result for selected file
  const { data: ocrResult, isLoading: isLoadingResult } = useQuery({
    queryKey: ['ocrResult', selectedFileId],
    queryFn: () => apiClient.getOCRResult(selectedFileId!),
    enabled: !!selectedFileId,
  })

  const handleViewResult = (fileId: number) => {
    setSelectedFileId(fileId)
  }

  const handleDownloadPDF = async (fileId: number) => {
    try {
      const blob = await apiClient.exportPDF(fileId)
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `ocr-result-${fileId}.pdf`
      document.body.appendChild(a)
      a.click()
      window.URL.revokeObjectURL(url)
      document.body.removeChild(a)

      toast({
        title: t('export.exportSuccess'),
        description: 'PDF 已下載',
        variant: 'success',
      })
    } catch (error: any) {
      toast({
        title: t('export.exportError'),
        description: error.response?.data?.detail || t('errors.networkError'),
        variant: 'destructive',
      })
    }
  }

  const handleExport = () => {
    navigate('/export')
  }

  // Show helpful message when no batch is selected
  if (!batchId) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <Card className="max-w-md text-center">
          <CardHeader>
            <div className="flex justify-center mb-4">
              <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center">
                <AlertCircle className="w-8 h-8 text-muted-foreground" />
              </div>
            </div>
            <CardTitle className="text-xl">{t('results.title')}</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-muted-foreground">
              {t('results.noBatchMessage', { defaultValue: '尚未選擇任何批次。請先上傳並處理檔案。' })}
            </p>
            <Button onClick={() => navigate('/upload')} size="lg">
              {t('results.goToUpload', { defaultValue: '前往上傳頁面' })}
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

  const completedFiles = batchStatus?.files.filter((f) => f.status === 'completed') || []

  return (
    <div className="space-y-6">
      {/* Page Header */}
      <div className="page-header">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="page-title">{t('results.title')}</h1>
            <p className="text-muted-foreground mt-1">
              批次 ID: <span className="font-mono text-primary">{batchId}</span> · 已完成 {completedFiles.length} 個檔案
            </p>
          </div>
          <div className="flex gap-3">
            <Button onClick={handleExport} className="gap-2">
              <Download className="w-4 h-4" />
              {t('nav.export')}
            </Button>
            <Button
              variant="outline"
              disabled
              title={t('translation.comingSoon')}
              className="gap-2"
            >
              <Languages className="w-4 h-4" />
              {t('translation.title')}
              <span className="text-xs bg-warning/20 text-warning px-2 py-0.5 rounded ml-1">
                即將推出
              </span>
            </Button>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
        {/* Results Table - Takes 2 columns */}
        <div className="lg:col-span-2">
          <ResultsTable
            files={batchStatus?.files || []}
            onViewResult={handleViewResult}
            onDownloadPDF={handleDownloadPDF}
          />
        </div>

        {/* Preview Panel - Takes 3 columns */}
        <div className="lg:col-span-3">
          {selectedFileId && ocrResult ? (
            <div className="space-y-4">
              {/* Preview Card */}
              <MarkdownPreview
                title={`${t('results.viewMarkdown')} - ${ocrResult.filename}`}
                content={ocrResult.markdown_content}
              />

              {/* Stats Grid */}
              <div className="grid grid-cols-3 gap-3">
                <Card>
                  <CardContent className="p-4">
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-success/10 rounded-lg">
                        <TrendingUp className="w-5 h-5 text-success" />
                      </div>
                      <div>
                        <p className="text-xs text-muted-foreground">準確率</p>
                        <p className="text-lg font-bold text-foreground">
                          {((ocrResult.confidence || 0) * 100).toFixed(1)}%
                        </p>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <Card>
                  <CardContent className="p-4">
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-primary/10 rounded-lg">
                        <Clock className="w-5 h-5 text-primary" />
                      </div>
                      <div>
                        <p className="text-xs text-muted-foreground">處理時間</p>
                        <p className="text-lg font-bold text-foreground">
                          {(ocrResult.processing_time || 0).toFixed(2)}s
                        </p>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <Card>
                  <CardContent className="p-4">
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-accent/10 rounded-lg">
                        <Layers className="w-5 h-5 text-accent" />
                      </div>
                      <div>
                        <p className="text-xs text-muted-foreground">文字區塊</p>
                        <p className="text-lg font-bold text-foreground">
                          {ocrResult.json_data?.total_text_regions || 0}
                        </p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          ) : (
            <Card className="h-full min-h-[400px]">
              <CardContent className="h-full flex flex-col items-center justify-center p-12">
                <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
                  <FileText className="w-8 h-8 text-muted-foreground" />
                </div>
                <p className="text-muted-foreground text-center">
                  {isLoadingResult ? t('common.loading') : '選擇左側檔案以查看詳細結果'}
                </p>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}