'use client';

import { useState, useEffect, useCallback } from 'react';

interface Category {
  id: string;
  name: string;
  slug: string;
  icon: string | null;
  image_url: string | null;
  description: string | null;
}

const BLANK: Omit<Category, 'id'> = { name: '', slug: '', icon: '', image_url: '', description: '' };

export default function AdminCategoriesPage() {
  const [categories, setCategories] = useState<Category[]>([]);
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState<Category | null>(null);
  const [adding, setAdding] = useState(false);
  const [form, setForm] = useState<Omit<Category, 'id'>>(BLANK);
  const [saving, setSaving] = useState(false);
  const [deleteConfirm, setDeleteConfirm] = useState<Category | null>(null);

  const fetch_ = useCallback(async () => {
    setLoading(true);
    const res = await fetch('/api/admin/categories');
    const data = await res.json();
    setCategories(data.data || []);
    setLoading(false);
  }, []);

  useEffect(() => { fetch_(); }, [fetch_]);

  function slugify(name: string) {
    return name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
  }

  async function handleAdd(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    const res = await fetch('/api/admin/categories', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(form),
    });
    const data = await res.json();
    setSaving(false);
    if (data.success) { setAdding(false); setForm(BLANK); fetch_(); }
    else alert(data.error || 'Failed to add category');
  }

  async function handleEdit(e: React.FormEvent) {
    e.preventDefault();
    if (!editing) return;
    setSaving(true);
    const res = await fetch('/api/admin/categories', {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ category_id: editing.id, ...form }),
    });
    const data = await res.json();
    setSaving(false);
    if (data.success) { setEditing(null); setForm(BLANK); fetch_(); }
    else alert(data.error || 'Failed to update category');
  }

  async function handleDelete(cat: Category) {
    await fetch('/api/admin/categories', {
      method: 'DELETE',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ category_id: cat.id }),
    });
    setDeleteConfirm(null);
    fetch_();
  }

  function openEdit(cat: Category) {
    setEditing(cat);
    setForm({ name: cat.name, slug: cat.slug, icon: cat.icon || '', image_url: cat.image_url || '', description: cat.description || '' });
  }

  function openAdd() {
    setAdding(true);
    setForm(BLANK);
  }

  const FormPanel = ({ title, onSubmit, onClose }: { title: string; onSubmit: (e: React.FormEvent) => void; onClose: () => void }) => (
    <>
      <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={onClose} />
      <div className="fixed inset-y-0 right-0 w-full max-w-md bg-white shadow-2xl z-50 overflow-y-auto">
        <div className="sticky top-0 bg-white border-b border-gray-100 px-6 py-4 flex items-center justify-between">
          <h2 className="font-bold text-gray-900">{title}</h2>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-700">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
          </button>
        </div>
        <form onSubmit={onSubmit} className="p-6 space-y-4">
          <div>
            <label className="block text-xs font-semibold text-gray-700 mb-1">Name *</label>
            <input required value={form.name} onChange={e => setForm(p => ({ ...p, name: e.target.value, slug: slugify(e.target.value) }))}
              placeholder="e.g. Smartphones" className="w-full px-3 py-2.5 rounded-lg border border-gray-200 text-sm" />
          </div>
          <div>
            <label className="block text-xs font-semibold text-gray-700 mb-1">Slug *</label>
            <input required value={form.slug} onChange={e => setForm(p => ({ ...p, slug: e.target.value }))}
              placeholder="e.g. smartphones" className="w-full px-3 py-2.5 rounded-lg border border-gray-200 text-sm font-mono" />
          </div>
          <div>
            <label className="block text-xs font-semibold text-gray-700 mb-1">Icon (emoji)</label>
            <input value={form.icon || ''} onChange={e => setForm(p => ({ ...p, icon: e.target.value }))}
              placeholder="e.g. 📱" className="w-full px-3 py-2.5 rounded-lg border border-gray-200 text-sm" />
          </div>
          <div>
            <label className="block text-xs font-semibold text-gray-700 mb-1">Image URL</label>
            <input type="url" value={form.image_url || ''} onChange={e => setForm(p => ({ ...p, image_url: e.target.value }))}
              placeholder="https://..." className="w-full px-3 py-2.5 rounded-lg border border-gray-200 text-sm" />
            {form.image_url && <img src={form.image_url} alt="" className="mt-2 w-full h-28 object-cover rounded-lg" />}
          </div>
          <div>
            <label className="block text-xs font-semibold text-gray-700 mb-1">Description</label>
            <textarea value={form.description || ''} onChange={e => setForm(p => ({ ...p, description: e.target.value }))}
              rows={2} placeholder="Category description..." className="w-full px-3 py-2.5 rounded-lg border border-gray-200 text-sm" />
          </div>
          <div className="flex gap-3 pt-2">
            <button type="submit" disabled={saving} className="flex-1 bg-primary text-white py-2.5 rounded-lg font-semibold text-sm disabled:opacity-50">
              {saving ? 'Saving...' : title}
            </button>
            <button type="button" onClick={onClose} className="px-6 py-2.5 rounded-lg border border-gray-200 text-sm font-semibold text-gray-600 hover:bg-gray-50">Cancel</button>
          </div>
        </form>
      </div>
    </>
  );

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-black text-gray-900">Categories</h1>
          <p className="text-sm text-gray-500">{categories.length} categories</p>
        </div>
        <button onClick={openAdd}
          className="flex items-center gap-2 bg-primary text-white px-4 py-2.5 rounded-xl font-semibold text-sm hover:bg-primary/90 transition-colors">
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
          Add Category
        </button>
      </div>

      {loading ? (
        <div className="flex items-center justify-center h-48">
          <div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {categories.map(cat => (
            <div key={cat.id} className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
              {cat.image_url ? (
                <div className="h-28 overflow-hidden">
                  <img src={cat.image_url} alt={cat.name} className="w-full h-full object-cover" />
                </div>
              ) : (
                <div className="h-28 bg-gray-100 flex items-center justify-center">
                  <span className="text-4xl">{cat.icon || '📦'}</span>
                </div>
              )}
              <div className="p-4">
                <div className="flex items-center gap-2 mb-1">
                  {cat.icon && <span className="text-xl">{cat.icon}</span>}
                  <h3 className="font-bold text-gray-900">{cat.name}</h3>
                </div>
                <p className="text-xs font-mono text-gray-400 mb-1">/{cat.slug}</p>
                {cat.description && <p className="text-xs text-gray-500 line-clamp-2">{cat.description}</p>}
                <div className="flex gap-3 mt-3">
                  <button onClick={() => openEdit(cat)}
                    className="flex-1 text-center text-xs font-semibold text-primary border border-primary rounded-lg py-1.5 hover:bg-primary hover:text-white transition-colors">
                    Edit
                  </button>
                  <button onClick={() => setDeleteConfirm(cat)}
                    className="flex-1 text-center text-xs font-semibold text-red-500 border border-red-200 rounded-lg py-1.5 hover:bg-red-500 hover:text-white transition-colors">
                    Delete
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Delete Confirm */}
      {deleteConfirm && (
        <>
          <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={() => setDeleteConfirm(null)} />
          <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-sm bg-white rounded-2xl shadow-2xl z-50 p-6">
            <h3 className="font-bold text-gray-900 mb-2">Delete &quot;{deleteConfirm.name}&quot;?</h3>
            <p className="text-sm text-gray-500 mb-5">This will permanently delete the category. Products in this category will not be deleted but may become uncategorized.</p>
            <div className="flex gap-3">
              <button onClick={() => handleDelete(deleteConfirm)} className="flex-1 bg-red-500 text-white py-2.5 rounded-lg font-semibold text-sm hover:bg-red-600">Delete</button>
              <button onClick={() => setDeleteConfirm(null)} className="flex-1 border border-gray-200 py-2.5 rounded-lg font-semibold text-sm text-gray-600 hover:bg-gray-50">Cancel</button>
            </div>
          </div>
        </>
      )}

      {adding && <FormPanel title="Add Category" onSubmit={handleAdd} onClose={() => setAdding(false)} />}
      {editing && <FormPanel title="Save Changes" onSubmit={handleEdit} onClose={() => { setEditing(null); setForm(BLANK); }} />}
    </div>
  );
}