tfm_ainventory/frontend/components/CategoryCreationModal.tsx

'use client';

import { useState } from 'react';
import { X, Loader2, Tag } from 'lucide-react';
import { inventoryApi } from '@/lib/api';
import { toast } from 'react-hot-toast';

interface CategoryCreationModalProps {
  show: boolean;
  onClose: () => void;
  onCategoryCreated: () => void;
}

export default function CategoryCreationModal({
  show,
  onClose,
  onCategoryCreated
}: CategoryCreationModalProps) {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  if (!show) return null;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!name.trim()) {
      setError('Category name is required');
      return;
    }

    setLoading(true);
    setError(null);
    try {
      await inventoryApi.createCategory({
        name: name.trim(),
        description: description.trim() || undefined
      });
      toast.success('Category added');
      setName('');
      setDescription('');
      onCategoryCreated();
      onClose();
    } catch (err: any) {
      setError(err?.response?.data?.detail || 'Failed to create category');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
      <div className="bg-surface border border-border rounded-none shadow-none max-w-sm w-full mx-4">
        <div className="flex items-center justify-between p-6 lg:p-8 xl:p-10 border-b border-border">
          <div className="flex items-center gap-3">
            <div className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-primary/10 rounded-none text-primary">
              <Tag size={20} />
            </div>
            <h2 className="text-lg font-normal text-white">New Category</h2>
          </div>
          <button
            onClick={onClose}
            disabled={loading}
            className="p-1 text-muted hover:text-secondary rounded focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none disabled:opacity-50"
            aria-label="Close"
          >
            <X size={20} />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="p-6 lg:p-8 xl:p-10 space-y-4">
          <div>
            <label className="text-sm font-normal text-secondary">Name</label>
            <input
              type="text"
              value={name}
              onChange={(e) => {
                setName(e.target.value);
                setError(null);
              }}
              placeholder="e.g., Electronics"
              className="w-full mt-2 px-3 lg:px-4 xl:px-5 py-2 lg:py-3 xl:py-4.5 bg-surface-bright border border-border rounded text-white placeholder:text-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
              disabled={loading}
              autoFocus
            />
          </div>

          <div>
            <label className="text-sm font-normal text-secondary">Description (optional)</label>
            <input
              type="text"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Brief category description"
              className="w-full mt-2 px-3 lg:px-4 xl:px-5 py-2 lg:py-3 xl:py-4.5 bg-surface-bright border border-border rounded text-white placeholder:text-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
              disabled={loading}
            />
          </div>

          {error && (
            <div className="p-3 lg:p-4 xl:p-5 lg:p-6 xl:p-8 bg-rose-500/10 border border-rose-500/20 rounded">
              <p className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl text-rose-400">{error}</p>
            </div>
          )}

          <div className="flex gap-2 pt-2">
            <button
              type="button"
              onClick={onClose}
              disabled={loading}
              className="flex-1 px-4 py-2.5 text-secondary bg-surface-bright border border-border rounded font-normal hover:bg-border transition-colors disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={loading || !name.trim()}
              className="flex-1 px-4 py-2.5 bg-primary text-white rounded font-normal hover:opacity-80 transition-colors disabled:opacity-50 flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-container-high focus-visible:ring-primary focus-visible:outline-none"
            >
              {loading ? (
                <>
                  <Loader2 size={16} className="animate-spin" />
                  Creating...
                </>
              ) : (
                'Create'
              )}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}