page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect } from 'react';
import { Icon } from '@/contexts/IconContext';
 
interface LabelPurpose {
  id: number;
  name: string;
}
 
interface LabelReason {
  id: number;
  name: string;
}
 
interface PrinterDevice {
  id: number;
  name: string;
  deviceId: number;
}
 
const labelPurposes: LabelPurpose[] = [
  { id: 142, name: 'Delivery Address' },
  { id: 230, name: 'Product Item Label' },
  { id: 231, name: 'Warehouse Label' },
  { id: 232, name: 'Shelf Label' },
  { id: 235, name: 'Product QR label' },
  { id: 151, name: 'Markdown Pricing' },
  { id: 260, name: 'Transit Delivery Address' },
];
 
const labelReasons: LabelReason[] = [
  { id: 0, name: 'Default' },
  { id: 1, name: 'Expires Soon' },
  { id: 6, name: 'Store Promotion (-order)' },
  { id: 3, name: 'Damaged' },
  { id: 4, name: 'End of Line' },
  { id: 2, name: 'Store Promotion (+order)' },
  { id: 7, name: 'A B Testing' },
  { id: 8, name: 'None. Just print a label' },
];
 
interface LabelDimensions {
  width: number;
  height: number;
  name: string;
}
 
const commonLabelSizes: LabelDimensions[] = [
  { width: 200, height: 100, name: '2 x 1 inch (Small)' },
  { width: 300, height: 150, name: '3 x 1.5 inch (Medium)' },
  { width: 300, height: 200, name: '3 x 2 inch (Standard)' },
  { width: 400, height: 300, name: '4 x 3 inch (Large)' },
  { width: 400, height: 600, name: '4 x 6 inch (Shipping)' },
  { width: 600, height: 400, name: '6 x 4 inch (Wide)' },
];
 
interface LabelTemplate {
  name: string;
  description: string;
  commands: string;
  purposeId: number;
}
 
interface LabelElement {
  type: 'text' | 'barcode' | 'qr';
  x: number;
  y: number;
  text: string;
  font?: number;
  height?: number;
  field?: string;
}
 
const templates: LabelTemplate[] = [
  {
    name: 'Basic Price Label',
    description: 'Simple price label with product name and price',
    purposeId: 151,
    commands: `#type=1 #sequence=10
P1 x(10) y(20) text(XX) replace(XX,f216) font(3)
 
#type=1 #sequence=20
P1 x(10) y(50) text($XX) replace(XX,f215) font(5)`
  },
  {
    name: 'Barcode + Price Label',
    description: 'Product barcode with description and price',
    purposeId: 230,
    commands: `#type=1 #sequence=10
B1 x(50) y(30) text(XX) replace(XX,f239) height(80)
 
#type=1 #sequence=20
P1 x(10) y(120) text(XX) replace(XX,f216) font(3)
 
#type=1 #sequence=30
P1 x(10) y(140) text($XX) replace(XX,f215) font(4)`
  },
  {
    name: 'QR Code Product Label',
    description: 'QR code with product information',
    purposeId: 235,
    commands: `#type=1 #sequence=10
QR x(20) y(20) text(https://example.com/p/XX) replace(XX,f213) height(100)
 
#type=1 #sequence=20
P1 x(130) y(40) text(XX) replace(XX,f216) font(3)
 
#type=1 #sequence=30
P1 x(130) y(70) text($XX) replace(XX,f215) font(4)`
  },
  {
    name: 'Shelf Label Standard',
    description: 'Complete shelf label with brand, description, and price',
    purposeId: 232,
    commands: `#type=1 #sequence=10
P1 x(10) y(10) text(XX) replace(XX,f242) font(2)
 
#type=1 #sequence=20
P1 x(10) y(30) text(XX) replace(XX,f216) font(3)
 
#type=1 #sequence=30
P1 x(10) y(60) text($XX) replace(XX,f215) font(5)
 
#type=1 #sequence=40
B1 x(10) y(100) text(XX) replace(XX,f239) height(60)`
  },
  {
    name: 'Delivery Address Label',
    description: 'Shipping address with barcode',
    purposeId: 142,
    commands: `#type=1 #sequence=10
P1 x(10) y(20) text(XX) replace(XX,f110) font(3)
 
#type=1 #sequence=20
P1 x(10) y(40) text(XX) replace(XX,f301) font(3)
 
#type=1 #sequence=30
P1 x(10) y(60) text(XX) replace(XX,f302) font(3)
 
#type=1 #sequence=40
B1 x(10) y(100) text(XX) replace(XX,f210) height(60)`
  }
];
 
const fieldDefinitions = [
  { code: 'f110', name: 'Ship to info', category: 'Shipping' },
  { code: 'f210', name: 'Sale Physkey', category: 'Sale' },
  { code: 'f211', name: 'Sale Sid', category: 'Sale' },
  { code: 'f213', name: 'Product Id', category: 'Product' },
  { code: 'f214', name: 'Price in cents', category: 'Product' },
  { code: 'f215', name: 'Price as String', category: 'Product' },
  { code: 'f216', name: 'Product Description', category: 'Product' },
  { code: 'f239', name: 'Barcode', category: 'Product' },
  { code: 'f242', name: 'Brand Name', category: 'Product' },
  { code: 'f261', name: 'Free text 1', category: 'Custom' },
  { code: 'f262', name: 'Free text 2', category: 'Custom' },
  { code: 'f263', name: 'Free text 3', category: 'Custom' },
  { code: 'f300', name: 'Store Name', category: 'Store' },
  { code: 'f301', name: 'Address line 1', category: 'Store' },
  { code: 'f302', name: 'Address line 2', category: 'Store' },
];
 
export default function LabelFormatsPage() {
  const [purpose, setPurpose] = useState<number>(0);
  const [reason, setReason] = useState<number>(0);
  const [formatName, setFormatName] = useState<string>('');
  const [formatNames, setFormatNames] = useState<string[]>([]);
  const [commands, setCommands] = useState<string>('');
  const [testPrinterId, setTestPrinterId] = useState<number>(-1);
  const [testPid, setTestPid] = useState<string>('');
  const [printers, setPrinters] = useState<PrinterDevice[]>([]);
  const [previewUrl, setPreviewUrl] = useState<string>('');
  const [isLoading, setIsLoading] = useState(false);
  const [isSimpleMode, setIsSimpleMode] = useState(true);
  const [showHelp, setShowHelp] = useState(false);
  const [showTemplates, setShowTemplates] = useState(true);
  const [elements, setElements] = useState<LabelElement[]>([]);
  const [labelWidth, setLabelWidth] = useState(300);
  const [labelHeight, setLabelHeight] = useState(200);
  const [customDimensions, setCustomDimensions] = useState(false);
 
  useEffect(() => {
    loadPrinters();
  }, []);
 
  useEffect(() => {
    if (purpose > 0) {
      loadFormatData();
    }
  }, [purpose, reason]);
 
  useEffect(() => {
    updatePreview();
  }, [commands, testPid, elements, isSimpleMode]);
 
  const loadPrinters = async () => {
    try {
      // API call: /buck?3=localsystem.device.list&100=all
      // This queries the Fieldpine POS server for locally connected printers
      console.log('Loading printers from Windows...');
      
      // TODO: Implement actual API call
      // const response = await fetch('/buck?3=localsystem.device.list&100=all');
      // const data = await response.json();
      // Parse DEVI array and filter for label printers (f105 == 1)
      
      // Mock data - would be replaced with actual Windows printer list
      setPrinters([
        { id: 0, name: 'Label Printer 1 (USB)', deviceId: 101 },
        { id: 1, name: 'Label Printer 2 (Network)', deviceId: 102 },
      ]);
    } catch (error) {
      console.error('Failed to load printers:', error);
    }
  };
 
  const loadFormatData = async () => {
    setIsLoading(true);
    // API call: /buck?3=retailmax.elink.config.state&101=labelformats&200={reason}&201={purpose}
    console.log(`Loading format data for purpose ${purpose}, reason ${reason}...`);
    
    // Mock data - would parse response and populate commands textarea
    setIsLoading(false);
  };
 
  // Get default elements for a purpose
  const getDefaultElementsForPurpose = (purposeId: number): LabelElement[] => {
    switch (purposeId) {
      case 1: // Shelf Labels
        return [
          { type: 'text', x: 10, y: 10, text: 'f213', font: 4 }, // Product Name
          { type: 'text', x: 10, y: 45, text: 'f242', font: 5 }, // Price
          { type: 'barcode', x: 10, y: 70, text: 'f213', height: 60 }, // Barcode
        ];
      case 2: // Product Labels
        return [
          { type: 'text', x: 10, y: 10, text: 'f213', font: 3 }, // Product Name
          { type: 'text', x: 10, y: 35, text: 'f214', font: 2 }, // SKU
          { type: 'barcode', x: 10, y: 55, text: 'f213', height: 60 },
        ];
      case 3: // Barcode Labels
        return [
          { type: 'barcode', x: 10, y: 10, text: 'f213', height: 80 }, // Main barcode
          { type: 'text', x: 10, y: 100, text: 'f213', font: 2 }, // Code below
        ];
      case 4: // Shipping Labels
        return [
          { type: 'text', x: 10, y: 10, text: 'f110', font: 3 }, // Customer Name
          { type: 'text', x: 10, y: 35, text: 'f263', font: 2 }, // Address 1
          { type: 'text', x: 10, y: 55, text: 'f264', font: 2 }, // City
          { type: 'text', x: 10, y: 75, text: 'f265', font: 2 }, // Postal Code
          { type: 'barcode', x: 10, y: 100, text: 'f210', height: 60 }, // Sale ID
        ];
      case 5: // Delivery Labels
        return [
          { type: 'text', x: 10, y: 10, text: 'DELIVERY TO:', font: 3 },
          { type: 'text', x: 10, y: 35, text: 'f110', font: 4 }, // Customer Name
          { type: 'text', x: 10, y: 65, text: 'f263', font: 2 }, // Address
          { type: 'qr', x: 150, y: 10, text: 'f110', height: 80 }, // QR with customer info
        ];
      case 6: // Returns Labels
        return [
          { type: 'text', x: 10, y: 10, text: 'RETURN AUTHORIZATION', font: 4 },
          { type: 'text', x: 10, y: 40, text: 'f210', font: 3 }, // Sale ID
          { type: 'text', x: 10, y: 65, text: 'f300', font: 2 }, // Store Name
          { type: 'barcode', x: 10, y: 90, text: 'f210', height: 60 },
        ];
      default: // Other
        return [
          { type: 'text', x: 10, y: 20, text: 'Sample Text', font: 3 },
        ];
    }
  };
 
  const handlePurposeChange = (newPurpose: number) => {
    setPurpose(newPurpose);
    if (newPurpose !== 151) {
      setReason(0);
    }
    // Auto-populate elements in Simple Mode when purpose changes
    if (isSimpleMode && elements.length === 0) {
      const defaultElements = getDefaultElementsForPurpose(newPurpose);
      setElements(defaultElements);
      updateCommandsFromElements(defaultElements);
    }
  };
 
  const handleFormatNameChange = (name: string) => {
    if (name === 'Create New') {
      const newName = prompt('Name of new format?\n(short and terse is best)');
      if (newName && newName.length > 0) {
        setFormatNames([...formatNames, newName]);
        setFormatName(newName);
      }
    } else {
      setFormatName(name);
      // Load format by name
      console.log(`Loading format: ${name}`);
    }
  };
 
  const saveFormat = () => {
    if (purpose === 0) {
      alert('Please select a purpose first');
      return;
    }
 
    if (!formatName || formatName.length === 0) {
      alert('Please provide a format name');
      return;
    }
 
    const lines = commands.split('\n').filter(line => line.trim().length > 0);
    
    // Validate format
    let errors: string[] = [];
    for (let i = 0; i < lines.length; i += 2) {
      const headerLine = lines[i];
      if (!headerLine.startsWith('#')) {
        errors.push(`Line ${i + 1} did not start with '#'`);
        break;
      }
 
      const hasType = headerLine.includes('#type=');
      const hasSequence = headerLine.includes('#sequence=');
      if (!hasType || !hasSequence) {
        errors.push(`Line ${i + 1} did not give type and sequence information`);
        break;
      }
 
      if (i + 1 < lines.length) {
        const cmdLine = lines[i + 1];
        if (cmdLine.length === 0) {
          errors.push(`Line ${i + 2} does not have a command`);
          break;
        }
      }
    }
 
    if (errors.length > 0) {
      alert(errors.join('\n'));
      return;
    }
 
    // API call to save
    console.log('Saving format:', {
      purpose,
      reason,
      formatName,
      commands,
    });
 
    // <DATI><f8_s>retailmax.elink.config.printingformats.edit</f8_s>
    // <f11_B>E</f11_B> (or I for new)
    // <f101_E>{purpose}</f101_E>
    // <f105_E>{reason}</f105_E>
    // <f106_s>{formatName}</f106_s>
    // Parse commands and add DATS entries
    // </DATI>
 
    alert('Format saved successfully');
  };
 
  const updatePreview = () => {
    if (isSimpleMode && elements.length > 0) {
      // Simple mode uses element-based preview
      return;
    }
    // In advanced mode, could parse commands for preview
    console.log('Updating preview...');
  };
 
  const renderSimplePreview = () => {
    if (elements.length === 0) {
      return (
        <div className="text-center text-muted text-sm">
          Add elements to see preview
        </div>
      );
    }
 
    const aspectRatio = ((labelHeight / labelWidth) * 100);
 
    return (
      <div className="relative w-full" style={{ paddingBottom: `${aspectRatio}%` }}>
        <div className="absolute inset-0 border-2 border-dashed border-border bg-surface rounded overflow-hidden">
          {/* Dimension labels */}
          <div className="absolute -top-6 left-0 right-0 text-center text-xs text-muted font-semibold">
            {labelWidth} units
          </div>
          <div className="absolute top-0 bottom-0 -left-16 flex items-center justify-center text-xs text-muted font-semibold" style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>
            {labelHeight} units
          </div>
 
          {elements.map((element, idx) => {
            const xPercent = ((element.x / labelWidth) * 100);
            const yPercent = ((element.y / labelHeight) * 100);
            
            return (
              <div
                key={idx}
                className="absolute"
                style={{
                  left: `${xPercent}%`,
                  top: `${yPercent}%`,
                }}
              >
                {element.type === 'text' && (
                  <div
                    className="whitespace-nowrap font-mono"
                    style={{
                      fontSize: element.font === 1 ? '8px' : 
                                element.font === 2 ? '10px' :
                                element.font === 3 ? '12px' :
                                element.font === 4 ? '16px' : '20px',
                    }}
                  >
                    {element.field ? `{${fieldDefinitions.find(f => f.code === element.field)?.name || element.text}}` : element.text}
                  </div>
                )}
                {element.type === 'barcode' && (
                  <div className="flex flex-col items-center">
                    <div className="flex gap-px">
                      {[...Array(20)].map((_, i) => (
                        <div key={i} className="w-px bg-black" style={{ height: `${((element.height || 80) / 8)}px` }} />
                      ))}
                    </div>
                    <div className="text-xs mt-1 font-mono">
                      {element.field ? `{${fieldDefinitions.find(f => f.code === element.field)?.name}}` : element.text}
                    </div>
                  </div>
                )}
                {element.type === 'qr' && (
                  <div className="flex flex-col items-center">
                    <div 
                      className="border-2 border-black bg-surface grid grid-cols-8 gap-px p-1"
                      style={{ width: `${((element.height || 80) / 4)}px`, height: `${((element.height || 80) / 4)}px` }}
                    >
                      {[...Array(64)].map((_, i) => (
                        <div key={i} className={`${Math.random() > 0.5 ? 'bg-black' : 'bg-surface'}`} />
                      ))}
                    </div>
                    <div className="text-xs mt-1 font-mono">QR</div>
                  </div>
                )}
              </div>
            );
          })}
          
          {/* Grid overlay */}
          <div className="absolute inset-0 pointer-events-none opacity-10">
            <svg width="100%" height="100%">
              <defs>
                <pattern id="grid" width="10%" height="10%" patternUnits="userSpaceOnUse">
                  <path d="M 0 0 L 100 0 100 100" fill="none" stroke="gray" strokeWidth="0.5" />
                </pattern>
              </defs>
              <rect width="100%" height="100%" fill="url(#grid)" />
            </svg>
          </div>
        </div>
      </div>
    );
  };
 
  const loadTemplate = (template: LabelTemplate) => {
    setCommands(template.commands);
    setPurpose(template.purposeId);
    setShowTemplates(false);
  };
 
  const loadPresetSize = (size: LabelDimensions) => {
    setLabelWidth(size.width);
    setLabelHeight(size.height);
    setCustomDimensions(false);
  };
 
  const addElement = (type: 'text' | 'barcode' | 'qr') => {
    const newElement: LabelElement = {
      type,
      x: 10,
      y: 20 + (elements.length * 40),
      text: type === 'text' ? 'Sample Text' : 'XX',
      font: type === 'text' ? 3 : undefined,
      height: type !== 'text' ? 80 : undefined,
    };
    setElements([...elements, newElement]);
    updateCommandsFromElements([...elements, newElement]);
  };
 
  const updateElement = (index: number, updates: Partial<LabelElement>) => {
    const newElements = [...elements];
    newElements[index] = { ...newElements[index], ...updates };
    setElements(newElements);
    updateCommandsFromElements(newElements);
  };
 
  const removeElement = (index: number) => {
    const newElements = elements.filter((_, i) => i !== index);
    setElements(newElements);
    updateCommandsFromElements(newElements);
  };
 
  const updateCommandsFromElements = (els: LabelElement[]) => {
    let cmdText = '';
    els.forEach((el, idx) => {
      const seq = (idx + 1) * 10;
      cmdText += `#type=1 #sequence=${seq}\n`;
      
      if (el.type === 'text') {
        let cmd = `P1 x(${el.x}) y(${el.y}) text(${el.text})`;
        if (el.font) cmd += ` font(${el.font})`;
        if (el.field) cmd += ` replace(${el.text},${el.field})`;
        cmdText += cmd + '\n\n';
      } else if (el.type === 'barcode') {
        let cmd = `B1 x(${el.x}) y(${el.y}) text(${el.text})`;
        if (el.height) cmd += ` height(${el.height})`;
        if (el.field) cmd += ` replace(${el.text},${el.field})`;
        cmdText += cmd + '\n\n';
      } else if (el.type === 'qr') {
        let cmd = `QR x(${el.x}) y(${el.y}) text(${el.text})`;
        if (el.height) cmd += ` height(${el.height})`;
        if (el.field) cmd += ` replace(${el.text},${el.field})`;
        cmdText += cmd + '\n\n';
      }
    });
    setCommands(cmdText.trim());
  };
 
  const testPrint = (isPreview: boolean) => {
    if (testPrinterId < 0) {
      if (!isPreview) alert('Please select a printer');
      return;
    }
 
    console.log('Sending print job to Windows printer...', {
      printerId: testPrinterId,
      testPid,
      commands,
      isPreview,
    });
 
    // API call sends DATI XML to Fieldpine server:
    // <DATI><f8_s>localsystem.print.format</f8_s>
    // <f11_B>I</f11_B>
    // <f100_E>151</f100_E> (purpose)
    // <f101>{deviceId}</f101> (printer device ID)
    // <f103_s>iprint</f103_s> (for preview mode)
    // <f213_E>{testPid}</f213_E> (product ID)
    // <FIFT><CMD1><f110_s>{command}</f110_s></CMD1>...</FIFT>
    // </DATI>
    
    // The Fieldpine server then:
    // 1. Receives the XML packet
    // 2. Parses the commands
    // 3. Sends raw printer commands (ZPL, EPL, etc.) to Windows printer
    // 4. Returns preview image if requested (via labelary.com API)
 
    // TODO: Implement actual API call
    // const xmlPacket = buildPrintXML(commands, testPid, printers[testPrinterId].deviceId);
    // PostXML_RetOjectForGNAP("/DATI", xmlPacket, callback);
 
    if (isPreview) {
      // Mock preview - would get actual ZPL preview from server
      setPreviewUrl('https://via.placeholder.com/300x300?text=Label+Preview');
    } else {
      alert('Print job sent to Windows printer (placeholder - API not implemented)');
    }
  };
 
  return (
    <div className="p-6 min-h-screen bg-bg">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-text mb-2 flex items-center gap-3">
          <Icon name="label" size={32} className="text-brand" />
          Label Formats
        </h1>
        <p className="text-muted">
          Design and manage label formats for printing
        </p>
      </div>
 
      {/* Main Content */}
      <div className="max-w-[1600px] mx-auto">
          <p className="text-muted">Label use requires specialised label printers</p>
          
          {/* System Info */}
          <div className="mt-3 bg-warn/10 border border-warn/30 rounded-lg p-3">
            <p className="text-sm text-text flex items-center gap-2">
              <Icon name="print" size={20} className="text-warn" />
              <strong>Printer Connection:</strong> Label printers must be installed on your Windows POS server. 
              This web interface communicates with your local EverydayPOS server, which handles the actual printer connection.
            </p>
          </div>
        </div>
 
        {/* Mode Toggle & Help */}
        <div className="flex gap-4 mb-6">
          <div className="bg-surface rounded-lg shadow-md p-4 flex items-center gap-4">
            <span className="text-sm font-semibold text-text">Mode:</span>
            <button
              onClick={() => setIsSimpleMode(true)}
              className={`px-4 py-2 rounded-md transition-colors ${
                isSimpleMode
                  ? 'bg-brand text-surface'
                  : 'bg-surface-2 text-text hover:bg-surface-2/80'
              }`}
            >
              Simple (Recommended)
            </button>
            <button
              onClick={() => setIsSimpleMode(false)}
              className={`px-4 py-2 rounded-md transition-colors ${
                !isSimpleMode
                  ? 'bg-brand text-surface'
                  : 'bg-surface-2 text-text hover:bg-surface-2/80'
              }`}
            >
              Advanced (Code)
            </button>
          </div>
 
          <button
            onClick={() => setShowHelp(!showHelp)}
            className="bg-info hover:bg-info/80 text-surface px-4 py-2 rounded-md shadow-md transition-colors flex items-center gap-2"
          >
            <Icon name="help" size={20} />
            <span>{showHelp ? 'Hide' : 'Show'} Help</span>
          </button>
 
          <button
            onClick={() => setShowTemplates(!showTemplates)}
            className="bg-brand2 hover:bg-brand2/80 text-surface px-4 py-2 rounded-md shadow-md transition-colors flex items-center gap-2"
          >
            <Icon name="content_paste" size={20} />
            <span>{showTemplates ? 'Hide' : 'Show'} Templates</span>
          </button>
        </div>
 
        {/* Help Section */}
        {showHelp && (
          <div className="bg-info/10 border-l-4 border-info rounded-lg p-6 mb-6">
            <h2 className="text-xl font-bold text-text mb-4 flex items-center gap-2">
              <Icon name="school" size={24} className="text-info" />
              Getting Started with Label Formats
            </h2>
            
            <div className="space-y-4">
              <div>
                <h3 className="font-semibold text-text mb-2 flex items-center gap-2">
                  <Icon name="location_on" size={18} className="text-brand" />
                  Step 1: Choose Your Mode
                </h3>
                <ul className="text-sm text-text space-y-1 ml-4">
                  <li><strong>Simple Mode:</strong> Visual editor - Add elements with buttons, position them easily</li>
                  <li><strong>Advanced Mode:</strong> Direct command editing for power users who know the syntax</li>
                </ul>
              </div>
 
              <div>
                <h3 className="font-semibold text-text mb-2">📋 Step 2: Use a Template (Recommended)</h3>
                <p className="text-sm text-text">Click "Show Templates" and choose a pre-made label format. You can customize it after loading!</p>
                <p className="text-sm text-muted mt-2">💡 <strong>Or select a Purpose:</strong> Each purpose automatically provides default elements appropriate for that label type (shelf labels get price + barcode, shipping labels get address fields, etc.)</p>
              </div>
 
              <div>
                <h3 className="font-semibold text-text mb-2">✏️ Step 3: Customize Your Label</h3>
                <ul className="text-sm text-text space-y-1 ml-4">
                  <li><strong>In Simple Mode:</strong> Use "Add Text", "Add Barcode", "Add QR Code" buttons</li>
                  <li>Adjust X and Y positions (start small, label is typically 300x200 units)</li>
                  <li>Select fields from dropdown to show dynamic data (Price, Product Name, etc.)</li>
                  <li>Choose font size (1=small, 3=medium, 5=large)</li>
                </ul>
              </div>
 
              <div>
                <h3 className="font-semibold text-text mb-2">🎯 Understanding Coordinates</h3>
                <div className="bg-surface rounded p-3 text-sm text-text">
                  <p className="mb-2">Labels use X,Y coordinates like a graph:</p>
                  <ul className="space-y-1 ml-4">
                    <li>• <strong>X</strong> = horizontal position (left to right, 0-300)</li>
                    <li>• <strong>Y</strong> = vertical position (top to bottom, 0-200)</li>
                    <li>• Start at (10, 20) for first element</li>
                    <li>• Spacing: Add 30-50 to Y for each new line</li>
                  </ul>
                </div>
              </div>
 
              <div>
                <h3 className="font-semibold text-text mb-2">🔧 Step 4: Test Your Label</h3>
                <p className="text-sm text-text">Select a printer, optionally enter a test product ID, then click "Preview" or "Test Print"</p>
              </div>
 
              <div className="bg-warn/10 border border-warn/30 rounded p-3">
                <p className="text-sm text-text"><strong>💡 Pro Tip:</strong> Start with Simple Mode and a template. Once comfortable, switch to Advanced Mode to see the actual commands!</p>
              </div>
            </div>
          </div>
        )}
 
        {/* Templates Section */}
        {showTemplates && (
          <div className="bg-surface rounded-lg shadow-md p-6 mb-6">
            <h2 className="text-xl font-bold text-text mb-4 flex items-center gap-2">
              <span>📋</span> Quick Start Templates
            </h2>
            <p className="text-sm text-muted mb-4">Click any template to load it and customize</p>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {templates.map((template, idx) => (
                <div
                  key={idx}
                  onClick={() => loadTemplate(template)}
                  className="border-2 border-border rounded-lg p-4 hover:border-brand hover:bg-surface-2 cursor-pointer transition-all"
                >
                  <h3 className="font-semibold text-text mb-1">{template.name}</h3>
                  <p className="text-sm text-muted">{template.description}</p>
                </div>
              ))}
            </div>
          </div>
        )}
 
        {/* Label Dimensions Section */}
        <div className="bg-surface rounded-lg shadow-md p-6 mb-6">
          <h2 className="text-lg font-bold text-text mb-4 flex items-center gap-2">
            <span>📏</span> Label Dimensions
          </h2>
          
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mb-4">
            {commonLabelSizes.map((size, idx) => (
              <button
                key={idx}
                onClick={() => loadPresetSize(size)}
                className={`border-2 rounded-lg p-3 transition-all text-sm ${
                  labelWidth === size.width && labelHeight === size.height && !customDimensions
                    ? 'border-brand bg-success/10 font-semibold'
                    : 'border-border hover:border-brand hover:bg-surface-2'
                }`}
              >
                <div className="font-semibold text-text">{size.name.split(' ')[0]}</div>
                <div className="text-xs text-muted">{size.name.split(' ').slice(1).join(' ')}</div>
              </button>
            ))}
          </div>
 
          <div className="flex items-center gap-4">
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={customDimensions}
                onChange={(e) => setCustomDimensions(e.target.checked)}
                className="rounded"
              />
              <span className="text-sm font-semibold text-text">Custom Dimensions</span>
            </label>
 
            {customDimensions && (
              <div className="flex items-center gap-3">
                <div className="flex items-center gap-2">
                  <label className="text-sm text-text">Width:</label>
                  <input
                    type="number"
                    value={labelWidth}
                    onChange={(e) => setLabelWidth(Number(e.target.value))}
                    className="w-20 border border-border rounded px-2 py-1 text-sm"
                    min="50"
                    max="1000"
                  />
                </div>
                <div className="flex items-center gap-2">
                  <label className="text-sm text-text">Height:</label>
                  <input
                    type="number"
                    value={labelHeight}
                    onChange={(e) => setLabelHeight(Number(e.target.value))}
                    className="w-20 border border-border rounded px-2 py-1 text-sm"
                    min="50"
                    max="1000"
                  />
                </div>
                <span className="text-xs text-muted">units</span>
              </div>
            )}
          </div>
        </div>
 
        {/* Configuration Section */}
        <div className="bg-surface rounded-lg shadow-md p-6 mb-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            {/* Purpose */}
            <div>
              <div className="flex items-center justify-between mb-2">
                <label className="block text-sm font-semibold text-text">
                  Purpose
                </label>
                {isSimpleMode && elements.length > 0 && (
                  <button
                    type="button"
                    onClick={() => {
                      if (confirm('Reset to default elements for this purpose? Current elements will be replaced.')) {
                        const defaultElements = getDefaultElementsForPurpose(purpose);
                        setElements(defaultElements);
                        updateCommandsFromElements(defaultElements);
                      }
                    }}
                    className="text-sm text-brand hover:text-brand2"
                  >
                    Reset to Default
                  </button>
                )}
              </div>
              <select
                value={purpose}
                onChange={(e) => handlePurposeChange(Number(e.target.value))}
                className="w-full border border-border rounded-md px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
              >
                <option value={0}>..Select</option>
                {labelPurposes.map((p) => (
                  <option key={p.id} value={p.id}>
                    {p.name}
                  </option>
                ))}
              </select>
            </div>
 
            {/* Label Reason */}
            <div>
              <label className="block text-sm font-semibold text-text mb-2">
                Label Reason
              </label>
              <select
                value={reason}
                onChange={(e) => setReason(Number(e.target.value))}
                disabled={purpose !== 151}
                className="w-full border border-border rounded-md px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent disabled:bg-surface-2 disabled:cursor-not-allowed"
              >
                {labelReasons.map((r) => (
                  <option key={r.id} value={r.id}>
                    {r.name}
                  </option>
                ))}
              </select>
            </div>
 
            {/* Format Name */}
            <div>
              <label className="block text-sm font-semibold text-text mb-2">
                Your Name
              </label>
              <select
                value={formatName}
                onChange={(e) => handleFormatNameChange(e.target.value)}
                className="w-full border border-border rounded-md px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
              >
                <option value="">..Select</option>
                {formatNames.map((name) => (
                  <option key={name} value={name}>
                    {name}
                  </option>
                ))}
                {purpose === 235 && <option value="Create New">Create New</option>}
              </select>
            </div>
 
            {/* Save Button */}
            <div className="flex items-end">
              <button
                onClick={saveFormat}
                className="w-full bg-brand hover:bg-brand2 text-surface font-semibold py-2 px-4 rounded-md transition-colors flex items-center justify-center gap-2"
              >
                <Icon name="save" size={20} />
                Save
              </button>
              {isLoading && (
                <span className="ml-2 text-sm text-muted">Loading...</span>
              )}
            </div>
          </div>
 
          {/* Commands Editor and Preview */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {/* Simple Mode Visual Editor */}
            {isSimpleMode ? (
              <div className="lg:col-span-2">
                <div className="flex justify-between items-center mb-4">
                  <label className="block text-sm font-semibold text-text">
                    Label Elements
                  </label>
                  <div className="flex gap-2">
                    <button
                      onClick={() => addElement('text')}
                      className="bg-brand hover:bg-brand2 text-surface px-3 py-1 rounded text-sm transition-colors flex items-center gap-1"
                    >
                      <Icon name="add" size={16} />
                      Add Text
                    </button>
                    <button
                      onClick={() => addElement('barcode')}
                      className="bg-info hover:bg-info/80 text-surface px-3 py-1 rounded text-sm transition-colors flex items-center gap-1"
                    >
                      <Icon name="add" size={16} />
                      Add Barcode
                    </button>
                    <button
                      onClick={() => addElement('qr')}
                      className="bg-brand2 hover:bg-brand2/80 text-surface px-3 py-1 rounded text-sm transition-colors flex items-center gap-1"
                    >
                      <Icon name="add" size={16} />
                      Add QR Code
                    </button>
                  </div>
                </div>
 
                <div className="space-y-4 max-h-[600px] overflow-y-auto">
                  {elements.length === 0 && (
                    <div className="border-2 border-dashed border-border rounded-lg p-8 text-center">
                      <p className="text-muted mb-4">No elements yet. Click a button above to add your first element!</p>
                      <p className="text-sm text-muted/70">Or load a template to get started quickly</p>
                    </div>
                  )}
 
                  {elements.map((element, idx) => (
                    <div key={idx} className="border border-border rounded-lg p-4 bg-surface-2">
                      <div className="flex justify-between items-start mb-3">
                        <div className="flex items-center gap-2">
                          <span className={`px-2 py-1 rounded text-xs font-semibold text-surface ${
                            element.type === 'text' ? 'bg-success' :
                            element.type === 'barcode' ? 'bg-info' : 'bg-brand2'
                          }`}>
                            {element.type.toUpperCase()}
                          </span>
                          <span className="text-sm text-muted">Element {idx + 1}</span>
                        </div>
                        <button
                          onClick={() => removeElement(idx)}
                          className="text-danger hover:text-danger/80 text-sm font-semibold"
                        >
                          Remove
                        </button>
                      </div>
 
                      <div className="grid grid-cols-2 gap-3">
                        <div>
                          <label className="block text-xs font-semibold text-text mb-1">
                            X Position (left-right)
                          </label>
                          <input
                            type="number"
                            value={element.x}
                            onChange={(e) => updateElement(idx, { x: Number(e.target.value) })}
                            className="w-full border border-border rounded px-2 py-1 text-sm"
                            min="0"
                            max="300"
                          />
                        </div>
                        <div>
                          <label className="block text-xs font-semibold text-text mb-1">
                            Y Position (top-bottom)
                          </label>
                          <input
                            type="number"
                            value={element.y}
                            onChange={(e) => updateElement(idx, { y: Number(e.target.value) })}
                            className="w-full border border-border rounded px-2 py-1 text-sm"
                            min="0"
                            max="200"
                          />
                        </div>
 
                        <div className="col-span-2">
                          <label className="block text-xs font-semibold text-text mb-1">
                            {element.type === 'text' ? 'Text Content' : 'Placeholder'}
                          </label>
                          <input
                            type="text"
                            value={element.text}
                            onChange={(e) => updateElement(idx, { text: e.target.value })}
                            className="w-full border border-border rounded px-2 py-1 text-sm"
                            placeholder={element.type === 'text' ? 'Enter text...' : 'XX'}
                          />
                        </div>
 
                        <div>
                          <label className="block text-xs font-semibold text-text mb-1">
                            Data Field (optional)
                          </label>
                          <select
                            value={element.field || ''}
                            onChange={(e) => updateElement(idx, { field: e.target.value || undefined })}
                            className="w-full border border-border rounded px-2 py-1 text-sm"
                          >
                            <option value="">Static (no field)</option>
                            {fieldDefinitions.map((field) => (
                              <option key={field.code} value={field.code}>
                                {field.name} ({field.code})
                              </option>
                            ))}
                          </select>
                        </div>
 
                        {element.type === 'text' && (
                          <div>
                            <label className="block text-xs font-semibold text-text mb-1">
                              Font Size
                            </label>
                            <select
                              value={element.font || 3}
                              onChange={(e) => updateElement(idx, { font: Number(e.target.value) })}
                              className="w-full border border-border rounded px-2 py-1 text-sm"
                            >
                              <option value="1">Small (1)</option>
                              <option value="2">Medium-Small (2)</option>
                              <option value="3">Medium (3)</option>
                              <option value="4">Medium-Large (4)</option>
                              <option value="5">Large (5)</option>
                            </select>
                          </div>
                        )}
 
                        {element.type !== 'text' && (
                          <div>
                            <label className="block text-xs font-semibold text-text mb-1">
                              Height
                            </label>
                            <input
                              type="number"
                              value={element.height || 80}
                              onChange={(e) => updateElement(idx, { height: Number(e.target.value) })}
                              className="w-full border border-border rounded px-2 py-1 text-sm"
                              min="20"
                              max="150"
                            />
                          </div>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
 
                {/* Show generated commands in simple mode */}
                {elements.length > 0 && (
                  <div className="mt-4">
                    <details className="border border-border rounded-lg">
                      <summary className="bg-surface-2 px-4 py-2 cursor-pointer font-semibold text-sm text-text hover:bg-surface-2/80">
                        View Generated Commands (Advanced)
                      </summary>
                      <div className="p-4">
                        <pre className="text-xs font-mono bg-surface-2 p-3 rounded overflow-x-auto">{commands}</pre>
                      </div>
                    </details>
                  </div>
                )}
              </div>
            ) : (
              /* Advanced Mode - Raw Commands */
              <div className="lg:col-span-2">
                <label className="block text-sm font-semibold text-text mb-2">
                  Commands (Advanced)
                </label>
                <textarea
                  value={commands}
                  onChange={(e) => setCommands(e.target.value)}
                  rows={20}
                  className="w-full border border-border rounded-md px-3 py-2 font-mono text-sm focus:ring-2 focus:ring-brand focus:border-transparent"
                  placeholder={`#type=1 #sequence=20
P1 x(20) y(20) text(TEST TEST) font(5)
 
#type=1 #sequence=30
B1 x(100) y(150) text(XX) replace(XX,f239) height(100)`}
                />
 
                {/* Command Reference in Advanced Mode */}
                <div className="mt-4 bg-info/10 border border-info/30 rounded-lg p-4">
                  <h3 className="text-sm font-semibold text-text mb-2">Command Syntax Reference</h3>
                  <ul className="text-xs text-text space-y-1 font-mono">
                    <li><strong>Text:</strong> P1 x(20) y(20) text(Hello) font(3)</li>
                    <li><strong>Barcode:</strong> B1 x(100) y(50) text(XX) replace(XX,f239) height(80)</li>
                    <li><strong>QR Code:</strong> QR x(200) y(100) text(URL) height(100)</li>
                    <li><strong>Dynamic Data:</strong> Use replace(XX,f215) to insert field values</li>
                  </ul>
                </div>
              </div>
            )}
 
            {/* Example Output */}
            <div>
              <h3 className="text-sm font-semibold text-text mb-2">
                Live Preview
                <span className="ml-2 text-xs text-muted">(Simulated)</span>
              </h3>
              <div className="border border-border rounded-md p-4 bg-surface-2">
                {isSimpleMode ? (
                  renderSimplePreview()
                ) : previewUrl ? (
                  <img src={previewUrl} alt="Label Preview" className="max-w-full mx-auto" />
                ) : (
                  <div className="text-center text-muted text-sm min-h-[300px] flex items-center justify-center">
                    Click "Preview" to see your label
                  </div>
                )}
              </div>
              
              <div className="mt-3 bg-info/10 border border-info/30 rounded p-3">
                <p className="text-xs text-text">
                  <strong>📏 Current Label Size:</strong> {labelWidth} x {labelHeight} units
                  <br />
                  <span className="text-muted">Preview is scaled to fit. Adjust dimensions above to match your physical label size.</span>
                </p>
              </div>
            </div>
          </div>
        </div>
 
        {/* Test Printing Section */}
        <div className="bg-surface rounded-lg shadow-md p-6 mb-6">
          <h2 className="text-xl font-bold text-text mb-4">Test Printing</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
            <div>
              <label className="block text-sm font-semibold text-text mb-2">
                Test Printer
              </label>
              <select
                value={testPrinterId}
                onChange={(e) => setTestPrinterId(Number(e.target.value))}
                className="w-full border border-border rounded-md px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
              >
                <option value={-1}>Select Printer</option>
                {printers.map((printer) => (
                  <option key={printer.id} value={printer.id}>
                    {printer.name}
                  </option>
                ))}
              </select>
            </div>
 
            <div>
              <label className="block text-sm font-semibold text-text mb-2">
                Test Product Id
              </label>
              <input
                type="text"
                value={testPid}
                onChange={(e) => setTestPid(e.target.value)}
                className="w-full border border-border rounded-md px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
                placeholder="Enter product ID"
              />
            </div>
 
            <div className="flex gap-2">
              <button
                onClick={() => testPrint(false)}
                className="flex-1 bg-brand hover:bg-brand2 text-surface font-semibold py-2 px-4 rounded-md transition-colors flex items-center justify-center gap-2"
              >
                <Icon name="print" size={20} />
                Test Print
              </button>
              <button
                onClick={() => testPrint(true)}
                className="flex-1 bg-surface-2 hover:bg-surface-2/80 text-text font-semibold py-2 px-4 rounded-md transition-colors"
              >
                Preview
              </button>
            </div>
          </div>
        </div>
 
        {/* Field Definitions Reference */}
        <div className="bg-surface rounded-lg shadow-md p-6">
          <h2 className="text-xl font-bold text-text mb-4">Field Definitions Reference</h2>
          <p className="text-sm text-muted mb-4">
            These fields automatically pull data from your products and sales. Use them in the "Data Field" dropdown in Simple Mode,
            or with the replace() function in Advanced Mode.
          </p>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {['Product', 'Sale', 'Store', 'Shipping', 'Custom'].map((category) => {
              const categoryFields = fieldDefinitions.filter(f => f.category === category);
              if (categoryFields.length === 0) return null;
              
              return (
                <div key={category}>
                  <h3 className="font-semibold text-[#00946b] mb-3">{category} Fields</h3>
                  <div className="space-y-2">
                    {categoryFields.map((field) => (
                      <div key={field.code} className="flex gap-3 items-start">
                        <code className="text-xs font-mono bg-surface-2 px-2 py-1 rounded text-[#00946b] font-semibold min-w-[60px]">
                          {field.code}
                        </code>
                        <span className="text-sm text-text">{field.name}</span>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
 
          {/* Additional fields collapsed */}
          <details className="mt-6">
            <summary className="cursor-pointer text-sm font-semibold text-text hover:text-[#00946b]">
              Show more fields (f263-f309)
            </summary>
            <div className="mt-3 grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
              <div><code className="text-[#00946b]">f263-f269</code> Free text 3-9</div>
              <div><code className="text-[#00946b]">f303-f309</code> Address lines 3-9</div>
            </div>
          </details>
        </div>
 
        {/* Quick Tips */}
        <div className="bg-gradient-to-r from-green-50 to-blue-50 border-l-4 border-[#00946b] rounded-lg p-6 mt-6">
          <h3 className="text-lg font-bold text-text mb-3">💡 Quick Tips for Success</h3>
          <ul className="space-y-2 text-sm text-text">
            <li className="flex gap-2">
              <span className="text-[#00946b]">✓</span>
              <span><strong>Start with templates:</strong> They're tested and work well for common needs</span>
            </li>
            <li className="flex gap-2">
              <span className="text-[#00946b]">✓</span>
              <span><strong>Use Simple Mode first:</strong> It's easier and prevents syntax errors</span>
            </li>
            <li className="flex gap-2">
              <span className="text-[#00946b]">✓</span>
              <span><strong>Keep it simple:</strong> Labels with 3-5 elements work best</span>
            </li>
            <li className="flex gap-2">
              <span className="text-[#00946b]">✓</span>
              <span><strong>Test before saving:</strong> Use Preview to check layout before printing</span>
            </li>
            <li className="flex gap-2">
              <span className="text-[#00946b]">✓</span>
              <span><strong>Label sizes vary:</strong> Typical labels are about 300 units wide by 200 tall</span>
            </li>
          </ul>
        </div>
      </div>
  );
}