import React, { useState } from 'react';
import { AuthProvider, AuthGuard, useAuth } from './AdminAuth';
import AdminLayout from './AdminLayout';

interface Product {
  id: string;
  name: string;
  brand: string;
  price: number;
  image?: string;
  shop_count: number;
  category?: string;
}

function ProductTableContent() {
  const { token } = useAuth();
  const [search, setSearch] = useState('');
  const [brandFilter, setBrandFilter] = useState('');
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [page, setPage] = useState(1);

  // Mock products
  const allProducts: Product[] = [
    { id: '1', name: 'Nike Dunk Low Panda', brand: 'Nike', price: 109, shop_count: 6, category: 'Sneakers' },
    { id: '2', name: 'New Balance 550 White Grey', brand: 'New Balance', price: 149, shop_count: 4, category: 'Sneakers' },
    { id: '3', name: 'Adidas Samba OG', brand: 'Adidas', price: 100, shop_count: 8, category: 'Sneakers' },
    { id: '4', name: 'Nike Air Max 90', brand: 'Nike', price: 139, shop_count: 5, category: 'Sneakers' },
    { id: '5', name: 'Asics Gel-1130', brand: 'Asics', price: 120, shop_count: 3, category: 'Sneakers' },
    { id: '6', name: 'Adidas Gazelle Bold', brand: 'Adidas', price: 110, shop_count: 7, category: 'Sneakers' },
  ];

  const brands = [...new Set(allProducts.map(p => p.brand))];
  const filtered = allProducts.filter(p =>
    (!search || p.name.toLowerCase().includes(search.toLowerCase())) &&
    (!brandFilter || p.brand === brandFilter)
  );

  const toggleSelect = (id: string) => {
    setSelected(prev => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  };

  const toggleAll = () => {
    if (selected.size === filtered.length) setSelected(new Set());
    else setSelected(new Set(filtered.map(p => p.id)));
  };

  return (
    <AdminLayout title="Products">
      <div className="flex gap-4 mb-6">
        <input type="text" placeholder="Zoeken..." value={search} onChange={e => setSearch(e.target.value)}
          className="bg-[#141414] border border-[#333] rounded-lg px-4 py-2 text-sm text-[#F5F5F5] focus:outline-none focus:border-[#00FF6A] flex-1 max-w-md" />
        <select value={brandFilter} onChange={e => setBrandFilter(e.target.value)}
          className="bg-[#141414] border border-[#333] rounded-lg px-4 py-2 text-sm text-[#999] focus:outline-none">
          <option value="">All Brands</option>
          {brands.map(b => <option key={b} value={b}>{b}</option>)}
        </select>
      </div>

      {selected.size > 0 && (
        <div className="flex gap-2 mb-4">
          <span className="text-sm text-[#999]">{selected.size} selected</span>
          <button className="text-xs bg-[#1A1A1A] border border-[#333] px-3 py-1 rounded text-[#F5F5F5] hover:bg-[#222]">Merge Duplicates</button>
          <button className="text-xs bg-[#FF3B3B]/10 border border-[#FF3B3B]/20 px-3 py-1 rounded text-[#FF3B3B] hover:bg-[#FF3B3B]/20">Delete</button>
        </div>
      )}

      <div className="bg-[#141414] border border-[#333] rounded-xl overflow-hidden">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-[#333] text-[#999] text-left">
              <th className="px-5 py-3 w-8"><input type="checkbox" onChange={toggleAll} checked={selected.size === filtered.length && filtered.length > 0} className="accent-[#00FF6A]" /></th>
              <th className="px-5 py-3 font-medium">Product</th>
              <th className="px-5 py-3 font-medium">Brand</th>
              <th className="px-5 py-3 font-medium">Price</th>
              <th className="px-5 py-3 font-medium">Shops</th>
              <th className="px-5 py-3 font-medium">Actions</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(product => (
              <tr key={product.id} className="border-b border-[#222] hover:bg-[#1A1A1A] transition-colors">
                <td className="px-5 py-3"><input type="checkbox" checked={selected.has(product.id)} onChange={() => toggleSelect(product.id)} className="accent-[#00FF6A]" /></td>
                <td className="px-5 py-3">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-[#1A1A1A] rounded-lg flex items-center justify-center text-lg"></div>
                    <span className="text-[#F5F5F5] font-medium">{product.name}</span>
                  </div>
                </td>
                <td className="px-5 py-3 text-[#999]">{product.brand}</td>
                <td className="px-5 py-3 text-[#F5F5F5]">€{product.price}</td>
                <td className="px-5 py-3 text-[#999]">{product.shop_count}</td>
                <td className="px-5 py-3 flex gap-2">
                  <button className="text-[#999] hover:text-[#00FF6A] transition-colors">✎</button>
                  <button className="text-[#999] hover:text-[#F5F5F5] transition-colors">Link</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="flex items-center justify-between mt-4 text-sm text-[#999]">
        <span>{filtered.length} products</span>
        <div className="flex gap-2">
          <button onClick={() => setPage(Math.max(1, page - 1))} disabled={page <= 1}
            className="px-3 py-1 bg-[#141414] border border-[#333] rounded hover:bg-[#1A1A1A] disabled:opacity-30">← Prev</button>
          <span className="px-3 py-1">Page {page}</span>
          <button onClick={() => setPage(page + 1)}
            className="px-3 py-1 bg-[#141414] border border-[#333] rounded hover:bg-[#1A1A1A]">Next →</button>
        </div>
      </div>
    </AdminLayout>
  );
}

export default function ProductTablePage() {
  return <AuthProvider><AuthGuard><ProductTableContent /></AuthGuard></AuthProvider>;
}