// components/DeviceQrCode.tsx
'use client';

import { QRCodeSVG } from 'qrcode.react';

type DeviceQrCodeProps = {
  inventoryNumber: string | null | undefined;
  size?: number;
};

export function DeviceQrCode({ inventoryNumber, size = 180 }: DeviceQrCodeProps) {
  // 1. Guard: ohne Inventarnummer kein QR
  if (!inventoryNumber) {
    if (process.env.NODE_ENV === 'development') {
      console.warn('DeviceQrCode: inventoryNumber fehlt oder ist undefined/null', {
        inventoryNumber,
      });
    }
    return (
      <p className="text-xs text-red-600">
        Kein Inventarcode vorhanden – QR-Code kann nicht erzeugt werden.
      </p>
    );
  }

  const baseUrl = process.env.NEXT_PUBLIC_APP_URL ?? '';

  // Immer vollständige URL für externe Scanner erzeugen
  const appBase = baseUrl.replace(/\/$/, '');

  const qrValue = appBase
    ? `${appBase}/devices?device=${encodeURIComponent(inventoryNumber)}`
    : `/devices?device=${encodeURIComponent(inventoryNumber)}`;

  return (
    <div className="inline-flex flex-col items-center gap-2">
      {/* Debug-Hinweis, kannst du nach dem Testen entfernen */}
      {/* <div className="text-[10px] break-all text-gray-500">{qrValue}</div> */}

      <QRCodeSVG
        value={qrValue}
        size={size}
        level="M"
        marginSize={2}
        bgColor="#FFFFFF"
        fgColor="#000000"
      />
    </div>
  );
}