import { AlertTriangle } from "lucide-react";
import { ReviewSampleCard } from "../ScanResultCards";
import type { ScanReviewQueueModalProps } from "./types";
import { useScanReviewQueueModalModel } from "./hooks/useScanReviewQueueModalModel";

export function ScanReviewQueueModal({
  open,
  controller,
  setReviewQueueOpen,
}: ScanReviewQueueModalProps) {
  const { reviewSamples, reviewSampleTotal, reviewAnalysis, canReadReviewQueue, loadReviewQueue } = controller;
  const {
    closeReviewQueue,
    refreshReviewQueue,
    stopPropagation,
    emptyText,
    reviewAnalysisRows,
    showReviewAnalysis,
  } = useScanReviewQueueModalModel({
    setReviewQueueOpen,
    loadReviewQueue,
    reviewAnalysis,
    reviewSampleTotal,
  });

  if (!open) return null;

  return (
    <div className="modal-backdrop" role="presentation" onClick={closeReviewQueue}>
      <div className="modal-panel review-queue-modal" role="dialog" aria-modal="true" onClick={stopPropagation}>
        <div className="modal-header">
          <div>
            <p className="eyebrow">Review Queue</p>
            <h2>Unsichere Scanner-Faelle</h2>
          </div>
          <button className="ghost-button" onClick={closeReviewQueue}>Schliessen</button>
        </div>
        <div className="modal-body">
          <div className="review-queue-summary">
            <strong>{reviewSampleTotal}</strong>
            <span>Samples gespeichert</span>
            <button className="ghost-button" onClick={refreshReviewQueue} disabled={!canReadReviewQueue}>Aktualisieren</button>
          </div>
          {showReviewAnalysis && (
            <div className="review-analysis">
              {reviewAnalysisRows.map((row) => (
                <div key={row.label}>
                  <span>{row.label}</span><strong>{row.value}</strong>
                </div>
              ))}
            </div>
          )}
          {reviewSamples.length === 0 ? (
            <div className="empty-stage compact">
              <AlertTriangle size={22} />
              <strong>{emptyText}</strong>
              <span>Unsichere Auto-Scan- oder OCR-Faelle erscheinen hier automatisch.</span>
            </div>
          ) : (
            <div className="review-sample-list">
              {reviewSamples.map((entry, index) => (
                <ReviewSampleCard entry={entry} key={`${entry.savedAt}-${index}`} />
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
