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 > 12 ? upper.substring(0, 12) : 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%;"'
    );

    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: 40mm 105mm;
              margin: 0;
            }
            * {
              box-sizing: border-box;
              margin: 0;
              padding: 0;
            }
            body {
              margin: 0;
              padding: 0;
              font-family: 'Segoe UI', Arial, sans-serif;
              background-color: #fff;
              color: #000;
              width: 40mm;
              height: 105mm;
              display: flex;
              align-items: center;
              justify-content: center;
              -webkit-print-color-adjust: exact;
              print-color-adjust: exact;
            }
            .label-container {
              width: 38mm;
              height: 103mm;
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              align-items: center;
              padding: 2mm 1mm;
            }
            .product-title {
              font-size: 8pt;
              font-weight: 900;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: 36mm;
              line-height: 1.2;
              text-transform: uppercase;
              color: #000;
              text-align: center;
              margin-bottom: 2mm;
              writing-mode: vertical-rl;
              text-orientation: mixed;
              transform: rotate(180deg);
              height: 25mm;
            }
            .barcode-box {
              width: 30mm;
              height: 50mm;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .barcode-box svg {
              width: 100% !important;
              height: 100% !important;
              display: block;
              transform: rotate(-90deg);
            }
            .bottom-info {
              width: 36mm;
              text-align: center;
              font-size: 7pt;
              font-weight: 900;
              color: #000;
              margin-top: 2mm;
              writing-mode: vertical-rl;
              text-orientation: mixed;
              transform: rotate(180deg);
              height: 20mm;
            }
            .code-num {
              font-family: 'Courier New', monospace;
              font-weight: 900;
              letter-spacing: 0.5px;
            }
          </style>
        </head>
        <body>
          <div class="label-container">
            <div class="product-title">${labelTitle}</div>
            <div class="barcode-box">${svgStringWithInlineStyles}</div>
            <div class="bottom-info">
              <span class="code-num">${displayBarcode}</span>
            </div>
          </div>
          <script>
            window.onload = function() {
              window.print();
              setTimeout(function() {
                window.frameElement.remove();
              }, 100);
            };
          </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