import { cn } from '@/lib/cn'
import { PlantChip } from '@/components/plants/PlantChip'
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="inline-flex items-center">
            {/* Flat right edge so the remove button below seams into one pill. */}
            <PlantChip plant={p} active={active} onArm={onArm} rounded={false} />
            <button
              type="button"
              onClick={() => onRemove(p.id)}
              aria-label={`Remove ${p.name} from tray`}
              className={cn(
                'rounded-r-full border border-l-0 px-1.5 py-1 text-xs outline-none transition-colors focus-visible:ring-2 focus-visible:ring-accent/40',
                active
                  ? 'border-accent bg-accent/10 text-accent-strong hover:text-fg'
                  : 'border-border bg-surface text-muted hover:text-fg',
              )}
            >
              ✕
            </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>
  )
}
