bide bunu deneyin hocam



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;

// 5 adet etiketi yan yana basmak için HTML'i çoğaltıyoruz
const labelsHtml = Array(5).fill(`
<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>
`).join('');

doc.open();
doc.write(`
<html>
<head>
<title>Barkod Etiketi - ${barcode}</title>
<style>
@page {
size: 105mm 40mm; /* YATAY SAYFA DÜZENİ: Genişlik 105, Yükseklik 40 */
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: 105mm;
height: 40mm;
display: flex;
flex-direction: row; /* ETİKETLERİ YAN YANA DİZER */
align-items: center;
justify-content: space-between; /* 5 etiketi aralıklı dağıtır */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.label-container {
width: 20mm; /* 105mm içine 5 adet sığması için genişlik */
height: 38mm;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1mm;
overflow: hidden;
}
.product-title {
font-size: 6pt;
font-weight: 900;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
text-transform: uppercase;
color: #000;
text-align: center;
margin-bottom: 2mm;
/* ESKİ KODDAKİ DÖNDÜRME (ROTATE) İŞLEMLERİ KALDIRILDI */
}
.barcode-box {
width: 18mm;
height: 15mm;
display: flex;
align-items: center;
justify-content: center;
}
.barcode-box svg {
width: 100% !important;
height: 100% !important;
display: block;
/* ESKİ KODDAKİ -90 DERECE DÖNDÜRME KALDIRILDI */
}
.bottom-info {
width: 100%;
text-align: center;
font-size: 5pt;
font-weight: 900;
color: #000;
margin-top: 1mm;
}
.code-num {
font-family: 'Courier New', monospace;
font-weight: 900;
letter-spacing: 0.5px;
}
</style>
</head>
<body>
${labelsHtml}
<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-hoverpacity-100 transition-opacity flex items-center justify-center gap-1.5 text-[10px] font-black"
>
<Printer size={16} />
Yazdır (5'li)
</button>
)}
</div>
);
}