<script lang="ts">
  import MixCalculatorPrintSheet from '$lib/components/MixCalculatorPrintSheet.svelte';
  import { featureFlags } from '$lib/features';

  let { data } = $props();
</script>

{#if data.session}
  <MixCalculatorPrintSheet session={data.session} />
{:else}
  <section class="locked-card">
    <p class="eyebrow">Mix Calculator</p>
    <h2>Printable session unavailable.</h2>
    <p>The saved session could not be loaded for printing.</p>
    {#if featureFlags.mixCalculatorSessionHistory}
      <a class="secondary-button" href="/mix-calculator">Back to session history</a>
    {:else}
      <a class="secondary-button" href="/mix-calculator">New mix session</a>
    {/if}
  </section>
{/if}

<style>
  h2,
  p {
    margin: 0;
  }

  .eyebrow {
    color: #7d8d84;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .locked-card {
    max-width: 42rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: var(--panel);
    box-shadow: var(--shadow);
  }

  .locked-card h2 {
    margin-top: 0.35rem;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
  }

  .locked-card p:last-of-type {
    margin-top: 0.45rem;
    color: var(--muted);
  }

  .secondary-button {
    display: inline-flex;
    margin-top: 1rem;
    padding: 0.78rem 0.92rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.88rem;
    background: #fff;
    color: #304038;
    font-weight: 600;
  }
</style>
