'use client';

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

export interface PrintPreviewProps {
  data: PrintBarcodeData[];
  year: number;
  month: number;
}

export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month }) => {
  return (
    <div className="min-h-screen p-4">
      <h1 className="text-2xl font-bold mb-4">
        Print Preview - {year}-{month.toString().padStart(2, '0')}
      </h1>
      
      <div className="mb-4">
        <p>Found {data.length} barcode(s) for printing</p>
      </div>

      {/* Basic table structure - will be enhanced in US-3 */}
      <table className="w-full border-collapse border border-gray-300">
        <thead>
          <tr>
            <th className="border border-gray-300 p-2">Index</th>
            <th className="border border-gray-300 p-2">Bill Info</th>
            <th className="border border-gray-300 p-2">Barcode</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => (
            <tr key={`${item.locationName}-${item.billName}`}>
              <td className="border border-gray-300 p-2">{index + 1}</td>
              <td className="border border-gray-300 p-2">
                <div>
                  <div className="font-medium">{item.yearMonth}</div>
                  <div>{item.locationName}</div>
                  <div>{item.billName}</div>
                </div>
              </td>
              <td className="border border-gray-300 p-2">
                <img 
                  src={item.barcodeImage.startsWith('data:') ? item.barcodeImage : `data:image/png;base64,${item.barcodeImage}`} 
                  alt={`Barcode for ${item.billName}`}
                  className="max-w-full h-auto"
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      
      {/* Print button - will be enhanced in US-4 */}
      <button 
        onClick={() => window.print()} 
        className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
      >
        Print
      </button>
    </div>
  );
};