
export function generatePrintableHtml({ title, clientName, dateRange, imageUrl, imageAlt, tableHtml, customStyles = '' }) {
  const htmlContent = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>${title} - ${clientName}</title>
      <style>
        body {
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
          line-height: 1.5;
          color: #1e293b;
          margin: 0;
          padding: 0;
          background-color: #f8fafc;
        }
        .report-container {
          max-width: 1000px;
          margin: 40px auto;
          background-color: #ffffff;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
          border-radius: 8px;
          overflow: hidden;
        }
        .header-image {
          width: 100%;
          height: 160px;
          object-fit: cover;
          display: block;
        }
        .header-content {
          padding: 32px 40px;
          text-align: center;
          border-bottom: 2px solid #e2e8f0;
          background-color: #f8fafc;
        }
        .report-title {
          margin: 0 0 8px 0;
          font-size: 28px;
          font-weight: 800;
          color: #0f172a;
          text-transform: uppercase;
          letter-spacing: 0.025em;
        }
        .client-name {
          margin: 0 0 4px 0;
          font-size: 18px;
          font-weight: 600;
          color: #475569;
        }
        .date-range {
          margin: 0;
          font-size: 14px;
          color: #64748b;
        }
        .content {
          padding: 40px;
        }
        table {
          width: 100%;
          border-collapse: collapse;
          margin-bottom: 24px;
        }
        th, td {
          padding: 12px 16px;
          text-align: left;
          border-bottom: 1px solid #e2e8f0;
        }
        th {
          font-size: 12px;
          font-weight: 700;
          color: #475569;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          background-color: #f1f5f9;
        }
        .text-right { text-align: right; }
        .text-center { text-align: center; }
        .font-bold { font-weight: 700; }
        .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
        .text-red-600 { color: #dc2626; }
        .text-emerald-600 { color: #059669; }
        .bg-slate-50 { background-color: #f8fafc; }
        .bg-slate-100 { background-color: #f1f5f9; }
        .bg-slate-800 { background-color: #1e293b; color: #ffffff; }
        .bg-slate-800 th, .bg-slate-800 td { color: #ffffff; }
        
        .controls {
          text-align: center;
          padding: 20px;
          background-color: #e2e8f0;
        }
        .btn {
          display: inline-block;
          background-color: #2563eb;
          color: white;
          padding: 10px 20px;
          border-radius: 6px;
          text-decoration: none;
          font-weight: 600;
          border: none;
          cursor: pointer;
          margin: 0 10px;
          font-size: 14px;
        }
        .btn:hover { background-color: #1d4ed8; }
        .btn-outline {
          background-color: white;
          color: #334155;
          border: 1px solid #cbd5e1;
        }
        .btn-outline:hover { background-color: #f8fafc; }

        @media print {
          body { background-color: white; }
          .report-container { box-shadow: none; margin: 0; max-width: none; border-radius: 0; }
          .controls { display: none; }
          .header-image { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
          th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
          .bg-slate-800 { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        }
        ${customStyles}
      </style>
    </head>
    <body>
      <div class="controls">
        <button class="btn" onclick="window.print()">🖨️ Print Document</button>
        <button class="btn btn-outline" onclick="downloadHtml()">💾 Download HTML</button>
      </div>
      <div class="report-container">
        <img src="${imageUrl}" alt="${imageAlt}" class="header-image" crossorigin="anonymous" />
        <div class="header-content">
          <h1 class="report-title">${title}</h1>
          <h2 class="client-name">${clientName}</h2>
          <p class="date-range">${dateRange}</p>
        </div>
        <div class="content">
          ${tableHtml}
        </div>
      </div>
      <script>
        function downloadHtml() {
          const clone = document.documentElement.cloneNode(true);
          const controls = clone.querySelector('.controls');
          if (controls) controls.remove();
          
          const htmlContent = '<!DOCTYPE html>\\n' + clone.outerHTML;
          const blob = new Blob([htmlContent], { type: 'text/html' });
          const url = URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = '${title.replace(/\\s+/g, '_')}_${clientName.replace(/\\s+/g, '_')}.html';
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          URL.revokeObjectURL(url);
        }
      </script>
    </body>
    </html>
  `;

  const newWindow = window.open('', '_blank');
  newWindow.document.write(htmlContent);
  newWindow.document.close();
}
