import { useState } from "react"

import type { SelectionPatternScore } from "../api/selection.types"
import { patternCaseImageById } from "./pattern-case-assets"

interface PatternCaseImageProps {
  score: SelectionPatternScore | null
}

export function PatternCaseImage({ score }: PatternCaseImageProps) {
  const [failedSource, setFailedSource] = useState<string | null>(null)
  const matchedCase = score?.status === "failed" ? null : score?.case
  if (!matchedCase) return null

  const source =
    patternCaseImageById[matchedCase.id as keyof typeof patternCaseImageById]

  return (
    <section aria-labelledby="best-pattern-case" className="mt-4">
      <div className="mb-2 flex items-baseline justify-between gap-3">
        <h3 className="text-xs font-medium" id="best-pattern-case">
          最接近案例：{matchedCase.name}
        </h3>
        <span className="text-xs tabular-nums text-muted-foreground">
          {formatScore(score?.value)} 分
        </span>
      </div>
      {!source || failedSource === source ? (
        <p className="rounded-md border border-border/60 p-3 text-xs text-muted-foreground">
          案例图片暂不可用。
        </p>
      ) : (
        <img
          alt={`${matchedCase.name} B1 参考案例图`}
          className="aspect-2/1 w-full rounded-md border border-border/60 object-contain"
          loading="lazy"
          onError={() => setFailedSource(source)}
          src={source}
        />
      )}
    </section>
  )
}

function formatScore(value: number | null | undefined) {
  return value === null || value === undefined ? "—" : value.toFixed(2)
}