Glass ProgressGlassmorphism progress bar panel with glowing gradient fills, spring-animated counters, staggered reveal, and replay button.

'use client'

// npm install @phosphor-icons/react framer-motion

import { useState, useEffect, useCallback } from 'react'
import { motion, useSpring, useMotionValueEvent, useReducedMotion } from 'framer-motion'
import { ArrowClockwise } from '@phosphor-icons/react'

// ─── Constants ────────────────────────────────────────────────────────────────

const GLASS_BLUR = {
  backdropFilter: 'blur(24px) saturate(1.8)',
  WebkitBackdropFilter: 'blur(24px) saturate(1.8)',
} as const

const GLASS_PANEL = {
  background: 'rgba(255, 255, 255, 0.06)',
  border: '1px solid rgba(255, 255, 255, 0.1)',
  boxShadow:
    '0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08)',
} as const

const BACKGROUND_IMAGE =
  'https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20Orange%20Flower%204%20(1).png?updatedAt=1775226802133'

// ─── Types ────────────────────────────────────────────────────────────────────

interface GlassProgressBarProps {
  value: number
  color: string
  gradient: string
  label?: string
  animated?: boolean
}

interface BarConfig {
  label: string
  value: number
  color: string
  gradient: string
  delay: number
}

// ─── Bar data ─────────────────────────────────────────────────────────────────

const BARS: BarConfig[] = [
  { label: 'Storage', value: 72, color: '#3A86FF', gradient: '#3A86FF, #2962FF', delay: 200 },
  { label: 'Upload',  value: 45, color: '#FF5C8A', gradient: '#FF5C8A, #FF1744', delay: 400 },
  { label: 'Battery', value: 88, color: '#06D6A0', gradient: '#06D6A0, #00BFA5', delay: 600 },
  { label: 'Memory',  value: 30, color: '#FFBE0B', gradient: '#FFBE0B, #FF9800', delay: 800 },
]

// ─── Internal progress bar ──────────────────────────────────────────────────

function GlassProgressBar({
  value,
  color,
  gradient,
  label,
  animated = false,
}: GlassProgressBarProps) {
  const prefersReduced = useReducedMotion()

  // Animated percentage counter via useSpring
  const springValue = useSpring(0, { stiffness: 80, damping: 20 })
  const [displayPercent, setDisplayPercent] = useState(0)

  useEffect(() => {
    springValue.set(value)
  }, [value, springValue])

  useMotionValueEvent(springValue, 'change', (latest) => {
    setDisplayPercent(Math.round(latest))
  })

  // Glow intensity scales with progress
  const glowAlpha = Math.round(40 + value * 0.4)
    .toString(16)
    .padStart(2, '0')
  const glowSize = 4 + value * 0.08

  // Transitions
  const fillTransition = prefersReduced
    ? { duration: 0.3 }
    : { type: 'spring' as const, stiffness: 200, damping: 24 }

  // Pulse animation for the fill (only when animated + no reduced motion)
  const pulseAnimate =
    animated && !prefersReduced
      ? {
          width: `${value}%`,
          opacity: [0.85, 1, 0.85],
        }
      : { width: `${value}%` }

  const pulseTransition =
    animated && !prefersReduced
      ? {
          width: fillTransition,
          opacity: { duration: 2, repeat: Infinity, ease: 'easeInOut' as const },
        }
      : fillTransition

  return (
    <div className="w-full">
      {/* Label row */}
      <div className="mb-2 flex items-center justify-between px-1">
        {label && (
          <span className="text-[10px] font-semibold uppercase tracking-widest text-white/40 font-sans">
            {label}
          </span>
        )}
        <span
          className="text-[10px] font-semibold tabular-nums font-sans"
          style={{ color: `${color}88` }}
        >
          {displayPercent}%
        </span>
      </div>

      {/* Track */}
      <div
        className="relative h-2 w-full overflow-hidden rounded-full"
        style={{ ...GLASS_PANEL }}
      >
        {/* Blur layer — non-animating */}
        <div
          className="pointer-events-none absolute inset-0 rounded-full"
          style={GLASS_BLUR}
        />

        {/* Fill bar */}
        <motion.div
          className="absolute bottom-0 left-0 top-0 rounded-full"
          style={{
            background: `linear-gradient(90deg, ${gradient})`,
            filter: `drop-shadow(0 0 ${glowSize}px ${color}${glowAlpha})`,
          }}
          initial={{ width: '0%' }}
          animate={pulseAnimate}
          transition={pulseTransition}
        />
      </div>
    </div>
  )
}

// ─── Exported showcase ──────────────────────────────────────────────────────

export default function GlassProgress() {
  const [values, setValues] = useState<number[]>([0, 0, 0, 0])
  const [resetKey, setResetKey] = useState(0)

  const replay = useCallback(() => {
    setValues([0, 0, 0, 0])
    setResetKey((k) => k + 1)
  }, [])

  useEffect(() => {
    const timeouts: ReturnType<typeof setTimeout>[] = []

    BARS.forEach((bar, i) => {
      const id = setTimeout(() => {
        setValues((prev) => {
          const next = [...prev]
          next[i] = bar.value
          return next
        })
      }, bar.delay)
      timeouts.push(id)
    })

    return () => {
      timeouts.forEach(clearTimeout)
    }
  }, [resetKey])

  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#1A1A19]">
      {/* Background image */}
      <img
        src={BACKGROUND_IMAGE}
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />

      <div className="relative flex w-full max-w-[340px] flex-col items-center gap-4 px-4">
        {/* Glass panel */}
        <motion.div
          initial={{ scale: 0.92, y: 16 }}
          animate={{ scale: 1, y: 0 }}
          transition={{ type: 'spring', stiffness: 300, damping: 26 }}
          className="relative isolate w-full overflow-hidden rounded-3xl"
          style={{ ...GLASS_PANEL }}
        >
          {/* Blur layer — non-animating */}
          <div
            className="pointer-events-none absolute inset-0 z-[-1] rounded-3xl"
            style={GLASS_BLUR}
          />

          {/* Top edge highlight */}
          <div
            className="absolute left-8 right-8 top-0 h-[1px]"
            style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)' }}
          />

          {/* Progress bars stack */}
          <div className="flex flex-col gap-5 px-6 py-6">
            {BARS.map((bar, i) => (
              <GlassProgressBar
                key={bar.label}
                label={bar.label}
                value={values[i]}
                color={bar.color}
                gradient={bar.gradient}
                animated
              />
            ))}
          </div>
        </motion.div>

        {/* Refresh button */}
        <motion.button
          onClick={replay}
          whileHover={{ scale: 1.12, background: 'rgba(255,255,255,0.12)' }}
          whileTap={{ scale: 0.9, rotate: -90 }}
          transition={{ type: 'spring', stiffness: 400, damping: 20 }}
          className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full"
          style={{
            background: 'rgba(255, 255, 255, 0.06)',
            border: '1px solid rgba(255, 255, 255, 0.1)',
          }}
          aria-label="Replay animation"
        >
          <ArrowClockwise size={18} weight="regular" className="text-white/50" />
        </motion.button>
      </div>
    </div>
  )
}