import type { ArtifactRowProps, TriageViewProps } from "./types";
import { useArtifactRowModel } from "./hooks/useArtifactRowModel";
import { useTriageViewModel } from "./hooks/useTriageViewModel";

function ArtifactRow({
  artifact,
  recommendation,
  characters,
}: ArtifactRowProps) {
  const { metaLabel, metaClassName, metaIcon, score, characterNames, artifactSummary, substatRows } = useArtifactRowModel({
    recommendation,
    artifact,
    characters,
    characterIds: recommendation?.bestCharacters,
  });

  return (
    <div className="artifact-row">
      <div>
        <strong>{artifact.setName}</strong>
        <span>{artifactSummary}</span>
      </div>
      <div className="substats">
        {substatRows.map((substat) => (
          <span key={`${artifact.id}-${substat}`}>{substat}</span>
        ))}
      </div>
      <div className={metaClassName}>{metaIcon}{metaLabel}</div>
      <div className="reason">
        <strong>{score}</strong>
        <span>{characterNames}</span>
      </div>
    </div>
  );
}

export function TriageView({ snapshot }: TriageViewProps) {
  const { panelEyebrow, panelTitle, artifactCountLabel, recommendationByArtifact } = useTriageViewModel({ snapshot });

  return (
    <section className="panel">
      <div className="panel-heading">
        <div>
          <p className="eyebrow">{panelEyebrow}</p>
          <h2>{panelTitle}</h2>
        </div>
        <span className="muted">{artifactCountLabel}</span>
      </div>
      <div className="artifact-table">
        {snapshot.artifacts.map((artifact) => (
          <ArtifactRow
            key={artifact.id}
            artifact={artifact}
            recommendation={recommendationByArtifact.get(artifact.id)}
            characters={snapshot.characters}
          />
        ))}
      </div>
    </section>
  );
}
