import React, { useState } from 'react';
import { OcrDocument } from '../../types';

interface OcrReviewModalProps {
  isOpen: boolean;
  onClose: () => void;
  document: OcrDocument;
  onSave: (updatedDocument: OcrDocument) => void;
}

const OcrReviewModal: React.FC<OcrReviewModalProps> = ({ isOpen, onClose, document, onSave }) => {
  const [extractedText, setExtractedText] = useState(document.extractedText);

  const handleSave = () => {
    onSave({ ...document, extractedText, status: 'Completed' });
    onClose();
  };

  if (!isOpen) return null;

  const accuracyColor =
    document.accuracy > 95
      ? 'text-green-600'
      : document.accuracy > 80
        ? 'text-yellow-600'
        : 'text-red-600';

  return (
    <div
      className="fixed inset-0 bg-black bg-opacity-60 flex justify-center items-center z-50 p-4"
      onClick={onClose}
    >
      <div
        className="bg-white rounded-xl shadow-2xl w-full max-w-5xl h-[90vh] flex flex-col"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="p-4 border-b">
          <div className="flex justify-between items-center">
            <div>
              <h2 className="text-xl font-bold text-gray-800">Tinjau Dokumen OCR</h2>
              <p className="text-sm text-gray-500">{document.fileName}</p>
            </div>
            <button
              type="button"
              onClick={onClose}
              className="text-gray-400 hover:text-gray-600 text-2xl"
            >
              &times;
            </button>
          </div>
        </div>

        <div className="flex-grow p-4 grid grid-cols-1 md:grid-cols-2 gap-4 overflow-hidden">
          {/* Image Viewer */}
          <div className="bg-gray-100 rounded-lg flex items-center justify-center overflow-auto p-2">
            <img
              src={document.imageUrl}
              alt="Document Scan"
              className="max-w-full max-h-full object-contain"
            />
          </div>

          {/* Extracted Text Editor */}
          <div className="flex flex-col">
            <div className="flex justify-between items-center mb-2">
              <h3 className="font-semibold">Teks Hasil Ekstraksi</h3>
              <div className="text-sm">
                Akurasi:{' '}
                <span className={`font-bold ${accuracyColor}`}>
                  {document.accuracy.toFixed(1)}%
                </span>
              </div>
            </div>
            <textarea
              value={extractedText}
              onChange={(e) => setExtractedText(e.target.value)}
              className="w-full flex-grow p-3 border border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500 font-mono text-sm"
              placeholder="Teks yang diekstrak akan muncul di sini..."
            />
          </div>
        </div>

        <div className="bg-gray-100 px-6 py-3 rounded-b-xl flex justify-end space-x-3">
          <button
            onClick={onClose}
            className="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 font-medium"
          >
            Tutup
          </button>
          <button
            onClick={handleSave}
            className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 font-medium shadow-sm"
          >
            <i className="fa-solid fa-check mr-2"></i> Validasi & Simpan
          </button>
        </div>
      </div>
    </div>
  );
};

export default OcrReviewModal;