Scrum4Me/components/products/pr-strategy-select.tsx

'use client'

import { useState, useTransition } from 'react'
import { toast } from 'sonner'
import { updatePrStrategyAction } from '@/actions/products'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
} from '@/components/ui/select'

type PrStrategy = 'SPRINT' | 'STORY'

interface PrStrategySelectProps {
  productId: string
  initialValue: PrStrategy
}

const STRATEGY_LABELS: Record<PrStrategy, string> = {
  SPRINT: 'Per sprint — één PR voor de hele sprint, klaar voor review aan eind',
  STORY: 'Per story — auto-merge na CI groen, één PR per story',
}

export function PrStrategySelect({ productId, initialValue }: PrStrategySelectProps) {
  const [value, setValue] = useState<PrStrategy>(initialValue)
  const [isPending, startTransition] = useTransition()

  function handleChange(next: string | null) {
    if (next !== 'SPRINT' && next !== 'STORY') return
    if (next === value) return
    const previous = value
    setValue(next)
    startTransition(async () => {
      const result = await updatePrStrategyAction(productId, next)
      if ('error' in result && result.error) {
        setValue(previous)
        toast.error(typeof result.error === 'string' ? result.error : 'Opslaan mislukt')
      }
    })
  }

  return (
    <div className="flex flex-col gap-2">
      <Select value={value} onValueChange={handleChange} disabled={isPending}>
        <SelectTrigger className="w-full max-w-xl">
          {STRATEGY_LABELS[value]}
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="SPRINT">{STRATEGY_LABELS.SPRINT}</SelectItem>
          <SelectItem value="STORY">{STRATEGY_LABELS.STORY}</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}