import { AlertTriangle, Eye, Wrench } from "lucide-react";
import type { ScanDiagnosticsModalProps } from "./types";
import { useScanDiagnosticsModalModel } from "./hooks/useScanDiagnosticsModalModel";

export function ScanDiagnosticsModal({
  open,
  captureStatus,
  latestCapture,
  controller,
  setDetailsOpen,
  setDiagnosticsOpen,
}: ScanDiagnosticsModalProps) {
  const {
    toggleDevMode,
  } = controller;

  const {
    closeDiagnostics,
    openDetails,
    handleSaveReviewSample,
    stopPropagation,
    canOpenDetails,
    statusTitle,
    rightsClassName,
    rightsValue,
    genshinClassName,
    genshinValue,
    shouldShowAdminBanner,
    gridSourceClass,
    gridMainValue,
    gridMetaValue,
    learningRulesText,
    learningRulesSubtext,
    autoScanModeLabel,
    autoScanRunning,
    fingerprintText,
    runtimeRows,
    scanLimitText,
    scanTipText,
    autoScanStatsLines,
    playerProgress,
    showDevRows,
    reviewStatus,
    automationLogLines,
    canSaveReviewSample,
  } = useScanDiagnosticsModalModel({
    setDetailsOpen,
    setDiagnosticsOpen,
    saveReviewSample: controller.saveReviewSample,
    canSaveReviewSample: controller.canSaveReviewSample,
    latestCapture,
    controller,
    captureStatus,
  });

  if (!open) return null;

  return (
    <div className="modal-backdrop" role="presentation" onClick={closeDiagnostics}>
      <div className="modal-panel scanner-diagnostics-modal" role="dialog" aria-modal="true" onClick={stopPropagation}>
        <div className="modal-header">
          <div>
            <p className="eyebrow">Scanner Diagnose</p>
            <h2>Input, Grid & Lernstatus</h2>
          </div>
          <button className="ghost-button" onClick={closeDiagnostics}>Schliessen</button>
        </div>
        <div className="modal-body">
          <div className="diagnostics-actions">
            <button className="ghost-button" onClick={toggleDevMode}>
              <Wrench size={15} />
              {statusTitle}
            </button>
          </div>

          <div className="scanner-preflight diagnostics-preflight">
            <div className={rightsClassName}>
              <span>App-Rechte</span>
              <strong>{rightsValue}</strong>
            </div>
            <div className={genshinClassName}>
              <span>Genshin</span>
              <strong>{genshinValue}</strong>
            </div>
          </div>
          {shouldShowAdminBanner && (
            <p className="scanner-subcopy">
              App laeuft im Standard-Modus. Auto-Scan braucht Administrator-Rechte: App schliessen und als Administrator neu starten (z.B. Terminal per Rechtsklick "Als Administrator ausfuehren" und darin "npm run dev").
            </p>
          )}

          <div className={`grid-detection-strip ${gridSourceClass}`}>
            <span>Tile grid</span>
            <strong>{gridMainValue}</strong>
            <small>{gridMetaValue}</small>
          </div>

          <div className="learning-strip">
            <span>Learning</span>
            <strong>{learningRulesText}</strong>
            <small>{learningRulesSubtext}</small>
          </div>

          {playerProgress.show && (
            <div className="auto-scan-strip">
              <span>{autoScanModeLabel}</span>
              {autoScanStatsLines.map((entry) => (
                <span className="auto-scan-stat" key={entry.label}>
                  <strong>{entry.value}</strong>
                  <small>{entry.label}</small>
                </span>
              ))}
            </div>
          )}

          <div className="learning-strip">
            <span>Fingerprint</span>
            <strong>{fingerprintText}</strong>
            <small>Active capture fingerprint used for deterministic duplicate guard checks.</small>
          </div>

          {showDevRows && (
            <div className="scanner-status-row diagnostics-status">
              {runtimeRows.map((row) => (
                <span key={row}>{row}</span>
              ))}
            </div>
          )}

          {autoScanRunning && playerProgress.show && (
            <div className="player-progress">
              <div className="player-progress-bar">
                <div style={{ width: `${playerProgress.width}%` }} />
              </div>
            </div>
          )}

          {reviewStatus && (
            <p className="review-status">{reviewStatus}</p>
          )}

          <div className="automation-log">
            <span>Automation</span>
            <div className="automation-log-lines">
              {automationLogLines.length > 0 ? (
                automationLogLines.map((line, index) => (
                  <span key={`${index}-${line}`}>{line}</span>
                ))
              ) : (
                <strong>No scan activity yet.</strong>
              )}
            </div>
          </div>

          <div className="dev-section-actions">
            <button className="ghost-button" onClick={openDetails} disabled={!canOpenDetails}>
              <Eye size={15} />
              Crops, OCR & Confidence
            </button>
            <button className="ghost-button" onClick={handleSaveReviewSample} disabled={!canSaveReviewSample}>
              <AlertTriangle size={15} />
              Review-Sample speichern
            </button>
          </div>

          <p className="scanner-result-caption">{scanLimitText}</p>
          <p className="scan-summary-copy">{scanTipText}</p>
        </div>
      </div>
    </div>
  );
}
