import { AlertTriangle } from "lucide-react";
import { useBuildCardModel } from "./hooks/useBuildCardModel";
import { useBuildsViewModel } from "./hooks/useBuildsViewModel";
import type { BuildCardProps, BuildsViewProps } from "./types";

function BuildCard({ build, snapshot }: BuildCardProps) {
  const artifactLookup = new Map(snapshot.artifacts.map((artifact) => [artifact.id, artifact]));
  const {
    characterName,
    qualityLabel,
    roundedScore,
    explanation,
    artifactRows,
    warnings,
    hasWarnings,
  } = useBuildCardModel({
    build,
    characters: snapshot.characters,
    artifactLookup,
  });

  return (
    <section className="panel build-card">
      <div className="panel-heading">
        <div>
          <p className="eyebrow">{qualityLabel}</p>
          <h2>{characterName}</h2>
        </div>
        <strong className="score">{roundedScore}</strong>
      </div>
      <p className="build-copy">{explanation}</p>
      <div className="build-pieces">
        {artifactRows.map((artifact) => (
          <div key={artifact.id}>
            <span>{artifact.slot}</span>
            <strong>{artifact.setName}</strong>
            <small>{artifact.details}</small>
          </div>
        ))}
      </div>
      {hasWarnings && (
        <div className="warning-list">
          {warnings.map((warning) => (
            <span key={warning}><AlertTriangle size={14} />{warning}</span>
          ))}
        </div>
      )}
    </section>
  );
}

export function BuildsView({ snapshot }: BuildsViewProps) {
  const { visibleBuilds } = useBuildsViewModel({ snapshot });

  return (
    <div className="build-grid">
      {visibleBuilds.map(({ build }) => (
        <BuildCard key={build.id} build={build} snapshot={snapshot} />
      ))}
    </div>
  );
}
