import { cn } from '@/lib/cn'
import { PlantIcon } from '@/components/plants/PlantIcon'
import type { Plant } from '@/lib/plants'

/**
 * The Seed Tray strip in the focus-mode toolbar: a row of the garden's
 * kept-at-hand plants. Tap a chip to arm that plant for tap-to-place (the armed
 * chip is highlighted); ✕ removes it from the tray; the trailing "+ Plant" chip
 * opens the full catalog picker. See useSeedTray for persistence.
 */
export function SeedTray({
  trayPlants,
  armedPlantId,
  onArm,
  onRemove,
  onOpenPicker,
}: {
  trayPlants: Plant[]
  armedPlantId: number | null
  onArm: (plant: Plant) => void
  onRemove: (id: number) => void
  onOpenPicker: () => void
}) {
  return (
    <div className="flex flex-wrap items-center gap-1.5">
      {trayPlants.map((p) => {
        const active = p.id === armedPlantId
        return (
          <span
            key={p.id}
            className={cn(
              'inline-flex items-center rounded-full border text-xs transition-colors',
              active ? 'border-accent bg-accent/10 text-accent-strong' : 'border-border bg-surface text-fg',
            )}
          >
            <button
              type="button"
              onClick={() => onArm(p)}
              aria-pressed={active}
              title={active ? `Placing ${p.name}` : `Place ${p.name}`}
              className="flex items-center gap-1.5 rounded-full py-1 pl-1.5 pr-1 outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
            >
              <PlantIcon color={p.color} icon={p.icon} className="h-5 w-5 rounded-full text-[0.65rem]" />
              <span className="max-w-[6rem] truncate font-medium">{p.name}</span>
            </button>
            <button
              type="button"
              onClick={() => onRemove(p.id)}
              aria-label={`Remove ${p.name} from tray`}
              className="rounded-full px-1.5 py-1 text-muted outline-none hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40"
            >
              ✕
            </button>
          </span>
        )
      })}
      <button
        type="button"
        onClick={onOpenPicker}
        className="inline-flex items-center gap-1 rounded-full border border-dashed border-border px-2.5 py-1 text-xs font-medium text-muted outline-none transition-colors hover:border-accent hover:text-accent-strong focus-visible:ring-2 focus-visible:ring-accent/40"
      >
        + Plant
      </button>
    </div>
  )
}