'use client';

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

interface AdminProduct {
  id: string;
  name: string;
  slug: string;
  brand: string;
  price: number;
  original_price: number;
  rating: number;
  reviews_count: number;
  image_url: string;
  badge: string | null;
  inventory_count: number;
  is_auction: boolean;
  payvato_eligible: boolean;
  is_active: boolean;
  created_at: string;
  category_id: string;
  category: { id: string; name: string; slug: string } | null;
}

interface Category {
  id: string;
  name: string;
  slug: string;
}

export default function AdminProductsPage() {
  const [products, setProducts] = useState<AdminProduct[]>([]);
  const [categories, setCategories] = useState<Category[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [editingProduct, setEditingProduct] = useState<AdminProduct | null>(null);
  const [addingProduct, setAddingProduct] = useState(false);
  const [saving, setSaving] = useState(false);
  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);

  const fetchProducts = useCallback(async () => {
    setLoading(true);
    const res = await fetch(`/api/admin/products?page=${page}`);
    const data = await res.json();
    setProducts(data.data || []);
    setTotal(data.total || 0);
    setLoading(false);
  }, [page]);

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

  useEffect(() => { fetchProducts(); }, [fetchProducts]);
  useEffect(() => { fetchCategories(); }, [fetchCategories]);

  async function saveProduct(productId: string, updates: Record<string, unknown>) {
    setSaving(true);
    await fetch('/api/admin/products', {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ product_id: productId, ...updates }),
    });
    setSaving(false);
    setEditingProduct(null);
    fetchProducts();
  }

  async function addProduct(formData: FormData) {
    setSaving(true);
    const body = {
      name: formData.get('name'),
      brand: formData.get('brand'),
      price: formData.get('price'),
      original_price: formData.get('original_price'),
      description: formData.get('description'),
      image_url: formData.get('image_url'),
      badge: formData.get('badge') || null,
      inventory_count: formData.get('inventory_count'),
      category_id: formData.get('category_id'),
      is_auction: formData.get('is_auction') === 'true',
      payvato_eligible: formData.get('payvato_eligible') === 'true',
    };
    const res = await fetch('/api/admin/products', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    });
    const data = await res.json();
    setSaving(false);
    if (data.success) { setAddingProduct(false); fetchProducts(); }
    else alert(data.error || 'Failed to add product');
  }

  async function deleteProduct(productId: string) {
    await fetch('/api/admin/products', {
      method: 'DELETE',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ product_id: productId }),
    });
    setDeleteConfirm(null);
    fetchProducts();
  }

  async function toggleActive(productId: string, current: boolean) {
    await fetch('/api/admin/products', {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ product_id: productId, is_active: !current }),
    });
    fetchProducts();
  }

  const totalPages = Math.ceil(total / 20);

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-black text-gray-900">Products</h1>
          <p className="text-sm text-gray-500">{total} total products</p>
        </div>
        <button onClick={() => setAddingProduct(true)}
          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 Product
        </button>
      </div>

      {/* Products Table */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        {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>
        ) : products.length === 0 ? (
          <div className="text-center py-12 text-gray-400">No products found</div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="text-left text-xs text-gray-500 uppercase bg-gray-50 border-b border-gray-100">
                  <th className="px-4 py-3 font-semibold">Product</th>
                  <th className="px-4 py-3 font-semibold">Category</th>
                  <th className="px-4 py-3 font-semibold">Price</th>
                  <th className="px-4 py-3 font-semibold">Stock</th>
                  <th className="px-4 py-3 font-semibold">Badge</th>
                  <th className="px-4 py-3 font-semibold">Rating</th>
                  <th className="px-4 py-3 font-semibold">Status</th>
                  <th className="px-4 py-3 font-semibold text-right">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-50">
                {products.map(product => (
                  <tr key={product.id} className="hover:bg-gray-50 transition-colors">
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-3">
                        <img src={product.image_url} alt={product.name} className="w-10 h-10 object-cover rounded-lg shrink-0" />
                        <div className="min-w-0">
                          <p className="font-medium text-gray-800 truncate max-w-[200px]">{product.name}</p>
                          <p className="text-xs text-gray-400">{product.brand}</p>
                        </div>
                      </div>
                    </td>
                    <td className="px-4 py-3 text-gray-600 text-xs">{product.category?.name || '—'}</td>
                    <td className="px-4 py-3">
                      <p className="font-bold text-gray-900">${Number(product.price).toFixed(2)}</p>
                      {product.original_price > product.price && (
                        <p className="text-xs text-gray-400 line-through">${Number(product.original_price).toFixed(2)}</p>
                      )}
                    </td>
                    <td className="px-4 py-3">
                      <span className={`text-xs font-semibold px-2 py-1 rounded-full ${product.inventory_count > 20 ? 'bg-green-100 text-green-700' : product.inventory_count > 0 ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700'}`}>
                        {product.inventory_count}
                      </span>
                    </td>
                    <td className="px-4 py-3">
                      {product.badge ? (
                        <span className="text-xs font-semibold bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">{product.badge}</span>
                      ) : '—'}
                    </td>
                    <td className="px-4 py-3 text-gray-600">
                      <div className="flex items-center gap-1">
                        <svg className="w-3.5 h-3.5 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                        <span className="text-xs">{product.rating} ({product.reviews_count})</span>
                      </div>
                    </td>
                    <td className="px-4 py-3">
                      <button onClick={() => toggleActive(product.id, product.is_active)}
                        className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${product.is_active ? 'bg-green-500' : 'bg-gray-300'}`}>
                        <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform ${product.is_active ? 'translate-x-4' : 'translate-x-1'}`} />
                      </button>
                    </td>
                    <td className="px-4 py-3 text-right">
                      <div className="flex items-center justify-end gap-3">
                        <button onClick={() => setEditingProduct(product)} className="text-primary hover:underline text-xs font-semibold">Edit</button>
                        <button onClick={() => setDeleteConfirm(product.id)} className="text-red-500 hover:underline text-xs font-semibold">Delete</button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {totalPages > 1 && (
          <div className="flex items-center justify-between px-4 py-3 border-t border-gray-100">
            <p className="text-xs text-gray-500">Page {page} of {totalPages}</p>
            <div className="flex gap-2">
              <button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1}
                className="px-3 py-1 rounded-lg border border-gray-200 text-sm disabled:opacity-40 hover:bg-gray-50">Prev</button>
              <button onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={page === totalPages}
                className="px-3 py-1 rounded-lg border border-gray-200 text-sm disabled:opacity-40 hover:bg-gray-50">Next</button>
            </div>
          </div>
        )}
      </div>

      {/* Delete Confirm */}
      {deleteConfirm && (
        <>
          <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={() => setDeleteConfirm(null)} />
          <div className="fixed inset-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-sm h-fit bg-white rounded-2xl shadow-2xl z-50 p-6">
            <h3 className="font-bold text-gray-900 mb-2">Delete Product?</h3>
            <p className="text-sm text-gray-500 mb-5">This action cannot be undone. The product will be permanently removed.</p>
            <div className="flex gap-3">
              <button onClick={() => deleteProduct(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>
        </>
      )}

      {/* Add Product Modal */}
      {addingProduct && (
        <>
          <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={() => setAddingProduct(false)} />
          <div className="fixed inset-y-0 right-0 w-full max-w-lg 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">Add New Product</h2>
              <button onClick={() => setAddingProduct(false)} 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={e => { e.preventDefault(); addProduct(new FormData(e.currentTarget)); }} className="p-6 space-y-4">
              <div>
                <label className="block text-xs font-semibold text-gray-700 mb-1">Product Name *</label>
                <input name="name" required placeholder="e.g. Sony WH-1000XM5" className="w-full px-3 py-2.5 rounded-lg border border-gray-200 text-sm" />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-semibold text-gray-700 mb-1">Brand</label>
                  <input name="brand" placeholder="e.g. Sony" 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">Category *</label>
                  <select name="category_id" required className="w-full px-3 py-2.5 rounded-lg border border-gray-200 text-sm">
                    <option value="">Select category</option>
                    {categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                  </select>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-semibold text-gray-700 mb-1">Price *</label>
                  <input name="price" type="number" step="0.01" required placeholder="0.00" 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">Original Price</label>
                  <input name="original_price" type="number" step="0.01" placeholder="0.00" className="w-full px-3 py-2.5 rounded-lg border border-gray-200 text-sm" />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-semibold text-gray-700 mb-1">Inventory</label>
                  <input name="inventory_count" type="number" defaultValue={0} 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">Badge</label>
                  <select name="badge" className="w-full px-3 py-2.5 rounded-lg border border-gray-200 text-sm">
                    <option value="">None</option>
                    <option value="Best Seller">Best Seller</option>
                    <option value="New">New</option>
                    <option value="Sale">Sale</option>
                    <option value="Hot">Hot</option>
                    <option value="Deal">Deal</option>
                  </select>
                </div>
              </div>
              <div>
                <label className="block text-xs font-semibold text-gray-700 mb-1">Image URL</label>
                <input name="image_url" type="url" placeholder="https://..." 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">Description</label>
                <textarea name="description" rows={3} placeholder="Product description..." className="w-full px-3 py-2.5 rounded-lg border border-gray-200 text-sm" />
              </div>
              <div className="flex gap-4">
                <label className="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
                  <input type="checkbox" name="is_auction" value="true" className="rounded" /> Auction
                </label>
                <label className="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
                  <input type="checkbox" name="payvato_eligible" value="true" className="rounded" /> Payvato
                </label>
              </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 ? 'Adding...' : 'Add Product'}
                </button>
                <button type="button" onClick={() => setAddingProduct(false)} 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>
        </>
      )}

      {/* Edit Product Modal */}
      {editingProduct && (
        <>
          <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={() => setEditingProduct(null)} />
          <div className="fixed inset-y-0 right-0 w-full max-w-lg 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">Edit Product</h2>
              <button onClick={() => setEditingProduct(null)} 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={e => {
              e.preventDefault();
              const fd = new FormData(e.currentTarget);
              saveProduct(editingProduct.id, {
                name: fd.get('name'),
                brand: fd.get('brand'),
                price: parseFloat(fd.get('price') as string),
                original_price: parseFloat(fd.get('original_price') as string),
                inventory_count: parseInt(fd.get('inventory_count') as string),
                badge: fd.get('badge') || null,
                image_url: fd.get('image_url'),
                description: fd.get('description'),
                category_id: fd.get('category_id'),
              });
            }} className="p-6 space-y-4">
              <div className="flex items-center gap-4 mb-2">
                <img src={editingProduct.image_url} alt={editingProduct.name} className="w-14 h-14 object-cover rounded-xl" />
                <div>
                  <p className="font-bold text-gray-900 text-sm">{editingProduct.name}</p>
                  <p className="text-xs text-gray-500">{editingProduct.category?.name} · {editingProduct.brand}</p>
                </div>
              </div>
              <div>
                <label className="block text-xs font-semibold text-gray-700 mb-1">Product Name</label>
                <input name="name" defaultValue={editingProduct.name} required className="w-full px-3 py-2.5 rounded-lg border border-gray-200 text-sm" />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-semibold text-gray-700 mb-1">Brand</label>
                  <input name="brand" defaultValue={editingProduct.brand} 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">Category</label>
                  <select name="category_id" defaultValue={editingProduct.category_id} className="w-full px-3 py-2.5 rounded-lg border border-gray-200 text-sm">
                    {categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                  </select>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-semibold text-gray-700 mb-1">Price</label>
                  <input name="price" type="number" step="0.01" defaultValue={editingProduct.price} required 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">Original Price</label>
                  <input name="original_price" type="number" step="0.01" defaultValue={editingProduct.original_price} className="w-full px-3 py-2.5 rounded-lg border border-gray-200 text-sm" />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-semibold text-gray-700 mb-1">Inventory</label>
                  <input name="inventory_count" type="number" defaultValue={editingProduct.inventory_count} required 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">Badge</label>
                  <select name="badge" defaultValue={editingProduct.badge || ''} className="w-full px-3 py-2.5 rounded-lg border border-gray-200 text-sm">
                    <option value="">None</option>
                    <option value="Best Seller">Best Seller</option>
                    <option value="New">New</option>
                    <option value="Sale">Sale</option>
                    <option value="Hot">Hot</option>
                    <option value="Deal">Deal</option>
                  </select>
                </div>
              </div>
              <div>
                <label className="block text-xs font-semibold text-gray-700 mb-1">Image URL</label>
                <input name="image_url" defaultValue={editingProduct.image_url} 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...' : 'Save Changes'}
                </button>
                <button type="button" onClick={() => setEditingProduct(null)} 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>
        </>
      )}
    </div>
  );
}