import React from 'react';
import { Printer } from 'lucide-react';
import { generateBarcodeSvg, formatBarcodeText } from '../utils/barcode';

interface BarcodeDisplayProps {
  barcode: string;
  productName?: string;
  priceTry?: number;
  unit?: string;
  size?: 'sm' | 'md' | 'lg';
}

const formatProductName = (name: string): string => {
  if (!name) return 'ÜRÜN';
  const upper = name.toUpperCase();
  return upper.length > 22 ? upper.substring(0, 22) : upper;
};

export default function BarcodeDisplay({
  barcode,
  productName = 'Ürün',
  unit = 'Adet',
  size = 'md'
}: BarcodeDisplayProps) {
  if (!barcode) return <span className="text-slate-400 italic">Barkod Yok</span>;

  const svgMarkup = generateBarcodeSvg(barcode, size === 'sm' ? 40 : 50);
  const displayBarcode = formatBarcodeText(barcode);

  const handlePrintLabel = async (e: React.MouseEvent) => {
    e.stopPropagation();
    if (typeof window !== 'undefined' && window.innerWidth <= 1024) {
      return;
    }

    let shopTitle = 'SOSYAL MEGAPIXEL NALBUR';
    try {
      const res = await fetch('/api/settings');
      const data = await res.json();
      if (data.success && data.settings) {
        shopTitle = data.settings.bayiCompanyName || data.settings.shopName || shopTitle;
      }
    } catch (err) {
      console.error(err);
    }

    const rawName = productName && productName !== 'Ürün' ? productName : shopTitle;
    const labelTitle = formatProductName(rawName);

    const svgStringWithInlineStyles = svgMarkup.replace(
      '<svg',
      '<svg style="width: 100%; height: 100%;"'
    );

    // 105mm rulo, 5 kolon. Her etiket 21mm (genişlik) x 40mm (yükseklik).
    // Kağıt 200mm / etiket 40mm genişlikteyse: PAGE_W_MM=200, LABEL_W_MM=40 yapın.
    const COLS = 5;
    const PAGE_W_MM = 105;
    const PAGE_H_MM = 40;
    const LABEL_W_MM = PAGE_W_MM / COLS;

    const labelHtml = Array.from({ length: COLS }, () => `
      <div class="label">
        <div class="label-inner">
          <div class="product-title">${labelTitle}</div>
          <div class="barcode-box">${svgStringWithInlineStyles}</div>
          <div class="bottom-info">
            <span class="code-num">${displayBarcode}</span>
          </div>
        </div>
      </div>
    `).join('');

    const iframe = document.createElement('iframe');
    iframe.style.cssText = 'position:fixed;right:0;bottom:0;width:0;height:0;border:0;';
    document.body.appendChild(iframe);

    const doc = iframe.contentWindow?.document;
    if (!doc) return;

    doc.open();
    doc.write(`
      <html>
        <head>
          <title>Barkod Etiketi - ${barcode}</title>
          <style>
            @page {
              size: ${PAGE_W_MM}mm ${PAGE_H_MM}mm;
              margin: 0;
            }
            * {
              box-sizing: border-box;
              margin: 0;
              padding: 0;
            }
            html, body {
              margin: 0;
              padding: 0;
              width: ${PAGE_W_MM}mm;
              height: ${PAGE_H_MM}mm;
              overflow: hidden;
              font-family: 'Segoe UI', Arial, sans-serif;
              background: #fff;
              color: #000;
              -webkit-print-color-adjust: exact;
              print-color-adjust: exact;
            }
            .sheet {
              width: ${PAGE_W_MM}mm;
              height: ${PAGE_H_MM}mm;
              display: flex;
              flex-direction: row;
              align-items: stretch;
              page-break-after: avoid;
              page-break-inside: avoid;
            }
            .label {
              width: ${LABEL_W_MM}mm;
              height: ${PAGE_H_MM}mm;
              display: flex;
              align-items: center;
              justify-content: center;
              overflow: hidden;
              flex: 0 0 ${LABEL_W_MM}mm;
            }
            /* 21mm kolon dar; barkod 40mm kenarı kullanacak şekilde 90° döner */
            .label-inner {
              width: ${PAGE_H_MM - 2}mm;
              height: ${LABEL_W_MM - 2}mm;
              transform: rotate(-90deg);
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 0.6mm;
            }
            .product-title {
              font-size: 6.5pt;
              font-weight: 900;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: ${PAGE_H_MM - 4}mm;
              line-height: 1.1;
              text-transform: uppercase;
              text-align: center;
            }
            .barcode-box {
              width: ${PAGE_H_MM - 6}mm;
              height: 11mm;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .barcode-box svg {
              width: 100% !important;
              height: 100% !important;
              display: block;
            }
            .bottom-info {
              font-size: 5.5pt;
              font-weight: 900;
              text-align: center;
              white-space: nowrap;
            }
            .code-num {
              font-family: 'Courier New', monospace;
              font-weight: 900;
              letter-spacing: 0.3px;
            }
            @media print {
              html, body, .sheet {
                width: ${PAGE_W_MM}mm !important;
                height: ${PAGE_H_MM}mm !important;
              }
            }
          </style>
        </head>
        <body>
          <div class="sheet">
            ${labelHtml}
          </div>
          <script>
            window.onload = function() {
              window.print();
              setTimeout(function() {
                window.frameElement.remove();
              }, 500);
            };
          </script>
        </body>
      </html>
    `);
    doc.close();
  };

  const containerClasses = size === 'sm'
    ? 'w-28 h-10'
    : size === 'lg'
      ? 'w-44 h-16'
      : 'w-36 h-12';

  return (
    <div className="flex flex-col items-center gap-1 bg-slate-50 p-2 rounded-xl border border-slate-200/60 shadow-3xs group relative">
      <div
        className={`${containerClasses} flex items-center justify-center`}
        dangerouslySetInnerHTML={{ __html: svgMarkup }}
      />
      <span className="font-mono font-bold text-[10px] text-slate-800 tracking-wider">
        {displayBarcode}
      </span>

      {!(typeof window !== 'undefined' && window.innerWidth <= 1024) && (
        <button
          type="button"
          onClick={handlePrintLabel}
          className="absolute inset-0 bg-slate-900/80 text-white rounded-xl opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1.5 text-[10px] font-black uppercase tracking-widest"
        >
          <Printer size={12} /> Yazdır
        </button>
      )}
    </div>
  );
}

Yazdırırken

• Kenar boşluğu: Yok / None
• Ölçek: %100 (sayfaya sığdırma)
• Kağıt: 105 × 40 mm (veya yazıcıdaki eşdeğer özel boyut)

Etiketler hâlâ kayıyorsa rulo 200 mm (5 × 40 mm) olabilir. O zaman koddaki değerleri şöyle değiştirin:

• PAGE_W_MM = 200
• LABEL_W_MM zaten 200 / 5 = 40 olur

Satır yüksekliği 40 mm değilse yalnızca PAGE_H_MM değerini gerçek etiket yüksekliğine çekmeniz yeterli.