/**
 * PlayerBarGlass — Glassmorphism container (KŌDŌ v3)
 * backdrop-blur + semantic tokens + gradient overlay + noise texture
 * Spotify/Discord-grade polish with accent gradient, top-edge highlight, and noise depth
 */

import { cn } from '@/lib/utils';

interface PlayerBarGlassProps {
  children: React.ReactNode;
  isHovered: boolean;
  className?: string;
}

export function PlayerBarGlass({
  children,
  isHovered,
  className,
}: PlayerBarGlassProps) {
  return (
    <div
      data-testid="player-bar"
      className={cn(
        'relative w-full rounded-xl overflow-hidden noise',
        'backdrop-blur-[20px]',
        'bg-[var(--sumi-glass-bg)]',
        'border border-[var(--sumi-glass-border)]',
        'transition-[box-shadow,border-color,transform] duration-[var(--sumi-duration-normal)] ease-[var(--sumi-ease-out)]',
        'shadow-[var(--sumi-shadow-xl)] player-bar-entrance',
        isHovered && 'shadow-[var(--sumi-shadow-xl)] border-[var(--sumi-border-accent)]',
        !isHovered && 'shadow-[var(--sumi-shadow-lg)]',
        className,
      )}
    >
      {children}

      {/* Top-edge highlight line — 1px gradient shimmer */}
      <div
        className="absolute top-0 left-0 right-0 h-px pointer-events-none z-10"
        style={{
          background:
            'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.05) 70%, transparent 100%)',
        }}
      />

      {/* Accent gradient overlay — subtle radial glow from bottom-center */}
      <div
        className={cn(
          'absolute inset-0 pointer-events-none z-0',
          'transition-opacity duration-[var(--sumi-duration-slow)] ease-[var(--sumi-ease-out)]',
          isHovered ? 'opacity-100' : 'opacity-40',
        )}
        style={{
          background:
            'radial-gradient(ellipse 80% 60% at 50% 100%, var(--sumi-accent-subtle) 0%, transparent 70%)',
        }}
      />

      {/* Subtle accent tint on hover — SUMI */}
      <div
        className={cn(
          'absolute inset-0 pointer-events-none z-0',
          'bg-[var(--sumi-accent-subtle)]',
          'opacity-0 transition-opacity duration-[var(--sumi-duration-slow)] ease-[var(--sumi-ease-out)]',
          isHovered && 'opacity-100',
        )}
      />
    </div>
  );
}