/**
 * Item d'une ligne de la liste /historique — réécrit Sprint 4.7 selon maquette.
 *
 * Layout flex : Date · Libellé · Badge NCLC · Score · Chevron.
 * Couleur du badge NCLC selon seuil (cf. `nclcChipVariant`).
 *
 * Règle L : tokens DA Charcoal exclusivement.
 * Règle H : purement présentationnel.
 */

import { ChevronRight } from 'lucide-react'
import { Link } from 'react-router-dom'
import type { SimulationListItem as Item } from '@/entities/production/types'
import { formatShortDate, formatTaskLabel, nclcChipVariant } from '../lib/historique'

interface Props {
  item: Item
  isLast: boolean
}

const CHIP_BASE =
  'inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide'

const CHIP_OK = 'bg-success-soft text-success border-success/30'
const CHIP_WARN = 'bg-warning-soft text-warning border-warning/30'
const CHIP_ERR = 'bg-danger-soft text-danger border-danger/30'
const CHIP_NEUTRAL = 'bg-surface text-ink-secondary border-border'

function NclcBadge({ nclc }: { nclc: number }) {
  const variant = nclcChipVariant(nclc)
  const cls = variant === 'ok' ? CHIP_OK : variant === 'warn' ? CHIP_WARN : CHIP_ERR
  return <span className={`${CHIP_BASE} ${cls}`}>NCLC {nclc}</span>
}

export function SimulationListItem({ item, isLast }: Props) {
  const hasScore = item.score !== null && item.nclc !== null
  const borderClass = isLast ? '' : 'border-b border-border'

  return (
    <Link
      to={`/rapport/${item.id}`}
      className={`flex items-center gap-[14px] px-4 py-[14px] transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:shadow-focus ${borderClass}`}
    >
      <span className="w-[68px] shrink-0 text-[11.5px] tabular-nums text-ink-tertiary">
        {formatShortDate(item.created_at)}
      </span>

      <span className="min-w-0 flex-1 truncate text-[13px] font-medium text-ink-primary">
        {formatTaskLabel(item)}
      </span>

      {hasScore && item.nclc !== null ? (
        <NclcBadge nclc={item.nclc} />
      ) : (
        <span className={`${CHIP_BASE} ${CHIP_NEUTRAL}`}>En cours</span>
      )}

      <span className="min-w-[56px] text-right text-[16px] font-semibold tracking-[-0.02em] tabular-nums text-ink-primary">
        {hasScore ? `${item.score}/20` : '—/20'}
      </span>

      <ChevronRight className="size-[14px] shrink-0 text-ink-tertiary" aria-hidden="true" />
    </Link>
  )
}