page.tsx

Go to the documentation of this file.

'use client';
 
import { useState } from 'react';
import { useRouter } from 'next/navigation';
 
interface OrderLineItem {
  id: string;
  productCode: string;
  productName: string;
  quantity: number;
  unitCost: number;
  lineTotal: number;
  extendedCost: number;
}
 
interface Supplier {
  id: string;
  name: string;
  email?: string;
  phone?: string;
}
 
interface Product {
  code: string;
  name: string;
  description?: string;
  lastCost?: number;
  supplier?: string;
}
 
export default function CreatePurchaseOrder() {
  const router = useRouter();
  
  const [supplierId, setSupplierId] = useState('');
  const [supplierName, setSupplierName] = useState('');
  const [supplierSearch, setSupplierSearch] = useState('');
  const [showSupplierDropdown, setShowSupplierDropdown] = useState(false);
  const [suppliers, setSuppliers] = useState<Supplier[]>([]);
  const [orderDate, setOrderDate] = useState(new Date().toISOString().split('T')[0]);
  const [expectedDeliveryDate, setExpectedDeliveryDate] = useState('');
  const [poNumber, setPoNumber] = useState('');
  const [notes, setNotes] = useState('');
  const [freightCost, setFreightCost] = useState('');
  const [lineItems, setLineItems] = useState<OrderLineItem[]>([]);
  
  // New line form
  const [newProductCode, setNewProductCode] = useState('');
  const [newProductName, setNewProductName] = useState('');
  const [productCodeSearch, setProductCodeSearch] = useState('');
  const [productNameSearch, setProductNameSearch] = useState('');
  const [showProductCodeDropdown, setShowProductCodeDropdown] = useState(false);
  const [showProductNameDropdown, setShowProductNameDropdown] = useState(false);
  const [filteredProducts, setFilteredProducts] = useState<Product[]>([]);
  const [newQuantity, setNewQuantity] = useState('');
  const [newUnitCost, setNewUnitCost] = useState('');
  
  // Email state
  const [showEmailModal, setShowEmailModal] = useState(false);
  const [sendViaEmail, setSendViaEmail] = useState(false);
  const [otherEmail, setOtherEmail] = useState('');
  const [additionalNotes, setAdditionalNotes] = useState('');
  const [showEmailOptions, setShowEmailOptions] = useState(false);
 
  // Mock suppliers - replace with actual API call
  const mockSuppliers: Supplier[] = [
    { id: '1001', name: 'ABC Suppliers Ltd', email: 'orders@abcsuppliers.com', phone: '555-0100' },
    { id: '1002', name: 'Best Wholesale Co', email: 'sales@bestwholesale.com', phone: '555-0200' },
    { id: '1003', name: 'Central Distributors', email: 'info@centraldist.com', phone: '555-0300' },
    { id: '1004', name: 'Delta Trading Inc', email: 'orders@deltatrading.com', phone: '555-0400' },
    { id: '1005', name: 'Elite Products Ltd', email: 'sales@eliteproducts.com', phone: '555-0500' },
    { id: '1006', name: 'Fresh Foods Suppliers', email: 'orders@freshfoods.com', phone: '555-0600' },
    { id: '1007', name: 'Global Imports Co', email: 'info@globalimports.com', phone: '555-0700' },
    { id: '1008', name: 'Home Goods Wholesale', email: 'sales@homegoods.com', phone: '555-0800' },
  ];
 
  // Mock inventory catalog - replace with actual API call
  const mockInventory: Product[] = [
    { code: 'COF-001', name: 'Premium Coffee Beans 1kg', description: 'Arabica blend', lastCost: 25.50 },
    { code: 'TEA-002', name: 'Organic Tea Selection Box', description: '12 varieties', lastCost: 18.75 },
    { code: 'POT-003', name: 'Stainless Steel Teapot', description: '1.5L capacity', lastCost: 42.00 },
    { code: 'GRN-004', name: 'Coffee Grinder Professional', description: 'Commercial grade', lastCost: 156.30 },
    { code: 'CUP-005', name: 'Paper Cups 100pk', description: '12oz disposable', lastCost: 8.90 },
    { code: 'MUG-006', name: 'Ceramic Mug Set', description: '6 piece set', lastCost: 34.50 },
    { code: 'SYR-007', name: 'Flavored Syrup Vanilla', description: '750ml bottle', lastCost: 12.25 },
    { code: 'SYR-008', name: 'Flavored Syrup Caramel', description: '750ml bottle', lastCost: 12.25 },
    { code: 'SYR-009', name: 'Flavored Syrup Hazelnut', description: '750ml bottle', lastCost: 12.25 },
    { code: 'MIL-010', name: 'Milk Frother Electric', description: 'Battery operated', lastCost: 28.90 },
    { code: 'SPO-011', name: 'Stainless Steel Spoons', description: '12 pack', lastCost: 15.75 },
    { code: 'NAP-012', name: 'Paper Napkins 500pk', description: 'White premium', lastCost: 6.50 },
  ];
 
  const handleProductCodeSearch = (value: string) => {
    setProductCodeSearch(value);
    if (value.trim()) {
      const filtered = mockInventory.filter(p => 
        p.code.toLowerCase().includes(value.toLowerCase())
      );
      setFilteredProducts(filtered);
      setShowProductCodeDropdown(true);
      setShowProductNameDropdown(false);
    } else {
      setFilteredProducts(mockInventory);
      setShowProductCodeDropdown(true);
      setShowProductNameDropdown(false);
    }
  };
 
  const handleProductNameSearch = (value: string) => {
    setProductNameSearch(value);
    if (value.trim()) {
      const filtered = mockInventory.filter(p => 
        p.name.toLowerCase().includes(value.toLowerCase()) ||
        (p.description && p.description.toLowerCase().includes(value.toLowerCase()))
      );
      setFilteredProducts(filtered);
      setShowProductNameDropdown(true);
      setShowProductCodeDropdown(false);
    } else {
      setFilteredProducts(mockInventory);
      setShowProductNameDropdown(true);
      setShowProductCodeDropdown(false);
    }
  };
 
  const handleSelectProduct = (product: Product) => {
    setNewProductCode(product.code);
    setNewProductName(product.name);
    setProductCodeSearch(product.code);
    setProductNameSearch(product.name);
    if (product.lastCost) {
      setNewUnitCost(product.lastCost.toString());
    }
    setShowProductCodeDropdown(false);
    setShowProductNameDropdown(false);
  };
 
  const handleShowAllProducts = (type: 'code' | 'name') => {
    setFilteredProducts(mockInventory);
    if (type === 'code') {
      setShowProductCodeDropdown(true);
      setShowProductNameDropdown(false);
    } else {
      setShowProductNameDropdown(true);
      setShowProductCodeDropdown(false);
    }
  };
 
  const handleClearProduct = () => {
    setNewProductCode('');
    setNewProductName('');
    setProductCodeSearch('');
    setProductNameSearch('');
    setNewUnitCost('');
    setFilteredProducts([]);
  };
 
  const handleSupplierSearch = (value: string) => {
    setSupplierSearch(value);
    if (value.trim()) {
      const filtered = mockSuppliers.filter(s => 
        s.name.toLowerCase().includes(value.toLowerCase()) ||
        s.id.includes(value)
      );
      setSuppliers(filtered);
      setShowSupplierDropdown(true);
    } else {
      setSuppliers(mockSuppliers);
      setShowSupplierDropdown(true);
    }
  };
 
  const handleShowAllSuppliers = () => {
    setSuppliers(mockSuppliers);
    setShowSupplierDropdown(true);
  };
 
  const handleSelectSupplier = (supplier: Supplier) => {
    setSupplierId(supplier.id);
    setSupplierName(supplier.name);
    setSupplierSearch(supplier.name);
    setShowSupplierDropdown(false);
  };
 
  const handleClearSupplier = () => {
    setSupplierId('');
    setSupplierName('');
    setSupplierSearch('');
    setSuppliers([]);
  };
 
  const calculateExtendedCost = () => {
    const quantity = parseFloat(newQuantity) || 0;
    const unitCost = parseFloat(newUnitCost) || 0;
    return quantity * unitCost;
  };
 
  const handleAddLine = () => {
    if (!newProductCode || !newProductName || !newQuantity || !newUnitCost) {
      alert('Please fill in all line item fields');
      return;
    }
 
    const quantity = parseFloat(newQuantity);
    const unitCost = parseFloat(newUnitCost);
    const extendedCost = calculateExtendedCost();
    const lineTotal = extendedCost;
 
    const newLine: OrderLineItem = {
      id: Date.now().toString(),
      productCode: newProductCode,
      productName: newProductName,
      quantity,
      unitCost,
      lineTotal,
      extendedCost
    };
 
    setLineItems([...lineItems, newLine]);
    
    // Clear form
    setNewProductCode('');
    setNewProductName('');
    setProductCodeSearch('');
    setProductNameSearch('');
    setNewQuantity('');
    setNewUnitCost('');
  };
 
  const handleLineFormKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      handleAddLine();
    }
  };
 
  const handleRemoveLine = (id: string) => {
    setLineItems(lineItems.filter(line => line.id !== id));
  };
 
  const handleUpdateLineQuantity = (id: string, value: string) => {
    const quantity = parseFloat(value) || 0;
    setLineItems(lineItems.map(line => {
      if (line.id === id) {
        return {
          ...line,
          quantity,
          lineTotal: quantity * line.unitCost + line.extendedCost
        };
      }
      return line;
    }));
  };
 
  const handleUpdateLineUnitCost = (id: string, value: string) => {
    const unitCost = parseFloat(value) || 0;
    setLineItems(lineItems.map(line => {
      if (line.id === id) {
        return {
          ...line,
          unitCost,
          lineTotal: line.quantity * unitCost + line.extendedCost
        };
      }
      return line;
    }));
  };
 
  const handleUpdateLineExtendedCost = (id: string) => {
    setLineItems(lineItems.map(line => {
      if (line.id === id) {
        const extendedCost = line.quantity * line.unitCost;
        return {
          ...line,
          extendedCost,
          lineTotal: extendedCost
        };
      }
      return line;
    }));
  };
 
  const calculateTotal = () => {
    const lineTotal = lineItems.reduce((sum, line) => sum + line.lineTotal, 0);
    const freight = parseFloat(freightCost) || 0;
    return lineTotal + freight;
  };
 
  const handleSubmit = async () => {
    if (!supplierId || !supplierName) {
      alert('Please enter supplier information');
      return;
    }
 
    if (lineItems.length === 0) {
      alert('Please add at least one line item');
      return;
    }
 
    const orderTotal = calculateTotal();
    
    if (confirm(`Create purchase order for ${supplierName} with ${lineItems.length} line item(s)?\n\nSubtotal: $${lineItems.reduce((sum, line) => sum + line.lineTotal, 0).toFixed(2)}\nFreight: $${(parseFloat(freightCost) || 0).toFixed(2)}\nTotal: $${orderTotal.toFixed(2)}`)) {
      
      // Generate PO number (in production, this would come from Fieldpine)
      const generatedPO = poNumber || `PO-${Date.now()}`;
      
      console.log('Creating purchase order with Fieldpine DATI packet:');
      const datiPacket = {
        request: 'save_data',
        client: 'everydaypos-web',
        data: {
          table: 'PurchaseOrders',
          operation: 'insert',
          fields: {
            f100_s: generatedPO,                      // PO Number
            f101_E: supplierId,                       // Supplier ID
            f102_s: supplierName,                     // Supplier Name
            f103_E: orderDate,                        // Order Date
            f104_N: orderTotal,                       // Total Amount (including freight)
            f105_E: expectedDeliveryDate || null,     // Expected Delivery Date
            f106_N: parseFloat(freightCost) || 0,     // Freight Cost
            f114_N: 1,                                // Status: 1 = Draft
            f132_s: notes,                            // Notes
            lines: lineItems.map((line, index) => ({
              f1100_E: (index + 1).toString(),        // Line Number
              f1101_E: line.productCode,              // Product Code
              f1102_s: line.productName,              // Product Description
              f1103_N: line.quantity,                 // Quantity Ordered
              f1105_N: line.unitCost,                 // Unit Cost
              f1106_N: line.lineTotal,                // Line Total
              f1107_s: line.productCode,              // Product Code (alt field)
              f1108_N: line.quantity                  // Quantity Outstanding (initially same as ordered)
            }))
          }
        }
      };
      console.log(JSON.stringify(datiPacket, null, 2));
 
      // Simulate API call success
      await new Promise(resolve => setTimeout(resolve, 500));
      
      // Show success message with PO number
      alert(`✓ Purchase Order Created Successfully!\n\nPO Number: ${generatedPO}\nSupplier: ${supplierName}\nTotal: $${orderTotal.toFixed(2)}\n\nIn production, this would be saved to Fieldpine.`);
      
      // Navigate back to purchase orders page
      router.push('/purchase-orders');
    }
  };
 
  const handleSaveDraft = () => {
    alert('Draft saved! (This would call Fieldpine API with status=0 in production)');
  };
 
  const handleSubmitWithEmail = async () => {
    if (!sendViaEmail) {
      alert('Please enable email sending');
      return;
    }
 
    if (!supplierId || !supplierName) {
      alert('Please enter supplier information');
      return;
    }
 
    if (lineItems.length === 0) {
      alert('Please add at least one line item');
      return;
    }
 
    const orderTotal = calculateTotal();
    const generatedPO = poNumber || `PO-${Date.now()}`;
    
    if (confirm(`Create purchase order and email to supplier?\n\nPO: ${generatedPO}\nSupplier: ${supplierName}\nTotal: $${orderTotal.toFixed(2)}`)) {
      
      // 1. Log DATI packet for order creation
      console.log('Creating purchase order with Fieldpine DATI packet:');
      const datiPacket = {
        request: 'save_data',
        client: 'everydaypos-web',
        data: {
          table: 'PurchaseOrders',
          operation: 'insert',
          fields: {
            f100_s: generatedPO,
            f101_E: supplierId,
            f102_s: supplierName,
            f103_E: orderDate,
            f104_N: orderTotal,
            f105_E: expectedDeliveryDate || null,
            f106_N: parseFloat(freightCost) || 0,
            f114_N: 1,
            f132_s: notes,
            lines: lineItems.map((line, index) => ({
              f1100_E: (index + 1).toString(),
              f1101_E: line.productCode,
              f1102_s: line.productName,
              f1103_N: line.quantity,
              f1105_N: line.unitCost,
              f1106_N: line.lineTotal,
              f1107_s: line.productCode,
              f1108_N: line.quantity
            }))
          }
        }
      };
      console.log(JSON.stringify(datiPacket, null, 2));
 
      // 2. Simulate order creation
      await new Promise(resolve => setTimeout(resolve, 300));
 
      // 3. Prepare and send email
      const targetEmail = otherEmail.trim() || 'supplier@example.com';
      
      let emailBody = `Dear ${supplierName},\n\n`;
      emailBody += `Please find our purchase order details below:\n\n`;
      emailBody += `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`;
      emailBody += `PURCHASE ORDER #${generatedPO}\n`;
      emailBody += `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n`;
      
      emailBody += `Order Date: ${orderDate}\n`;
      emailBody += `Expected Delivery: ${expectedDeliveryDate || 'To be confirmed'}\n\n`;
      
      if (additionalNotes) {
        emailBody += `ADDITIONAL NOTES:\n${additionalNotes}\n\n`;
      }
      
      emailBody += `ORDER SUMMARY:\n`;
      emailBody += `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`;
      emailBody += `Total Lines: ${lineItems.length}\n`;
      emailBody += `Subtotal: $${lineItems.reduce((sum, line) => sum + line.lineTotal, 0).toFixed(2)}\n`;
      if (parseFloat(freightCost)) {
        emailBody += `Freight: $${parseFloat(freightCost).toFixed(2)}\n`;
      }
      emailBody += `Total: $${orderTotal.toFixed(2)}\n\n`;
      
      emailBody += `LINE ITEMS:\n`;
      emailBody += `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`;
      lineItems.forEach((line, index) => {
        emailBody += `${index + 1}. ${line.productCode} - ${line.productName}\n`;
        emailBody += `   Quantity: ${line.quantity} @ $${line.unitCost.toFixed(2)} each\n`;
        emailBody += `   Line Total: $${line.lineTotal.toFixed(2)}\n\n`;
      });
      
      if (notes) {
        emailBody += `\nNOTES:\n${notes}\n\n`;
      }
      
      emailBody += `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`;
      emailBody += `\nThank you for your service.\n\n`;
      emailBody += `Best regards\n`;
      emailBody += `\n---\nGenerated by EverydayPOS`;
      
      // Log email DATI packet
      const emailDatiPacket = {
        request: 'save_data',
        client: 'everydaypos-web',
        data: {
          table: 'PurchaseOrders',
          operation: 'email',
          fields: {
            f100_s: generatedPO,
            email: targetEmail,
            subject: `Purchase Order #${generatedPO} from ${supplierName}`,
            body: emailBody
          }
        }
      };
      console.log('Email DATI packet:', emailDatiPacket);
 
      // Create mailto link
      const subject = encodeURIComponent(`Purchase Order #${generatedPO} from ${supplierName}`);
      const mailtoLink = `mailto:${targetEmail}?subject=${subject}&body=${encodeURIComponent(emailBody)}`;
      window.location.href = mailtoLink;
 
      alert(`✓ Purchase Order Created & Email Ready!\n\nPO Number: ${generatedPO}\nSupplier: ${supplierName}\nTotal: $${orderTotal.toFixed(2)}\n\nEmail to: ${targetEmail}`);
      
      // Close modal
      setShowEmailModal(false);
      setSendViaEmail(false);
      setOtherEmail('');
      setAdditionalNotes('');
      setShowEmailOptions(false);
      
      // Navigate after a delay to allow email client to open
      setTimeout(() => {
        router.push('/purchase-orders');
      }, 1000);
    }
  };
 
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 overflow-auto">
      <div className="container mx-auto px-4 py-8">
        {/* Header */}
        <div className="mb-6">
          <div className="flex items-center justify-between mb-2">
            <h1 className="text-3xl font-bold text-slate-800">Create Purchase Order</h1>
            <button
              onClick={() => router.push('/purchase-orders')}
              className="px-4 py-2 text-slate-600 hover:text-slate-800"
            >
              ← Back to Orders
            </button>
          </div>
          <p className="text-slate-600">Create a new purchase order for your supplier</p>
        </div>
 
        {/* Supplier Information */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
          <h2 className="text-lg font-semibold text-slate-800 mb-4">Purchase Order Details</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">PO Number</label>
              <input
                type="text"
                value={poNumber}
                onChange={(e) => setPoNumber(e.target.value)}
                placeholder="Auto-generated if left blank"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
              />
            </div>
          </div>
          <h3 className="text-lg font-semibold text-slate-800 mb-4">Supplier Information</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="md:col-span-2 relative">
              <label className="block text-sm font-medium text-slate-700 mb-2">
                Search Supplier <span className="text-red-500">*</span>
              </label>
              <div className="relative">
                <input
                  type="text"
                  value={supplierSearch}
                  onChange={(e) => handleSupplierSearch(e.target.value)}
                  onFocus={() => handleShowAllSuppliers()}
                  placeholder="Start typing supplier name or ID..."
                  className="w-full px-3 py-2 pr-20 border border-slate-300 rounded-lg text-sm"
                />
                <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
                  {supplierId && (
                    <button
                      onClick={handleClearSupplier}
                      className="text-slate-400 hover:text-slate-600"
                    >
                      ✕
                    </button>
                  )}
                  <button
                    onClick={handleShowAllSuppliers}
                    className="text-slate-400 hover:text-slate-600"
                    title="Show all suppliers"
                  >
                    ▼
                  </button>
                </div>
              </div>
              {showSupplierDropdown && suppliers.length > 0 && (
                <div className="absolute z-10 w-full mt-1 bg-white border border-slate-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                  {suppliers.map(supplier => (
                    <div
                      key={supplier.id}
                      onClick={() => handleSelectSupplier(supplier)}
                      className="px-4 py-3 hover:bg-slate-50 cursor-pointer border-b border-slate-100 last:border-b-0"
                    >
                      <div className="font-medium text-slate-800">{supplier.name}</div>
                      <div className="text-sm text-slate-500">ID: {supplier.id}</div>
                      {supplier.email && (
                        <div className="text-xs text-slate-400 mt-1">{supplier.email}</div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
            {supplierId && (
              <>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Supplier ID</label>
                  <input
                    type="text"
                    value={supplierId}
                    readOnly
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm bg-slate-50"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Supplier Name</label>
                  <input
                    type="text"
                    value={supplierName}
                    readOnly
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm bg-slate-50"
                  />
                </div>
              </>
            )}
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">
                Order Date <span className="text-red-500">*</span>
              </label>
              <input
                type="date"
                value={orderDate}
                onChange={(e) => setOrderDate(e.target.value)}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">
                Expected Delivery Date
              </label>
              <input
                type="date"
                value={expectedDeliveryDate}
                onChange={(e) => setExpectedDeliveryDate(e.target.value)}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
              />
            </div>
          </div>
        </div>
 
        {/* Freight and Notes */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
          <label className="block text-sm font-medium text-slate-700 mb-2">Notes</label>
          <textarea
            value={notes}
            onChange={(e) => setNotes(e.target.value)}
            placeholder="Add any notes or special instructions"
            rows={3}
            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
          />
        </div>
 
        {/* Add Line Item Form */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
          <h2 className="text-lg font-semibold text-slate-800 mb-4">Add Line Item</h2>
          <div className="grid grid-cols-1 md:grid-cols-6 gap-4">
            <div className="relative">
              <label className="block text-sm font-medium text-slate-700 mb-2">Product Code</label>
              <input
                type="text"
                value={productCodeSearch}
                onChange={(e) => handleProductCodeSearch(e.target.value)}
                onFocus={() => handleShowAllProducts('code')}
                placeholder="Search code..."
                className="w-full px-3 py-2 pr-8 border border-slate-300 rounded-lg text-sm"
              />
              <button
                onClick={() => handleShowAllProducts('code')}
                className="absolute right-2 top-[38px] text-slate-400 hover:text-slate-600"
                title="Show all products"
              >
                ▼
              </button>
              {showProductCodeDropdown && filteredProducts.length > 0 && (
                <div className="absolute z-20 w-full mt-1 bg-white border border-slate-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                  {filteredProducts.map(product => (
                    <div
                      key={product.code}
                      onClick={() => handleSelectProduct(product)}
                      className="px-3 py-2 hover:bg-slate-50 cursor-pointer border-b border-slate-100 last:border-b-0"
                    >
                      <div className="font-medium text-slate-800 text-sm">{product.code}</div>
                      <div className="text-xs text-slate-500">{product.name}</div>
                    </div>
                  ))}
                </div>
              )}
            </div>
            <div className="md:col-span-2 relative">
              <label className="block text-sm font-medium text-slate-700 mb-2">Product Name</label>
              <input
                type="text"
                value={productNameSearch}
                onChange={(e) => handleProductNameSearch(e.target.value)}
                onFocus={() => handleShowAllProducts('name')}
                placeholder="Search product..."
                className="w-full px-3 py-2 pr-8 border border-slate-300 rounded-lg text-sm"
              />
              <button
                onClick={() => handleShowAllProducts('name')}
                className="absolute right-2 top-[38px] text-slate-400 hover:text-slate-600"
                title="Show all products"
              >
                ▼
              </button>
              {showProductNameDropdown && filteredProducts.length > 0 && (
                <div className="absolute z-20 w-full mt-1 bg-white border border-slate-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                  {filteredProducts.map(product => (
                    <div
                      key={product.code}
                      onClick={() => handleSelectProduct(product)}
                      className="px-3 py-2 hover:bg-slate-50 cursor-pointer border-b border-slate-100 last:border-b-0"
                    >
                      <div className="font-medium text-slate-800 text-sm">{product.name}</div>
                      <div className="text-xs text-slate-500">{product.code} • {product.description}</div>
                    </div>
                  ))}
                </div>
              )}
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">Quantity</label>
              <input
                type="number"
                value={newQuantity}
                onChange={(e) => setNewQuantity(e.target.value)}
                onKeyDown={handleLineFormKeyDown}
                placeholder="0"
                min="0"
                step="1"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">Unit Cost ex. GST</label>
              <input
                type="number"
                value={newUnitCost}
                onChange={(e) => setNewUnitCost(e.target.value)}
                onKeyDown={handleLineFormKeyDown}
                placeholder="0.00"
                min="0"
                step="0.01"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">Extended Cost ex. GST</label>
              <input
                type="number"
                value={calculateExtendedCost().toFixed(2)}
                readOnly
                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm bg-slate-50 text-slate-700 font-semibold"
              />
            </div>
          </div>
          <div className="mt-4 flex justify-between items-center">
            <button
              onClick={handleAddLine}
              className="px-6 py-2 bg-[#00946b] text-white rounded-lg hover:opacity-80 font-semibold"
            >
              + Add Line Item
            </button>
            {(newProductCode || newProductName) && (
              <button
                onClick={handleClearProduct}
                className="px-4 py-2 text-slate-600 hover:text-slate-800 text-sm"
              >
                Clear Product
              </button>
            )}
          </div>
        </div>
 
        {/* Line Items Table */}
        {lineItems.length > 0 && (
          <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden mb-6">
            <div className="px-6 py-4 border-b border-slate-200">
              <h2 className="text-lg font-semibold text-slate-800">Order Lines ({lineItems.length})</h2>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-slate-50 border-b border-slate-200">
                  <tr>
                    <th className="px-4 py-3 text-left text-sm font-semibold text-slate-700">Code</th>
                    <th className="px-4 py-3 text-left text-sm font-semibold text-slate-700">Description</th>
                    <th className="px-4 py-3 text-right text-sm font-semibold text-slate-700">Quantity</th>
                    <th className="px-4 py-3 text-right text-sm font-semibold text-slate-700">Unit Cost</th>
                    <th className="px-4 py-3 text-right text-sm font-semibold text-slate-700">Extended Cost</th>
                    <th className="px-4 py-3 text-right text-sm font-semibold text-slate-700">Line Total</th>
                    <th className="px-4 py-3 text-center text-sm font-semibold text-slate-700">Actions</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-200">
                  {lineItems.map((line) => (
                    <tr key={line.id} className="hover:bg-slate-50">
                      <td className="px-4 py-3 text-sm text-slate-800 font-medium">{line.productCode}</td>
                      <td className="px-4 py-3 text-sm text-slate-700">{line.productName}</td>
                      <td className="px-4 py-3 text-right">
                        <input
                          type="number"
                          value={line.quantity}
                          onChange={(e) => handleUpdateLineQuantity(line.id, e.target.value)}
                          min="0"
                          step="1"
                          className="w-20 px-2 py-1 border border-slate-300 rounded text-sm text-right"
                        />
                      </td>
                      <td className="px-4 py-3 text-right">
                        <input
                          type="number"
                          value={line.unitCost}
                          onChange={(e) => handleUpdateLineUnitCost(line.id, e.target.value)}
                          min="0"
                          step="0.01"
                          className="w-24 px-2 py-1 border border-slate-300 rounded text-sm text-right"
                        />
                      </td>
                      <td className="px-4 py-3 text-right text-sm text-slate-800 font-semibold">
                        ${line.extendedCost.toFixed(2)}
                      </td>
                      <td className="px-4 py-3 text-sm text-slate-800 font-semibold text-right">
                        ${line.lineTotal.toFixed(2)}
                      </td>
                      <td className="px-4 py-3 text-center">
                        <button
                          onClick={() => handleRemoveLine(line.id)}
                          className="text-red-600 hover:text-red-800 text-sm font-medium"
                        >
                          Remove
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
                <tfoot className="bg-slate-50 border-t-2 border-slate-300">
                  <tr>
                    <td colSpan={4} className="px-4 py-3 text-right text-sm font-bold text-slate-800">
                      Total:
                    </td>
                    <td className="px-4 py-3 text-right text-lg font-bold text-[#00946b]">
                      ${calculateTotal().toFixed(2)}
                    </td>
                    <td></td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        )}
 
        {/* Action Buttons */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
          <div className="flex items-center justify-between">
            <div className="flex-1">
              <div className="flex items-end gap-6 mb-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Freight ex. GST</label>
                  <input
                    type="number"
                    value={freightCost}
                    onChange={(e) => setFreightCost(e.target.value)}
                    placeholder="0.00"
                    min="0"
                    step="0.01"
                    className="w-32 px-3 py-2 border border-slate-300 rounded-lg text-lg font-semibold text-slate-700"
                  />
                </div>
              </div>
              <div className="text-sm text-slate-500">Subtotal</div>
              <div className="text-lg font-semibold text-slate-700">${lineItems.reduce((sum, line) => sum + line.lineTotal, 0).toFixed(2)}</div>
              <div className="text-sm text-slate-500 mt-3 border-t border-slate-200 pt-2">Order Total ex. GST</div>
              <div className="text-3xl font-bold text-[#00946b]">${calculateTotal().toFixed(2)}</div>
              <div className="text-sm text-slate-600 mt-1">{lineItems.length} line item(s)</div>
            </div>
            <div className="flex gap-3">
              <button
                onClick={() => router.push('/purchase-orders')}
                className="px-6 py-3 bg-slate-300 text-slate-700 rounded-lg hover:bg-slate-400 font-semibold"
              >
                Cancel
              </button>
              <button
                onClick={handleSaveDraft}
                className="px-6 py-3 bg-slate-600 text-white rounded-lg hover:bg-slate-700 font-semibold"
              >
                Save as Draft
              </button>
              <button
                onClick={handleSubmit}
                disabled={lineItems.length === 0 || !supplierId || !supplierName}
                className="px-6 py-3 bg-[#00946b] text-white rounded-lg hover:opacity-80 font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
              >
                Create Order
              </button>
              <button
                onClick={() => setShowEmailModal(true)}
                disabled={lineItems.length === 0 || !supplierId || !supplierName}
                className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
              >
                Create Order & Email
              </button>
            </div>
          </div>
        </div>
        {/* Email Modal */}
        {showEmailModal && (
          <div className="fixed inset-0 bg-black/30 z-50 flex items-center justify-center p-4">
            <div className="bg-white rounded-lg shadow-xl max-w-md w-full">
              <div className="border-b border-slate-200 p-4 flex items-center justify-between">
                <h2 className="text-lg font-semibold text-slate-800">Email Options</h2>
                <button
                  onClick={() => {
                    setShowEmailModal(false);
                    setSendViaEmail(false);
                    setOtherEmail('');
                    setAdditionalNotes('');
                    setShowEmailOptions(false);
                  }}
                  className="text-slate-400 hover:text-slate-600"
                >
                  ✕
                </button>
              </div>
              
              <div className="p-6 space-y-4">
                <div className="border border-slate-200 rounded-lg p-4 bg-slate-50">
                  <label className="flex items-center gap-2 cursor-pointer mb-3">
                    <input
                      type="checkbox"
                      checked={sendViaEmail}
                      onChange={(e) => setSendViaEmail(e.target.checked)}
                      className="w-4 h-4 text-blue-600 rounded"
                    />
                    <span className="font-medium text-slate-700">Email to Supplier</span>
                  </label>
                  
                  {sendViaEmail && (
                    <>
                      <div className="text-sm text-slate-600 mb-3">
                        Email: {supplierName}
                      </div>
                      
                      <button
                        onClick={() => setShowEmailOptions(!showEmailOptions)}
                        className="text-sm text-blue-600 hover:text-blue-700 mb-3"
                      >
                        {showEmailOptions ? '▲' : '▼'} Options
                      </button>
                      
                      {showEmailOptions && (
                        <div className="space-y-3 mb-3 border-t border-slate-200 pt-3">
                          <div>
                            <label className="block text-sm font-medium text-slate-700 mb-1">
                              Override Email
                            </label>
                            <input
                              type="email"
                              value={otherEmail}
                              onChange={(e) => setOtherEmail(e.target.value)}
                              placeholder="Enter alternative email"
                              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                            />
                          </div>
                          
                          <div>
                            <label className="block text-sm font-medium text-slate-700 mb-1">
                              Additional Notes
                            </label>
                            <textarea
                              value={additionalNotes}
                              onChange={(e) => setAdditionalNotes(e.target.value)}
                              rows={3}
                              placeholder="Add any extra message"
                              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                            />
                          </div>
                        </div>
                      )}
                    </>
                  )}
                </div>
                
                <div className="flex gap-3">
                  <button
                    onClick={() => {
                      setShowEmailModal(false);
                      setSendViaEmail(false);
                      setOtherEmail('');
                      setAdditionalNotes('');
                      setShowEmailOptions(false);
                    }}
                    className="flex-1 px-4 py-2 bg-slate-300 text-slate-700 rounded-lg hover:bg-slate-400 font-semibold"
                  >
                    Cancel
                  </button>
                  <button
                    onClick={handleSubmitWithEmail}
                    disabled={!sendViaEmail}
                    className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    Create & Send
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}