import image_5994184c4cb89f4749198f4e1eac1049f929b906 from 'figma:asset/5994184c4cb89f4749198f4e1eac1049f929b906.png';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "./ui/dialog";
import { Button } from "./ui/button";
import { Download, Printer } from "lucide-react";
import { ImageWithFallback } from "./figma/ImageWithFallback";
import barcodeImage from "figma:asset/ec508dd09dcbdde2733ce5a4cafc434da5093384.png";

interface BarcodeViewDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  productName: string;
  productCode: string;
  barcodeValue: string;
}

export default function BarcodeViewDialog({
  open,
  onOpenChange,
  productName,
  productCode,
  barcodeValue,
}: BarcodeViewDialogProps) {
  const handlePrint = () => {
    const printWindow = window.open("", "_blank");
    if (printWindow) {
      printWindow.document.write(`
        <!DOCTYPE html>
        <html>
          <head>
            <title>列印條碼 - ${productName}</title>
            <style>
              body {
                margin: 0;
                padding: 20px;
                font-family: 'Noto Sans TC', sans-serif;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              }
              .barcode-container {
                text-align: center;
                page-break-inside: avoid;
              }
              .product-info {
                margin-bottom: 16px;
              }
              .product-name {
                font-size: 18px;
                font-weight: 600;
                margin-bottom: 4px;
              }
              .product-code {
                font-size: 14px;
                color: #666;
                font-family: monospace;
              }
              img {
                max-width: 400px;
                height: auto;
              }
              @media print {
                body {
                  padding: 0;
                }
                @page {
                  margin: 20mm;
                }
              }
            </style>
          </head>
          <body>
            <div class="barcode-container">
              <div class="product-info">
                <div class="product-name">${productName}</div>
                <div class="product-code">商品編號: ${productCode}</div>
              </div>
              <img src="${barcodeImage}" alt="商品條碼" />
            </div>
          </body>
        </html>
      `);
      printWindow.document.close();
      setTimeout(() => {
        printWindow.print();
      }, 250);
    }
  };

  const handleDownload = () => {
    const link = document.createElement("a");
    link.href = barcodeImage;
    link.download = `${productCode}_barcode.png`;
    link.target = "_blank";
    link.click();
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>商品條碼</DialogTitle>
          <DialogDescription>
            {productName} ({productCode})
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-6">
          {/* 條碼顯示區 */}
          <div className="flex items-center justify-center bg-white border-2 border-gray-200 rounded-lg p-6">
            <img
              src={image_5994184c4cb89f4749198f4e1eac1049f929b906}
              alt="商品條碼"
              className="max-w-full h-auto"
            />
          </div>

          {/* 條碼資訊 */}
          <div className="bg-gray-50 rounded-lg p-4 space-y-2">
            <div className="flex justify-between items-center">
              <span className="text-sm text-gray-600">條碼內容</span>
              <span className="text-sm font-mono font-semibold">{barcodeValue}</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-sm text-gray-600">條碼格式</span>
              <span className="text-sm font-semibold">Code128</span>
            </div>
          </div>

          {/* 操作按鈕 */}
          <div className="flex gap-3">
            <Button
              onClick={handlePrint}
              className="flex-1 button-outlined-primary"
              variant="outline"
            >
              <Printer className="mr-2 h-4 w-4" />
              列印條碼
            </Button>
            <Button
              onClick={handleDownload}
              className="flex-1 button-outlined-primary"
              variant="outline"
            >
              <Download className="mr-2 h-4 w-4" />
              下載圖片
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}