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

export function ScanMainSection({
  latestCapture,
  captureStatus,
  parsedArtifact,
  recentArtifacts,
  nativeScanResults,
  activeTargetCount,
  storedTotal,
  reviewSampleTotal,
  setDetailsOpen,
  autoScanRunning,
  canOpenReviewQueue,
  openReviewQueue,
  openInventory,
}: ScanMainSectionProps) {
  const {
    canOpenDetails,
    handleOpenDetails,
    handleOpenInventory,
    handleOpenReviewQueue,
    captureImageSrc,
    captureImageAlt,
    hasCapture,
    resultHeading,
    noArtifactText,
    noCaptureMessage,
    targetLabel,
    dbLabel,
    reviewLabel,
    recentRows,
    recentEmptyText,
    canOpenInventory,
  } = useScanMainSectionModel({
    latestCapture,
    parsedArtifact,
    recentArtifacts,
    nativeScanResults,
    activeTargetCount,
    storedTotal,
    reviewSampleTotal,
    setDetailsOpen,
    openReviewQueue,
    openInventory,
  });

  return (
    <div className="scanner-main-grid">
      <div className={`capture-stage-shell ${hasCapture ? "has-capture" : "is-empty"}`}>
        <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>

      <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-rail">
          <div className="result-rail-heading">
            <p className="eyebrow">Letzte Ergebnisse</p>
            <span>{recentRows.length}</span>
          </div>
          {recentRows.length > 0 ? (
            <div className="result-rail-list">
              {recentRows.map((row) => (
                <button
                  className="result-rail-row"
                  key={row.id}
                  onClick={handleOpenInventory}
                  disabled={!canOpenInventory}
                  title="Im Inventory oeffnen"
                >
                  <span className="result-rail-index">{row.sequence}</span>
                  <span className="result-rail-main">
                    <strong>{row.title}</strong>
                    <span>{row.meta}</span>
                  </span>
                  <span className="result-rail-score">{row.score}</span>
                  <span className={`result-rail-status ${row.statusClassName}`}>{row.statusLabel}</span>
                </button>
              ))}
            </div>
          ) : (
            <p className="result-empty compact">{recentEmptyText}</p>
          )}
        </div>
        <div className="scanner-result-brief">
          <span>{targetLabel}</span>
          <span>{dbLabel}</span>
          <span>{reviewLabel}</span>
        </div>
        <div className="scanner-result-actions">
          <button className="ghost-button" onClick={handleOpenDetails} disabled={!canOpenDetails}>
            Details
          </button>
          <button className="ghost-button" onClick={handleOpenReviewQueue} disabled={autoScanRunning || !canOpenReviewQueue}>
            <AlertTriangle size={15} />
            Review
          </button>
        </div>
        <p className="scanner-result-caption">{captureStatus}</p>
      </aside>
    </div>
  );
}
