'use client';

import * as React from 'react';
import { cn } from '@/lib/utils/cn';

export interface InputLevelMeterProps {
  level: number; // 0.0 to 1.0
  orientation?: 'horizontal' | 'vertical';
  className?: string;
}

export function InputLevelMeter({
  level,
  orientation = 'horizontal',
  className,
}: InputLevelMeterProps) {
  // Clamp level between 0 and 1
  const clampedLevel = Math.max(0, Math.min(1, level));

  // Calculate color based on level
  const getColor = (level: number): string => {
    if (level > 0.9) return 'bg-red-500';
    if (level > 0.7) return 'bg-yellow-500';
    return 'bg-green-500';
  };

  const isHorizontal = orientation === 'horizontal';

  return (
    <div
      className={cn(
        'relative bg-muted rounded-sm overflow-hidden',
        isHorizontal ? 'h-4 w-full' : 'w-4 h-full',
        className
      )}
    >
      {/* Level bar */}
      <div
        className={cn(
          'absolute transition-all duration-75 ease-out',
          getColor(clampedLevel),
          isHorizontal ? 'h-full left-0 top-0' : 'w-full bottom-0 left-0'
        )}
        style={{
          [isHorizontal ? 'width' : 'height']: `${clampedLevel * 100}%`,
        }}
      />

      {/* Clip indicator (at 90%) */}
      {clampedLevel > 0.9 && (
        <div
          className={cn(
            'absolute bg-red-600 animate-pulse',
            isHorizontal
              ? 'right-0 top-0 w-1 h-full'
              : 'bottom-0 left-0 h-1 w-full'
          )}
        />
      )}

      {/* Tick marks */}
      <div
        className={cn(
          'absolute inset-0 flex',
          isHorizontal ? 'flex-row' : 'flex-col-reverse'
        )}
      >
        {[0.25, 0.5, 0.75].map((tick) => (
          <div
            key={tick}
            className={cn(
              'absolute bg-background/30',
              isHorizontal
                ? 'h-full w-px top-0'
                : 'w-full h-px left-0'
            )}
            style={{
              [isHorizontal ? 'left' : 'bottom']: `${tick * 100}%`,
            }}
          />
        ))}
      </div>
    </div>
  );
}