import { useState } from 'react'
import { Modal } from '@/components/common/Modal'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { Textarea } from '@/components/ui/Textarea'

interface CreateCategoryModalProps {
  isOpen: boolean
  onClose: () => void
  onSubmit: (data: { name: string; description: string }) => Promise<void>
  isSaving?: boolean
}

export function CreateCategoryModal({
  isOpen,
  onClose,
  onSubmit,
  isSaving = false
}: CreateCategoryModalProps) {
  const [name, setName] = useState('')
  const [description, setDescription] = useState('')
  const [error, setError] = useState('')

  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()
      })
      setName('')
      setDescription('')
    } catch {
      setError('Failed to create category')
    }
  }

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

  return (
    <Modal
      isOpen={isOpen}
      onClose={handleClose}
      title="Create Category"
      size="sm"
      footer={
        <div className="flex justify-end gap-2">
          <Button
            type="button"
            variant="secondary"
            onClick={handleClose}
            disabled={isSaving}
          >
            Cancel
          </Button>
          <Button
            type="submit"
            form="create-category-form"
            disabled={!name.trim()}
            loading={isSaving}
          >
            Create Category
          </Button>
        </div>
      }
    >
      <form id="create-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="name" className="mb-1 block text-sm font-medium text-foreground">
            Category Name <span className="text-red-400">*</span>
          </label>
          <Input
            id="name"
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            disabled={isSaving}
            maxLength={100}
            placeholder="e.g., Network Troubleshooting"
            required
          />
          <p className="mt-1 text-xs text-muted-foreground">
            {name.length}/100 characters
          </p>
        </div>

        <div>
          <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
            Description <span className="text-muted-foreground">(optional)</span>
          </label>
          <Textarea
            id="description"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            disabled={isSaving}
            rows={3}
            placeholder="Brief description of this category..."
          />
        </div>
      </form>
    </Modal>
  )
}