import {
  AlertTriangle,
  Camera,
  Play,
  Radar,
  RefreshCw,
  SlidersHorizontal,
  Wrench,
} from "lucide-react";
import type { ScanTopControlsSectionProps } from "./types";
import { useScanTopControlsModel } from "./hooks/useScanTopControlsModel";

export function ScanTopControlsSection({
  captureSources,
  selectedSourceId,
  setSelectedSourceId,
  refreshCaptureSources,
  captureSelectedSource,
  bridgeReady,
  isScanning,
  controller,
}: ScanTopControlsSectionProps) {
  const {
    shouldShowGenshinSourceButton,
    bridgeDisabled,
    canStartAutoScan,
    canStartManualScan,
    canCaptureSingle,
    autoScanRunning,
    handleSourceChange,
    selectGenshinSource,
    openSettings,
    openDiagnostics,
    captureSingleArtifact,
    stopScan,
    runVisibleGridScan,
    runAutoReviewScan,
    bridgeStatusText,
    bridgePillClass,
    runtimeStatusText,
    runtimePillClass,
    playerStatusText,
    autoScanButtonTitle,
    autoScanButtonLabel,
    manualScanButtonTitle,
    captureSingleButtonTitle,
    refreshCaptureSourcesTitle,
    diagnosticsButtonTitle,
    scanSetupButtonTitle,
    showPlayerProgress,
    progressWidth,
    progressStats,
  } = useScanTopControlsModel({
    captureSources,
    selectedSourceId,
    setSelectedSourceId,
    captureSelectedSource,
    bridgeReady,
    isScanning,
    controller,
  });

  return (
    <>
      <div className="scanner-header">
        <div>
          <p className="eyebrow">Scanner</p>
          <h2>Artifact capture workspace</h2>
          <p className="scanner-subcopy">Grosse Vorschau vorn, klare Aktionen oben, Diagnose und Review nur bei Bedarf.</p>
        </div>
        <div className="scanner-header-pills">
          <span className={`runtime-pill ${bridgePillClass}`}>{bridgeStatusText}</span>
          <span className={`runtime-pill ${runtimePillClass}`}>{runtimeStatusText}</span>
        </div>
      </div>

      {!bridgeReady && (
        <div className="bridge-banner">
          <AlertTriangle size={16} />
          Die Capture-Verbindung fehlt. Bitte das Electron-App-Fenster verwenden - die Browser-Vorschau kann Genshin nicht scannen.
        </div>
      )}

      <div className="player-scan-card">
        <div className="player-scan-row">
          <label className="source-select">
            <span>Quelle</span>
            <select value={selectedSourceId} onChange={handleSourceChange} disabled={bridgeDisabled}>
              {captureSources.length === 0 && <option value="">Keine Quellen gefunden</option>}
              {captureSources.map((source) => (
                <option key={source.id} value={source.id}>
                  {source.isGenshinCandidate ? "Genshin - " : ""}{source.name}
                </option>
              ))}
            </select>
          </label>
          <button
            className="ghost-button"
            onClick={refreshCaptureSources}
            title={refreshCaptureSourcesTitle}
            disabled={!bridgeReady}
          >
            <RefreshCw size={15} />
            Neu suchen
          </button>
          {shouldShowGenshinSourceButton && (
            <button className="ghost-button" onClick={selectGenshinSource} disabled={!bridgeReady}>
              <Radar size={15} />
              Genshin waehlen
            </button>
          )}
          <button
            className="ghost-button"
            onClick={openSettings}
            disabled={bridgeDisabled}
            title={scanSetupButtonTitle}
          >
            <SlidersHorizontal size={15} />
            Scan-Setup
          </button>
          <button
            className="ghost-button dev-toggle"
            onClick={openDiagnostics}
            disabled={!bridgeReady}
            title={diagnosticsButtonTitle}
          >
            <Wrench size={15} />
            Scanner Diagnose
          </button>
        </div>

        <div className="player-scan-actions">
          <button
            className="primary-button scan-cta"
            onClick={runVisibleGridScan}
            disabled={!canStartAutoScan}
            title={autoScanButtonTitle}
          >
            <Play size={16} />
            {autoScanButtonLabel}
          </button>
          <button
            className="ghost-button"
            onClick={runAutoReviewScan}
            disabled={!canStartManualScan}
            title={manualScanButtonTitle}
          >
            <Radar size={15} />
            Manueller Scan
          </button>
          <button
            className="ghost-button"
            onClick={captureSingleArtifact}
            disabled={!canCaptureSingle}
            title={captureSingleButtonTitle}
          >
            <Camera size={15} />
            Einzelnes Artifact lesen
          </button>
          {autoScanRunning && (
            <button className="stop-button" onClick={stopScan}>
              Stop
            </button>
          )}
        </div>

        <p className="player-status">
          {playerStatusText}
        </p>

        {showPlayerProgress && (
          <div className="player-progress">
            <div className="player-progress-bar">
              <div style={{ width: `${progressWidth}%` }} />
            </div>
            <div className="player-progress-stats">
              {progressStats.map((entry) => (
                <span key={entry.label} className={entry.extraClass}>
                  <strong>{entry.value}</strong> {entry.label}
                </span>
              ))}
            </div>
          </div>
        )}
      </div>
    </>
  );
}
