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 > 24 ? upper.substring(0, 24) : upper;
};

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

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

  const handlePrintLabelDirect = (e: React.MouseEvent) => {
    e.stopPropagation();

    const labelTitle = formatProductName(productName);

    const printSvgMarkup = generateBarcodeSvg(barcode, 30).replace(
      '<svg',
      '<svg style="width:100%;height:100%;display:block;"'
    );

    const colsHtml = Array.from({ length: 5 }).map(() => `
      <div class="col-5up">
        <div class="sticker-inner">
          <div class="product-title">${labelTitle}</div>
          <div class="barcode-box">${printSvgMarkup}</div>
          <div class="code-num">${displayBarcode}</div>
        </div>
      </div>
    `).join('');

    const htmlContent = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barkod Etiketi - ${barcode}</title>
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
@page {
  size: 100mm 40mm;
  margin: 0mm !important;
}
@media print {
  @page {
    size: 100mm 40mm;
    margin: 0mm !important;
  }
  html, body {
    width: 100mm !important;
    height: 40mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .no-print { display: none !important; }
}
html, body {
  width: 100mm;
  height: 40mm;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}
.row-5up {
  width: 100mm;
  height: 40mm;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.col-5up {
  width: 20mm;
  height: 40mm;
  position: relative;
  overflow: hidden;
}
.sticker-inner {
  width: 38mm;
  height: 18mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
}
.product-title {
  font-size: 7pt;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 36mm;
  line-height: 1;
  text-transform: uppercase;
  color: #000;
}
.barcode-box {
  width: 34mm;
  height: 8.5mm;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5mm 0;
}
.barcode-box svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.code-num {
  font-family: 'Courier New', monospace;
  font-size: 6.5pt;
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1;
  color: #000;
}
.controls {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
}
.btn {
  padding: 8px 16px;
  margin-left: 5px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.print-btn { background: #0ea5e9; color: #fff; }
.close-btn { background: #0f172a; color: #fff; }
</style>
</head>
<body>
<div class="row-5up">
  ${colsHtml}
</div>
<div class="controls no-print">
  <button class="btn print-btn" onclick="window.print()">🖨️ Yazdır</button>
  <button class="btn close-btn" onclick="window.close()">✕ Kapat</button>
</div>
<script>
  window.onload = function() {
    setTimeout(function() {
      window.print();
    }, 250);
  };
</script>
</body>
</html>`;

    const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const printWin = window.open(url, '_blank', 'width=900,height=500');

    if (!printWin) {
      alert('Yazdırma penceresi engellendi. Lütfen pop-up engelleyicisini kaldırın.');
      URL.revokeObjectURL(url);
    }
  };

  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={handlePrintLabelDirect}
          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 cursor-pointer"
          title="Barkod Etiketi Yazdır"
        >
          <Printer className="w-3.5 h-3.5" />
          Etiket Bas
        </button>
      )}
    </div>
  );
}