<template>
  <div class="floating-light-band-window" :class="[variant, tone, motionClass]">
    <span class="floating-light-band-window__mark" aria-hidden="true">
      <i :class="icon"></i>
    </span>

    <div v-if="hasCopy" class="floating-light-band-window__copy">
      <strong v-if="displayTitle">{{ displayTitle }}</strong>
      <span v-if="displayMessage">{{ displayMessage }}</span>
    </div>

    <span class="floating-light-band-window__progress" aria-hidden="true"></span>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  icon: { type: String, default: 'mdi mdi-loading' },
  message: { type: String, default: '' },
  motion: {
    type: String,
    default: 'loop',
    validator: (value) => ['loop', 'entry'].includes(value)
  },
  title: { type: String, default: '' },
  tone: {
    type: String,
    default: 'theme',
    validator: (value) => ['theme', 'sky', 'success'].includes(value)
  },
  variant: {
    type: String,
    default: 'panel',
    validator: (value) => ['entry', 'panel', 'detail', 'overlay', 'drawer', 'banner'].includes(value)
  }
})

const displayTitle = computed(() => (props.variant === 'banner' && props.message ? '' : props.title))
const displayMessage = computed(() => props.message || (props.variant === 'banner' ? props.title : ''))
const hasCopy = computed(() => Boolean(displayTitle.value || displayMessage.value))
const motionClass = computed(() => `motion-${props.motion}`)
</script>

<style scoped>
.floating-light-band-window {
  --accent: var(--theme-primary);
  --accent-deep: var(--theme-primary-active);
  --accent-rgb: var(--theme-primary-rgb, 58, 124, 165);

  width: min(380px, 100%);
  max-width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px 14px;
  align-items: center;
  padding: 22px 24px 20px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 20px 46px rgba(15, 23, 42, 0.14);
  color: var(--muted);
  animation: floatingLightBandWindowIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.floating-light-band-window.theme,
.floating-light-band-window.sky {
  --accent: var(--theme-primary);
  --accent-deep: var(--theme-primary-active);
  --accent-rgb: var(--theme-primary-rgb, 58, 124, 165);
}

.floating-light-band-window.success {
  --accent: var(--success);
  --accent-deep: var(--success-hover);
  --accent-rgb: var(--success-rgb, 47, 133, 90);
}

.floating-light-band-window.entry {
  width: min(360px, calc(100% - 48px));
}

.floating-light-band-window.detail,
.floating-light-band-window.drawer {
  grid-template-columns: 38px minmax(0, 1fr);
  padding: 18px 20px 16px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.floating-light-band-window.overlay {
  width: min(360px, 100%);
}

.floating-light-band-window.banner {
  width: 100%;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px 10px;
  padding: 8px 10px 7px;
  border-color: rgba(var(--accent-rgb), 0.18);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: none;
  animation: none;
}

.floating-light-band-window__mark {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 10%, white);
  color: var(--accent-deep);
  font-size: 22px;
}

.floating-light-band-window.detail .floating-light-band-window__mark,
.floating-light-band-window.drawer .floating-light-band-window__mark {
  width: 38px;
  height: 38px;
  font-size: 20px;
}

.floating-light-band-window.banner .floating-light-band-window__mark {
  width: 28px;
  height: 28px;
  font-size: 16px;
}

.floating-light-band-window__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
  text-align: left;
}

.floating-light-band-window__copy strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.floating-light-band-window__copy span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.floating-light-band-window.detail .floating-light-band-window__copy strong,
.floating-light-band-window.drawer .floating-light-band-window__copy strong {
  font-size: 14px;
  font-weight: 800;
}

.floating-light-band-window.banner .floating-light-band-window__copy {
  gap: 0;
}

.floating-light-band-window.banner .floating-light-band-window__copy strong,
.floating-light-band-window.banner .floating-light-band-window__copy span {
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.4;
}

.floating-light-band-window__progress {
  position: relative;
  grid-column: 1 / -1;
  height: 3px;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      rgba(var(--accent-rgb), 0.08),
      rgba(var(--accent-rgb), 0.16),
      rgba(var(--accent-rgb), 0.08)
    );
}

.floating-light-band-window.banner .floating-light-band-window__progress {
  height: 2px;
}

.floating-light-band-window__progress::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 46%;
  background:
    linear-gradient(
      90deg,
      rgba(var(--accent-rgb), 0),
      var(--accent),
      var(--accent-deep),
      color-mix(in srgb, var(--accent) 40%, white),
      rgba(var(--accent-rgb), 0)
    );
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.36);
  transform: translateX(-105%);
  will-change: transform;
}

.floating-light-band-window.motion-loop .floating-light-band-window__progress::before {
  animation: floatingLightBandSweep 980ms cubic-bezier(0.2, 0, 0, 1) infinite;
}

.floating-light-band-window.motion-entry .floating-light-band-window__progress::before {
  width: 100%;
  background: var(--accent);
  transform-origin: left center;
  animation: floatingLightBandEntry 840ms cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes floatingLightBandWindowIn {
  from {
    opacity: 0;
    transform: scale3d(0.92, 0.92, 1);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes floatingLightBandSweep {
  from {
    transform: translateX(-105%);
  }

  to {
    transform: translateX(215%);
  }
}

@keyframes floatingLightBandEntry {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-light-band-window {
    animation: none !important;
  }

  .floating-light-band-window.motion-entry .floating-light-band-window__progress::before {
    width: 100%;
    background: var(--accent);
    animation: none !important;
    transform: none;
  }

  .floating-light-band-window.motion-loop .floating-light-band-window__progress::before {
    animation: floatingLightBandSweep 1800ms linear infinite !important;
  }
}
</style>
