import type { ArtifactResultCardProps, FieldConfidenceListProps, ReviewSampleCardProps, ScanSummaryFooterProps } from "./types";
import { useFieldConfidenceRowsModel, useReviewSampleCardModel, useScanResultCardModel } from "./hooks/useScanResultCardsModel";
import { useScanSummaryFooterModel } from "./hooks/useScanSummaryFooterModel";

export function FieldConfidenceList({ parsedArtifact }: FieldConfidenceListProps) {
  const rows = useFieldConfidenceRowsModel({ parsedArtifact });

  return (
    <div className="field-confidence-list">
      {rows.map(({ label, field, confidenceClassName }) => (
        <div className={`field-confidence ${confidenceClassName}`} key={label}>
          <span>{label}</span>
          <strong>{field.confidence}%</strong>
          <small>{field.source}</small>
        </div>
      ))}
    </div>
  );
}

export function ArtifactResultCard({ parsed }: ArtifactResultCardProps) {
  const { quality, levelText, equippedText, substats, noSubstatsText } = useScanResultCardModel({ parsed });

  return (
    <div className="artifact-result-card">
      <div className="artifact-result-head">
        <span className="artifact-set">{parsed.setName}</span>
        <span className={`quality-chip ${quality.className}`}>{quality.label}</span>
      </div>
      <span className="artifact-slot">{parsed.slot}</span>
      <div className="artifact-mainstat">
        <span>Hauptwert</span>
        <strong>{parsed.mainStat}</strong>
        <em>{parsed.mainValue}</em>
      </div>
      <div className="artifact-equipped">
        {levelText}
      </div>
      <div className="artifact-substats">
        {substats.length > 0 ? substats.map((substat) => <span key={substat}>{substat}</span>) : <span className="none">{noSubstatsText}</span>}
      </div>
      <div className="artifact-equipped">
        {equippedText}
      </div>
    </div>
  );
}

export function ReviewSampleCard({ entry }: ReviewSampleCardProps) {
  const model = useReviewSampleCardModel({ entry });
  const {
    artifactTitle,
    reasonText,
    sourceText,
    captureTargetText,
    resolutionText,
    gridText,
    ocrCountText,
    parsedSlotText,
    parsedMainText,
    parsedSetText,
    parsedEquippedText,
    savedAtText,
    showParsed,
    ocrRows,
  } = model;

  return (
    <article className="review-sample-card">
      <div className="review-sample-head">
        <div>
          <strong>{artifactTitle}</strong>
          <span>{reasonText}</span>
        </div>
        <time>{savedAtText}</time>
      </div>
      <div className="review-sample-meta">
        <span>{sourceText}</span>
        {captureTargetText && <span>{captureTargetText}</span>}
        <span>{resolutionText}</span>
        <span>{gridText}</span>
        <span>{ocrCountText}</span>
      </div>
      {showParsed && (
        <div className="review-sample-parsed">
          <span>{parsedSlotText}</span>
          <strong>{parsedMainText}</strong>
          <span>{parsedSetText}</span>
          <span>{parsedEquippedText}</span>
        </div>
      )}
      {ocrRows.length > 0 && (
        <div className="review-sample-ocr">
          {ocrRows.map((ocrRow) => (
            <span key={ocrRow.id}>{ocrRow.text}</span>
          ))}
        </div>
      )}
    </article>
  );
}

export function ScanSummaryFooter({ devMode, scanSummary, storedTotal }: ScanSummaryFooterProps) {
  const { summaryCopy, devCopy } = useScanSummaryFooterModel({
    devMode,
    scanSummary,
    storedTotal,
  });

  return (
    <>
      <p className="scan-summary-copy">{summaryCopy}</p>
      {devCopy && <p className="scan-summary-dev">{devCopy}</p>}
    </>
  );
}
