page.tsx

Go to the documentation of this file.

"use client";
import { useEffect, useMemo, useState } from "react";
import { fieldpine } from "@/lib/fieldpine";
import { Icon } from '@/contexts/IconContext';
 
interface ProductOption {
  id: number;
  name: string;
  price: number;
  description?: string;
}
 
interface FormatOption {
  id: string;
  name: string;
  type: "A4 Sign" | "Shelf Label";
  content: string;
}
 
const fallbackProducts: ProductOption[] = [
  { id: 101, name: "Organic Pears 1kg", description: "Crisp and sweet", price: 2.95 },
  { id: 205, name: "Honeycrisp Apples", description: "Seasonal promo", price: 3.49 },
  { id: 330, name: "Bananas", description: "Everyday price", price: 1.99 },
  { id: 441, name: "Almond Milk 1L", description: "Dairy free", price: 4.5 },
];
 
const starterExamples: Record<number, string> = {
  1: "SPECIAL\n\nPEARS\n$2.95\n\nToday Only",
  2: "SPECIAL\n\nPEARS\n>color red\n$2.95\n>color black\n\n\nToday Only",
  3: ">fontsize 30mm\nSPECIAL\n\nPEARS\n>background red white\n$2.95\n>background white\n>color black\n\nToday Only\n>left\n>fontsize 8mm\nLimit 3 per customer, while stocks last, no rainchecks",
};
 
const initialFormats: FormatOption[] = [
  { id: "a4-summer", name: "Summer A4", type: "A4 Sign", content: starterExamples[1] },
  { id: "shelf-std", name: "Standard Shelf", type: "Shelf Label", content: "PRICE\n>fontsize 14mm\n>left\nProduct Name" },
];
 
function mmToPx(input: string) {
  const numeric = parseFloat(input);
  if (Number.isNaN(numeric)) return undefined;
  return numeric * 3.78; // rough mm to px conversion
}
 
export default function SignsAndLabelsPage() {
  const [signText, setSignText] = useState(starterExamples[1]);
  const [products, setProducts] = useState<ProductOption[]>(fallbackProducts);
  const [selectedProduct, setSelectedProduct] = useState<ProductOption>(fallbackProducts[0]);
  const [productQuery, setProductQuery] = useState("");
  const [selectedQueue, setSelectedQueue] = useState("Main Label Printer");
  const [queues] = useState(["Main Label Printer", "Office Laser", "Back Office Zebra"]);
  const [formats, setFormats] = useState<FormatOption[]>(initialFormats);
  const [selectedFormatId, setSelectedFormatId] = useState(initialFormats[0].id);
  const [saveMessage, setSaveMessage] = useState("");
  const [newFormatName, setNewFormatName] = useState("");
  const [newFormatType, setNewFormatType] = useState<FormatOption["type"]>("A4 Sign");
  const [printMessage, setPrintMessage] = useState("");
  const [isPrinting, setIsPrinting] = useState(false);
  const [productsLoading, setProductsLoading] = useState(false);
  const [productError, setProductError] = useState<string | null>(null);
  const [includeName, setIncludeName] = useState(true);
  const [includeDescription, setIncludeDescription] = useState(false);
  const [includePrice, setIncludePrice] = useState(false);
  const [pdfMessage, setPdfMessage] = useState<string | null>(null);
 
  useEffect(() => {
    const savedQueue = typeof window !== "undefined" ? localStorage.getItem("signs.queue") : null;
    if (savedQueue) setSelectedQueue(savedQueue);
  }, []);
 
  useEffect(() => {
    if (typeof window !== "undefined") {
      localStorage.setItem("signs.queue", selectedQueue);
    }
  }, [selectedQueue]);
 
  useEffect(() => {
    let active = true;
    const fetchProducts = async () => {
      setProductsLoading(true);
      setProductError(null);
      try {
        const result = await fieldpine.getProducts({ limit: 50, search: productQuery || undefined });
        const mapped: ProductOption[] = (result.products || []).map((p: any) => ({
          id: p.pid ?? p.id ?? p.productId ?? 0,
          name: p.description ?? p.name ?? `Product ${p.pid ?? p.id ?? ""}`,
          description: p.longDescription ?? p.description ?? p.name,
          price: Number(p.sellprice ?? p.sellPrice ?? p.price ?? 0),
        })).filter((p: ProductOption) => p.id !== 0);
        if (!active) return;
        if (mapped.length) {
          setProducts(mapped);
          setSelectedProduct((prev) => {
            const stillExists = mapped.find((m) => m.id === prev?.id);
            return stillExists ?? mapped[0];
          });
        } else {
          setProducts(fallbackProducts);
          setSelectedProduct(fallbackProducts[0]);
        }
      } catch (error: any) {
        if (!active) return;
        setProductError(error?.message || "Unable to load products");
        setProducts(fallbackProducts);
        setSelectedProduct(fallbackProducts[0]);
      } finally {
        if (active) setProductsLoading(false);
      }
    };
 
    const timer = setTimeout(fetchProducts, 250);
    return () => {
      active = false;
      clearTimeout(timer);
    };
  }, [productQuery]);
 
  const filteredProducts = useMemo(() => {
    if (!productQuery.trim()) return products;
    const q = productQuery.toLowerCase();
    return products.filter((p) =>
      p.name.toLowerCase().includes(q) ||
      p.description?.toLowerCase().includes(q) ||
      p.id.toString() === q
    );
  }, [productQuery, products]);
 
  const parsedLines = useMemo(() => {
    const autoLines: string[] = [];
    if (includeName && selectedProduct?.name) autoLines.push(selectedProduct.name);
    if (includeDescription && selectedProduct?.description) autoLines.push(selectedProduct.description);
    if (includePrice && Number.isFinite(selectedProduct?.price)) autoLines.push(`$${selectedProduct.price.toFixed(2)}`);
 
    const lines = [...autoLines, ...signText.split(/\r?\n/)] as string[];
    const out: { id: number; text: string; style: React.CSSProperties }[] = [];
    let currentColor = "#0f172a";
    let currentBackground = "white";
    let currentAlign: React.CSSProperties["textAlign"] = "center";
    let currentFontSize = 28;
 
    lines.forEach((raw, idx) => {
      if (raw.startsWith(">")) {
        const parts = raw.slice(1).trim().split(/\s+/);
        const [command, ...rest] = parts;
        if (command === "color" && rest[0]) currentColor = rest[0];
        if (command === "background" && rest[0]) currentBackground = rest[0];
        if (command === "fontsize" && rest[0]) currentFontSize = mmToPx(rest[0]) ?? currentFontSize;
        if (command === "left") currentAlign = "left";
        if (command === "center") currentAlign = "center";
        if (command === "right") currentAlign = "right";
        return;
      }
 
      out.push({
        id: idx,
        text: raw.length ? raw : "\u00a0",
        style: {
          color: currentColor,
          background: currentBackground,
          textAlign: currentAlign,
          fontSize: currentFontSize,
          lineHeight: 1.05,
          fontWeight: "bold",
          padding: "4px 6px",
        },
      });
    });
    return out;
  }, [signText]);
 
  const handleExample = (n: number) => {
    setSignText(starterExamples[n]);
    setPrintMessage("");
  };
 
  const handleLoadFormat = () => {
    const fmt = formats.find((f) => f.id === selectedFormatId);
    if (!fmt) return;
    setSignText(fmt.content);
    setSaveMessage(`Loaded ${fmt.name}`);
    setTimeout(() => setSaveMessage(""), 2000);
  };
 
  const handleSaveFormat = () => {
    setFormats((prev) => prev.map((f) => (f.id === selectedFormatId ? { ...f, content: signText } : f)));
    const fmt = formats.find((f) => f.id === selectedFormatId);
    setSaveMessage(fmt ? `${fmt.name} saved` : "Saved changes");
    setTimeout(() => setSaveMessage(""), 2200);
  };
 
  const handleSaveNew = () => {
    if (!newFormatName.trim()) {
      setSaveMessage("Enter a name to save a new format");
      return;
    }
    const id = `custom-${Date.now()}`;
    const next: FormatOption = { id, name: newFormatName.trim(), type: newFormatType, content: signText };
    setFormats((prev) => [...prev, next]);
    setSelectedFormatId(id);
    setNewFormatName("");
    setSaveMessage(`Saved new format '${next.name}'`);
    setTimeout(() => setSaveMessage(""), 2200);
  };
 
  const handlePrint = () => {
    setIsPrinting(true);
    setPrintMessage("Sending to printer queue...");
    setTimeout(() => {
      setIsPrinting(false);
      setPrintMessage(`Queued to ${selectedQueue} for ${selectedProduct.name}`);
    }, 900);
  };
 
  const handlePrintToPdf = () => {
    if (typeof window === "undefined") return;
    setPdfMessage(null);
    const html = `<!doctype html>
      <html>
        <head>
          <meta charset="utf-8" />
          <title>Sign Preview</title>
          <style>
            body { margin: 0; padding: 24px; font-family: 'Inter', system-ui, sans-serif; background: #f8fafc; }
            .page { width: 210mm; height: 297mm; padding: 16mm; box-sizing: border-box; background: white; border: 1px solid #cbd5e1; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12); }
            .header { display: flex; justify-content: space-between; font-size: 12px; color: #475569; margin-bottom: 12px; }
            .lines { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
          </style>
        </head>
        <body>
          <div class="page">
            <div class="lines">
              ${parsedLines.map((line) => `<div style="${[
                `color:${line.style.color ?? "#0f172a"}`,
                `background:${line.style.background ?? "white"}`,
                `text-align:${line.style.textAlign ?? "center"}`,
                `font-size:${typeof line.style.fontSize === "number" ? `${line.style.fontSize}px` : line.style.fontSize ?? "28px"}`,
                `line-height:${line.style.lineHeight ?? 1.05}`,
                `font-weight:${line.style.fontWeight ?? "bold"}`,
                `padding:${line.style.padding ?? "4px 6px"}`
              ].join(";")}">${line.text || "&nbsp;"}</div>`).join("")}
            </div>
          </div>
          <script>window.onload = () => { window.focus(); window.print(); };</script>
        </body>
      </html>`;
 
    try {
      const blob = new Blob([html], { type: "text/html" });
      const url = URL.createObjectURL(blob);
      const iframe = document.createElement("iframe");
      iframe.style.position = "fixed";
      iframe.style.right = "0";
      iframe.style.bottom = "0";
      iframe.style.width = "0";
      iframe.style.height = "0";
      iframe.style.border = "0";
      iframe.src = url;
      iframe.onload = () => {
        try {
          iframe.contentWindow?.focus();
          iframe.contentWindow?.print();
          setPdfMessage("Opened browser print dialog — choose Save as PDF.");
        } catch (err) {
          setPdfMessage("Unable to open print dialog. Allow popups or try again.");
        }
      };
      document.body.appendChild(iframe);
      setTimeout(() => {
        document.body.removeChild(iframe);
        URL.revokeObjectURL(url);
      }, 10_000);
    } catch (err) {
      setPdfMessage("Unable to generate PDF preview.");
    }
  };
 
  const handleSelectProduct = (id: number) => {
    const match = products.find((p) => p.id === id);
    if (match) setSelectedProduct(match);
  };
 
  return (
    <div className="p-8 space-y-6">
      <div className="flex items-center justify-between gap-4">
        <div>
          <p className="text-sm text-muted mb-1">Products / Signs & Labels</p>
          <h1 className="text-3xl font-bold text-text">Signs and Labels</h1>
          <p className="text-sm text-muted">Draft, preview, and send signage to your label printers.</p>
        </div>
        <div className="hidden md:flex items-center gap-3 bg-surface border border-border rounded-lg px-4 py-2 shadow-sm">
          <div className="text-xs text-muted">Queue</div>
          <select
            className="border border-border rounded px-3 py-1 text-sm"
            value={selectedQueue}
            onChange={(e) => setSelectedQueue(e.target.value)}
          >
            {queues.map((q) => (
              <option key={q} value={q}>{q}</option>
            ))}
          </select>
        </div>
      </div>
 
      <div className="grid gap-6 lg:grid-cols-3">
        <div className="lg:col-span-2 space-y-6">
          <div className="bg-surface border border-border rounded-xl shadow-sm p-4 sm:p-6">
            <div className="flex flex-col gap-3">
              <div className="flex items-center justify-between gap-3">
                <div>
                  <h2 className="text-xl font-semibold text-text">Sign details</h2>
                  <p className="text-sm text-muted">Write your sign text. Use &gt; commands for quick styling.</p>
                </div>
                <div className="flex gap-2">
                  {[1, 2, 3].map((n) => (
                    <button
                      key={n}
                      onClick={() => handleExample(n)}
                      className="px-3 py-2 text-sm bg-surface-2 hover:bg-surface rounded border border-border"
                    >
                      Example #{n}
                    </button>
                  ))}
                </div>
              </div>
 
              <div className="flex flex-wrap gap-3 text-sm text-muted">
                <label className="inline-flex items-center gap-2">
                  <input type="checkbox" checked={includeName} onChange={(e) => setIncludeName(e.target.checked)} />
                  Include product name
                </label>
                <label className="inline-flex items-center gap-2">
                  <input type="checkbox" checked={includeDescription} onChange={(e) => setIncludeDescription(e.target.checked)} />
                  Include description
                </label>
                <label className="inline-flex items-center gap-2">
                  <input type="checkbox" checked={includePrice} onChange={(e) => setIncludePrice(e.target.checked)} />
                  Include price
                </label>
              </div>
            </div>
            <textarea
              value={signText}
              onChange={(e) => setSignText(e.target.value)}
              rows={16}
              className="w-full border border-border rounded-lg p-3 font-mono text-sm outline-none focus:ring-2 focus:ring-brand/50"
              aria-label="Sign text"
            />
            <div className="mt-2 text-xs text-muted">
              Commands: <code>{">color red"}</code>, <code>{">fontsize 30mm"}</code>, <code>{">left|center|right"}</code>, <code>{">background yellow"}</code>
            </div>
          </div>
 
          <div className="bg-surface border border-border rounded-xl shadow-sm p-4 sm:p-6 flex flex-col gap-4">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-lg font-semibold text-text">Sample product</h3>
                <p className="text-sm text-muted">Used for preview and when sending to the printer queue.</p>
              </div>
              <div className="text-sm text-muted">${selectedProduct.price.toFixed(2)}</div>
            </div>
            <div className="flex flex-col gap-3">
              <input
                className="border border-border rounded px-3 py-2 text-sm"
                placeholder="Search product by name or ID"
                value={productQuery}
                onChange={(e) => setProductQuery(e.target.value)}
              />
              {productError && <div className="text-xs text-red-600">{productError}</div>}
              <div className="flex flex-wrap gap-2">
                {productsLoading ? (
                  <div className="text-sm text-muted">Loading products…</div>
                ) : filteredProducts.length === 0 ? (
                  <div className="text-sm text-muted">No products found</div>
                ) : (
                  filteredProducts.map((p) => (
                    <button
                      key={p.id}
                      onClick={() => handleSelectProduct(p.id)}
                      className={`px-3 py-2 rounded border text-sm ${selectedProduct.id === p.id ? "bg-brand text-white border-brand" : "bg-surface border-border hover:border-brand"}`}
                    >
                      <div className="font-medium">{p.name}</div>
                      {p.description && <div className="text-xs text-muted">{p.description}</div>}
                    </button>
                  ))
                )}
              </div>
            </div>
          </div>
        </div>
 
        <div className="space-y-6">
          <div className="bg-surface border border-border rounded-xl shadow-sm p-4 sm:p-6">
            <div className="flex items-center justify-between mb-3">
              <div>
                <h3 className="text-lg font-semibold text-text">Quick preview</h3>
                <p className="text-xs text-muted">Preview is indicative. Print to see final layout.</p>
              </div>
              <span className="text-xs px-2 py-1 rounded bg-surface-2 border border-border">A4</span>
            </div>
            <div className="border border-border rounded-lg bg-surface overflow-hidden">
              <div className="bg-surface-2 px-3 py-2 text-xs text-muted flex justify-between">
                <span>{selectedProduct.name}</span>
                <span>Queue: {selectedQueue}</span>
              </div>
              <div className="p-4 min-h-[420px] flex items-center justify-center">
                <div className="w-full max-w-[360px] border border-border shadow-inner rounded-lg bg-surface aspect-[1/1.414] flex flex-col items-stretch justify-center p-4 gap-2">
                  {parsedLines.map((line) => (
                    <div key={line.id} style={line.style}>
                      {line.text}
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <button
              onClick={handlePrint}
              disabled={isPrinting}
              className="w-full mt-4 px-4 py-3 rounded-lg bg-brand text-white font-semibold hover:bg-brand/90 disabled:opacity-60"
            >
              {isPrinting ? "Sending..." : "Print Large Sign"}
            </button>
            {printMessage && <div className="mt-2 text-sm text-brand">{printMessage}</div>}
            <button
              onClick={handlePrintToPdf}
              className="w-full mt-2 px-4 py-3 rounded-lg border border-border bg-surface text-text font-semibold hover:bg-surface-2"
            >
              Save/Print as PDF (browser)
            </button>
            {pdfMessage && <div className="mt-1 text-xs text-muted">{pdfMessage}</div>}
          </div>
 
          <div className="bg-surface border border-border rounded-xl shadow-sm p-4 sm:p-6 space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="text-lg font-semibold text-text">Design & Save</h3>
              <select
                className="border border-border rounded px-2 py-1 text-sm"
                value={selectedQueue}
                onChange={(e) => setSelectedQueue(e.target.value)}
              >
                {queues.map((q) => (
                  <option key={q} value={q}>{q}</option>
                ))}
              </select>
            </div>
 
            <div className="space-y-3">
              <label className="text-sm font-medium text-text">Load an existing format</label>
              <div className="flex gap-2">
                <select
                  className="flex-1 border border-border rounded px-3 py-2 text-sm"
                  value={selectedFormatId}
                  onChange={(e) => setSelectedFormatId(e.target.value)}
                >
                  {formats.map((fmt) => (
                    <option key={fmt.id} value={fmt.id}>{fmt.name} ({fmt.type})</option>
                  ))}
                </select>
                <button
                  onClick={handleLoadFormat}
                  className="px-3 py-2 rounded bg-surface-2 border border-border text-sm hover:bg-surface"
                >
                  Load
                </button>
                <button
                  onClick={handleSaveFormat}
                  className="px-3 py-2 rounded bg-brand text-white text-sm hover:bg-brand/90"
                >
                  Save Changes
                </button>
              </div>
            </div>
 
            <div className="border-t border-border pt-3 space-y-3">
              <div className="text-sm font-medium text-text">Save as new</div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                <input
                  className="border border-border rounded px-3 py-2 text-sm"
                  placeholder="Format name"
                  value={newFormatName}
                  onChange={(e) => setNewFormatName(e.target.value)}
                />
                <select
                  className="border border-border rounded px-3 py-2 text-sm"
                  value={newFormatType}
                  onChange={(e) => setNewFormatType(e.target.value as FormatOption["type"])}
                >
                  <option value="A4 Sign">A4 Sign</option>
                  <option value="Shelf Label">Shelf Label</option>
                </select>
              </div>
              <button
                onClick={handleSaveNew}
                className="w-full px-3 py-2 rounded bg-surface-2 border border-border text-sm hover:bg-surface"
              >
                Save New
              </button>
            </div>
 
            {saveMessage && <div className="text-sm text-brand">{saveMessage}</div>}
          </div>
        </div>
      </div>
    </div>
  );
}