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

  let {
    session,
    generatedAt = null,
    showGeneratedStamp = false
  }: {
    session: MixCalculatorPreview | MixCalculatorSession;
    generatedAt?: string | null;
    showGeneratedStamp?: boolean;
  } = $props();

  function formatDate(value: string) {
    return new Intl.DateTimeFormat('en-NZ', {
      dateStyle: 'medium',
      timeStyle: undefined
    }).format(new Date(value));
  }

  function formatTimestamp(value: string) {
    return new Intl.DateTimeFormat('en-NZ', {
      dateStyle: 'medium',
      timeStyle: 'short'
    }).format(new Date(value));
  }

  function formatNumber(value: number, digits = 2) {
    return value.toFixed(digits);
  }

  function hasSessionNumber(value: MixCalculatorPreview | MixCalculatorSession): value is MixCalculatorSession {
    return 'session_number' in value;
  }

  const sessionNumber = $derived(hasSessionNumber(session) ? session.session_number : null);
  const issuedAt = $derived(generatedAt ?? new Date().toISOString());
</script>

<article class="print-document">
  <header class="document-header">
    <img class="brand-mark" src="/logo-hsf.png" alt="Hunter Stock Feeds" />

    <div class="title-block">
      <p class="eyebrow">Calculated Output</p>
      <h1>{session.product_name}</h1>
      <p class="subtitle">Snapshot of the scaled raw material requirements.</p>
    </div>

    <div class="session-block">
      {#if sessionNumber}
        <span>Session {sessionNumber}</span>
      {/if}
      {#if showGeneratedStamp}
        <span>Generated {formatTimestamp(issuedAt)}</span>
      {/if}
    </div>
  </header>

  <section class="meta-grid" aria-label="Print summary">
    <div><span>Total kg</span><strong>{formatNumber(session.total_kg, 2)}</strong><small>Scaled batch size</small></div>
    <div><span>Total bags</span><strong>{formatNumber(session.total_bags, 2)}</strong><small>{session.product_unit_of_measure}</small></div>
    <div><span>Prepared by</span><strong>{session.prepared_by_name}</strong><small>{formatDate(session.mix_date)}</small></div>
    <div><span>Client</span><strong>{session.client_name}</strong></div>
    <div><span>Mix</span><strong>{session.product_name}</strong></div>
    <div><span>Formula source</span><strong>{session.mix_name}</strong></div>
    <div><span>Unit size</span><strong>{formatNumber(session.product_unit_size_kg, 2)}kg</strong></div>
    <div><span>Batch size</span><strong>{formatNumber(session.batch_size_kg, 2)}kg</strong></div>
  </section>

  {#if session.notes}
    <section class="inline-note">
      <span>Notes</span>
      <p>{session.notes}</p>
    </section>
  {/if}

  {#if session.warnings.length}
    <section class="inline-note warning">
      <span>Warnings</span>
      <p>{session.warnings.join(' | ')}</p>
    </section>
  {/if}

  <section class="composition-card">
    <div class="section-heading">
      <div>
        <span>Raw Material</span>
      </div>
      <p>Required kg</p>
    </div>

    <table>
      <thead>
        <tr>
          <th>Raw material</th>
          <th>Required kg</th>
        </tr>
      </thead>
      <tbody>
        {#each session.lines as line}
          <tr>
            <td>
              <strong>{line.raw_material_name}</strong>
            </td>
            <td>{formatNumber(line.required_kg, line.rounding_decimals ?? 2)}kg</td>
          </tr>
        {/each}
      </tbody>
    </table>
  </section>
</article>

<style>
  :global(:root) {
    --print-page-width: 210mm;
    --print-page-height: 297mm;
    --print-page-padding-x: 8mm;
    --print-page-padding-y: 14mm;
  }

  h1,
  h2,
  p {
    margin: 0;
  }

  .print-document {
    display: grid;
    gap: 0.6rem;
    width: min(100%, var(--print-page-width));
    height: var(--print-page-height);
    margin: 0 auto;
    padding: var(--print-page-padding-y) var(--print-page-padding-x);
    border: 1px solid #000;
    background: #fff;
    color: #000;
    box-shadow: none;
    overflow: hidden;
    box-sizing: border-box;
  }

  .document-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #000;
  }

  .brand-mark {
    width: 32mm;
    height: auto;
    object-fit: contain;
    filter: grayscale(1) contrast(1.2);
  }

  .eyebrow,
  .meta-grid span,
  .inline-note span,
  .section-heading span,
  th,
  .session-block span {
    color: #000;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .title-block {
    min-width: 0;
  }

  .title-block h1 {
    font-size: 1.2rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }

  .subtitle {
    margin-top: 0.12rem;
    color: #000;
    font-size: 0.72rem;
  }

  .session-block {
    display: grid;
    justify-items: end;
    gap: 0.18rem;
    text-align: right;
  }

  .meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.38rem;
  }

  .meta-grid div {
    display: grid;
    gap: 0.08rem;
    min-height: 2.1rem;
    padding: 0.34rem 0.42rem;
    border: 1px solid #000;
    background: #fff;
  }

  .meta-grid strong {
    font-size: 0.84rem;
    line-height: 1.1;
  }

  .meta-grid small {
    font-size: 0.64rem;
    line-height: 1.15;
  }

  .inline-note {
    display: grid;
    gap: 0.12rem;
    padding: 0.35rem 0.42rem;
    border: 1px solid #000;
    background: #fff;
  }

  .inline-note p {
    font-size: 0.68rem;
    line-height: 1.25;
    overflow: hidden;
  }

  .inline-note.warning {
    border-color: #000;
    background: #fff;
    color: #000;
  }

  .composition-card {
    display: grid;
    gap: 0.35rem;
    min-height: 0;
  }

  .section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 0.5rem;
  }

  .section-heading h2 {
    margin-top: 0.05rem;
    font-size: 0.95rem;
    line-height: 1.05;
  }

  .section-heading p {
    color: #000;
    font-size: 0.66rem;
    white-space: nowrap;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #000;
    background: #fff;
  }

  th,
  td {
    padding: 0.28rem 0.42rem;
    text-align: left;
    border-bottom: 1px solid #000;
    line-height: 1.15;
  }

  th:last-child,
  td:last-child {
    width: 32mm;
  }

  th {
    background: #fff;
    font-size: 0.7rem;
  }

  td {
    font-size: 0.82rem;
    vertical-align: top;
  }

  td strong {
    font-size: 0.84rem;
    font-weight: 700;
    color: #000;
  }

  tbody tr:last-child td {
    border-bottom: none;
  }

  tr,
  td,
  th,
  section {
    break-inside: avoid;
  }

  @media (max-width: 900px) {
    .meta-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media print {
    :global(html),
    :global(body) {
      width: var(--print-page-width);
      height: var(--print-page-height);
      margin: 0;
      background: #fff;
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }

    .print-document {
      width: var(--print-page-width);
      height: var(--print-page-height);
      margin: 0;
      padding: var(--print-page-padding-y) var(--print-page-padding-x);
      border: none;
      box-shadow: none;
    }

    @page {
      size: A4 portrait;
      margin: 0;
    }
  }
</style>
