import { Play, AlertTriangle } from "lucide-react";
import { ScanSummaryFooter } from "../ScanResultCards";
import type { ScanSummaryModalProps } from "./types";
import { useScanSummaryModalModel } from "./hooks/useScanSummaryModalModel";

export function ScanSummaryModal({
  open,
  controller,
  setScanSummary,
  devMode,
}: ScanSummaryModalProps) {
  const { closeSummary, stopPropagation, iconKind, summaryTitle, gridSummaryText } = useScanSummaryModalModel({
    setScanSummary,
    scanSummary: controller.scanSummary,
  });

  if (!open || !controller.scanSummary) return null;
  return (
    <div className="modal-backdrop scan-summary-backdrop" role="presentation" onClick={closeSummary}>
      <div className="scan-summary-modal" role="dialog" aria-modal="true" onClick={stopPropagation}>
        <div className="scan-summary-icon">
          {iconKind === "blocked" ? <AlertTriangle size={24} /> : <Play size={24} />}
        </div>
        <div>
          <p className="eyebrow">Scan-Ergebnis</p>
          <h2>{summaryTitle}</h2>
          {gridSummaryText && <p className="scan-summary-copy">{gridSummaryText}</p>}
        </div>
        <div className="scan-summary-grid player">
          <div><strong>{controller.scanSummary.stored}</strong><span>neu gespeichert</span></div>
          <div><strong>{controller.scanSummary.review}</strong><span>unsicher (Review)</span></div>
          <div><strong>{controller.scanSummary.duplicates}</strong><span>Duplikate</span></div>
          <div><strong>{controller.scanSummary.verified}</strong><span>verifizierte Ansichten</span></div>
        </div>
        <ScanSummaryFooter devMode={devMode} scanSummary={controller.scanSummary} storedTotal={controller.storedTotal} />
        <button className="primary-button" onClick={closeSummary}>Ok</button>
      </div>
    </div>
  );
}
