<script lang="ts">
  import { CheckCircle2 } from 'lucide-svelte';
  import { fade } from 'svelte/transition';

  import type { ConfettiPiece } from '$lib/components/throughput/utils';

  let { confetti }: { confetti: ConfettiPiece[] } = $props();
</script>

<div class="success-overlay" role="presentation" transition:fade={{ duration: 160 }}>
  <div class="success-card" role="status" aria-live="polite">
    <div class="confetti" aria-hidden="true">
      {#each confetti as piece, i (i)}
        <span
          class="confetti-piece"
          style="left:{piece.left}%; width:{piece.size}px; height:{piece.size}px; background:{piece.color}; animation-delay:{piece.delay}s; animation-duration:{piece.duration}s; --rot:{piece.rotate}deg; --drift:{piece.drift}px;"
        ></span>
      {/each}
    </div>
    <span class="success-icon"><CheckCircle2 size={44} strokeWidth={2.4} /></span>
    <p class="success-title">Added</p>
    <p class="success-text">Your packing run has been added to the log.</p>
  </div>
</div>

<style>
  .success-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    pointer-events: none;
    overflow: hidden;
  }

  .success-card {
    position: relative;
    overflow: hidden;
    width: min(30rem, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 2.6rem 2.8rem 2.8rem;
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    background: var(--color-bg-surface);
    box-shadow: 0 28px 70px -18px rgba(0, 0, 0, 0.45);
    text-align: center;
    animation: success-pop 240ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
  }

  .success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background: var(--color-brand-tint);
    color: var(--color-brand);
  }

  .success-title,
  .success-text {
    margin: 0;
  }

  .success-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
  }

  .success-text {
    font-size: 1rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
  }

  .confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .confetti-piece {
    position: absolute;
    top: -12%;
    display: block;
    border-radius: 2px;
    opacity: 0;
    animation-name: confetti-fall;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
  }

  @keyframes success-pop {
    from { opacity: 0; transform: scale(0.82); }
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes confetti-fall {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translate(var(--drift), 340px) rotate(var(--rot)); opacity: 0.9; }
  }

  @media (prefers-reduced-motion: reduce) {
    .success-card {
      animation: none;
    }

    .confetti {
      display: none;
    }
  }
</style>
