import React from 'react';
import { Layers, Plus, Edit2, Trash2, X } from 'lucide-react';

interface CategoryManagerProps {
  categories: any[];
  onAddCategory: () => void;
  onDeleteCategory: (id: number, name: string) => void;
  setEditingCategory: (cat: any) => void;
  setEditCatForm: (form: any) => void;
  editCatForm: any;
  editingCategory: any;
  onUpdateCategorySubmit: () => void;
}

export default function CategoryManager({
  categories,
  onAddCategory,
  onDeleteCategory,
  setEditingCategory,
  setEditCatForm,
  editCatForm,
  editingCategory,
  onUpdateCategorySubmit
}: CategoryManagerProps) {
  return (
    <section className="bg-surface/50 border border-slate-800/50 rounded-[2.5rem] p-4 md:p-6 shadow-2xl space-y-4 transition-all group/categories">
      <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
             <Layers size={20} />
           </div>
           <h2 className="text-xl font-normal text-white tracking-tight">Category Groups</h2>
         </div>
          <button
            onClick={onAddCategory}
            data-testid="add-category-button"
            className="flex items-center gap-2 bg-primary hover:bg-primary text-white px-5 py-2 rounded-xl text-sm font-normal transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight"
          >
            <Plus size={14} /> New Group
          </button>
      </div>

      <div data-testid="category-list" className="grid sm:grid-cols-2 lg:grid-cols-4 gap-2.5">
         {categories.map(cat => (
           <div key={cat.id} data-testid="category-item" className="p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-background/40 border border-slate-800/50 rounded-2xl flex items-center justify-between group hover:border-primary/40 transition-all">
             <div className="min-w-0 pr-4">
               <p className="card-title group-hover:text-primary transition-colors">{cat.name}</p>
               <p className="card-subtitle">{cat.description || 'General storage'}</p>
             </div>
             <div className="flex gap-1 shrink-0">
                <button 
                  onClick={() => {
                    setEditingCategory(cat);
                    setEditCatForm({ name: cat.name, description: cat.description || '' });
                  }}
                  className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 text-secondary hover:text-white hover:bg-slate-800 rounded-lg transition-all"
                >
                  <Edit2 size={14} />
                </button>
                <button
                  onClick={() => onDeleteCategory(cat.id, cat.name)}
                  data-testid="delete-category-button"
                  className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 text-secondary hover:text-rose-500 hover:bg-rose-500/5 rounded-lg transition-all"
                >
                  <Trash2 size={14} />
                </button>
             </div>
           </div>
         ))}
      </div>

      {/* Edit Category Modal */}
      {editingCategory && (
        <div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-0 sm:p-4 bg-background/90 animate-in fade-in duration-300">
          <div className="w-full max-w-lg bg-surface border-x border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-3xl p-6 shadow-2xl space-y-3 overflow-hidden animate-in slide-in-from-bottom-10">
            <div className="flex justify-between items-center mb-2">
               <div className="flex items-center gap-3">
                 <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
                   <Edit2 size={20} />
                 </div>
                 <h3 className="text-xl font-normal text-white tracking-tight">Modify Group</h3>
               </div>
               <button onClick={() => setEditingCategory(null)} className="p-2 hover:bg-slate-800 rounded-2xl text-muted transition-colors border border-slate-800">
                 <X size={20} />
               </button>
            </div>
            <div data-testid="category-form" className="space-y-2">
               <div className="space-y-1">
                  <label className="text-sm font-normal text-secondary tracking-tight ml-1">Group Identifier</label>
                  <input
                    data-testid="category-name-input"
                    type="text"
                    value={editCatForm.name}
                    onChange={(e) => setEditCatForm({...editCatForm, name: e.target.value})}
                    className="w-full bg-background border border-slate-800 rounded-2xl py-1.5 px-4 text-sm text-white focus:border-primary outline-none transition-all"
                  />
               </div>
               <div className="space-y-1">
                  <label className="text-sm font-normal text-secondary tracking-tight ml-1">Strategic Description</label>
                  <textarea
                    value={editCatForm.description}
                    onChange={(e) => setEditCatForm({...editCatForm, description: e.target.value})}
                    className="w-full bg-background border border-slate-800 rounded-2xl py-1.5 px-4 text-sm text-white focus:border-primary outline-none transition-all h-24 resize-none"
                  />
               </div>
               <button data-testid="add-category-submit" onClick={onUpdateCategorySubmit} className="w-full bg-primary hover:bg-primary text-white font-normal py-2.5 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all text-sm tracking-tight">
                 Update Asset Group
               </button>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}