'use client';

/**
 * CategoryForm — create or rename a category.
 * Req 8.6: allows admins to create and rename categories.
 */

import { useState } from 'react';
import { Input } from '../ui/input';
import { Button } from '../ui/button';

/**
 * @param {{
 *   initialData?: { name?: string },
 *   onSubmit: (formData: { name: string }) => void,
 *   onCancel: () => void,
 *   loading?: boolean,
 *   error?: string,
 * }} props
 */
export default function CategoryForm({
  initialData = {},
  onSubmit,
  onCancel,
  loading = false,
  error,
}) {
  const [name, setName] = useState(initialData.name ?? '');
  const [nameError, setNameError] = useState('');

  const isEditMode = Boolean(initialData.name);

  function handleSubmit(e) {
    e.preventDefault();
    if (!name.trim()) {
      setNameError('Category name is required.');
      return;
    }
    setNameError('');
    onSubmit({ name: name.trim() });
  }

  return (
    <form onSubmit={handleSubmit} noValidate className="flex flex-col gap-4">
      {/* Form-level error */}
      {error && (
        <div
          role="alert"
          className="rounded-md border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700"
        >
          {error}
        </div>
      )}

      {/* Name */}
      <Input
        id="category-name"
        label="Category Name *"
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        error={nameError}
        placeholder="e.g. Drinks"
        required
      />

      {/* Actions */}
      <div className="flex justify-end gap-3 pt-2">
        <Button
          type="button"
          variant="ghost"
          onClick={onCancel}
          disabled={loading}
        >
          Cancel
        </Button>
        <Button type="submit" variant="default" loading={loading}>
          {isEditMode ? 'Save Changes' : 'Create Category'}
        </Button>
      </div>
    </form>
  );
}