import React, { useState, useEffect } from 'react';
import { Package, ShoppingCart, Users, TrendingUp, Camera, Send, LogOut, Eye, Edit, Trash2, Plus } from 'lucide-react';

const GarmentShopApp = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [currentUser, setCurrentUser] = useState('');
  const [currentTab, setCurrentTab] = useState('dashboard');
  const [stockItems, setStockItems] = useState([]);
  const [sales, setSales] = useState([]);
  const [showAddStock, setShowAddStock] = useState(false);
  const [showSaleModal, setShowSaleModal] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);

  // Stock form state
  const [stockForm, setStockForm] = useState({
    itemName: '',
    category: '',
    size: '',
    color: '',
    stockType: 'new',
    quantity: '',
    buyingPrice: '',
    salePrice: '',
    photo: null
  });

  // Sale form state
  const [saleForm, setSaleForm] = useState({
    itemId: '',
    quantitySold: '',
    soldPrice: '',
    customerName: '',
    customerMobile: ''
  });

  // Add stock item
  const handleAddStock = () => {
    if (!stockForm.itemName || !stockForm.category || !stockForm.size || !stockForm.color || 
        !stockForm.quantity || !stockForm.buyingPrice || !stockForm.salePrice) {
      alert('Please fill all required fields');
      return;
    }
    
    const newItem = {
      id: Date.now().toString(),
      ...stockForm,
      dateAdded: new Date().toLocaleDateString('hi-IN'),
      remainingQuantity: parseInt(stockForm.quantity)
    };
    
    setStockItems([...stockItems, newItem]);
    setStockForm({
      itemName: '',
      category: '',
      size: '',
      color: '',
      stockType: 'new',
      quantity: '',
      buyingPrice: '',
      salePrice: '',
      photo: null
    });
    setShowAddStock(false);
  };

  // Handle photo upload
  const handlePhotoUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        setStockForm({...stockForm, photo: e.target.result});
      };
      reader.readAsDataURL(file);
    }
  };

  // Add sale
  const handleSale = () => {
    if (!saleForm.quantitySold || !saleForm.soldPrice || !saleForm.customerName || !saleForm.customerMobile) {
      alert('Please fill all required fields');
      return;
    }

    const item = stockItems.find(item => item.id === saleForm.itemId);
    
    if (!item || item.remainingQuantity < parseInt(saleForm.quantitySold)) {
      alert('Insufficient stock!');
      return;
    }

    if (saleForm.customerMobile.length !== 10) {
      alert('Please enter a valid 10-digit mobile number');
      return;
    }

    const newSale = {
      id: Date.now().toString(),
      ...saleForm,
      itemName: item.itemName,
      date: new Date().toLocaleDateString('hi-IN'),
      time: new Date().toLocaleTimeString('hi-IN'),
      profit: (parseFloat(saleForm.soldPrice) - parseFloat(item.buyingPrice)) * parseInt(saleForm.quantitySold)
    };

    // Update stock
    const updatedStock = stockItems.map(stockItem => 
      stockItem.id === saleForm.itemId 
        ? {...stockItem, remainingQuantity: stockItem.remainingQuantity - parseInt(saleForm.quantitySold)}
        : stockItem
    );

    setStockItems(updatedStock);
    setSales([...sales, newSale]);
    
    // Generate WhatsApp receipt
    generateWhatsAppReceipt(newSale, item);
    
    setSaleForm({
      itemId: '',
      quantitySold: '',
      soldPrice: '',
      customerName: '',
      customerMobile: ''
    });
    setShowSaleModal(false);
  };

  // Generate WhatsApp receipt
  const generateWhatsAppReceipt = (sale, item) => {
    const message = `🛍️ *${currentUser} Garments Receipt*\n\n` +
                   `📅 Date: ${sale.date}\n` +
                   `🕐 Time: ${sale.time}\n\n` +
                   `👤 Customer: ${sale.customerName}\n` +
                   `📱 Mobile: ${sale.customerMobile}\n\n` +
                   `📦 Item: ${sale.itemName}\n` +
                   `📏 Size: ${item.size}\n` +
                   `🎨 Color: ${item.color}\n` +
                   `🔢 Quantity: ${sale.quantitySold}\n` +
                   `💰 Price per piece: ₹${sale.soldPrice}\n` +
                   `💵 Total Amount: ₹${sale.soldPrice * sale.quantitySold}\n\n` +
                   `🙏 Thank you for shopping with us!\n` +
                   `For any queries: Contact us`;

    const whatsappUrl = `https://wa.me/91${sale.customerMobile}?text=${encodeURIComponent(message)}`;
    
    // Show the generated message first
    alert(`WhatsApp Receipt Generated!\n\nMessage:\n${message}\n\nClick OK to open WhatsApp`);
    
    // Open WhatsApp with pre-filled message
    window.open(whatsappUrl, '_blank');
    
    // Also show a demo of what will happen
    console.log('WhatsApp URL:', whatsappUrl);
  };

  // Dashboard stats
  const totalStock = stockItems.reduce((sum, item) => sum + item.remainingQuantity, 0);
  const totalStockValue = stockItems.reduce((sum, item) => sum + (item.remainingQuantity * parseFloat(item.salePrice || 0)), 0);
  const totalSales = sales.reduce((sum, sale) => sum + (parseFloat(sale.soldPrice) * parseInt(sale.quantitySold)), 0);
  const totalProfit = sales.reduce((sum, sale) => sum + parseFloat(sale.profit || 0), 0);

  if (!isLoggedIn) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
        <div className="bg-white p-8 rounded-2xl shadow-xl w-full max-w-md">
          <div className="text-center mb-8">
            <Package className="mx-auto h-12 w-12 text-indigo-600 mb-4" />
            <h1 className="text-2xl font-bold text-gray-900">Garment Shop Manager</h1>
            <p className="text-gray-600">Sign in to manage your inventory</p>
          </div>
          
          <div className="space-y-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Username</label>
              <input
                type="text"
                id="username"
                required
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                placeholder="Enter your username"
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Password</label>
              <input
                type="password"
                id="password"
                required
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                placeholder="Enter your password"
              />
            </div>
            
            <button
              onClick={() => {
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                if (username && password) {
                  setCurrentUser(username);
                  setIsLoggedIn(true);
                }
              }}
              className="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition duration-200 font-medium"
            >
              Login
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm border-b">
        <div className="px-4 py-3 flex justify-between items-center">
          <div className="flex items-center space-x-3">
            <Package className="h-8 w-8 text-indigo-600" />
            <div>
              <h1 className="text-xl font-bold text-gray-900">Garment Shop Manager</h1>
              <p className="text-sm text-gray-600">Welcome back, {currentUser}</p>
            </div>
          </div>
          
          <button
            onClick={() => setIsLoggedIn(false)}
            className="flex items-center space-x-2 px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg transition"
          >
            <LogOut className="h-4 w-4" />
            <span>Logout</span>
          </button>
        </div>
      </header>

      <div className="flex">
        {/* Sidebar */}
        <nav className="w-64 bg-white shadow-sm h-screen sticky top-0">
          <div className="p-4 space-y-2">
            <button
              onClick={() => setCurrentTab('dashboard')}
              className={`w-full flex items-center space-x-3 px-3 py-2 rounded-lg transition ${
                currentTab === 'dashboard' ? 'bg-indigo-100 text-indigo-700' : 'text-gray-700 hover:bg-gray-100'
              }`}
            >
              <TrendingUp className="h-5 w-5" />
              <span>Dashboard</span>
            </button>
            
            <button
              onClick={() => setCurrentTab('stock')}
              className={`w-full flex items-center space-x-3 px-3 py-2 rounded-lg transition ${
                currentTab === 'stock' ? 'bg-indigo-100 text-indigo-700' : 'text-gray-700 hover:bg-gray-100'
              }`}
            >
              <Package className="h-5 w-5" />
              <span>Stock Management</span>
            </button>
            
            <button
              onClick={() => setCurrentTab('sales')}
              className={`w-full flex items-center space-x-3 px-3 py-2 rounded-lg transition ${
                currentTab === 'sales' ? 'bg-indigo-100 text-indigo-700' : 'text-gray-700 hover:bg-gray-100'
              }`}
            >
              <ShoppingCart className="h-5 w-5" />
              <span>Sales</span>
            </button>
          </div>
        </nav>

        {/* Main Content */}
        <main className="flex-1 p-6">
          {currentTab === 'dashboard' && (
            <div>
              <h2 className="text-2xl font-bold text-gray-900 mb-6">Dashboard</h2>
              
              {/* WhatsApp Demo Button */}
              <div className="bg-green-50 border border-green-200 rounded-xl p-4 mb-6">
                <div className="flex items-center justify-between">
                  <div>
                    <h3 className="text-lg font-semibold text-green-800 mb-2">📱 WhatsApp Receipt Demo</h3>
                    <p className="text-green-700">Test kar ke dekho ki WhatsApp receipt kaise kaam karta hai</p>
                  </div>
                  <button
                    onClick={() => {
                      const demoSale = {
                        customerName: "Demo Customer",
                        customerMobile: "9876543210",
                        date: new Date().toLocaleDateString('hi-IN'),
                        time: new Date().toLocaleTimeString('hi-IN'),
                        quantitySold: "2",
                        soldPrice: "500"
                      };
                      const demoItem = {
                        itemName: "Demo Shirt",
                        size: "L",
                        color: "Blue"
                      };
                      generateWhatsAppReceipt(demoSale, demoItem);
                    }}
                    className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition flex items-center space-x-2"
                  >
                    <Send className="h-4 w-4" />
                    <span>Test WhatsApp Receipt</span>
                  </button>
                </div>
              </div>
              
              {/* Stats Cards */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div className="bg-white p-6 rounded-xl shadow-sm">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-gray-600">Total Stock Items</p>
                      <p className="text-2xl font-bold text-gray-900">{totalStock}</p>
                    </div>
                    <Package className="h-8 w-8 text-blue-500" />
                  </div>
                </div>
                
                <div className="bg-white p-6 rounded-xl shadow-sm">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-gray-600">Stock Value</p>
                      <p className="text-2xl font-bold text-gray-900">₹{totalStockValue.toLocaleString()}</p>
                    </div>
                    <TrendingUp className="h-8 w-8 text-green-500" />
                  </div>
                </div>
                
                <div className="bg-white p-6 rounded-xl shadow-sm">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-gray-600">Total Sales</p>
                      <p className="text-2xl font-bold text-gray-900">₹{totalSales.toLocaleString()}</p>
                    </div>
                    <ShoppingCart className="h-8 w-8 text-purple-500" />
                  </div>
                </div>
                
                <div className="bg-white p-6 rounded-xl shadow-sm">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-gray-600">Total Profit</p>
                      <p className="text-2xl font-bold text-gray-900">₹{totalProfit.toLocaleString()}</p>
                    </div>
                    <TrendingUp className="h-8 w-8 text-yellow-500" />
                  </div>
                </div>
              </div>

              {/* Recent Activity */}
              <div className="bg-white rounded-xl shadow-sm p-6">
                <h3 className="text-lg font-semibold text-gray-900 mb-4">Recent Sales</h3>
                {sales.length === 0 ? (
                  <p className="text-gray-500">No sales recorded yet</p>
                ) : (
                  <div className="space-y-3">
                    {sales.slice(-5).reverse().map(sale => (
                      <div key={sale.id} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                        <div>
                          <p className="font-medium">{sale.itemName}</p>
                          <p className="text-sm text-gray-600">{sale.customerName} • {sale.date}</p>
                        </div>
                        <div className="text-right">
                          <p className="font-medium">₹{(sale.soldPrice * sale.quantitySold).toLocaleString()}</p>
                          <p className="text-sm text-green-600">Profit: ₹{sale.profit}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          )}

          {currentTab === 'stock' && (
            <div>
              <div className="flex justify-between items-center mb-6">
                <h2 className="text-2xl font-bold text-gray-900">Stock Management</h2>
                <button
                  onClick={() => setShowAddStock(true)}
                  className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center space-x-2"
                >
                  <Plus className="h-4 w-4" />
                  <span>Add New Stock</span>
                </button>
              </div>

              {/* Stock Items Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {stockItems.map(item => (
                  <div key={item.id} className="bg-white rounded-xl shadow-sm overflow-hidden">
                    {item.photo && (
                      <img
                        src={item.photo}
                        alt={item.itemName}
                        className="w-full h-48 object-cover"
                      />
                    )}
                    
                    <div className="p-4">
                      <div className="flex justify-between items-start mb-2">
                        <h3 className="text-lg font-semibold text-gray-900">{item.itemName}</h3>
                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                          item.stockType === 'new' ? 'bg-green-100 text-green-800' : 'bg-blue-100 text-blue-800'
                        }`}>
                          {item.stockType}
                        </span>
                      </div>
                      
                      <div className="space-y-2 text-sm text-gray-600">
                        <p><span className="font-medium">Category:</span> {item.category}</p>
                        <p><span className="font-medium">Size:</span> {item.size}</p>
                        <p><span className="font-medium">Color:</span> {item.color}</p>
                        <p><span className="font-medium">Remaining:</span> {item.remainingQuantity}</p>
                        <p><span className="font-medium">Sale Price:</span> ₹{item.salePrice}</p>
                      </div>
                      
                      <button
                        onClick={() => {
                          setSelectedItem(item);
                          setSaleForm({...saleForm, itemId: item.id});
                          setShowSaleModal(true);
                        }}
                        disabled={item.remainingQuantity === 0}
                        className={`w-full mt-4 px-4 py-2 rounded-lg transition ${
                          item.remainingQuantity === 0
                            ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
                            : 'bg-green-600 text-white hover:bg-green-700'
                        }`}
                      >
                        {item.remainingQuantity === 0 ? 'Out of Stock' : 'Make Sale'}
                      </button>
                    </div>
                  </div>
                ))}
              </div>

              {stockItems.length === 0 && (
                <div className="text-center py-12">
                  <Package className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                  <p className="text-gray-500">No stock items yet. Add your first item!</p>
                </div>
              )}
            </div>
          )}

          {currentTab === 'sales' && (
            <div>
              <h2 className="text-2xl font-bold text-gray-900 mb-6">Sales History</h2>
              
              <div className="bg-white rounded-xl shadow-sm overflow-hidden">
                {sales.length === 0 ? (
                  <div className="text-center py-12">
                    <ShoppingCart className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                    <p className="text-gray-500">No sales recorded yet</p>
                  </div>
                ) : (
                  <div className="overflow-x-auto">
                    <table className="w-full">
                      <thead className="bg-gray-50">
                        <tr>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Item</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Profit</th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {sales.map(sale => (
                          <tr key={sale.id}>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                              {sale.date}
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                              {sale.itemName}
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                              <div>
                                <p>{sale.customerName}</p>
                                <p className="text-gray-500">{sale.customerMobile}</p>
                              </div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                              {sale.quantitySold}
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                              ₹{(sale.soldPrice * sale.quantitySold).toLocaleString()}
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-green-600">
                              ₹{sale.profit}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </div>
            </div>
          )}
        </main>
      </div>

      {/* Add Stock Modal */}
      {showAddStock && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
            <div className="p-6">
              <h3 className="text-xl font-bold text-gray-900 mb-6">Add New Stock Item</h3>
              
              <div 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-2">Item Name</label>
                    <input
                      type="text"
                      required
                      value={stockForm.itemName}
                      onChange={(e) => setStockForm({...stockForm, itemName: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Category</label>
                    <select
                      required
                      value={stockForm.category}
                      onChange={(e) => setStockForm({...stockForm, category: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                    >
                      <option value="">Select Category</option>
                      <option value="Shirt">Shirt</option>
                      <option value="T-Shirt">T-Shirt</option>
                      <option value="Jeans">Jeans</option>
                      <option value="Kurti">Kurti</option>
                      <option value="Saree">Saree</option>
                      <option value="Dress">Dress</option>
                      <option value="Other">Other</option>
                    </select>
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Size</label>
                    <input
                      type="text"
                      required
                      value={stockForm.size}
                      onChange={(e) => setStockForm({...stockForm, size: e.target.value})}
                      placeholder="S, M, L, XL, 32, 34, etc."
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Color</label>
                    <input
                      type="text"
                      required
                      value={stockForm.color}
                      onChange={(e) => setStockForm({...stockForm, color: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Stock Type</label>
                    <select
                      value={stockForm.stockType}
                      onChange={(e) => setStockForm({...stockForm, stockType: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                    >
                      <option value="new">New Stock</option>
                      <option value="old">Old Stock</option>
                    </select>
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Quantity</label>
                    <input
                      type="number"
                      required
                      min="1"
                      value={stockForm.quantity}
                      onChange={(e) => setStockForm({...stockForm, quantity: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Buying Price (₹)</label>
                    <input
                      type="number"
                      required
                      min="0"
                      step="0.01"
                      value={stockForm.buyingPrice}
                      onChange={(e) => setStockForm({...stockForm, buyingPrice: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Sale Price (₹)</label>
                    <input
                      type="number"
                      required
                      min="0"
                      step="0.01"
                      value={stockForm.salePrice}
                      onChange={(e) => setStockForm({...stockForm, salePrice: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                    />
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Photo</label>
                  <input
                    type="file"
                    accept="image/*"
                    onChange={handlePhotoUpload}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                  />
                  {stockForm.photo && (
                    <img src={stockForm.photo} alt="Preview" className="mt-2 w-32 h-32 object-cover rounded-lg" />
                  )}
                </div>
                
                <div className="flex space-x-4 pt-4">
                  <button
                    onClick={handleAddStock}
                    className="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition"
                  >
                    Add Stock
                  </button>
                  <button
                    onClick={() => setShowAddStock(false)}
                    className="flex-1 bg-gray-500 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition"
                  >
                    Cancel
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Sale Modal */}
      {showSaleModal && selectedItem && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-6">
              <h3 className="text-xl font-bold text-gray-900 mb-4">Make Sale</h3>
              <p className="text-gray-600 mb-6">Item: {selectedItem.itemName} (Available: {selectedItem.remainingQuantity})</p>
              
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Quantity to Sell</label>
                  <input
                    type="number"
                    required
                    min="1"
                    max={selectedItem.remainingQuantity}
                    value={saleForm.quantitySold}
                    onChange={(e) => setSaleForm({...saleForm, quantitySold: e.target.value})}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Sold Price per piece (₹)</label>
                  <input
                    type="number"
                    required
                    min="0"
                    step="0.01"
                    value={saleForm.soldPrice}
                    onChange={(e) => setSaleForm({...saleForm, soldPrice: e.target.value})}
                    placeholder={`Suggested: ₹${selectedItem.salePrice}`}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Customer Name</label>
                  <input
                    type="text"
                    required
                    value={saleForm.customerName}
                    onChange={(e) => setSaleForm({...saleForm, customerName: e.target.value})}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Customer Mobile (10 digits)</label>
                  <input
                    type="tel"
                    required
                    pattern="[0-9]{10}"
                    value={saleForm.customerMobile}
                    onChange={(e) => setSaleForm({...saleForm, customerMobile: e.target.value})}
                    placeholder="9876543210"
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                  />
                </div>
                
                {saleForm.quantitySold && saleForm.soldPrice && (
                  <div className="bg-blue-50 p-3 rounded-lg">
                    <p className="text-sm text-blue-800">
                      Total Amount: ₹{(saleForm.quantitySold * saleForm.soldPrice).toLocaleString()}
                    </p>
                  </div>
                )}
                
                <div className="flex space-x-4 pt-4">
                  <button
                    onClick={handleSale}
                    className="flex-1 bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 transition flex items-center justify-center space-x-2"
                  >
                    <Send className="h-4 w-4" />
                    <span>Complete Sale & Send Receipt</span>
                  </button>
                  <button
                    onClick={() => {
                      setShowSaleModal(false);
                      setSelectedItem(null);
                    }}
                    className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition"
                  >
                    Cancel
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default GarmentShopApp;