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

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

  const {
    closeSettings,
    stopPropagation,
    scanLimitControl,
    skipRowsControl,
    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-settings-layout">
            <div className="scan-settings-controls">
              <StepperControl control={scanLimitControl} />
              <StepperControl control={skipRowsControl} />
            </div>
            <div className="scan-settings-note">
              <strong>Manuelle Werte bleiben erhalten.</strong>
              <span>Die erkannte Inventar-Anzahl ist nur ein Vorschlag und oberer Deckel. Startzeilen brauchst du nur, wenn du nicht oben beginnst.</span>
            </div>
          </div>
          <div className="scanner-preflight settings-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>
  );
}

function StepperControl({ control }: { control: StepperControlModel }) {
  return (
    <section className="settings-stepper" aria-label={control.label}>
      <div className="settings-stepper-head">
        <div>
          <span>{control.label}</span>
          <small>{control.helper}</small>
        </div>
      </div>
      <div className="settings-stepper-row">
        <button type="button" className="stepper-button" onClick={control.decrement} aria-label={`${control.label} verringern`}>
          −
        </button>
        <input
          inputMode="numeric"
          pattern="[0-9]*"
          min={control.min}
          max={control.max}
          value={control.value}
          onChange={control.onChange}
          onBlur={control.onBlur}
          onKeyDown={control.onKeyDown}
          aria-label={control.label}
        />
        <button type="button" className="stepper-button" onClick={control.increment} aria-label={`${control.label} erhoehen`}>
          +
        </button>
      </div>
      <div className="settings-presets" aria-label={`${control.label} Presets`}>
        {control.presets.map((value) => (
          <button type="button" key={value} onClick={() => control.applyPreset(value)}>
            {value}
          </button>
        ))}
      </div>
    </section>
  );
}
