data-entry-app/frontend/src/lib/components/MixCalculatorPrintSheet.svelte

<script lang="ts">
  import { onDestroy, onMount } from 'svelte';
  import { api } from '$lib/api';
  import type { MixCalculatorSession } from '$lib/types';

  let { session, autoPrint = true }: { session: MixCalculatorSession; autoPrint?: boolean } = $props();
  let pdfUrl = $state<string | null>(null);
  let loading = $state(true);
  let error = $state('');
  let printAfterLoad = $state(false);
  let pdfFrame = $state<HTMLIFrameElement | null>(null);

  const printableTitle = $derived(
    `MixCalculator_${session.client_name}_${session.product_name}_${session.mix_date}_${session.session_number}`.replace(/[^\w.-]+/g, '_')
  );

  function revokePdfUrl() {
    if (pdfUrl) {
      URL.revokeObjectURL(pdfUrl);
      pdfUrl = null;
    }
  }

  async function loadPdf() {
    loading = true;
    error = '';
    revokePdfUrl();

    try {
      const blob = await api.mixCalculatorSessionPdf(session.id);
      pdfUrl = URL.createObjectURL(blob);
      printAfterLoad = autoPrint;
    } catch (loadError) {
      error = loadError instanceof Error ? loadError.message : 'Unable to load the PDF preview.';
    } finally {
      loading = false;
    }
  }

  function printPage() {
    if (!pdfUrl) {
      printAfterLoad = true;
      loadPdf();
      return;
    }

    pdfFrame?.contentWindow?.focus();
    pdfFrame?.contentWindow?.print();
  }

  function handlePreviewLoaded() {
    if (printAfterLoad) {
      printAfterLoad = false;
      requestAnimationFrame(() => printPage());
    }
  }

  async function downloadPdf() {
    const blob = pdfUrl ? await fetch(pdfUrl).then((response) => response.blob()) : await api.mixCalculatorSessionPdf(session.id);
    const url = URL.createObjectURL(blob);
    const anchor = document.createElement('a');
    anchor.href = url;
    anchor.download = `${printableTitle}.pdf`;
    document.body.appendChild(anchor);
    anchor.click();
    anchor.remove();
    URL.revokeObjectURL(url);
  }

  onMount(() => {
    loadPdf();
  });

  onDestroy(() => {
    revokePdfUrl();
  });
</script>

<svelte:head>
  <title>{printableTitle}</title>
</svelte:head>

<section class="print-page">
  <div class="print-toolbar">
    <a class="secondary-button" href={`/mix-calculator/${session.id}`}>Back to session</a>
    <button class="primary-button" type="button" disabled={!pdfUrl && loading} onclick={printPage}>Print</button>
    <button class="secondary-button" type="button" disabled={!pdfUrl && loading} onclick={downloadPdf}>Download PDF</button>
  </div>

  <div class="pdf-preview-shell">
    {#if loading}
      <div class="preview-state">Loading PDF preview...</div>
    {:else if error}
      <div class="preview-state error">
        <strong>PDF preview unavailable</strong>
        <span>{error}</span>
        <button class="secondary-button" type="button" onclick={loadPdf}>Retry</button>
      </div>
    {:else if pdfUrl}
      <iframe
        bind:this={pdfFrame}
        src={pdfUrl}
        title={`${printableTitle} PDF preview`}
        onload={handlePreviewLoaded}
      ></iframe>
    {/if}
  </div>
</section>

<style>
  .print-page {
    display: grid;
    gap: 1rem;
    justify-items: center;
    padding: 1.5rem 1rem 2.5rem;
    background:
      linear-gradient(180deg, #eef4f0 0%, #e6eee9 100%);
  }

  .print-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    width: min(100%, 210mm);
  }

  .primary-button,
  .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.78rem 0.96rem;
    border-radius: 0.9rem;
    border: 1px solid var(--line-strong);
    font-weight: 600;
    cursor: pointer;
  }

  .primary-button {
    border: none;
    background: var(--color-brand);
    color: #fff;
  }

  .secondary-button {
    background: #fff;
    color: #304038;
  }

  button:disabled {
    cursor: wait;
    opacity: 0.65;
  }

  .pdf-preview-shell {
    width: min(100%, 210mm);
    aspect-ratio: 210 / 297;
    border: 1px solid var(--line-strong);
    border-radius: 0.75rem;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(25, 35, 30, 0.16);
  }

  iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
  }

  .preview-state {
    display: grid;
    place-items: center;
    gap: 0.75rem;
    height: 100%;
    padding: 2rem;
    color: var(--color-text-secondary);
    text-align: center;
    font-weight: 600;
  }

  .preview-state.error {
    align-content: center;
  }

  .preview-state strong,
  .preview-state span {
    display: block;
  }

  .preview-state strong {
    color: var(--color-text-primary);
  }

  @media (max-width: 900px) {
    .print-toolbar {
      justify-content: stretch;
    }

    .print-toolbar > :global(*) {
      flex: 1 1 auto;
    }
  }

  @media print {
    .print-page,
    .print-toolbar,
    .pdf-preview-shell {
      display: none;
    }
  }
</style>