page.tsx

Go to the documentation of this file.

"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Icon } from '@/contexts/IconContext';
import { apiClient } from "@/lib/client/apiClient";
import { SkeletonCard } from "@/components/LoadingSpinner";
 
interface Product {
  Pid: number; // Product ID
  Name: string; // Product Name
  Barcode?: string; // Barcode
  SellPrice: number; // Selling Price
  StockLevel?: number; // Current Stock Level
  StockMin?: number; // Minimum Stock Level
  PLU?: string; // PLU Code
  Key?: string; // Unique Key
  SupplierId?: string | number;
  SupplierName?: string;
}
 
export default function ProductsPage() {
  const router = useRouter();
  const [products, setProducts] = useState<Product[]>([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [sohFilter, setSohFilter] = useState<"all" | "in" | "out" | "belowMin">("all");
  const [searchIn, setSearchIn] = useState<"all" | "name" | "barcode" | "plu" | "pid">("all");
  const [minPrice, setMinPrice] = useState<string>("");
  const [maxPrice, setMaxPrice] = useState<string>("");
  const [lowStockFirst, setLowStockFirst] = useState<boolean>(false);
  // Department filter
  const [departmentId, setDepartmentId] = useState<string>("");
  const [departments, setDepartments] = useState<Array<{ id: string; name: string }>>([]);
  // Supplier filter
  const [supplierSearch, setSupplierSearch] = useState("");
  const [supplierId, setSupplierId] = useState<string>("");
  const [supplierName, setSupplierName] = useState("");
  const [showSupplierDropdown, setShowSupplierDropdown] = useState(false);
  const [suppliers, setSuppliers] = useState<Array<{ id: string; name: string }>>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
  const [showStockModal, setShowStockModal] = useState(false);
  const [stockAdjustment, setStockAdjustment] = useState<string>("");
  const [stockReason, setStockReason] = useState<string>("");
  const [saving, setSaving] = useState(false);
  const [saveMessage, setSaveMessage] = useState<string>("");
  
  // Pagination state
  const [currentPage, setCurrentPage] = useState(0);
  const [pageSize] = useState(50);
  const [totalCount, setTotalCount] = useState(0);
  const [hasMore, setHasMore] = useState(true);
 
  useEffect(() => {
    setCurrentPage(0); // Reset to first page on mount
    loadProducts(0);
    loadDepartments(); // Load departments for filter
  }, []);
 
  const loadDepartments = async () => {
    try {
      const result = await apiClient.get('/v1/elink/departments');
      if (result.success && result.data) {
        const depts = result.data.DATS || [];
        const mapped = depts.map((d: any) => ({
          id: String(d.f100 || ''),
          name: d.f101 || d.f500 || `Dept ${d.f100}`
        })).filter((d: any) => d.id && d.name);
        setDepartments(mapped);
      }
    } catch (error) {
      console.error('Failed to load departments:', error);
    }
  };
 
  useEffect(() => {
    // Debounce search - reset to page 0 when search changes
    const timer = setTimeout(() => {
      setCurrentPage(0);
      loadProducts(0);
    }, 400); // 400ms debounce for better UX
    return () => clearTimeout(timer);
  }, [searchTerm, supplierId, minPrice, maxPrice, sohFilter, departmentId]);
 
  const clearAllFilters = () => {
    setSearchTerm("");
    setSohFilter("all");
    setSearchIn("all");
    setMinPrice("");
    setMaxPrice("");
    setLowStockFirst(false);
    setDepartmentId("");
    setSupplierSearch("");
    setSupplierId("");
    setSupplierName("");
    setShowSupplierDropdown(false);
    setCurrentPage(0);
    // Refresh list
    setTimeout(() => loadProducts(0), 0);
  };
 
  const loadProducts = async (page: number = currentPage) => {
    try {
      setLoading(true);
      setError(null);
      
      console.log('🔍 Loading products - Page:', page, 'PageSize:', pageSize, 'Skip:', page * pageSize);
      
      // Build parameters for OpenAPI with server-side filtering
      const params: any = {
        limit: pageSize,
        skip: page * pageSize,
        source: 'openapi'
      };
      
      // Search filter - send raw search term, server will handle BUCK format
      if (searchTerm.trim()) {
        const term = searchTerm.trim();
        switch (searchIn) {
          case 'name':
            params.search = term; // Server searches f101 (name/description)
            break;
          case 'barcode':
            params.barcode = term; // Server searches f105 (barcode)
            break;
          case 'plu':
            params.plu = term; // Server searches f102 (PLU)
            break;
          case 'pid':
            // For PID search, use search with numeric value
            params.search = term;
            break;
          default:
            // General search - server will search name/description
            params.search = term;
        }
      }
      
      // Stock filter - server-side (f130)
      if (sohFilter === 'in') {
        params.stockFilter = 'in'; // Server filters: f130 > 0
      } else if (sohFilter === 'out') {
        params.stockFilter = 'out'; // Server filters: f130 = 0
      }
      // belowMin requires client-side filtering (f130 <= f131 comparison)
      
      // Price range filters - server-side (f103)
      if (minPrice) {
        const min = Number(minPrice);
        if (!isNaN(min)) {
          params.minPrice = min; // Server filters: f103 >= min
        }
      }
      if (maxPrice) {
        const max = Number(maxPrice);
        if (!isNaN(max)) {
          params.maxPrice = max; // Server filters: f103 <= max
        }
      }
      
      // Supplier filter - server-side (f104)
      if (supplierId && supplierId !== 'all' && supplierId.trim()) {
        params.supplierId = supplierId; // Server filters: f104 = supplierId
      }
      
      // Department filter - server-side (f106)
      if (departmentId && departmentId !== 'all' && departmentId.trim()) {
        params.departmentId = departmentId; // Server filters: f106 = departmentId
      }
      
      console.log('🌐 API Request params:', params);
      
      // Use apiClient - server will handle ELINK/BUCK API with server-side filtering
      const result = await apiClient.getProducts(params);
      
      // Handle OpenAPI response
      if (result.success) {
        const apiData = result.data as any;
        
        // ELINK API returns: { data: { value: [...] } }
        let productData = apiData?.data?.Product || apiData?.value || [];
        
        // Apply remaining client-side filters that can't be done server-side
        if (Array.isArray(productData)) {
          // belowMin filter (requires f130 <= f131 comparison)
          if (sohFilter === 'belowMin') {
            productData = productData.filter((p: any) => 
              (p.StockLevel || p.f130 || 0) <= (p.StockMin || p.f131 || 0)
            );
          }
        }
        
        // Pagination handled on server now, but keep total count
        const totalProducts = Array.isArray(productData) ? productData.length : 0;
        
        console.log('📊 Server response:', {
          total: totalProducts,
          page: page + 1,
          pageSize,
          itemsOnPage: productData.length,
          firstProductSample: productData[0]
        });
        
        if (Array.isArray(productData)) {
          // Map OpenAPI format fields to component interface
          const mappedProducts = productData.map((p: any) => ({
            Pid: p.Pid,
            Name: p.Name || p.Description || '',
            Barcode: p.Barcode || p.Plu || '',
            SellPrice: p.SellPrice || p.Price || 0,
            StockLevel: p.StockLevel,
            StockMin: p.StockMin,
            PLU: p.PLU || p.Plu,
            Key: p.Key,
            SupplierId: p.Supplier?.Id || p.SupplierId || undefined,
            SupplierName: p.Supplier?.Name || p.SupplierName || undefined,
          }));
          
          setProducts(mappedProducts);
          setTotalCount(totalProducts);
          setHasMore(mappedProducts.length >= pageSize); // More pages if we got full page
          
          if (mappedProducts.length === 0 && page === 0) {
            setError("No products found matching your filters");
          }
        } else {
          setError("No products found");
          setProducts([]);
          setTotalCount(0);
        }
      } else {
        setError("Failed to load products");
        setProducts([]);
      }
    } catch (e) {
      console.error('Failed to load products:', e);
      setError("Network error while fetching products");
      setProducts([]);
    } finally {
      setLoading(false);
    }
  };
 
  // Server-side filtering is now handled in loadProducts()
  // Only need to compute low stock products for stats
  const isLowStock = (p: Product) => {
    if (p.StockLevel === 0) return true;
    if (p.StockLevel !== undefined && p.StockMin !== undefined) return p.StockLevel <= p.StockMin;
    return false;
  };
 
  const handleStockUpdate = async () => {
    if (!selectedProduct) return;
    
    const adjustment = parseFloat(stockAdjustment);
    if (isNaN(adjustment) || adjustment === 0) {
      setSaveMessage("Please enter a valid adjustment amount");
      return;
    }
    
    if (!stockReason) {
      setSaveMessage("Please select a reason");
      return;
    }
 
    try {
      setSaving(true);
      setSaveMessage("");
      
      const response = await fetch('/api/v1/products/stock-adjustment', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          productId: selectedProduct.Pid,
          adjustment,
          reason: stockReason,
          locationId: 1 // Default location
        }),
      });
 
      const result = await response.json();
 
      if (result.success) {
        setSaveMessage(`✓ ${result.message || 'Stock updated successfully'}`);
        // Refresh products list
        setTimeout(() => {
          loadProducts(currentPage);
          // Close modal after 1.5 seconds
          setTimeout(() => {
            setShowStockModal(false);
            setSelectedProduct(null);
            setStockAdjustment("");
            setStockReason("");
            setSaveMessage("");
          }, 1500);
        }, 500);
      } else {
        setSaveMessage(`✗ ${result.error || 'Failed to update stock'}`);
      }
    } catch (err) {
      console.error('Stock update error:', err);
      setSaveMessage('✗ Network error. Please try again.');
    } finally {
      setSaving(false);
    }
  };
 
  const lowStockProducts = products.filter(p => 
    p.StockLevel !== undefined && p.StockMin !== undefined && p.StockLevel <= p.StockMin
  );
 
  return (
    <div className="p-8 min-h-screen bg-bg">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold text-text flex items-center gap-2">
          Products <Icon name="inventory_2" size={32} />
        </h1>
        <div className="flex gap-3">
          <button
            onClick={() => {
              setSelectedProduct(null);
              setShowStockModal(true);
            }}
            className="px-4 py-2 bg-brand text-white rounded-lg hover:opacity-90 font-medium"
          >
            + Create Product
          </button>
          <button
            onClick={() => {
              window.location.href = '/pages/products/stocktake';
            }}
            className="px-4 py-2 bg-brand text-white rounded-lg hover:opacity-90 font-medium flex items-center gap-2"
          >
            <Icon name="inventory_2" size={20} /> Manage Stock
          </button>
        </div>
      </div>
      
      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div className="bg-brand-2 p-4 rounded-lg border border-border">
          <div className="text-2xl font-bold text-brand">{totalCount || products.length}</div>
          <div className="text-sm text-text">Total Products</div>
        </div>
        <div className="bg-surface-2 p-4 rounded-lg border border-warn">
          <div className="text-2xl font-bold text-warn">{lowStockProducts.length}</div>
          <div className="text-sm text-text">Low Stock (Current Page)</div>
        </div>
        <div className="bg-surface p-4 rounded-lg border border-border">
          <div className="text-2xl font-bold text-text">{products.length}</div>
          <div className="text-sm text-muted">Products on Page {currentPage + 1}</div>
        </div>
      </div>
 
      <div className="bg-surface p-6 rounded-lg shadow border border-border">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-3 mb-4">
          <div>
            <label className="block text-sm font-medium text-text mb-1">Search</label>
            <input
              type="text"
              placeholder="Name, barcode or ID..."
              className="w-full p-3 border border-border rounded-lg bg-surface text-text focus:ring-2 focus:ring-brand"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-text mb-1">Search In</label>
            <select
              className="w-full p-3 border rounded-lg"
              value={searchIn}
              onChange={(e) => setSearchIn(e.target.value as any)}
            >
              <option value="all">All fields</option>
              <option value="name">Name only</option>
              <option value="barcode">Barcode only</option>
              <option value="plu">PLU only</option>
              <option value="pid">Product ID only</option>
            </select>
          </div>
          <div className="relative">
            <label className="block text-sm font-medium text-text mb-1">Supplier</label>
            <div className="flex gap-2">
              <input
                type="text"
                placeholder="Search supplier name or ID..."
                className="w-full p-3 border border-border rounded-lg bg-surface text-text focus:ring-2 focus:ring-brand"
                value={supplierSearch}
                onChange={async (e) => {
                  const v = e.target.value;
                  setSupplierSearch(v);
                  setShowSupplierDropdown(true);
                  // Live search suppliers
                  const resp = await apiClient.getSuppliers({ search: v, limit: 20 });
                  const arr: any[] = (resp.data as any[]) || [];
                  const mapped = arr.map((s: any) => ({ id: String(s.f100 || s.Id || s.id || ''), name: s.f101 || s.Name || s.name || '' }));
                  setSuppliers(mapped.filter(s => s.id && s.name));
                }}
                onFocus={async () => {
                  setShowSupplierDropdown(true);
                  if (suppliers.length === 0) {
                    const resp = await apiClient.getSuppliers({ limit: 20 });
                    const arr: any[] = (resp.data as any[]) || [];
                    const mapped = arr.map((s: any) => ({ id: String(s.f100 || s.Id || s.id || ''), name: s.f101 || s.Name || s.name || '' }));
                    setSuppliers(mapped.filter(s => s.id && s.name));
                  }
                }}
              />
              {supplierId && (
                <button
                  className="px-3 rounded bg-surface-2 border border-border text-sm text-text"
                  onClick={() => { setSupplierId(''); setSupplierName(''); setSupplierSearch(''); }}
                  title="Clear supplier"
                >
                  Clear
                </button>
              )}
            </div>
            {showSupplierDropdown && suppliers.length > 0 && (
              <div className="absolute z-20 bg-surface border border-border rounded shadow w-full max-h-56 overflow-auto mt-1">
                {suppliers.map(s => (
                  <div
                    key={s.id}
                    className="px-3 py-2 hover:bg-surface-2 cursor-pointer"
                    onClick={() => {
                      setSupplierId(s.id);
                      setSupplierName(s.name);
                      setSupplierSearch(s.name);
                      setShowSupplierDropdown(false);
                    }}
                  >
                    <div className="text-sm text-text">{s.name}</div>
                    <div className="text-xs text-muted">ID: {s.id}</div>
                  </div>
                ))}
              </div>
            )}
            {supplierName && (
              <div className="mt-1 text-xs text-brand">Selected: {supplierName}</div>
            )}
          </div>
          <div>
            <label className="block text-sm font-medium text-text mb-1">Department</label>
            <select
              className="w-full p-3 border border-border rounded-lg bg-surface text-text focus:ring-2 focus:ring-brand"
              value={departmentId}
              onChange={(e) => setDepartmentId(e.target.value)}
            >
              <option value="">All Departments</option>
              {departments.map(dept => (
                <option key={dept.id} value={dept.id}>
                  {dept.name}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-text mb-1">Stock On Hand</label>
            <select
              className="w-full p-3 border border-border rounded-lg bg-surface text-text focus:ring-2 focus:ring-brand"
              value={sohFilter}
              onChange={(e) => setSohFilter(e.target.value as any)}
            >
              <option value="all">All</option>
              <option value="in">In Stock (&gt; 0)</option>
              <option value="out">Out of Stock (0)</option>
              <option value="belowMin">Below Min</option>
            </select>
          </div>
        </div>
 
        <div className="grid grid-cols-1 md:grid-cols-4 gap-3 mb-4">
          <div className="md:col-span-2">
            <label className="block text-sm font-medium text-text mb-1">Price Range</label>
            <div className="flex gap-2">
              <input
                type="number"
                min={0}
                step={0.01}
                placeholder="Min"
                className="w-full p-3 border border-border rounded-lg bg-surface text-text focus:ring-2 focus:ring-brand"
                value={minPrice}
                onChange={(e) => setMinPrice(e.target.value)}
              />
              <input
                type="number"
                min={0}
                step={0.01}
                placeholder="Max"
                className="w-full p-3 border border-border rounded-lg bg-surface text-text focus:ring-2 focus:ring-brand"
                value={maxPrice}
                onChange={(e) => setMaxPrice(e.target.value)}
              />
            </div>
          </div>
          <div className="flex items-end">
            <label className="flex items-center gap-2 text-sm text-text">
              <input
                type="checkbox"
                className="rounded"
                checked={lowStockFirst}
                onChange={(e) => setLowStockFirst(e.target.checked)}
              />
              Low stock first
            </label>
          </div>
        </div>
        
        <div className="flex justify-end mb-2">
          <button
            className="text-sm px-3 py-2 border border-border rounded hover:bg-surface-2 bg-surface text-text"
            onClick={clearAllFilters}
            title="Reset all filters"
          >
            Clear filters
          </button>
        </div>
 
        {/* Error State */}
        {error && (
          <div className="bg-warn/10 border border-warn rounded-lg p-4 mb-4">
            <div className="flex items-center">
              <span className="text-warn">⚠️</span>
              <span className="ml-2 text-warn">{error}</span>
              <button
                onClick={() => loadProducts(currentPage)}
                className="ml-auto text-warn hover:opacity-80 underline"
              >
                Retry
              </button>
            </div>
          </div>
        )}
        
        <div className="max-h-[540px] overflow-y-auto border border-border rounded-lg relative">
          {loading ? (
            <div className="p-4 space-y-3 bg-surface">
              {[...Array(8)].map((_, i) => (
                <div key={i} className="p-3 border-b border-border animate-pulse">
                  <div className="h-5 bg-surface-2 rounded w-3/4 mb-2"></div>
                  <div className="h-3 bg-surface-2 rounded w-1/2 mb-2"></div>
                  <div className="h-3 bg-surface-2 rounded w-1/4"></div>
                </div>
              ))}
            </div>
          ) : products.length === 0 ? (
            <div className="p-6 text-center text-muted bg-surface">
              {searchTerm ? `No products match "${searchTerm}"` : "No products found"}
            </div>
          ) : (
            products.map(p => (
              <div 
                key={p.Pid} 
                onClick={() => router.push(`/pages/products/${p.Pid}`)}
                className="p-3 border-b border-border flex justify-between items-center hover:bg-surface-2 cursor-pointer bg-surface"
              >
                <div className="flex-1">
                  <div className="font-medium text-text">{p.Name || "Unnamed Product"}</div>
                  <div className="text-xs text-muted">
                    ID: {p.Pid}
                    {p.Barcode && ` • ${p.Barcode}`}
                    {p.PLU && ` • PLU: ${p.PLU}`}
                    {p.SupplierName && ` • Supplier: ${p.SupplierName}`}
                  </div>
                  {p.StockLevel !== undefined && (
                    <div className="text-xs">
                      <span className={`font-medium ${
                        p.StockMin !== undefined && p.StockLevel <= p.StockMin 
                          ? 'text-danger' 
                          : 'text-brand'
                      }`}>
                        Stock: {p.StockLevel}
                        {p.StockMin !== undefined && ` (Min: ${p.StockMin})`}
                      </span>
                    </div>
                  )}
                </div>
                <div className="flex items-center gap-3">
                  <div className="text-right">
                    <div className="text-brand font-bold">${p.SellPrice ? p.SellPrice.toFixed(2) : '0.00'}</div>
                    {p.StockLevel !== undefined && p.StockMin !== undefined && p.StockLevel <= p.StockMin && (
                      <div className="text-xs text-danger font-medium">LOW STOCK</div>
                    )}
                  </div>
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      setSelectedProduct(p);
                      setShowStockModal(true);
                    }}
                    className="px-3 py-1 text-sm bg-brand text-white rounded hover:opacity-90"
                  >
                    Edit Stock
                  </button>
                </div>
              </div>
            ))
          )}
        </div>
        
        {/* Pagination Controls */}
        {!loading && products.length > 0 && (
          <div className="mt-4 flex justify-between items-center">
            <div className="text-sm text-muted">
              {totalCount ? (
                <>
                  Showing {currentPage * pageSize + 1}-{Math.min((currentPage + 1) * pageSize, totalCount)} of {totalCount} products
                </>
              ) : (
                <>
                  Page {currentPage + 1}
                </>
              )}
            </div>
            <div className="flex gap-2">
              <button
                onClick={() => {
                  const newPage = currentPage - 1;
                  setCurrentPage(newPage);
                  loadProducts(newPage);
                }}
                disabled={currentPage === 0}
                className="px-4 py-2 border border-border rounded-lg bg-surface text-text disabled:opacity-50 disabled:cursor-not-allowed hover:bg-surface-2"
              >
                Previous
              </button>
              <button
                onClick={() => {
                  const newPage = currentPage + 1;
                  setCurrentPage(newPage);
                  loadProducts(newPage);
                }}
                disabled={!hasMore || (totalCount > 0 && (currentPage + 1) * pageSize >= totalCount)}
                className="px-4 py-2 border border-border rounded-lg bg-surface text-text disabled:opacity-50 disabled:cursor-not-allowed hover:bg-surface-2"
              >
                Next
              </button>
            </div>
          </div>
        )}
      </div>
 
      {/* Stock Edit Modal */}
      {showStockModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-surface rounded-lg shadow-xl border border-border max-w-md w-full mx-4 p-6">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-xl font-bold text-text">
                {selectedProduct ? `Edit Stock: ${selectedProduct.Name}` : 'Create New Product'}
              </h2>
              <button
                onClick={() => {
                  setShowStockModal(false);
                  setSelectedProduct(null);
                }}
                className="text-muted hover:text-text"
              >
                ✕
              </button>
            </div>
            
            {selectedProduct ? (
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-text mb-1">Product</label>
                  <div className="p-3 bg-surface-2 rounded border border-border">
                    <div className="font-medium text-text">{selectedProduct.Name}</div>
                    <div className="text-xs text-muted">ID: {selectedProduct.Pid}</div>
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-text mb-1">Current Stock</label>
                  <div className="text-2xl font-bold text-text">
                    {selectedProduct.StockLevel ?? 'N/A'}
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-text mb-1">Adjust Stock</label>
                  <input
                    type="number"
                    className="w-full p-3 border border-border rounded-lg bg-surface text-text focus:ring-2 focus:ring-brand"
                    placeholder="Enter adjustment (+/-)"
                    value={stockAdjustment}
                    onChange={(e) => setStockAdjustment(e.target.value)}
                    disabled={saving}
                  />
                  <div className="text-xs text-muted mt-1">
                    Enter positive number to add stock, negative to reduce
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-text mb-1">Reason</label>
                  <select 
                    className="w-full p-3 border border-border rounded-lg bg-surface text-text focus:ring-2 focus:ring-brand"
                    value={stockReason}
                    onChange={(e) => setStockReason(e.target.value)}
                    disabled={saving}
                  >
                    <option value="">Select reason...</option>
                    <option value="received">Stock Received</option>
                    <option value="sale">Sale</option>
                    <option value="damage">Damage/Loss</option>
                    <option value="return">Return</option>
                    <option value="adjustment">Manual Adjustment</option>
                  </select>
                </div>
                
                {saveMessage && (
                  <div className={`p-3 rounded-lg text-sm ${
                    saveMessage.startsWith('✓') 
                      ? 'bg-brand/10 text-brand border border-brand' 
                      : 'bg-danger/10 text-danger border border-danger'
                  }`}>
                    {saveMessage}
                  </div>
                )}
                
                <div className="flex gap-3 pt-4">
                  <button
                    onClick={handleStockUpdate}
                    disabled={saving}
                    className="flex-1 px-4 py-2 bg-brand text-white rounded-lg hover:opacity-90 font-medium disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    {saving ? 'Updating...' : 'Update Stock'}
                  </button>
                  <button
                    onClick={() => {
                      setShowStockModal(false);
                      setSelectedProduct(null);
                      setStockAdjustment("");
                      setStockReason("");
                      setSaveMessage("");
                    }}
                    disabled={saving}
                    className="px-4 py-2 border border-border rounded-lg bg-surface text-text hover:bg-surface-2 disabled:opacity-50"
                  >
                    Cancel
                  </button>
                </div>
              </div>
            ) : (
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-text mb-1">Product Name</label>
                  <input
                    type="text"
                    className="w-full p-3 border border-border rounded-lg bg-surface text-text focus:ring-2 focus:ring-brand"
                    placeholder="Enter product name"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-text mb-1">Barcode/PLU</label>
                  <input
                    type="text"
                    className="w-full p-3 border border-border rounded-lg bg-surface text-text focus:ring-2 focus:ring-brand"
                    placeholder="Enter barcode"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-text mb-1">Sell Price</label>
                  <input
                    type="number"
                    step="0.01"
                    className="w-full p-3 border border-border rounded-lg bg-surface text-text focus:ring-2 focus:ring-brand"
                    placeholder="0.00"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-text mb-1">Initial Stock</label>
                  <input
                    type="number"
                    className="w-full p-3 border border-border rounded-lg bg-surface text-text focus:ring-2 focus:ring-brand"
                    placeholder="0"
                  />
                </div>
                
                <div className="flex gap-3 pt-4">
                  <button
                    onClick={() => {
                      alert('Product creation functionality will be implemented with API integration');
                    }}
                    className="flex-1 px-4 py-2 bg-brand text-white rounded-lg hover:opacity-90 font-medium"
                  >
                    Create Product
                  </button>
                  <button
                    onClick={() => {
                      setShowStockModal(false);
                      setSelectedProduct(null);
                    }}
                    className="px-4 py-2 border border-border rounded-lg bg-surface text-text hover:bg-surface-2"
                  >
                    Cancel
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}