import { AlertTriangle, Camera, Eye } from "lucide-react";
import { ArtifactResultCard } from "./ScanResultCards";
import { useScanMainSectionModel } from "./hooks/useScanMainSectionModel";
import type { ScanMainSectionProps } from "./types";

export function ScanMainSection({
  latestCapture,
  captureStatus,
  parsedArtifact,
  sourceLabel,
  gridLabel,
  inventoryLabel,
  activeTargetCount,
  storedTotal,
  reviewSampleTotal,
  learningRulesLoaded,
  learningRuleCount,
  setDetailsOpen,
  autoScanRunning,
  canOpenReviewQueue,
  openReviewQueue,
}: ScanMainSectionProps) {
  const {
    canOpenDetails,
    handleOpenDetails,
    handleOpenReviewQueue,
    captureImageSrc,
    captureImageAlt,
    hasCapture,
    captureModeText,
    resultHeading,
    noArtifactText,
    noCaptureMessage,
    targetLabel,
    dbLabel,
    reviewLabel,
    rulesLabel,
  } = useScanMainSectionModel({
    latestCapture,
    parsedArtifact,
    activeTargetCount,
    storedTotal,
    reviewSampleTotal,
    learningRulesLoaded,
    learningRuleCount,
    setDetailsOpen,
    openReviewQueue,
  });

  return (
    <div className="scanner-main-grid">
      <div className="capture-stage-shell">
        <div className="capture-stage">
          {hasCapture ? (
            <img src={captureImageSrc} alt={captureImageAlt} />
          ) : (
            <div className="empty-stage">
              <Camera size={28} />
              <strong>Noch kein Bild</strong>
              <span>{noCaptureMessage}</span>
            </div>
          )}
        </div>
        <div className="capture-stage-meta">
          <div><span>Quelle</span><strong>{sourceLabel}</strong></div>
          <div><span>Grid</span><strong>{gridLabel}</strong></div>
          <div><span>Inventar</span><strong>{inventoryLabel}</strong></div>
          <div><span>Modus</span><strong>{captureModeText}</strong></div>
        </div>
      </div>

      <aside className="scanner-result-panel">
        <div className="result-heading">
          <p className="eyebrow">Zuletzt gelesen</p>
          <h3>{resultHeading}</h3>
        </div>
        {parsedArtifact ? <ArtifactResultCard parsed={parsedArtifact} /> : (
          <p className="result-empty">{noArtifactText}</p>
        )}
        <div className="scanner-result-brief">
          <span>{targetLabel}</span>
          <span>{dbLabel}</span>
          <span>{reviewLabel}</span>
          <span>{rulesLabel}</span>
        </div>
        <div className="scanner-result-actions">
          <button
            className="ghost-button"
            onClick={handleOpenDetails}
            disabled={!canOpenDetails}
          >
            <Eye size={15} />
            Details
          </button>
          <button className="ghost-button" onClick={handleOpenReviewQueue} disabled={autoScanRunning || !canOpenReviewQueue}>
            <AlertTriangle size={15} />
            Review Queue
          </button>
        </div>
        <p className="scanner-result-caption">{captureStatus}</p>
      </aside>
    </div>
  );
}
