import type { ScanSettingsModalProps } from "./types";
import { useScanSettingsModalModel } from "./hooks/useScanSettingsModalModel";

export function ScanSettingsModal({
  open,
  latestCapture,
  controller,
  setSettingsOpen,
}: ScanSettingsModalProps) {
  const {
    scanLimit,
    skipRows,
    runtimeInfo,
    activeTargetCount,
  } = controller;

  const {
    closeSettings,
    handleScanLimitChange,
    handleSkipRowsChange,
    stopPropagation,
    inventoryCountText,
    inventoryClassName,
    scanLimitClassName,
    skipRowsClassName,
    activeTargetText,
    scanSummaryText,
  } = useScanSettingsModalModel({
    setSettingsOpen,
    setScanLimit: controller.setScanLimit,
    setScanLimitTouched: controller.setScanLimitTouched,
    setSkipRows: controller.setSkipRows,
    latestCapture,
    scanLimit,
    skipRows,
    activeTargetCount,
    runtimeInfo,
  });

  if (!open) return null;

  return (
    <div className="modal-backdrop" role="presentation" onClick={closeSettings}>
      <div className="modal-panel scanner-settings-modal" role="dialog" aria-modal="true" onClick={stopPropagation}>
        <div className="modal-header">
          <div>
            <p className="eyebrow">Scan-Setup</p>
            <h2>Operator-Einstellungen</h2>
          </div>
          <button className="ghost-button" onClick={closeSettings}>Schliessen</button>
        </div>
        <div className="modal-body">
          <div className="scan-config-strip">
            <label>
              <span>Anzahl Artifacts</span>
              <input
                type="number"
                min={1}
                max={1800}
                value={scanLimit}
                onChange={handleScanLimitChange}
              />
            </label>
            <label>
              <span>Zeilen ueberspringen</span>
              <input
                type="number"
                min={0}
                max={8}
                value={skipRows}
                onChange={handleSkipRowsChange}
              />
            </label>
            <p>
              Die App uebernimmt die erkannte Inventar-Anzahl nur als Startwert und Deckel nach oben. Dein manuell gesetztes Ziel bleibt erhalten.
              Mit "Zeilen ueberspringen" kannst du den Startverzug korrigieren, falls du nicht am Anfang der Liste beginnst.
            </p>
          </div>
          <div className="scanner-preflight diagnostics-preflight">
            <div className={inventoryClassName}>
              <span>Inventarzaehler</span>
              <strong>{inventoryCountText}</strong>
            </div>
            <div className={scanLimitClassName}>
              <span>Limit</span>
              <strong>{scanLimit}</strong>
            </div>
            <div className={skipRowsClassName}>
              <span>Skip</span>
              <strong>{skipRows}</strong>
            </div>
            <p>{activeTargetText}</p>
          </div>
          <p className="scan-summary-copy">{scanSummaryText}</p>
        </div>
      </div>
    </div>
  );
}
