import { useState } from 'react'
import { cn } from '@/lib/utils'
import type { StepCategoryListItem } from '@/types'
import { Modal } from '@/components/common/Modal'

interface EditCategoryModalProps {
  isOpen: boolean
  onClose: () => void
  onSubmit: (data: { name: string; description: string }) => Promise<void>
  category: StepCategoryListItem | null
  isSaving?: boolean
}

export function EditCategoryModal({
  isOpen,
  onClose,
  onSubmit,
  category,
  isSaving = false
}: EditCategoryModalProps) {
  const [name, setName] = useState('')
  const [description, setDescription] = useState('')
  const [error, setError] = useState('')
  const [prevCategoryId, setPrevCategoryId] = useState<string | null>(null)

  // Pre-populate form when category changes (state-based tracking)
  if (category && category.id !== prevCategoryId) {
    setPrevCategoryId(category.id)
    setName(category.name)
    setDescription(category.description || '')
  }
  if (!category && prevCategoryId !== null) {
    setPrevCategoryId(null)
  }

  if (!category) return null

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')

    if (!name.trim()) {
      setError('Category name is required')
      return
    }

    if (name.length > 100) {
      setError('Category name must be 100 characters or less')
      return
    }

    try {
      await onSubmit({
        name: name.trim(),
        description: description.trim()
      })
    } catch {
      setError('Failed to update category')
    }
  }

  const handleClose = () => {
    if (!isSaving) {
      setError('')
      onClose()
    }
  }

  return (
    <Modal
      isOpen={isOpen}
      onClose={handleClose}
      title="Edit Category"
      size="sm"
      footer={
        <div className="flex justify-end gap-2">
          <button
            type="button"
            onClick={handleClose}
            disabled={isSaving}
            className={cn(
              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
              'hover:bg-accent hover:text-foreground disabled:opacity-50'
            )}
          >
            Cancel
          </button>
          <button
            type="submit"
            form="edit-category-form"
            disabled={isSaving || !name.trim()}
            className={cn(
              'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
              'hover:opacity-90 disabled:opacity-50'
            )}
          >
            {isSaving ? 'Saving...' : 'Save Changes'}
          </button>
        </div>
      }
    >
      <form id="edit-category-form" onSubmit={handleSubmit} className="space-y-4">
        {error && (
          <div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400">
            {error}
          </div>
        )}

        <div>
          <label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground">
            Category Name <span className="text-red-400">*</span>
          </label>
          <input
            id="edit-name"
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            disabled={isSaving}
            maxLength={100}
            placeholder="e.g., Network Troubleshooting"
            required
            className={cn(
              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
              'placeholder:text-muted-foreground',
              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
              'disabled:opacity-50'
            )}
          />
          <p className="mt-1 text-xs text-muted-foreground">
            {name.length}/100 characters
          </p>
        </div>

        <div>
          <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground">
            Description <span className="text-muted-foreground">(optional)</span>
          </label>
          <textarea
            id="edit-description"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            disabled={isSaving}
            rows={3}
            placeholder="Brief description of this category..."
            className={cn(
              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
              'placeholder:text-muted-foreground',
              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
              'disabled:opacity-50'
            )}
          />
        </div>
      </form>
    </Modal>
  )
}