'use client'

import * as React from 'react'
import { cn } from '../../lib/utils'

export interface StageTransitionModalProps {
  open: boolean
  onClose: () => void
  onConfirm: (targetStage: string, notes?: string) => void
  currentStage: string
  stages: Array<{ id: string; label: string }>
  entityName?: string
  isSubmitting?: boolean
}

export function StageTransitionModal({
  open,
  onClose,
  onConfirm,
  currentStage,
  stages,
  entityName,
  isSubmitting = false,
}: StageTransitionModalProps) {
  const [targetStage, setTargetStage] = React.useState('')
  const [notes, setNotes] = React.useState('')

  React.useEffect(() => {
    if (open) {
      // Default to the first stage that isn't the current one
      const firstOther = stages.find((s) => s.id !== currentStage)
      setTargetStage(firstOther?.id ?? '')
      setNotes('')
    }
  }, [open, currentStage, stages])

  const handleConfirm = () => {
    if (!targetStage) return
    onConfirm(targetStage, notes.trim() || undefined)
  }

  const currentLabel = stages.find((s) => s.id === currentStage)?.label ?? currentStage

  if (!open) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
      <div
        className="fixed inset-0 bg-black/50"
        onClick={isSubmitting ? undefined : onClose}
        aria-hidden="true"
      />

      {/* Dialog */}
      <div className="relative z-50 w-full max-w-md rounded-lg border bg-background p-6 shadow-lg">
        <h2 className="text-lg font-semibold text-foreground">
          Move {entityName ? `"${entityName}"` : 'Item'} to Stage
        </h2>

        <div className="mt-4 space-y-4">
          {/* Current stage indicator */}
          <div className="space-y-1.5">
            <p className="text-sm font-medium text-foreground">Current Stage</p>
            <p className="text-sm text-muted-foreground">{currentLabel}</p>
          </div>

          {/* Target stage select */}
          <div className="space-y-1.5">
            <label htmlFor="target-stage" className="text-sm font-medium text-foreground">
              New Stage
            </label>
            <select
              id="target-stage"
              value={targetStage}
              onChange={(e) => setTargetStage(e.target.value)}
              disabled={isSubmitting}
              className={cn(
                'w-full rounded-md border bg-background px-3 py-2 text-sm',
                'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1',
                'disabled:opacity-50 disabled:cursor-not-allowed',
              )}
            >
              {stages
                .filter((s) => s.id !== currentStage)
                .map((stage) => (
                  <option key={stage.id} value={stage.id}>
                    {stage.label}
                  </option>
                ))}
            </select>
          </div>

          {/* Notes */}
          <div className="space-y-1.5">
            <label htmlFor="transition-notes" className="text-sm font-medium text-foreground">
              Notes <span className="text-muted-foreground">(optional)</span>
            </label>
            <textarea
              id="transition-notes"
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              placeholder="Add notes about this transition..."
              rows={3}
              disabled={isSubmitting}
              className={cn(
                'w-full rounded-md border bg-background px-3 py-2 text-sm resize-none',
                'placeholder:text-muted-foreground',
                'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1',
                'disabled:opacity-50 disabled:cursor-not-allowed',
              )}
            />
          </div>

          {/* Actions */}
          <div className="flex justify-end gap-2 pt-2">
            <button
              type="button"
              onClick={onClose}
              disabled={isSubmitting}
              className={cn(
                'rounded-md border px-4 py-2 text-sm font-medium',
                'hover:bg-muted transition-colors',
                'disabled:opacity-50 disabled:cursor-not-allowed',
              )}
            >
              Cancel
            </button>
            <button
              type="button"
              onClick={handleConfirm}
              disabled={isSubmitting || !targetStage}
              className={cn(
                'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
                'hover:bg-primary/90 transition-colors',
                'disabled:opacity-50 disabled:cursor-not-allowed',
              )}
            >
              {isSubmitting ? 'Moving...' : 'Confirm'}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}