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

  let {
    session,
    generatedAt = null,
    showGeneratedStamp = true
  }: {
    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());
  const blendTotal = $derived(session.lines.reduce((sum, line) => sum + line.mix_percentage, 0));
</script>

<article class="print-document">
  <header class="hero">
    <div class="hero-copy">
      <div class="hero-kicker">
        <span>Mix Calculator</span>
        {#if sessionNumber}
          <strong>{sessionNumber}</strong>
        {/if}
      </div>
      <h1>{session.product_name}</h1>
      <p>{session.client_name} · {session.mix_name}</p>
    </div>

    <div class="hero-side">
      <div>
        <span>Mix date</span>
        <strong>{formatDate(session.mix_date)}</strong>
      </div>
      <div>
        <span>Prepared by</span>
        <strong>{session.prepared_by_name}</strong>
      </div>
      <div>
        <span>Status</span>
        <strong>{session.status}</strong>
      </div>
    </div>
  </header>

  <section class="summary-band" aria-label="Session summary">
    <article>
      <span>Batch size</span>
      <strong>{formatNumber(session.batch_size_kg, 2)}kg</strong>
    </article>
    <article>
      <span>Total output</span>
      <strong>{formatNumber(session.total_kg, 2)}kg</strong>
    </article>
    <article>
      <span>Bags</span>
      <strong>{formatNumber(session.total_bags, 2)}</strong>
    </article>
    <article>
      <span>Unit pack</span>
      <strong>{formatNumber(session.product_unit_size_kg, 2)}kg</strong>
    </article>
  </section>

  <section class="detail-grid">
    <article class="detail-card">
      <span>Mix source</span>
      <strong>{session.mix_name}</strong>
      <p>Saved against {session.product_unit_of_measure} units.</p>
    </article>
    <article class="detail-card">
      <span>Composition</span>
      <strong>{formatNumber(blendTotal, 2)}%</strong>
      <p>{session.lines.length} raw material{session.lines.length === 1 ? '' : 's'} in the blend.</p>
    </article>
    {#if showGeneratedStamp}
      <article class="detail-card">
        <span>Generated</span>
        <strong>{formatTimestamp(issuedAt)}</strong>
        <p>Prepared for print or PDF export.</p>
      </article>
    {/if}
  </section>

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

  {#if session.warnings.length}
    <section class="callout warning">
      <span>Warnings</span>
      <ul>
        {#each session.warnings as warning}
          <li>{warning}</li>
        {/each}
      </ul>
    </section>
  {/if}

  <section class="composition-card">
    <div class="section-heading">
      <div>
        <span>Required Raw Materials</span>
        <h2>Blend composition</h2>
      </div>
      <p>{session.product_unit_of_measure} · {formatNumber(session.product_unit_size_kg, 2)}kg per unit</p>
    </div>

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

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

  h1,
  h2,
  p,
  ul {
    margin: 0;
  }

  .print-document {
    display: grid;
    gap: 1.4rem;
    width: min(100%, var(--print-page-width));
    min-height: var(--print-page-height);
    margin: 0 auto;
    padding: var(--print-page-padding-y) var(--print-page-padding-x);
    border: 1px solid #dbe4de;
    border-radius: 0.8rem;
    background:
      radial-gradient(circle at top right, rgba(21, 128, 61, 0.08), transparent 22rem),
      linear-gradient(180deg, #fff 0%, #fbfcfb 100%);
    color: #21312a;
    box-shadow:
      0 28px 48px rgba(21, 33, 26, 0.08),
      0 0 0 1px rgba(219, 228, 222, 0.55);
  }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: 1.25rem;
    align-items: start;
    padding-bottom: 1.3rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, #dce7df);
  }

  .hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
    color: #62736b;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .hero-kicker strong {
    padding: 0.36rem 0.55rem;
    border: 1px solid #d5dfd9;
    border-radius: 999px;
    color: #214233;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }

  .hero h1 {
    max-width: 11ch;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 0.96;
    letter-spacing: -0.05em;
  }

  .hero-copy p,
  .section-heading p,
  .detail-card p {
    color: #6b7a73;
  }

  .hero-copy p {
    margin-top: 0.7rem;
    font-size: 1rem;
  }

  .hero-side,
  .summary-band,
  .detail-grid {
    display: grid;
    gap: 0.8rem;
  }

  .hero-side div,
  .summary-band article,
  .detail-card {
    display: grid;
    gap: 0.25rem;
  }

  .hero-side span,
  .summary-band span,
  .detail-card span,
  .callout span,
  th,
  .section-heading span {
    color: #6b7a73;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .hero-side strong,
  .detail-card strong {
    font-size: 1rem;
  }

  .summary-band {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .summary-band article {
    min-height: 6.2rem;
    padding: 1rem 1.05rem;
    border: 1px solid #dfe7e2;
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.92);
  }

  .summary-band strong {
    margin-top: auto;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    letter-spacing: -0.04em;
  }

  .detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .detail-card {
    min-height: 7rem;
    padding: 1rem 1.05rem;
    border-radius: 1.15rem;
    background: #f6f9f7;
  }

  .callout {
    display: grid;
    gap: 0.55rem;
    padding: 1rem 1.1rem;
    border-radius: 1.15rem;
    break-inside: avoid;
  }

  .callout.notes {
    background: #f6f9f7;
    border: 1px solid #dfe7e2;
  }

  .callout.warning {
    background: #fff7ea;
    border: 1px solid #f0cf97;
    color: #82561b;
  }

  .callout ul {
    padding-left: 1rem;
  }

  .composition-card {
    display: grid;
    gap: 0.9rem;
    break-inside: avoid;
  }

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

  .section-heading h2 {
    margin-top: 0.32rem;
    font-size: 1.5rem;
    letter-spacing: -0.04em;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #dfe7e2;
    border-radius: 1.2rem;
    overflow: hidden;
  }

  th,
  td {
    padding: 0.95rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e6ede9;
  }

  thead {
    display: table-header-group;
  }

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

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

  td strong {
    font-size: 0.98rem;
    font-weight: 700;
    color: #203128;
  }

  @media (max-width: 900px) {
    .hero,
    .summary-band,
    .detail-grid {
      grid-template-columns: 1fr;
    }

    .section-heading {
      flex-direction: column;
      align-items: start;
    }
  }

  @media print {
    :global(html),
    :global(body) {
      width: var(--print-page-width);
      min-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);
      min-height: var(--print-page-height);
      margin: 0;
      padding: var(--print-page-padding-y) var(--print-page-padding-x);
      border: none;
      border-radius: 0;
      background: #fff;
      color: #1e2622;
      box-shadow: none;
    }

    .summary-band article,
    .detail-card,
    table,
    .callout {
      border-color: #d5ddd8;
      background: #fff;
    }

    .callout.warning {
      background: #fff8ef;
    }

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