<script>
  import { API_URL, WS_URL } from '$lib/api.js';
  import { apiFetch } from '$lib/api.js';
  import { goto } from '$app/navigation';
  import { onMount } from 'svelte';
  import Card from '$lib/Card.svelte';

  let cards = $state([]);
  let loading = $state(false);
  let boosters = $state(null);
  let countdown = $state(null);
  let countdownDisplay = $state('');
  let countdownInterval = null;

  let phase = $state('idle');
  let flippedCards = $state([]);
  let fanVisible = $state(false);
  let packRef = $state(null);
  let overlayPackRef = $state(null);

  onMount(async () => {
    if (!localStorage.getItem('token')) { goto('/auth'); return; }
    await fetchBoosters();
    return () => clearInterval(countdownInterval);
  });

  async function fetchBoosters() {
    const res = await apiFetch(`${API_URL}/boosters`);
    if (res.status === 401) { goto('/auth'); return; }
    const [count, countdownTs] = await res.json();
    boosters = count;
    countdown = countdownTs ? new Date(countdownTs) : null;
    startCountdown();
  }

  function startCountdown() {
    clearInterval(countdownInterval);
    if (!countdown || boosters >= 5) return;
    countdownInterval = setInterval(() => {
      const nextTick = new Date(countdown.getTime() + 5 * 60 * 60 * 1000);
      const diff = nextTick - Date.now();
      if (diff <= 0) { clearInterval(countdownInterval); fetchBoosters(); return; }
      const h = Math.floor(diff / 3600000);
      const m = Math.floor((diff % 3600000) / 60000);
      const s = Math.floor((diff % 60000) / 1000);
      countdownDisplay = `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
    }, 1000);
  }

  function delay(ms) { return new Promise(r => setTimeout(r, ms)); }

  // Get the screen position of the idle pack so the overlay pack starts there
  function getPackRect() {
    if (!packRef) return { top: window.innerHeight / 2, left: window.innerWidth / 2 };
    const rect = packRef.getBoundingClientRect();
    return { top: rect.top, left: rect.left, width: rect.width, height: rect.height };
  }

  let overlayPackStyle = $state('');

  async function openPack() {
    if (loading || boosters === 0 || phase !== 'idle') return;
    loading = true;

    const rect = getPackRect();
    overlayPackStyle = `position:fixed; top:${rect.top}px; left:${rect.left}px; width:${rect.width}px; height:${rect.height}px;`;

    phase = 'darkening';
    await delay(600);

    phase = 'ripping';
    await delay(900);

    phase = 'dropping';

    // Fetch while pack is sliding away
    const fetchPromise = apiFetch(`${API_URL}/open_pack`, {
      method: 'POST'
    });

    await delay(700);

    const res = await fetchPromise;
    if (!res.ok) { phase = 'idle'; loading = false; return; }
    cards = await res.json();
    flippedCards = new Array(cards.length).fill(false);
    boosters -= 1;
    if (boosters < 5 && !countdown) { countdown = new Date(); startCountdown(); }

    phase = 'fanning';
    await delay(50);
    fanVisible = true;
    await delay(800);

    phase = 'flipping';
    const isMobile = window.innerWidth <= 640;
    const indices = isMobile
      ? [...Array(cards.length).keys()]           // 0,1,2,3,4 top to bottom
      : [...Array(cards.length).keys()].reverse(); // 4,3,2,1,0 right to left

    for (let i of indices) {
      await delay(350);
      flippedCards = flippedCards.map((v, idx) => idx === i ? true : v);
    }

    phase = 'done';
    loading = false;
  }

  function close() {
    phase = 'idle';
    cards = [];
    flippedCards = [];
    fanVisible = false;
  }

  const FOIL_RARITIES = new Set(['super_rare', 'epic', 'legendary']);

  // Compute fan positions for each card
  function fanStyle(i, total) {
    const isMobile = window.innerWidth <= 640;
    if (isMobile) {
      return `--tx: 0px; --ty: 0px;`;
    }
    // Cards fan out horizontally from center
    const spread = Math.min(320, (window.innerWidth - 100) / total);
    const offset = (i - (total - 1) / 2) * spread;
    return `--tx: ${offset}px; --ty: 0px;`;
  }
</script>

<main>
  <div class="top">
    <h1 class="pack-count">
      {#if boosters !== null}{boosters}/5 BOOSTER PACKS REMAINING{/if}
    </h1>
    {#if boosters !== null && boosters < 5 && countdownDisplay}
      <p class="countdown">{countdownDisplay} until next pack</p>
    {/if}
  </div>

  <!-- Idle pack -->
  {#if boosters !== null && boosters > 0 && phase === 'idle'}
    <div class="pack-wrap" bind:this={packRef}>
      <button class="pack-btn" onclick={openPack}>
        <div class="booster-pack">
          <div class="pack-shine"></div>
          <div class="pack-stripe top-stripe"></div>
          <div class="pack-stripe bottom-stripe"></div>
          <div class="pack-logo">
            <img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="W" />
          </div>
        </div>
      </button>
    </div>
  {/if}

  {#if phase !== 'idle'}
    <div class="overlay" class:visible={phase !== 'idle'}>

      {#if phase === 'darkening' || phase === 'ripping' || phase === 'dropping'}
        <div class="overlay-pack-wrap" style={overlayPackStyle} class:dropping={phase === 'dropping'}>
          <div class="pack-top-flap" class:rip={phase === 'ripping' || phase === 'dropping'}></div>
          <div class="booster-pack overlay-pack" class:no-top={phase === 'ripping' || phase === 'dropping'}>
            <div class="pack-shine"></div>
            <div class="pack-stripe bottom-stripe"></div>
            <div class="pack-logo">
              <img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="W" />
            </div>
          </div>
        </div>
      {/if}

      {#if phase === 'fanning' || phase === 'flipping' || phase === 'done'}
        <div class="fan-wrap">
          {#each cards as card, i}
            {@const flipped = flippedCards[i]}
            {@const foil = FOIL_RARITIES.has(card.card_rarity)}
            <div
              class="fan-card"
              class:fan-visible={fanVisible}
              class:foil-reveal={flipped && foil}
              style="--i: {i};"
            >
              <div class="card-flipper" class:flipped>
                <div class="card-face back"><div class="card-back-face"></div></div>
                <div class="card-face front"><Card {card} /></div>
              </div>
            </div>
          {/each}
        </div>

        {#if phase === 'done'}
          <button class="close-btn" onclick={close}>Close</button>
        {/if}
      {/if}

    </div>
  {/if}
</main>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

  main {
    height: 100vh;
    overflow: hidden;
    background: #0d0a04;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .top {
    text-align: center;
    margin-bottom: 3rem;
  }

  .pack-count {
    font-family: 'Cinzel', serif;
    font-size: clamp(16px, 3vw, 26px);
    font-weight: 900;
    color: #f0d080;
    letter-spacing: 0.1em;
    margin: 0 0 0.4rem;
  }

  .countdown {
    font-family: 'Crimson Text', serif;
    font-size: 15px;
    font-style: italic;
    color: rgba(240, 180, 80, 0.6);
    margin: 0;
  }

  .pack-wrap {
    display: flex;
    justify-content: center;
  }

  .pack-btn {
    all: unset;
    cursor: pointer;
    display: block;
  }

  /* ── Booster pack ── */
  .booster-pack {
    position: relative;
    width: 300px;
    height: 460px;
    background: #dfdbcf;
    background-image: linear-gradient(
      to right,
      transparent,
      rgba(255,255,255,0.35) 5%,
      transparent 8%,
      transparent 92%,
      rgba(0,0,0,0.12) 95%,
      transparent
    );
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1.5px rgba(0,0,0,0.3);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .pack-btn:hover .booster-pack {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1.5px rgba(0,0,0,0.3);
  }

  .pack-shine {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.08) 1px,
      transparent 1px,
      transparent 8px
    );
    pointer-events: none;
  }

  .pack-stripe {
    position: absolute;
    left: 0;
    width: 100%;
    height: 9%;
    background-image: repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.25),
      rgba(0,0,0,0.15) 2%,
      rgba(0,0,0,0.08) 3%,
      transparent 3%,
      transparent 4%
    );
    box-shadow: 0 0 12px 8px rgba(255,255,255,0.15);
  }

  .top-stripe { top: 0; }
  .bottom-stripe { bottom: 0; }

  .pack-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pack-logo img {
    width: 100px;
    opacity: 0.8;
    filter: grayscale(1);
  }

  /* no-top clips the pack body below the tear line */
  .booster-pack.no-top {
    clip-path: inset(41px 0 0 0 round 0 0 10px 10px);
  }

  /* ── Overlay ── */
  .overlay {
    position: fixed;
    overflow: hidden;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,0);
    transition: background 0.6s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .overlay.visible {
    background: rgba(0,0,0,0.88);
  }

  /* ── Overlay pack ── */
  .overlay-pack-wrap {
    z-index: 210;
  }

  .overlay-pack {
    box-shadow:
      0 0 60px 20px rgba(240,200,80,0.2),
      0 8px 32px rgba(0,0,0,0.6);
    transition: none;
  }

  /* Top flap */
  .pack-top-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 41px;
    background: #dfdbcf;
    /* background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.35) 5%, transparent 8%); */
    background-image: repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.25),
      rgba(0,0,0,0.15) 2%,
      rgba(0,0,0,0.08) 3%,
      transparent 3%,
      transparent 4%
    );
    border-radius: 10px 10px 0 0;
    transform-origin: top left;
    z-index: 220;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
    box-shadow: 0 0 0 1.5px rgba(0,0,0,0.3);
  }

  .pack-top-flap.rip {
    transform: rotate(-40deg) translateX(-20px) translateY(-40px);
    opacity: 0;
  }

  /* Pack slides straight down */
  .overlay-pack-wrap.dropping {
    animation: pack-drop 0.7s cubic-bezier(0.4, 0, 1, 1) forwards;
  }

  @keyframes pack-drop {
    0%   { transform: translateY(0);      opacity: 1; }
    100% { transform: translateY(110vh);  opacity: 0; }
  }

  /* ── Card back ── */
  .card-back-face {
    width: 300px;
    height: 412px;
    background: linear-gradient(135deg, #d3d0c4 0%, #dfdbcf 100%);
    border-radius: 14px;
    border: 10px solid rgba(255,255,255,1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-back-face::after {
    content: '';
    width: 90px;
    height: 90px;
    background: url('https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg') center/contain no-repeat;
    opacity: 0.8;
    filter: grayscale(1);
  }

  /* Cards fly in from the bottom */
  .fan-card {
    opacity: 0;
    transform: translateY(80vh);
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1);
    transition-delay: calc(var(--i) * 0.1s);
  }

  .fan-card.fan-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .fan-wrap {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    z-index: 220;
    flex-wrap: wrap;
  }
  /* ── Card flip ── */
  .card-flipper {
    width: 300px;
    height: 412px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .card-flipper.flipped {
    transform: rotateY(180deg);
  }

  .card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .card-face.back {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-face.front {
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fan-card.foil-reveal {
    animation: foil-flash 1.4s ease forwards;
  }

  @keyframes foil-flash {
    0%   { filter: brightness(1); }
    40%  { filter: brightness(2.8) saturate(2.5); }
    100% { filter: brightness(1); }
  }

  /* ── Close ── */
  .close-btn {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 32px;
    background: rgba(60,30,5,0.85);
    color: #f0d080;
    border: 1.5px solid #c8861a;
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.08em;
    transition: background 0.15s;
    z-index: 230;
  }

  .close-btn:hover {
    background: rgba(100,60,10,0.9);
  }

  /* ── Mobile ── */
  @media (max-width: 640px) {
    .fan-wrap {
      flex-direction: column;
      flex-wrap: nowrap;
      overflow-y: auto;
      overflow-x: hidden;
      max-height: calc(100vh - 120px);
      overscroll-behavior: contain;
      padding: 1rem;
      justify-content: flex-start;
    }

    .card-flipper {
      width: 280px;
      height: 430px;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .card-flipper.flipped {
      transform: rotateX(180deg);
    }

    .card-face.front {
      transform: rotateX(180deg);
    }
  }
</style>