import React, { useState, useEffect } from 'react';
import { Plus, Minus, ShoppingCart, Package, TrendingUp, TrendingDown, Edit2, Trash2, Save, X, Users, CreditCard, DollarSign, BarChart3, Download, AlertCircle } from 'lucide-react';

function AccountingInventorySystem() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [products, setProducts] = useState([
    { id: 1, name: 'Rice', category: 'Food', buyPrice: 45, sellPrice: 50, quantity: 100, unit: 'kg', minStock: 20 },
    { id: 2, name: 'Lentils', category: 'Food', buyPrice: 80, sellPrice: 90, quantity: 50, unit: 'kg', minStock: 15 },
    { id: 3, name: 'Oil', category: 'Food', buyPrice: 120, sellPrice: 130, quantity: 25, unit: 'liter', minStock: 10 }
  ]);
  
  const [sales, setSales] = useState([]);
  const [customers, setCustomers] = useState([
    { id: 1, name: 'John Smith', phone: '01712345678', address: 'New York', due: 0 },
    { id: 2, name: 'Sarah Johnson', phone: '01798765432', address: 'Chicago', due: 500 }
  ]);
  
  const [expenses, setExpenses] = useState([
    { id: 1, category: 'Rent', amount: 15000, date: '2025-06-01', description: 'June rent payment' },
    { id: 2, category: 'Electricity', amount: 3500, date: '2025-06-05', description: 'May electricity bill' }
  ]);
  
  const [showModal, setShowModal] = useState(false);
  const [modalType, setModalType] = useState('');
  const [editingItem, setEditingItem] = useState(null);
  const [formData, setFormData] = useState({});
  const [selectedCustomer, setSelectedCustomer] = useState(null);
  const [cart, setCart] = useState([]);
  const [showInvoice, setShowInvoice] = useState(false);
  const [lastInvoice, setLastInvoice] = useState(null);

  useEffect(() => {
    const sampleSales = [
      { 
        id: 1, 
        productId: 1, 
        productName: 'Rice', 
        quantity: 10, 
        price: 50, 
        total: 500, 
        date: '2025-06-15', 
        customerId: 1,
        customerName: 'John Smith',
        paymentType: 'Cash',
        paid: 500,
        due: 0
      }
    ];
    setSales(sampleSales);
  }, []);

  const openModal = (type, item) => {
    setModalType(type);
    setEditingItem(item);
    setShowModal(true);
    
    if (type === 'product') {
      setFormData(item || { name: '', category: '', buyPrice: 0, sellPrice: 0, quantity: 0, unit: '', minStock: 10 });
    } else if (type === 'customer') {
      setFormData(item || { name: '', phone: '', address: '', due: 0 });
    } else if (type === 'supplier') {
      setFormData(item || { name: '', phone: '', address: '', due: 0 });
    } else if (type === 'expense') {
      setFormData(item || { category: '', amount: 0, date: new Date().toISOString().split('T')[0], description: '' });
    }
  };

  const closeModal = () => {
    setShowModal(false);
    setEditingItem(null);
    setFormData({});
  };

  const handleSubmit = () => {
    if (modalType === 'product') {
      if (editingItem) {
        setProducts(products.map(p => p.id === editingItem.id ? { ...formData, id: editingItem.id } : p));
      } else {
        setProducts([...products, { ...formData, id: Date.now() }]);
      }
    } else if (modalType === 'customer') {
      if (editingItem) {
        setCustomers(customers.map(c => c.id === editingItem.id ? { ...formData, id: editingItem.id } : c));
      } else {
        setCustomers([...customers, { ...formData, id: Date.now() }]);
      }
    } else if (modalType === 'supplier') {
      if (editingItem) {
        setSuppliers(suppliers.map(s => s.id === editingItem.id ? { ...formData, id: editingItem.id } : s));
      } else {
        setSuppliers([...suppliers, { ...formData, id: Date.now() }]);
      }
    } else if (modalType === 'expense') {
      if (editingItem) {
        setExpenses(expenses.map(e => e.id === editingItem.id ? { ...formData, id: editingItem.id } : e));
      } else {
        setExpenses([...expenses, { ...formData, id: Date.now() }]);
      }
    }
    closeModal();
  };

  const deleteItem = (type, id) => {
    if (type === 'product') {
      setProducts(products.filter(p => p.id !== id));
    } else if (type === 'customer') {
      setCustomers(customers.filter(c => c.id !== id));
    } else if (type === 'supplier') {
      setSuppliers(suppliers.filter(s => s.id !== id));
    } else if (type === 'expense') {
      setExpenses(expenses.filter(e => e.id !== id));
    }
  };

  const addToCart = (product) => {
    const existingItem = cart.find(item => item.id === product.id);
    if (existingItem) {
      setCart(cart.map(item => 
        item.id === product.id 
          ? { ...item, quantity: item.quantity + 1 }
          : item
      ));
    } else {
      setCart([...cart, { ...product, quantity: 1 }]);
    }
  };

  const removeFromCart = (productId) => {
    setCart(cart.filter(item => item.id !== productId));
  };

  const updateCartQuantity = (productId, quantity) => {
    if (quantity <= 0) {
      removeFromCart(productId);
    } else {
      setCart(cart.map(item => 
        item.id === productId 
          ? { ...item, quantity }
          : item
      ));
    }
  };

  const processCheckout = () => {
    if (cart.length === 0 || !selectedCustomer) return;

    const invoiceData = {
      id: Date.now(),
      date: new Date().toISOString().split('T')[0],
      customer: selectedCustomer,
      items: cart,
      total: cart.reduce((sum, item) => sum + (item.sellPrice * item.quantity), 0)
    };

    cart.forEach(item => {
      const saleData = {
        id: Date.now() + Math.random(),
        productId: item.id,
        productName: item.name,
        quantity: item.quantity,
        price: item.sellPrice,
        total: item.sellPrice * item.quantity,
        date: new Date().toISOString().split('T')[0],
        customerId: selectedCustomer.id,
        customerName: selectedCustomer.name,
        paymentType: 'Cash',
        paid: item.sellPrice * item.quantity,
        due: 0
      };
      
      setSales(prev => [...prev, saleData]);
      setProducts(prev => prev.map(p => 
        p.id === item.id 
          ? { ...p, quantity: p.quantity - item.quantity }
          : p
      ));
    });

    setLastInvoice(invoiceData);
    setCart([]);
    setSelectedCustomer(null);
    setShowInvoice(true);
  };

  const totalSales = sales.reduce((sum, sale) => sum + sale.total, 0);
  const totalExpenses = expenses.reduce((sum, expense) => sum + expense.amount, 0);
  const totalProfit = totalSales - totalExpenses;
  const totalInventoryValue = products.reduce((sum, product) => sum + (product.quantity * product.buyPrice), 0);

  const tabs = [
    { key: 'dashboard', label: 'Dashboard', icon: TrendingUp },
    { key: 'products', label: 'Products', icon: Package },
    { key: 'sales', label: 'Sales', icon: DollarSign },
    { key: 'purchases', label: 'Purchases', icon: ShoppingCart },
    { key: 'customers', label: 'Customers', icon: Users },
    { key: 'suppliers', label: 'Suppliers', icon: Users },
    { key: 'expenses', label: 'Expenses', icon: CreditCard },
    { key: 'reports', label: 'Reports', icon: BarChart3 }
  ];

  return (
    <div className="min-h-screen bg-gray-100">
      <div className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-4">
            <h1 className="text-2xl font-bold text-gray-900">Wholesale Business Management System</h1>
            <div className="text-sm text-gray-600">
              {new Date().toLocaleDateString('en-US', { 
                weekday: 'long', 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric' 
              })}
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div className="border-b border-gray-200 mb-6">
          <nav className="flex space-x-8 overflow-x-auto">
            {tabs.map(tab => (
              <button
                key={tab.key}
                onClick={() => setActiveTab(tab.key)}
                className={`flex items-center py-2 px-1 border-b-2 font-medium text-sm whitespace-nowrap ${
                  activeTab === tab.key
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                <tab.icon size={16} className="mr-2" />
                {tab.label}
              </button>
            ))}
          </nav>
        </div>

        {activeTab === 'dashboard' && (
          <div>
            <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-lg shadow">
                <div className="flex items-center">
                  <div className="p-2 bg-green-100 rounded-lg">
                    <TrendingUp className="h-6 w-6 text-green-600" />
                  </div>
                  <div className="ml-4">
                    <p className="text-sm font-medium text-gray-600">Total Sales</p>
                    <p className="text-2xl font-semibold text-gray-900">৳{totalSales.toLocaleString()}</p>
                  </div>
                </div>
              </div>
              
              <div className="bg-white p-6 rounded-lg shadow">
                <div className="flex items-center">
                  <div className="p-2 bg-purple-100 rounded-lg">
                    <CreditCard className="h-6 w-6 text-purple-600" />
                  </div>
                  <div className="ml-4">
                    <p className="text-sm font-medium text-gray-600">Total Expenses</p>
                    <p className="text-2xl font-semibold text-gray-900">৳{totalExpenses.toLocaleString()}</p>
                  </div>
                </div>
              </div>
              
              <div className="bg-white p-6 rounded-lg shadow">
                <div className="flex items-center">
                  <div className={`p-2 rounded-lg ${totalProfit >= 0 ? 'bg-green-100' : 'bg-red-100'}`}>
                    <TrendingUp className={`h-6 w-6 ${totalProfit >= 0 ? 'text-green-600' : 'text-red-600'}`} />
                  </div>
                  <div className="ml-4">
                    <p className="text-sm font-medium text-gray-600">Net Profit</p>
                    <p className={`text-2xl font-semibold ${totalProfit >= 0 ? 'text-green-600' : 'text-red-600'}`}>
                      ৳{Math.abs(totalProfit).toLocaleString()}
                    </p>
                  </div>
                </div>
              </div>

              <div className="bg-white p-6 rounded-lg shadow">
                <div className="flex items-center">
                  <div className="p-2 bg-blue-100 rounded-lg">
                    <Package className="h-6 w-6 text-blue-600" />
                  </div>
                  <div className="ml-4">
                    <p className="text-sm font-medium text-gray-600">Inventory Value</p>
                    <p className="text-2xl font-semibold text-gray-900">৳{totalInventoryValue.toLocaleString()}</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
              <div className="bg-white p-6 rounded-lg shadow">
                <h3 className="text-lg font-medium mb-4">Stock Alerts</h3>
                <div className="space-y-2">
                  {products.filter(p => p.quantity <= p.minStock).slice(0, 5).map(product => (
                    <div key={product.id} className="flex justify-between items-center">
                      <span className="text-sm">{product.name}</span>
                      <span className={`text-sm px-2 py-1 rounded ${
                        product.quantity <= 5 ? 'bg-red-100 text-red-600' : 'bg-yellow-100 text-yellow-600'
                      }`}>
                        {product.quantity} {product.unit}
                      </span>
                    </div>
                  ))}
                  {products.filter(p => p.quantity <= p.minStock).length === 0 && (
                    <p className="text-gray-500 text-sm">All products have sufficient stock</p>
                  )}
                </div>
              </div>

              <div className="bg-white p-6 rounded-lg shadow">
                <h3 className="text-lg font-medium mb-4">Recent Sales</h3>
                <div className="space-y-2">
                  {sales.slice(-5).map(sale => (
                    <div key={sale.id} className="flex justify-between items-center">
                      <span className="text-sm">{sale.productName}</span>
                      <span className="text-sm font-medium">৳{sale.total}</span>
                    </div>
                  ))}
                  {sales.length === 0 && (
                    <p className="text-gray-500 text-sm">No sales recorded yet</p>
                  )}
                </div>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'sales' && (
          <div className="bg-white shadow rounded-lg">
            <div className="px-6 py-4 border-b border-gray-200">
              <div className="flex justify-between items-center">
                <h2 className="text-lg font-medium text-gray-900">Wholesale Sales</h2>
                <button
                  onClick={() => openModal('sale')}
                  className="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 flex items-center"
                >
                  <Plus size={16} className="mr-2" />
                  Add Sale
                </button>
              </div>
            </div>
            <div className="p-6">
              <div className="text-center text-gray-500">
                <Package size={48} className="mx-auto mb-4 text-gray-300" />
                <p className="text-lg mb-2">Wholesale Sales Management</p>
                <p className="text-sm">Add and manage your wholesale sales transactions here.</p>
                <p className="text-sm mt-2">Features: Bulk quantity sales, wholesale pricing, customer credit management</p>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'purchases' && (
          <div className="bg-white shadow rounded-lg">
            <div className="px-6 py-4 border-b border-gray-200">
              <div className="flex justify-between items-center">
                <h2 className="text-lg font-medium text-gray-900">Stock Purchases</h2>
                <button
                  onClick={() => openModal('purchase')}
                  className="bg-purple-500 text-white px-4 py-2 rounded-lg hover:bg-purple-600 flex items-center"
                >
                  <ShoppingCart size={16} className="mr-2" />
                  Add Purchase
                </button>
              </div>
            </div>
            <div className="p-6">
              <div className="text-center text-gray-500">
                <ShoppingCart size={48} className="mx-auto mb-4 text-gray-300" />
                <p className="text-lg mb-2">Stock Purchase Management</p>
                <p className="text-sm">Record your inventory purchases from suppliers.</p>
                <p className="text-sm mt-2">Features: Bulk purchasing, supplier management, payment tracking</p>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'suppliers' && (
          <div className="bg-white shadow rounded-lg">
            <div className="px-6 py-4 border-b border-gray-200">
              <div className="flex justify-between items-center">
                <h2 className="text-lg font-medium text-gray-900">Supplier Management</h2>
                <button
                  onClick={() => openModal('supplier')}
                  className="bg-indigo-500 text-white px-4 py-2 rounded-lg hover:bg-indigo-600 flex items-center"
                >
                  <Users size={16} className="mr-2" />
                  Add Supplier
                </button>
              </div>
            </div>
            <div className="p-6">
              <div className="text-center text-gray-500">
                <Users size={48} className="mx-auto mb-4 text-gray-300" />
                <p className="text-lg mb-2">Supplier Database</p>
                <p className="text-sm">Manage your suppliers and track payments.</p>
                <p className="text-sm mt-2">Features: Contact management, due payment tracking, purchase history</p>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'products' && (
          <div className="bg-white shadow rounded-lg">
            <div className="px-6 py-4 border-b border-gray-200">
              <div className="flex justify-between items-center">
                <h2 className="text-lg font-medium text-gray-900">Product List</h2>
                <button
                  onClick={() => openModal('product')}
                  className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 flex items-center"
                >
                  <Plus size={16} className="mr-2" />
                  Add Product
                </button>
              </div>
            </div>
            <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 Name</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">Stock</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Buy Price</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sell Price</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</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">
                  {products.map((product) => (
                    <tr key={product.id}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{product.name}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{product.category}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {product.quantity} {product.unit}
                        {product.quantity <= product.minStock && (
                          <AlertCircle size={16} className="inline ml-1 text-orange-500" />
                        )}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">৳{product.buyPrice}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">৳{product.sellPrice}</td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                          product.quantity <= 5 
                            ? 'bg-red-100 text-red-800' 
                            : product.quantity <= product.minStock 
                            ? 'bg-yellow-100 text-yellow-800'
                            : 'bg-green-100 text-green-800'
                        }`}>
                          {product.quantity <= 5 ? 'Out of Stock' : product.quantity <= product.minStock ? 'Low Stock' : 'Good'}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <button
                          onClick={() => openModal('product', product)}
                          className="text-blue-600 hover:text-blue-900 mr-2"
                        >
                          <Edit2 size={16} />
                        </button>
                        <button
                          onClick={() => deleteItem('product', product.id)}
                          className="text-red-600 hover:text-red-900"
                        >
                          <Trash2 size={16} />
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {(activeTab === 'customers' || activeTab === 'expenses' || activeTab === 'reports') && (
          <div className="bg-white p-6 rounded-lg shadow">
            <div className="text-center text-gray-500">
              <div className="mb-4">
                {activeTab === 'customers' && <Users size={48} className="mx-auto text-gray-300" />}
                {activeTab === 'expenses' && <CreditCard size={48} className="mx-auto text-gray-300" />}
                {activeTab === 'reports' && <BarChart3 size={48} className="mx-auto text-gray-300" />}
              </div>
              <h2 className="text-xl font-semibold mb-4">
                {activeTab === 'customers' && 'Customer Management'}
                {activeTab === 'expenses' && 'Expense Management'}
                {activeTab === 'reports' && 'Business Reports'}
              </h2>
              <p className="text-gray-600 mb-4">
                {activeTab === 'customers' && 'Manage your wholesale customers, track credit limits and payment history.'}
                {activeTab === 'expenses' && 'Track business expenses, categorize costs and monitor spending patterns.'}
                {activeTab === 'reports' && 'Generate detailed business reports, profit analysis and financial summaries.'}
              </p>
              <div className="bg-blue-50 p-4 rounded-lg">
                <p className="text-sm text-blue-700">
                  {activeTab === 'customers' && 'Features: Credit management, bulk order history, payment terms'}
                  {activeTab === 'expenses' && 'Features: Category-wise tracking, monthly summaries, tax preparation'}
                  {activeTab === 'reports' && 'Features: P&L statements, inventory reports, customer analysis'}
                </p>
              </div>
            </div>
          </div>
        )}
      </div>

      {showModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white p-6 rounded-lg w-96 max-w-90vw max-h-90vh overflow-y-auto">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-semibold">
                {modalType === 'product' ? 'Product' : 
                 modalType === 'customer' ? 'Customer' : 
                 modalType === 'supplier' ? 'Supplier' : 'Expense'} 
                {editingItem ? ' Edit' : ' Add'}
              </h3>
              <button onClick={closeModal} className="text-gray-500 hover:text-gray-700">
                <X size={20} />
              </button>
            </div>
            
            <div className="space-y-4">
              {modalType === 'product' && (
                <>
                  <input
                    type="text"
                    placeholder="Product Name"
                    value={formData.name || ''}
                    onChange={(e) => setFormData({...formData, name: e.target.value})}
                    className="w-full p-2 border rounded"
                  />
                  <input
                    type="text"
                    placeholder="Category"
                    value={formData.category || ''}
                    onChange={(e) => setFormData({...formData, category: e.target.value})}
                    className="w-full p-2 border rounded"
                  />
                  <input
                    type="number"
                    placeholder="Buy Price (৳)"
                    value={formData.buyPrice || ''}
                    onChange={(e) => setFormData({...formData, buyPrice: parseFloat(e.target.value) || 0})}
                    className="w-full p-2 border rounded"
                  />
                  <input
                    type="number"
                    placeholder="Sell Price (৳)"
                    value={formData.sellPrice || ''}
                    onChange={(e) => setFormData({...formData, sellPrice: parseFloat(e.target.value) || 0})}
                    className="w-full p-2 border rounded"
                  />
                  <input
                    type="number"
                    placeholder="Quantity"
                    value={formData.quantity || ''}
                    onChange={(e) => setFormData({...formData, quantity: parseFloat(e.target.value) || 0})}
                    className="w-full p-2 border rounded"
                  />
                  <input
                    type="text"
                    placeholder="Unit (kg, liter, piece)"
                    value={formData.unit || ''}
                    onChange={(e) => setFormData({...formData, unit: e.target.value})}
                    className="w-full p-2 border rounded"
                  />
                  <input
                    type="number"
                    placeholder="Minimum Stock"
                    value={formData.minStock || ''}
                    onChange={(e) => setFormData({...formData, minStock: parseFloat(e.target.value) || 0})}
                    className="w-full p-2 border rounded"
                  />
                </>
              )}
            </div>
            
            <div className="flex justify-end space-x-2 mt-6">
              <button
                onClick={closeModal}
                className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
              >
                Cancel
              </button>
              <button
                onClick={handleSubmit}
                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
              >
                <Save size={16} className="inline mr-1" />
                Save
              </button>
            </div>
          </div>
        </div>
      )}

      {showInvoice && lastInvoice && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white p-8 rounded-lg w-96 max-w-90vw">
            <div className="text-center mb-6">
              <h2 className="text-2xl font-bold">Your Store Name</h2>
              <p className="text-gray-600">Address & Phone Number</p>
              <hr className="my-4" />
            </div>
            
            <div>
              <div className="mb-4">
                <p><strong>Invoice #:</strong> #{lastInvoice.id}</p>
                <p><strong>Date:</strong> {lastInvoice.date}</p>
                <p><strong>Customer:</strong> {lastInvoice.customer.name}</p>
              </div>
              
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b">
                    <th className="text-left py-2">Product</th>
                    <th className="text-center py-2">Qty</th>
                    <th className="text-right py-2">Price</th>
                    <th className="text-right py-2">Total</th>
                  </tr>
                </thead>
                <tbody>
                  {lastInvoice.items.map((item, index) => (
                    <tr key={index} className="border-b">
                      <td className="py-2">{item.name}</td>
                      <td className="text-center py-2">{item.quantity}</td>
                      <td className="text-right py-2">৳{item.sellPrice}</td>
                      <td className="text-right py-2">৳{item.sellPrice * item.quantity}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
              
              <div className="mt-4 text-right">
                <p className="text-lg font-bold">Total: ৳{lastInvoice.total}</p>
                <p className="text-sm text-gray-600 mt-2">Thank you!</p>
              </div>
            </div>
            
            <div className="flex justify-end space-x-2 mt-6">
              <button
                onClick={() => setShowInvoice(false)}
                className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
              >
                Close
              </button>
              <button
                onClick={() => window.print()}
                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
              >
                <Download size={16} className="inline mr-1" />
                Print
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default AccountingInventorySystem;