evidencija-rezija/app/ui/PrintPreview.tsx

'use client';

import { PrintBarcodeData } from '../lib/actions/printActions';

export interface PrintPreviewProps {
  data: PrintBarcodeData[];
  year: number;
  month: number;
  translations: {
    title: string;
    barcodesFound: string;
    barcodeSingular: string;
    printButton: string;
    printFooter: string;
    tableHeaderIndex: string;
    tableHeaderBillInfo: string;
    tableHeaderBarcode: string;
  };
}

export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month, translations }) => {

  return (
    <div className="min-h-screen bg-white">
      {/* Header section - hidden in print */}
      <div className="p-6 border-b border-gray-200 print:hidden">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">
          {translations.title}
        </h1>
        <p className="text-lg text-gray-600 mb-4">
          {year}-{month.toString().padStart(2, '0')} • {data.length} {data.length === 1 ? translations.barcodeSingular : translations.barcodesFound}
        </p>
        <button
          onClick={() => window.print()}
          className="btn btn-primary"
        >
          🖨️ {translations.printButton}
        </button>
      </div>

      {/* Print content */}
      <div className="p-6">
        <table className="w-full border-collapse border-2 border-gray-800">
          <thead>
            <tr className="bg-gray-100">
              <th className="border-2 border-gray-800 px-3 py-2 text-center font-bold text-sm w-16">
                {translations.tableHeaderIndex}
              </th>
              <th className="border-2 border-gray-800 px-3 py-2 text-left font-bold text-sm">
                {translations.tableHeaderBillInfo}
              </th>
              <th className="border-2 border-gray-800 px-3 py-2 text-center font-bold text-sm w-64">
                {translations.tableHeaderBarcode}
              </th>
            </tr>
          </thead>
          <tbody>
            {data.map((item, index) => (
              <tr key={`${item.locationName}-${item.billName}`} className="hover:bg-gray-50">
                <td className="border-2 border-gray-800 px-3 py-4 text-center font-mono text-sm font-medium">
                  {(index + 1).toString().padStart(2, '0')}
                </td>
                <td className="border-2 border-gray-800 px-3 py-4">
                  <div className="space-y-1">
                    <div className="font-bold text-sm text-gray-900">
                      📅 {item.yearMonth}
                    </div>
                    <div className="font-medium text-sm text-gray-800">
                      🏠 {item.locationName}
                    </div>
                    <div className="text-sm text-gray-700">
                      📋 {item.billName}
                    </div>
                  </div>
                </td>
                <td className="border-2 border-gray-800 px-3 py-1.5 text-center">
                  <div className="flex justify-center items-center">
                    <img
                      src={item.barcodeImage.startsWith('data:') ? item.barcodeImage : `data:image/png;base64,${item.barcodeImage}`}
                      alt={`Barcode for ${item.billName}`}
                      className="max-h-28 w-auto border border-gray-300 rounded"
                      style={{ maxWidth: '270px' }}
                    />
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>

        {/* Print footer - only visible when printing */}
        <div className="mt-6 text-center text-xs text-gray-500 hidden print:block">
          <p>{translations.printFooter.replace('{date}', new Date().toLocaleDateString())}</p>
        </div>
      </div>
    </div>
  );
};