// app/components/admin/sidebar-widget-editors/CategoriesWidgetEditor.tsx

'use client';

import { CategoriesWidgetProps } from '@/lib/page-builder/container-types';

interface CatProps { props: CategoriesWidgetProps; onUpdate: (p: CategoriesWidgetProps) => void; }

export default function CategoriesWidgetEditor({ props, onUpdate }: CatProps) {
  const cats = props.categories ?? [];

  const updateCat = (idx: number, field: string, value: string | number) => {
    const updated = cats.map((c, i) => i === idx ? { ...c, [field]: value } : c);
    onUpdate({ ...props, categories: updated });
  };

  const addCat = () =>
    onUpdate({ ...props, categories: [...cats, { id: Date.now().toString(), name: 'New Category', count: 0, link: '#' }] });

  const removeCat = (idx: number) =>
    onUpdate({ ...props, categories: cats.filter((_, i) => i !== idx) });

  return (
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">Widget Title</label>
        <input className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          value={props.title ?? ''} onChange={e => onUpdate({ ...props, title: e.target.value })} />
      </div>
      <div>
        <div className="flex items-center justify-between mb-2">
          <label className="text-sm font-medium text-gray-700">Categories</label>
          <button onClick={addCat} className="text-xs bg-blue-600 text-white px-3 py-1 rounded-lg hover:bg-blue-700">+ Add</button>
        </div>
        <div className="space-y-3">
          {cats.map((cat, idx) => (
            <div key={cat.id} className="border border-gray-200 rounded-lg p-3 space-y-2 bg-gray-50">
              <input placeholder="Name" className="w-full border border-gray-300 rounded px-2 py-1 text-sm"
                value={cat.name} onChange={e => updateCat(idx, 'name', e.target.value)} />
              <div className="flex gap-2">
                <input placeholder="Count" type="number" className="w-24 border border-gray-300 rounded px-2 py-1 text-sm"
                  value={cat.count} onChange={e => updateCat(idx, 'count', Number(e.target.value))} />
                <input placeholder="Link" className="flex-1 border border-gray-300 rounded px-2 py-1 text-sm"
                  value={cat.link} onChange={e => updateCat(idx, 'link', e.target.value)} />
              </div>
              <button onClick={() => removeCat(idx)} className="text-xs text-red-600 hover:underline">Remove</button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}