import React, { useState, useEffect } from 'react';
import { 
  BeakerIcon,
  MagnifyingGlassIcon,
  PlusIcon,
  PencilIcon,
  TrashIcon,
  ExclamationTriangleIcon,
  TagIcon,
  ArrowUpIcon,
  InformationCircleIcon
} from '@heroicons/react/24/outline';
import { adminAPI, productsAPI } from '../../services/api';
import LoadingSpinner from '../../components/UI/LoadingSpinner';
import toast from 'react-hot-toast';

const AdminProducts = () => {
  const [products, setProducts] = useState([]);
  const [userProducts, setUserProducts] = useState([]);
  const [categories, setCategories] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [categoryFilter, setCategoryFilter] = useState('all');
  const [typeFilter, setTypeFilter] = useState('all');
  const [productTypeFilter, setProductTypeFilter] = useState('all');
  const [selectedProduct, setSelectedProduct] = useState(null);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [showDetailsModal, setShowDetailsModal] = useState(false);
  const [productDetails, setProductDetails] = useState({ rates: [], spreaderSettings: [] });
  const [showAddSettingForm, setShowAddSettingForm] = useState(false);
  const [newSettingData, setNewSettingData] = useState({
    equipmentId: '',
    spreaderBrand: '',
    spreaderModel: '',
    settingValue: '',
    rateDescription: '',
    notes: ''
  });
  const [formData, setFormData] = useState({
    name: '',
    brand: '',
    categoryId: '',
    productType: 'granular',
    activeIngredients: '',
    description: '',
    seedBlend: [],
    rates: [{ applicationType: 'granular', rateAmount: '', rateUnit: 'lbs/1000 sq ft', notes: '' }]
  });

  useEffect(() => {
    fetchData();
  }, [searchTerm, categoryFilter, typeFilter]);

  const fetchData = async () => {
    try {
      setLoading(true);
      const [productsResponse, userProductsResponse, categoriesResponse] = await Promise.all([
        adminAPI.getProducts({ 
          search: searchTerm,
          category: categoryFilter !== 'all' ? categoryFilter : '',
          type: typeFilter !== 'all' ? typeFilter : ''
        }),
        adminAPI.getAllUserProducts({
          search: searchTerm,
          category: categoryFilter !== 'all' ? categoryFilter : ''
        }),
        productsAPI.getCategories()
      ]);

      setProducts(productsResponse.data.data.products || []);
      setUserProducts(userProductsResponse.data.data.userProducts || []);
      setCategories(categoriesResponse.data.data.categories || []);
    } catch (error) {
      console.error('Failed to fetch products:', error);
      toast.error('Failed to load products');
    } finally {
      setLoading(false);
    }
  };

  const handleCreate = async (e) => {
    e.preventDefault();
    try {
      await adminAPI.createProduct(formData);
      toast.success('Product created successfully');
      setShowCreateModal(false);
      resetForm();
      fetchData();
    } catch (error) {
      console.error('Failed to create product:', error);
      toast.error('Failed to create product');
    }
  };

  const handleUpdate = async (e) => {
    e.preventDefault();
    try {
      await adminAPI.updateProduct(selectedProduct.id, formData);
      toast.success('Product updated successfully');
      setShowEditModal(false);
      resetForm();
      fetchData();
    } catch (error) {
      console.error('Failed to update product:', error);
      toast.error('Failed to update product');
    }
  };

  const handleDelete = async () => {
    try {
      if (selectedProduct.isShared) {
        await adminAPI.deleteProduct(selectedProduct.id);
      } else {
        try {
          await productsAPI.deleteUserProduct(selectedProduct.id);
        } catch (e) {
          const msg = e?.response?.data?.message || '';
          if (msg.includes('used in applications')) {
            // Fallback to archive instead of delete
            await productsAPI.archiveUserProduct(selectedProduct.id);
            toast('Product archived instead of deleted (in use)');
          } else {
            throw e;
          }
        }
      }
      toast.success('Product deleted successfully');
      setShowDeleteModal(false);
      setSelectedProduct(null);
      fetchData();
    } catch (error) {
      console.error('Failed to delete product:', error);
      toast.error(error?.response?.data?.message || 'Failed to delete product');
    }
  };

  const handlePromoteToShared = async (userProduct) => {
    try {
      await adminAPI.promoteUserProduct(userProduct.id);
      toast.success(`"${userProduct.customName}" promoted to shared product`);
      fetchData(); // Refresh the data
    } catch (error) {
      console.error('Failed to promote product:', error);
      toast.error('Failed to promote product to shared');
    }
  };

  const showProductDetails = async (product) => {
    try {
      setSelectedProduct(product);
      let rates = [];
      let spreaderSettings = [];

      if (product.isShared) {
        // Fetch application rates for shared products
        const ratesResponse = await adminAPI.getProductRates(product.id);
        rates = ratesResponse.data.data.rates || [];
      } else {
        // Fetch spreader settings for user products
        const settingsResponse = await adminAPI.getUserProductSpreaderSettings(product.id);
        spreaderSettings = settingsResponse.data.data.spreaderSettings || [];
      }

      setProductDetails({ rates, spreaderSettings });
      setShowDetailsModal(true);
    } catch (error) {
      console.error('Failed to fetch product details:', error);
      toast.error('Failed to load product details');
    }
  };

  const handleAddSpreaderSetting = async (e) => {
    e.preventDefault();
    try {
      await adminAPI.addUserProductSpreaderSetting(selectedProduct.id, newSettingData);
      toast.success('Spreader setting added successfully');
      setShowAddSettingForm(false);
      setNewSettingData({
        equipmentId: '',
        spreaderBrand: '',
        spreaderModel: '',
        settingValue: '',
        rateDescription: '',
        notes: ''
      });
      // Refresh the settings
      showProductDetails(selectedProduct);
    } catch (error) {
      console.error('Failed to add spreader setting:', error);
      toast.error('Failed to add spreader setting');
    }
  };

  const handleDeleteSpreaderSetting = async (settingId) => {
    try {
      await adminAPI.deleteUserProductSpreaderSetting(settingId);
      toast.success('Spreader setting deleted successfully');
      // Refresh the settings
      showProductDetails(selectedProduct);
    } catch (error) {
      console.error('Failed to delete spreader setting:', error);
      toast.error('Failed to delete spreader setting');
    }
  };

  const resetForm = () => {
    setFormData({
      name: '',
      brand: '',
      categoryId: '',
      productType: 'granular',
      activeIngredients: '',
      description: '',
      seedBlend: [],
      rates: [{ applicationType: 'granular', rateAmount: '', rateUnit: 'lbs/1000 sq ft', notes: '' }]
    });
    setSelectedProduct(null);
  };

  const openEditModal = (product) => {
    setSelectedProduct(product);
    setFormData({
      name: product.name || product.customName || '',
      brand: product.brand || product.customBrand || '',
      categoryId: product.categoryId || '',
      productType: product.productType || product.customProductType || 'granular',
      activeIngredients: product.activeIngredients || product.customActiveIngredients || '',
      description: product.description || product.customDescription || '',
      seedBlend: product.seedBlend || [],
      rates: product.rates && product.rates.length > 0 ? product.rates : [{ 
        applicationType: product.productType || 'granular', 
        rateAmount: product.customRateAmount || '', 
        rateUnit: product.customRateUnit || 'lbs/1000 sq ft', 
        notes: '' 
      }]
    });
    setShowEditModal(true);
  };

  const addRate = () => {
    setFormData(prev => ({
      ...prev,
      rates: [...prev.rates, { applicationType: prev.productType, rateAmount: '', rateUnit: prev.productType === 'granular' ? 'lbs/1000 sq ft' : 'oz/1000 sq ft', notes: '' }]
    }));
  };

  const removeRate = (index) => {
    setFormData(prev => ({
      ...prev,
      rates: prev.rates.filter((_, i) => i !== index)
    }));
  };

  const updateRate = (index, field, value) => {
    setFormData(prev => ({
      ...prev,
      rates: prev.rates.map((rate, i) => 
        i === index ? { ...rate, [field]: value } : rate
      )
    }));
  };

  // Combine shared and user products based on filter
  const allProducts = [
    ...(productTypeFilter === 'custom' ? [] : products.map(p => ({ ...p, isShared: true }))),
    ...(productTypeFilter === 'shared' ? [] : userProducts.map(p => ({ ...p, isShared: false })))
  ];

  const ProductForm = ({ onSubmit, submitText }) => (
    <form onSubmit={onSubmit} className="space-y-4">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Product Name *
          </label>
          <input
            type="text"
            required
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Brand
          </label>
          <input
            type="text"
            value={formData.brand}
            onChange={(e) => setFormData({ ...formData, brand: e.target.value })}
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Category
          </label>
          <select
            value={formData.categoryId}
            onChange={(e) => setFormData({ ...formData, categoryId: e.target.value })}
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">Select Category</option>
            {categories.map(cat => (
              <option key={cat.id} value={cat.id}>{cat.name}</option>
            ))}
          </select>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Product Type *
          </label>
          <select
            required
            value={formData.productType}
            onChange={(e) => setFormData({ ...formData, productType: e.target.value })}
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="granular">Granular</option>
            <option value="liquid">Liquid</option>
            <option value="seed">Seed</option>
            <option value="powder">Powder</option>
          </select>
        </div>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Active Ingredients
        </label>
        <textarea
          value={formData.activeIngredients}
          onChange={(e) => setFormData({ ...formData, activeIngredients: e.target.value })}
          rows="3"
          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Description
        </label>
        <textarea
          value={formData.description}
          onChange={(e) => setFormData({ ...formData, description: e.target.value })}
          rows="3"
          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      {/* Seed blend editor */}
      {formData.productType === 'seed' && (
        <div>
          <div className="flex items-center justify-between mb-2">
            <label className="block text-sm font-medium text-gray-700">Seed Blend (Cultivars + %)</label>
            <button
              type="button"
              onClick={() => setFormData({ ...formData, seedBlend: [...(formData.seedBlend||[]), { cultivar: '', percent: '' }] })}
              className="text-sm text-blue-600 hover:text-blue-800"
            >
              + Add Cultivar
            </button>
          </div>
          {(formData.seedBlend && formData.seedBlend.length > 0) ? (
            <div className="space-y-2">
              {formData.seedBlend.map((row, idx) => (
                <div key={idx} className="grid grid-cols-6 gap-2 items-center">
                  <input
                    className="col-span-4 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="Cultivar name"
                    value={row.cultivar}
                    onChange={(e)=> {
                      const next = [...formData.seedBlend];
                      next[idx] = { ...next[idx], cultivar: e.target.value };
                      setFormData({ ...formData, seedBlend: next });
                    }}
                  />
                  <input
                    type="number"
                    step="0.1"
                    className="col-span-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="%"
                    value={row.percent}
                    onChange={(e)=> {
                      const next = [...formData.seedBlend];
                      next[idx] = { ...next[idx], percent: e.target.value };
                      setFormData({ ...formData, seedBlend: next });
                    }}
                  />
                  <button
                    type="button"
                    className="text-red-600"
                    onClick={()=> {
                      const next = (formData.seedBlend||[]).filter((_,i)=> i!==idx);
                      setFormData({ ...formData, seedBlend: next });
                    }}
                  >
                    Remove
                  </button>
                </div>
              ))}
              <div className="text-xs text-gray-600">
                Total: {((formData.seedBlend||[]).reduce((s,r)=> s + (parseFloat(r.percent)||0), 0)).toFixed(1)}%
              </div>
            </div>
          ) : (
            <div className="text-sm text-gray-500">No cultivars added yet.</div>
          )}
        </div>
      )}

      {/* Application Rates */}
      <div>
        <div className="flex justify-between items-center mb-2">
          <label className="block text-sm font-medium text-gray-700">
            Application Rates
          </label>
          <button
            type="button"
            onClick={addRate}
            className="text-sm text-blue-600 hover:text-blue-800"
          >
            + Add Rate
          </button>
        </div>
        {formData.rates.map((rate, index) => (
          <div key={index} className="border border-gray-200 rounded-md p-3 mb-2">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-2 mb-2">
              <input
                type="number"
                placeholder="Rate Amount"
                value={rate.rateAmount}
                onChange={(e) => updateRate(index, 'rateAmount', e.target.value)}
                className="px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
              />
              <select
                value={rate.rateUnit}
                onChange={(e) => updateRate(index, 'rateUnit', e.target.value)}
                className="px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
              >
                <option value="lbs/1000 sq ft">lbs/1000 sq ft</option>
                <option value="oz/1000 sq ft">oz/1000 sq ft</option>
                <option value="lbs/acre">lbs/acre</option>
                <option value="oz/acre">oz/acre</option>
              </select>
              {formData.rates.length > 1 && (
                <button
                  type="button"
                  onClick={() => removeRate(index)}
                  className="text-red-600 hover:text-red-800 text-sm"
                >
                  Remove
                </button>
              )}
            </div>
            <input
              type="text"
              placeholder="Notes (optional)"
              value={rate.notes}
              onChange={(e) => updateRate(index, 'notes', e.target.value)}
              className="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
            />
          </div>
        ))}
      </div>

      <div className="flex justify-end space-x-3 pt-4">
        <button
          type="button"
          onClick={() => {
            setShowCreateModal(false);
            setShowEditModal(false);
            resetForm();
          }}
          className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
        >
          Cancel
        </button>
        <button
          type="submit"
          className="px-4 py-2 text-sm text-white bg-blue-600 rounded hover:bg-blue-700"
        >
          {submitText}
        </button>
      </div>
    </form>
  );

  return (
    <div className="p-6">
      <div className="mb-6">
        <div className="flex justify-between items-center mb-4">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">Manage Products</h1>
            <p className="text-gray-600">Add, edit, and manage all lawn care products</p>
          </div>
          <button
            onClick={() => setShowCreateModal(true)}
            className="btn-primary flex items-center"
          >
            <PlusIcon className="h-5 w-5 mr-2" />
            Add Product
          </button>
        </div>

        {/* Search and Filters */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
          <div className="relative">
            <MagnifyingGlassIcon className="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
            <input
              type="text"
              placeholder="Search products..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"
            />
          </div>
          <select
            value={categoryFilter}
            onChange={(e) => setCategoryFilter(e.target.value)}
            className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="all">All Categories</option>
            {categories.map(cat => (
              <option key={cat.id} value={cat.id}>{cat.name}</option>
            ))}
          </select>
          <select
            value={typeFilter}
            onChange={(e) => setTypeFilter(e.target.value)}
            className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="all">All Types</option>
            <option value="granular">Granular</option>
            <option value="liquid">Liquid</option>
            <option value="seed">Seed</option>
            <option value="powder">Powder</option>
          </select>
          <select
            value={productTypeFilter}
            onChange={(e) => setProductTypeFilter(e.target.value)}
            className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="all">All Products</option>
            <option value="shared">Shared Only</option>
            <option value="custom">Custom Only</option>
          </select>
        </div>
      </div>

      {loading && !showCreateModal && !showEditModal && !showDetailsModal && !showDeleteModal ? (
        <div className="flex justify-center items-center h-64">
          <LoadingSpinner size="lg" />
        </div>
      ) : (
        <div className="card overflow-hidden">
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Product
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Type
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Category
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Source
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Owner
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Usage
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {allProducts.map((product) => (
                  <tr key={`${product.isShared ? 'shared' : 'custom'}-${product.id}`} className="hover:bg-gray-50">
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="flex items-center">
                        <div className="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
                          <BeakerIcon className="h-6 w-6 text-green-600" />
                        </div>
                        <div className="ml-4">
                          <div className="text-sm font-medium text-gray-900">
                            {product.name || product.customName}
                          </div>
                          <div className="text-sm text-gray-500">
                            {product.brand || product.customBrand}
                          </div>
                        </div>
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`px-2 py-1 text-xs font-medium rounded-full ${
                        product.productType === 'granular'
                          ? 'bg-green-100 text-green-800'
                          : product.productType === 'liquid'
                          ? 'bg-blue-100 text-blue-800'
                          : product.productType === 'seed'
                          ? 'bg-yellow-100 text-yellow-800'
                          : product.productType === 'powder'
                          ? 'bg-purple-100 text-purple-800'
                          : 'bg-gray-100 text-gray-800'
                      }`}>
                        {product.productType}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      {product.categoryName || 'Uncategorized'}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`px-2 py-1 text-xs font-medium rounded-full ${
                        product.isShared 
                          ? 'bg-purple-100 text-purple-800' 
                          : 'bg-orange-100 text-orange-800'
                      }`}>
                        {product.isShared ? 'Shared' : 'Custom'}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      {product.isShared ? (
                        <span className="text-gray-500">System</span>
                      ) : (
                        <div>
                          <div className="font-medium">{product.userName}</div>
                          <div className="text-xs text-gray-500">{product.userEmail}</div>
                        </div>
                      )}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      {product.isShared ? (
                        <div>
                          <div>{product.rateCount || 0} rates</div>
                          <div className="text-xs text-gray-500">{product.usageCount || 0} users</div>
                        </div>
                      ) : (
                        <div>
                          <div>{product.spreaderSettingsCount || 0} spreader settings</div>
                          <div className="text-xs text-gray-500">{product.usageCount || 0} applications</div>
                        </div>
                      )}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                      <div className="flex items-center space-x-2">
                        <button
                          onClick={() => showProductDetails(product)}
                          className="text-blue-600 hover:text-blue-900"
                          title="View Rates & Settings"
                        >
                          <InformationCircleIcon className="h-4 w-4" />
                        </button>
                        {!product.isShared && (
                          <button
                            onClick={() => handlePromoteToShared(product)}
                            className="text-green-600 hover:text-green-900"
                            title="Promote to Shared Product"
                          >
                            <ArrowUpIcon className="h-4 w-4" />
                          </button>
                        )}
                        <button
                          onClick={() => openEditModal(product)}
                          className="text-indigo-600 hover:text-indigo-900"
                          title="Edit Product"
                        >
                          <PencilIcon className="h-4 w-4" />
                        </button>
                        <button
                          onClick={() => {
                            setSelectedProduct(product);
                            setShowDeleteModal(true);
                          }}
                          className="text-red-600 hover:text-red-900"
                          title="Delete Product"
                        >
                          <TrashIcon className="h-4 w-4" />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Create Modal */}
      {showCreateModal && (
        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
          <div className="relative top-10 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-md bg-white">
            <div className="mt-3">
              <h3 className="text-lg font-medium text-gray-900 mb-4">
                Create New Product
              </h3>
              <ProductForm onSubmit={handleCreate} submitText="Create Product" />
            </div>
          </div>
        </div>
      )}

      {/* Edit Modal */}
      {showEditModal && (
        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
          <div className="relative top-10 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-md bg-white">
            <div className="mt-3">
              <h3 className="text-lg font-medium text-gray-900 mb-4">
                Edit Product
              </h3>
              <ProductForm onSubmit={handleUpdate} submitText="Update Product" />
            </div>
          </div>
        </div>
      )}

      {/* Delete Modal */}
      {showDeleteModal && selectedProduct && (
        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
          <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div className="mt-3">
              <div className="flex items-center mb-4">
                <ExclamationTriangleIcon className="h-6 w-6 text-red-600 mr-2" />
                <h3 className="text-lg font-medium text-gray-900">
                  Delete Product
                </h3>
              </div>
              <p className="text-sm text-gray-600 mb-6">
                Are you sure you want to delete "{selectedProduct.name || selectedProduct.customName}"? 
                This action cannot be undone.
              </p>
              <div className="flex justify-end space-x-3">
                <button
                  onClick={() => setShowDeleteModal(false)}
                  className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
                >
                  Cancel
                </button>
                <button
                  onClick={handleDelete}
                  className="px-4 py-2 text-sm text-white bg-red-600 rounded hover:bg-red-700"
                >
                  Delete Product
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Product Details Modal */}
      {showDetailsModal && selectedProduct && (
        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
          <div className="relative top-10 mx-auto p-5 border w-full max-w-4xl shadow-lg rounded-md bg-white">
            <div className="mt-3">
              <h3 className="text-lg font-medium text-gray-900 mb-4">
                {selectedProduct.isShared ? 'Application Rates' : 'Spreader Settings'} - {selectedProduct.name || selectedProduct.customName}
              </h3>
              
              {selectedProduct.isShared ? (
                <div>
                  <h4 className="text-md font-semibold text-gray-800 mb-3">Application Rates ({productDetails.rates.length})</h4>
                  {productDetails.rates.length > 0 ? (
                    <div className="overflow-x-auto">
                      <table className="min-w-full divide-y divide-gray-200">
                        <thead className="bg-gray-50">
                          <tr>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rate</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Unit</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Notes</th>
                          </tr>
                        </thead>
                        <tbody className="bg-white divide-y divide-gray-200">
                          {productDetails.rates.map((rate, index) => (
                            <tr key={index} className="hover:bg-gray-50">
                              <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {rate.applicationType}
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {rate.rateAmount}
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {rate.rateUnit}
                              </td>
                              <td className="px-6 py-4 text-sm text-gray-900">
                                {rate.notes || 'No notes'}
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                    <p className="text-gray-500 text-center py-8">No application rates defined for this product.</p>
                  )}
                </div>
              ) : (
                <div>
                  <h4 className="text-md font-semibold text-gray-800 mb-3">Spreader Settings ({productDetails.spreaderSettings.length})</h4>
                  {productDetails.spreaderSettings.length > 0 ? (
                    <div className="overflow-x-auto">
                      <table className="min-w-full divide-y divide-gray-200">
                        <thead className="bg-gray-50">
                          <tr>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Equipment</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Spreader</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Setting Value</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rate Description</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Notes</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                          </tr>
                        </thead>
                        <tbody className="bg-white divide-y divide-gray-200">
                          {productDetails.spreaderSettings.map((setting, index) => (
                            <tr key={index} className="hover:bg-gray-50">
                              <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {setting.equipmentName || 'Generic Equipment'}
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {setting.spreaderBrand} {setting.spreaderModel}
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {setting.settingValue || 'N/A'}
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {setting.rateDescription || 'Not specified'}
                              </td>
                              <td className="px-6 py-4 text-sm text-gray-900">
                                {setting.notes || 'No notes'}
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button
                                  onClick={() => handleDeleteSpreaderSetting(setting.id)}
                                  className="text-red-600 hover:text-red-900"
                                  title="Delete Setting"
                                >
                                  <TrashIcon className="h-4 w-4" />
                                </button>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                    <p className="text-gray-500 text-center py-8">No spreader settings configured for this product.</p>
                  )}
                  
                  {/* Add Setting Button */}
                  <div className="mt-4">
                    {!showAddSettingForm ? (
                      <button
                        onClick={() => setShowAddSettingForm(true)}
                        className="btn-primary flex items-center text-sm"
                      >
                        <PlusIcon className="h-4 w-4 mr-1" />
                        Add Spreader Setting
                      </button>
                    ) : (
                      <div className="border rounded-lg p-4 bg-gray-50">
                        <h5 className="text-sm font-semibold text-gray-800 mb-3">Add New Spreader Setting</h5>
                        <form onSubmit={handleAddSpreaderSetting} className="space-y-3">
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div>
                              <label className="block text-xs font-medium text-gray-700 mb-1">Spreader Brand</label>
                              <input
                                type="text"
                                required
                                value={newSettingData.spreaderBrand}
                                onChange={(e) => setNewSettingData({ ...newSettingData, spreaderBrand: e.target.value })}
                                className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
                                placeholder="e.g. Scotts, TruGreen"
                              />
                            </div>
                            <div>
                              <label className="block text-xs font-medium text-gray-700 mb-1">Spreader Model</label>
                              <input
                                type="text"
                                value={newSettingData.spreaderModel}
                                onChange={(e) => setNewSettingData({ ...newSettingData, spreaderModel: e.target.value })}
                                className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
                                placeholder="e.g. EdgeGuard, DLX"
                              />
                            </div>
                          </div>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div>
                              <label className="block text-xs font-medium text-gray-700 mb-1">Setting Value</label>
                              <input
                                type="text"
                                value={newSettingData.settingValue}
                                onChange={(e) => setNewSettingData({ ...newSettingData, settingValue: e.target.value })}
                                className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
                                placeholder="e.g. 3.5, M, Large"
                              />
                            </div>
                            <div>
                              <label className="block text-xs font-medium text-gray-700 mb-1">Rate Description</label>
                              <input
                                type="text"
                                value={newSettingData.rateDescription}
                                onChange={(e) => setNewSettingData({ ...newSettingData, rateDescription: e.target.value })}
                                className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
                                placeholder="e.g. 2.5 lbs/1000 sq ft"
                              />
                            </div>
                          </div>
                          <div>
                            <label className="block text-xs font-medium text-gray-700 mb-1">Notes</label>
                            <textarea
                              value={newSettingData.notes}
                              onChange={(e) => setNewSettingData({ ...newSettingData, notes: e.target.value })}
                              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
                              rows="2"
                              placeholder="Additional notes or instructions"
                            />
                          </div>
                          <div className="flex justify-end space-x-2">
                            <button
                              type="button"
                              onClick={() => {
                                setShowAddSettingForm(false);
                                setNewSettingData({
                                  equipmentId: '',
                                  spreaderBrand: '',
                                  spreaderModel: '',
                                  settingValue: '',
                                  rateDescription: '',
                                  notes: ''
                                });
                              }}
                              className="px-3 py-1 text-xs text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
                            >
                              Cancel
                            </button>
                            <button
                              type="submit"
                              className="px-3 py-1 text-xs text-white bg-blue-600 rounded hover:bg-blue-700"
                            >
                              Add Setting
                            </button>
                          </div>
                        </form>
                      </div>
                    )}
                  </div>
                </div>
              )}

              <div className="flex justify-end mt-6">
                <button
                  onClick={() => {
                    setShowDetailsModal(false);
                    setSelectedProduct(null);
                    setProductDetails({ rates: [], spreaderSettings: [] });
                    setShowAddSettingForm(false);
                    setNewSettingData({
                      equipmentId: '',
                      spreaderBrand: '',
                      spreaderModel: '',
                      settingValue: '',
                      rateDescription: '',
                      notes: ''
                    });
                  }}
                  className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default AdminProducts;